domeui-react

DomeUI

Welcome to the Dome open source component React UI library.

Explore the components in Storybook:

Storybook

How to use

Download the dependencies:

yarn add domeui-react

# or

npm install domeui-react

Use the component:

import { Button } from 'domeui-react'

Customize your component:

<Button
  IconRight="ArrowRight"
  backgroundColor="#F6BE27"
  border="small"
  buttonSize="medium"
  color="#242424"
  label="Press me"
/>

Want to contribute to the project?

Did you think of a component that doesn't exist yet? and want to risk creating one? follow step by step.

0. Fork

Fork the project in your private Github profile, this will automatically create an identical repository without your private repositories.

1. Git clone

Enter the repository and the project

https://github.com/Dome-UI/domeui-react.git

Enter the folder and download the dependencies

cd domeui-react

# after

yarn

2. Branch

Create a branch, where you can easily develop your component.

yarn checkout -b feat/ComponentName-component

3. Folder

Create a folder with the component name inside ./src/components.

4. Files

Inside ./src/components/ComponentName:

• ComponentName.tsx

  • This file will contain your component developed in React.

• index.stories.mdx

  • To render your component in Storybook, example:

  import { ComponentName } from './ComponentName';
  
  <Meta
    title="Components/ComponentName"
    component={ComponentName}
    argTypes={{
      <!-- Your types -->
    }}
     parameters={{
      layout: 'centered',
    }}
  />
  
  ## Default
  
  <Canvas columns={2} withSource="open" withToolbar>
    <Story
      name="Default"
      args={{ ...Button.defaultProps, label: 'Button default' }}
    >
      {(args) => <Button {...args} />}
    </Story>
  </Canvas>
  
  <ArgsTable story="Default" />

• styles.ts

  • Styling your component which is in ComponentName.tsx.

• theme.ts

  • It will contain some default properties that your component will have, the result of which is a Select in the Storybook, for example:

export const border = {
  none: '0',
  small: '4px',
  medium: '10px',
  full: '10000px',
}

• types.ts

  • Typing that will be used inside the index.tsx component and the styles.ts styling.

• index.ts

  • Export your component

    export * from './ComponentName'

5. Pull Request

After the beautiful and beautiful development of the component, open a Pull request and wait for the validation.

Contributors

The following people made this project possible:

Luiz Eduardo