{"id":13400507,"url":"https://github.com/fibo/trunx","last_synced_at":"2025-04-04T20:03:06.108Z","repository":{"id":32583877,"uuid":"137457637","full_name":"fibo/trunx","owner":"fibo","description":"Super Saiyan React components, son of awesome Bulma","archived":false,"fork":false,"pushed_at":"2025-02-03T10:36:50.000Z","size":7521,"stargazers_count":66,"open_issues_count":0,"forks_count":14,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-28T19:04:46.520Z","etag":null,"topics":["bulma","component-library","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fibo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["fibo"],"patreon":"fibo","custom":null}},"created_at":"2018-06-15T07:49:06.000Z","updated_at":"2025-03-17T06:23:22.000Z","dependencies_parsed_at":"2023-01-14T21:39:34.981Z","dependency_job_id":"2931aff2-f4cb-4341-b56b-aeeb32e661ee","html_url":"https://github.com/fibo/trunx","commit_stats":{"total_commits":698,"total_committers":11,"mean_commits":63.45454545454545,"dds":"0.028653295128939882","last_synced_commit":"2428ed152a856b84fae697663ed4ac0a337b91e5"},"previous_names":[],"tags_count":83,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Ftrunx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Ftrunx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Ftrunx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fibo%2Ftrunx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fibo","download_url":"https://codeload.github.com/fibo/trunx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242657,"owners_count":20907130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma","component-library","react","typescript"],"created_at":"2024-07-30T19:00:52.760Z","updated_at":"2025-04-04T20:03:06.070Z","avatar_url":"https://github.com/fibo.png","language":"TypeScript","readme":"\u003cimg src=\"https://fibo.github.io/trunx/media/trunx-logotype.png\" width=\"350\"/\u003e\n\n\u003e Super Saiyan React components, son of awesome [Bulma]\n\n**ToC**\n\n- [Installation](#installation)\n- API:\n  - [React components](#react-components)\n    - [HTML tag components](#html-tag-components)\n    - [Bulma related components](#bulma-related-components)\n    - [Components list](#components-list)\n    - [Inline documentation](#inline-documentation)\n    - [className prop](#classname-prop)\n  - [classnames](#classnames)\n  - [Bulma type](#bulma-type)\n- [How to](#how-to)\n  - [Use Trunx with Vite](#use-trunx-with-vite)\n  - [Create a custom component](#create-a-custom-component)\n  - [Use Trunx with Preact](#use-trunx-with-preact)\n- [Motivation](#motivation)\n- [License](#license)\n\n## Installation\n\nWith [npm](https://www.npmjs.com/) do\n\n```sh\nnpm install trunx\n```\n\nOf course you also need Bulma (v1) but it is up to you if you want to install it via `bulma` npm package. See [how to install Bulma](https://bulma.io/documentation/start/installation/).\n\nYou may also have React installed, minimum version supported is 17 (the Trunx transpiled code uses `react/jsx-runtime`). However it is not listed as a peer dependency, you may also use Trunx without React (see for example [how to use Trunx with Preact](#use-trunx-with-preact)).\n\nFinally I recommend using TypeScript to get the best _developer experience_ with Trunx.\n\n## API\n\n### React components\n\nAlmost all Trunx components have a `bulma` prop that accepts:\n\n- a string\n- an array of bulma classes: `[\"button\", \"is-primary\"]`\n- an object which keys are bulma classes, when value is truthy then the class is added: `{ \"is-primary\": true }`\n- an array of any of the previous: `[\"button\", { \"is-primary\": true }]`\n\nYou know, Trunx is a Super Sayan because it is written in TypeScript. The `bulma` prop can be autocompleted and typos can be avoided thanks to type checking.\n\n\u003cimg src=\"https://fibo.github.io/trunx/media/trunks-sword.png\" height=\"400\"/\u003e\n\n#### HTML tag components\n\nSome Trunx components render their homomnym HTML tag.\n\n```tsx\nimport { Div, Span } from \"trunx\"\n\nexport function MyComponent({ isSuccess }: { isSuccess: boolean }) {\n  return (\n    \u003cDiv bulma=\"box\"\u003e\n      \u003cSpan\n        bulma={[\"has-text-weight-semibold\", { \"has-text-primary\": isSuccess }]}\n      \u003e\n        Lorem ipsum...\n      \u003c/Span\u003e\n    \u003c/Div\u003e\n  )\n}\n```\n\n#### Bulma related components\n\nTrunx provides React components that implement a Bulma element or a Bulma component. This means that they usually add a related Bulma class. For example `Button` component renders a button HTML tag with the Bulma `button` class. They may have props related to some Bulma class (.e.g. `color`, `size`). Most of the Bulma related props start with `is`, `has` and the prop name is just the camel-case version of its related Bulma class. For example `isRounded` prop corresponds to `is-rounded` Bulma class.\n\n```tsx\n\u003cButton color=\"primary\" size=\"large\" isRounded\u003e\n  Download\n\u003c/Button\u003e\n```\n\nYou can use the `bulma` prop in case you need to add more Bulma classes that has not a related prop.\n\n```tsx\n\u003cColumns isGapless\u003e\n  \u003cColumn bulma=\"is-half\"\u003e\u003c/Column\u003e\n\u003c/Columns\u003e\n```\n\n#### Inline documentation\n\nComponents are documented inline with TSDocs. You can configure your editor to display documentation and examples.\n\n\u003cimg src=\"https://fibo.github.io/trunx/media/inline-docs.png\"/\u003e\n\nSome code snippets use a FontAwesome class, for example `\u003ci className=\"fas fa-home\"\u003e\u003c/i\u003e`. The icon set is up to you, Trunx do not provide icons.\n\n#### `className` prop\n\nAlmost all trunx components support a `className` prop, in case you need to append your custom CSS classes.\n\n#### Components list\n\n\u003cimg src=\"https://fibo.github.io/trunx/media/trunks.png\" height=\"290\"/\u003e\n\nHTML tags: `A`, `Div`, `P`, `Span`, `Ul`.\n\nBulma related:\n\n- `Breadcrumb`, `BreadcrumbItem`\n- `Button`, `Buttons`\n- `Card`\n  - `CardContent`\n  - `CardFooter`\n  - `CardHeader`\n  - `CardHeaderIcon`\n  - `CardHeaderTitle`\n  - `CardImage`\n- `Cell`\n- `Checkbox`\n- `Column`\n- `Columns`\n- `Container`\n- `Content`\n- `Control`\n- `Delete`\n- `Dropdown`\n  - `DropdownDivider`\n  - `DropdownItem`\n  - `DropdownMenu`\n  - `DropdownTrigger`\n- `Field`\n- `FieldHorizontal`\n  - `FieldBody`\n  - `FieldLabel`\n- `FileUpload`\n  - `FileIcon`\n  - `FileLabel`\n- `FixedGrid`\n- `Footer`\n- `Grid`\n- `Help`\n- `Hero`\n  - `HeroBody`\n  - `HeroFoot`\n  - `HeroHead`\n- `Icon`, `IconText`\n- `Image`\n- `Input`\n- `Label`\n- `Media`\n  - `MediaContent`\n  - `MediaLeft`\n  - `MediaRight`\n- `Menu`\n  - `MenuLabel`\n  - `MenuList`\n- `Message`\n- `Modal`\n  - `ModalBackground`\n  - `ModalCard`\n  - `ModalClose`\n  - `ModalContent`\n- `Navbar`\n  - `NavbarBrand`\n  - `NavbarBurger`\n  - `NavbarDivider`\n  - `NavbarDropdown`\n  - `NavbarDropdownMenu`\n  - `NavbarEnd`\n  - `NavbarItem`\n  - `NavbarLink`\n  - `NavbarMenu`\n  - `NavbarStart`\n- `Notification`\n- `Pagination`\n  - `PaginationEllipsis`\n  - `PaginationLink`\n  - `PaginationList`\n  - `PaginationNext`\n  - `PaginationPrevious`\n- `Progress`\n- `Radio`\n- `Section`\n- `SkeletonLines`\n- `Select`\n- `Table`\n- `Tabs`, `Tab`\n- `Tags`, `Tag`\n- `Textarea`\n- `Title`, `Subtitle`\n\n### `classnames`\n\nTrunx package provides a utility for conditionally joining CSS classes together.\n\nSyntax is similar to [classnames npm package](https://www.npmjs.com/package/classnames).\n\n```js\nimport { classnames } from \"trunx\"\n\nclassnames(\"foo\", \"bar\") // 'foo bar'\nclassnames(\"foo\", [\"bar\"]) // 'foo bar'\nclassnames({ foo: true }, { bar: false }) // 'foo'\n```\n\nIt accepts a generic \"class names\" type.\n\n```ts\ntype T = \"foo\" | \"bar\" // my CSS classes\nclassnames\u003cT\u003e(\"foo\", \"quz\") // ERROR: not assignable to type ClassnamesArg\u003cT\u003e[]\n```\n\nNotice that you can use Trunx without React! It can be used with any framework as well as with _Web Components_.\nThe _classnames.js_ is only 299 bytes and can be imported directly with\n\n```js\nimport { classnames } from \"trunx/classnames\"\n```\n\nThe snippet above will avoid importing the React stuff.\n\n### `Bulma` type\n\nTrunx exports also a `Bulma` type which is a literal type containing (almost) all the Bulma classes.\n\nFor example, you can use it to make sure a `className` is a bulma class:\n\n```tsx\nimport { Bulma } from \"trunx\"\n\nexport function SuccessText({ text }: { text: string }) {\n  return \u003cspan className={\"has-text-success\" satisfies Bulma}\u003e{text}\u003c/span\u003e\n}\n```\n\n## How to\n\n### Use Trunx with Vite\n\nAssuming you have a [Vite](https://vitejs.dev/) project with React and TypeScript, of course first of all install `trunx` and `bulma`.\n\nThen create a `src/main.scss`, you can import all Bulma to get started.\n\n```scss\n@use \"bulma/sass\";\n```\n\nImport it in your entry file, e.g. `src/main.tsx`, with something like `import \"./main.scss\"` and you are done.\n\nTry it out! Import `trunx` in your `src/App.tsx`:\n\n```tsx\nimport { Message } from \"trunx\"\n```\n\nAdd a `Message` like this in your JSX:\n\n```tsx\n\u003cMessage color=\"primary\"\u003eHello Trunx\u003c/Message\u003e\n```\n\n### Create a custom component\n\nSuppose you want to create your custom button that is always rounded and has only `success` and `warning` colors. You may also want to set your custom colors.\nTo do so, your `src/main.scss` could be something like this:\n\n```scss\n@use \"bulma/sass\" with (\n  $success: #28a03c,\n  $warning: #f45a50\n);\n```\n\nThen your button component can import the `ButtonProps` from `trunx` and customize them,\nsomething like the following.\n\n```tsx\nimport { PropsWithChildren } from \"react\"\nimport {\n  Button as _Button,\n  ButtonProps as _ButtonProps,\n  ColorProp,\n  MainColor,\n} from \"trunx\"\n\ntype ButtonProps = Omit\u003c_ButtonProps, \"color\" | \"isRounded\"\u003e \u0026\n  ColorProp\u003cExtract\u003cMainColor, \"warning\" | \"success\"\u003e\u003e\n\nexport function Button({ children, ...props }: PropsWithChildren\u003cButtonProps\u003e) {\n  return (\n    \u003c_Button isRounded {...props}\u003e\n      {children}\n    \u003c/_Button\u003e\n  )\n}\n```\n\n### Use Trunx with Preact\n\nTrunx is compatible with [Preact](https://preactjs.com/). It is possible to alias `react/jsx-runtime` to Preact equivalent and Trunx will work out of the box. For instance if you are using esbuild, add these aliases to your `build` options\n\n```\nalias: {\n  'react': 'preact/compat',\n  'react-dom/test-utils': 'preact/test-utils',\n  'react-dom': 'preact/compat',\n  'react/jsx-runtime': 'preact/jsx-runtime',\n}\n```\n\nSee also on official Preact documentation [how to alias React to Preact](https://preactjs.com/guide/v10/getting-started#aliasing-react-to-preact).\n\n## Motivation\n\nI really like [Bulma] CSS framework and I am also a [Dragon Ball](https://en.wikipedia.org/wiki/Dragon_Ball) fan.\nThat is why I am creating this component library. I hope you enjoy it!\n\n\u003e Trunks (Japanese: トランクス Hepburn: Torankusu) is a fictional character in the Dragon Ball manga series created by Akira Toriyama.\n\nI remember when I was reading the comics and Trunks arrived from the future. He was really powerful and could defeat Frieza in few seconds. One of the best twists of the entire series, in my opinion.\n\n## License\n\n[MIT](https://fibo.github.io/mit-license)\n\n[bulma]: https://bulma.io \"Bulma CSS framework\"\n","funding_links":["https://github.com/sponsors/fibo","https://patreon.com/fibo"],"categories":["Uncategorized","UI Frameworks","React [🔝](#readme)"],"sub_categories":["Uncategorized","style"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffibo%2Ftrunx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffibo%2Ftrunx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffibo%2Ftrunx/lists"}