Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Overview

Trunx

Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Status

Almost all Bulma features are available and documented, few helpers and custom components are already implemented.

Documentation

To read documentation point your browser to http://trunx.dev

Yes, the website itself is implemented with Trunx: you can read its source code here.

Motivation

I really like Bulma CSS framework, I love React and I am also a Dragon Ball fan. So, summing all, I am creating this component library. I hope you enjoy it!

Trunks (Japanese: トランクス Hepburn: Torankusu) is a fictional character in the Dragon Ball manga series created by Akira Toriyama.

I 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.

License

MIT

Credits

Tons of kudos to Bulma author!

Trunks full body png comes from kisspng. Then I draw Trunks' head with Tayasui Sketches.

Issues
  • Button render as <a> when onClick attribute is defined

    Button render as when onClick attribute is defined

    Hello @fibo

    I have an issue with the Button render. As it said in the docs, if a href prop is given, Button is render as a link. But in my case, I don't have a href prop, only onClick and disabled props and it render as link anyway.

    If I remove the onClick prop, render as button works.

    Here my snippet: <Button onClick={this.myHandle} disabled={condition}> MyButton </button>

    Thanks to take a look.

    cordially

    jekho

    opened by jekhoxy 14
  • React form library integration

    React form library integration

    It would be great if we could have integration with some react form library.

    There are many options, the biggest one is probably Formik, but I really like react-formal. With all these libraries it usually takes a bit of manual coding to integrate it into the stylesheet/template library or having to set everywhere what component to use to override the defaults. react-formal integrates nicely with react-widgets, which uses a custom bootstrap theme, so having bulma for that would be super awesome as well.

    Thanks for making trunx, it is by far the react bulma library I prefer the most.

    opened by steph4nc 11
  • Testing?

    Testing?

    I am quite curious about where you want to lead this project @fibo and I think that some testing would help it make it very clear. Have you considered this angle before?

    opened by ashnur 9
  • Next.js example

    Next.js example

    See this example, do something similar with trunx components: https://github.com/jvarness/next-with-bulma

    Actually I do not like storybook experience on mobile. It was great to start but trunx could now be used to create its own website, possibly really similar to bulma website (even carbon ads :)

    I also submitted trunx storybook and pr was merged but the storybook examples are not on the storybook website, looks like they were removed.

    opened by fibo 8
  • className prop

    className prop

    add className prop to every component, in order to add a custom class

    for example I added it in Icon, it can be useful to avoid a wrapper layer to add a class

    opened by fibo 6
  • Release updated package

    Release updated package

    Hi there,

    I just found your package, it looks like a great replacement for RBX.

    I'm having issues due to the "./classnames" import in https://github.com/fibo/trunx/blob/main/src/component/renderElement.ts, but I can see that it has already been fixed.

    Could you release an updated NPM package, so I can use the corrected code?

    opened by luhis 5
  • Tabs first item has a double underline

    Tabs first item has a double underline

    Hello @fibo

    I have noticed when using Tabs component, the first Tabs.Item has a double underline, even when it becomes no active anymore.

    The rest of the Tabs.Item is rendered correctly then.

    image

    Thanks to give a look at it. (I'm working with version 0.21.0)

    Jekho

    ps: Bravo for your work!

    opened by jekhoxy 3
  • Custom element for components

    Custom element for components

    Allowing us to specify what element should be rendered, there is a lot of advantage in this, similar to what react Bulma components is doing. I had some issues with using this with the navbar a elements within a elements

    opened by andreimc 3
  • Field - Missing isHorizontal and no examples for isGrouped

    Field - Missing isHorizontal and no examples for isGrouped

    I see the is-horizontal class is missing as a prop on https://github.com/fibo/trunx/blob/master/src/component/Field.tsx https://bulma.io/documentation/form/input/

    There is also no examples for isGrouped modifiers on Field on the storybook.

    opened by steph4nc 3
  • 100% TypeScript

    100% TypeScript

    Consider port the whole codebase to TypeScript.

    Currently the storybook stories are written in JavaScript.

    Furthermore, consider do not transpile at all, I mean to target only TypeScript users which could import somehow the .tsx files directly.

    opened by fibo 2
Owner
Gianluca Casati
I am an Italian mathematician working as full stack developer. I ❤ coding and open source! I enjoy playing 🎶 guitar and percussions.
Gianluca Casati
👟 rbx – The Comprehensive Bulma UI Framework for React

rbx – The Comprehensive Bulma UI Framework for React ?? Read the docs. ?? I'll wait, go check them out! Features up-to-date Bulma implementation (0.7.

Devin Fee 474 Jan 7, 2022
super-antd 是一个简单且数据驱动友好的 React 组件库。

super-antd 是一个简单且数据驱动友好的 React 组件库。它基于 ant design 和 pro-components 。

超杰 27 Dec 27, 2021
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

medipass 26 Nov 8, 2021
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

Fort Awesome 3.5k Jan 14, 2022
Awesome chat widget for your React App

Awesome chat widget for your React App

Wolox 1.1k Jan 11, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Alex Wright 17 Dec 18, 2021
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
Storybook environment for React components production boosted with TypeScript & styled by Material-UI with styledComponents as final makeup 😁

Material-UI Storybook Components for React React.js components made with TypeScript with on Material-UI look-like using Storybook. The problem @Materi

Larry Noriega 1 Jan 14, 2022
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 263 Dec 17, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.7k Jan 14, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 63 Jan 10, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
TheCodingMachine React Native boilerplate - Typescript Plugin

This plugin allow thecodingmachine react-native-boilerplate ?? users to translate the boilerplate from Javascript ?? to Typescript ??

TheCodingMachine 15 Jan 6, 2022
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy ?? Demo Try it your self here! ⚙️ Usage In your

Hussain Pettiwala 16 Jan 9, 2022
Implementation of Comonad UIs in React/Typescript

Comonadic React An exploration of Arthur Xavier's Comonads for UIs using fp-ts and React. ✨ Bootstrapped with Create Snowpack App (CSA). Available Scr

Liam Dyer 5 Dec 17, 2021
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 20.3k Jan 14, 2022
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.2k Jan 13, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 23.3k Jan 16, 2022
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.6k Jan 20, 2022