Rhythm UI React

Introduction

  • Rhythm React is UI library that uses react and tailwind.

How to use Rhythm in a new React project?

  • To use Rhythm in your project We recommend you to use our CLI.
  • We use VITE to setup your react project and create-next-app for NextJs project. (These will be autoconfigured by CLI)
Note:
  • In case you are using yarn, use the classic version (v1.22.19) You can set the yarn version by command
copy
yarn set version classic

Hurray! you are ready to use Rhythm.

  • Make sure you are wrapping your root React component inside RhThemeProvider like below
copy
<RhThemeProvider theme='light'>
  --- You App ---
</RhThemeProvider>

Import components you want into your UI

copy
import { RhButton } from '@rhythm/react';

and use them like so

copy
const example = () => (
    <div>
      <RhButton variant="primary" onClick={() => {}}>Do something</RhButton>
    </div>
  )

If you are new to react/javascript ecosystem: Please refer to the links given at the end of the documentation before going further.

Details on the Project

  • The complete library is made using lerna and lerna workspace

  • We are using yarn as a package manager in the project

  • The complete library is ESM module, which means they are treeshakable by default

  • We have 2 workspaces inside the library one actual component library and a kitchensink app to demonstrate the whole components

    • Rhythm UI - It is a UI component library developed using React JS which helps developers to build an awesome react website without worrying about component design creation.

    • Kitchensink Application - Kitchensink Application is made with Rhythm UI components to showcase the use of the Rhythm UI library.

  • Kitchen sink app is built using nextjs

  • We are using the storybook to demonstrate the components and the documentation

  • This component library is right now not compatible with CRA(create-react-app), try to use vite build/react starter kit that is provided by Codemonk

  • why CRA is not supported: GitHub issue

  • We are using rollup as a bundler for bundling the component library and we are using the ESM build

File stucture

  • (packages/react/src/components) :
    • All components reside inside the components folder.
    • Each component will/must have an index file, a storybook-related file (.stories.js)
  • (packages/react/src/formik) :
    • We are using formik for form management. Most of the input components like selectbox, checkbox has a formik variation that resides inside the formik folder
  • (packages/react/src/utils):
    • Utils folder are helper functions folder for the whole library.
  • (packages/react/src/themes)
    • We support theming, and for that, we have a common folder called Themes. you need to import the same when you are using the component library in an actual project, the same will reside inside the nodemodules/@rhythm-ui/react/themes/default.css of the actual project where you use the component library
    • You also need to import the index.css file, when using this library in a project (nodemodules/rhythm-ui/react/index.css)
    • Since we are using the tailwind for the CSS part, if you want a theme variation you need to add the below code to the tailwind.config.js file of the actual project, you need to add @tailwindcss/forms as dev dependency in the project
    • for more refer to the global.css file and tailwind.config.js files of kitchensink app (packages/kitchensink-nextjs/styles/global.css)

sample code

.stories.js

copy
import React from 'react'

import RhLabel from './Label'

export default {
    title: 'Label',
    component: RhLabel,
  parameters: {
    argTypes: {
        contain: {
            control: 'boolean',
        },
        aspectRadio: {
            options: ['auto', 'video', 'square'],
            control: { type: 'select' },
        },
    },
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
        </>
      ),
    },
};
const inputID='label-for-input'
const Template = (args) => <RhLabel {...args} />

export const Default = Template.bind({});
Default.args = {
    label: 'Input Label',
    labelFor:inputID,
}

export const Required = Template.bind({})
Required.args={
    ...Default.args,
    isRequired:true,
}

export const InfoLabel = Template.bind({})
InfoLabel.args={
    ...Required.args,
    haveInfoBtn:true,
    infoBtnText:'Info here'
}

export const errorLabel = Template.bind({})
errorLabel.args={
    ...InfoLabel.args,
    isError:true,
}

.tsx

copy
import React from 'react'

interface RhLabelProps {
    label:string
    labelFor?:string
    isRequired:boolean
    haveInfoBtn?:boolean
    infoBtnText?:string
    isError:boolean
}

const RhLabel=(props: RhLabelProps)=> {
    const {label,labelFor,isRequired,haveInfoBtn,isError,infoBtnText}=props
    return (<div></div>)
}

RhLabel.defaultProps={
    isRequired:false,
    haveInfoBtn:false,
    isError:false
}

export default RhLabel

When creating a new component follow these

  • Keep the stories.js file concise, move sample data, and complex logic if there is any to a file inside the same folder with the name .utils.js example: label.utils.js
  • Complete the actions and interaction section of storybook
  • Complete the docs section of a storybook, and make it work properly, if using external packages add a link to the same, we can use the mix of doc block
  • Always use default props logic and if optional define it as an optional prop using typescript

When you create a merge request follow these

  • Always pull the latest main/dev branch which acts as the master branch where the feature will be at the end merged to
  • Create a new branch from that branch(develop branch)
  • in case of naming for react-rhythm project use react/feature-name or react/issue-name
  • push the same with the initial commit to remote
  • Create an MR for the same
  • Name the MR with the initial of Draft (GitLab already have the provision for the same )
  • Add yourself as an assignee and add the one who is going to review the reviewer
  • Keep working on the same and keep pushing the same
  • Once completed the development is remove the Draft in the heading and [Ready]
  • Add the label [Fixed]
  • After reviewing if there is a review comment add the label [Review comments]

Below is the flow chart for the merge request flow

MR flowchart

For urgent merge request

  • For Urgent merge requests add the final review label directly.

Urgent MR flowchart

Links