@01works/react-ui

@01works/react-ui

Design System for Dashboard

Getting Started

Installation

npm i @01works/react-ui
# or
pnpm add @01works/react-ui
# or
yarn add @01works/react-ui
# or
bun add @01works/react-ui

Components

Button

import { Button } from '@01works/react-ui'

export const Component = () => {
  const onClick = () => {
    console.log('click')
  }

  return (
    <>
      <Button onClick={onClick} color="black" size="small" shape="square">
        Button
      </Button>
    </>
  )
}

ToggleField

import { ToggleField } from '@01works/react-ui'

export const Component = () => {
  const [pressed, setPressed] = useState(false)

  return (
    <ToggleField
      label="ToggleField"
      labelBasis={120}
      pressed={pressed}
      onChange={setPressed}
    />
  )
}

TextField

import { TextField } from '@01works/react-ui'

export const Component = () => {
  return (
    <TextField
      label="TextField"
      labelBasis={120}
      placeholder="Placeholder"
      color="white"
      type="text"
    />
  )
}

TextAreaField

import { TextAreaField } from '@01works/react-ui'

export const Component = () => {
  return (
    <TextAreaField
      label="TextAreaField"
      labelBasis={120}
      placeholder="Placeholder"
      size="small"
      color="white"
    />
  )
}

SelectField

import { SelectField } from '@01works/react-ui'

export const Component = () => {
  return (
    <SelectField
      label="SelectField"
      labelBasis={120}
      placeholder="Placeholder"
      color="white"
      options={[
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
      ]}
    />
  )
}

ColorField

import { ColorField } from '@01works/react-ui'

export const Component = () => {
  return (
    <ColorField
      label="ColorField"
      color="white"
    />
  )
}

SliderField

import { SliderField } from '@01works/react-ui'

export const Component = () => {
  const [value, setValue] = useState([50])

  return (
    <SliderField
      label="SliderField"
      labelBasis={120}
      min={0}
      max={100}
      step={1}
      value={value}
      onValueChange={(value: number[]) => setValue(value)}
    />
  )
}

ImageField

import { ImageField } from '@01works/react-ui'

export const Component = () => {
  const [value, setValue] = useState<ImageFieldValue>(null)

  return (
    <ImageField
      label="ImageField"
      value={value}
      setValue={(value: ImageFieldValue) => setValue(value)}
    />
  )
}

Accordion

import { Accordion } from '@01works/react-ui'

export const Component = () => {
  return (
    <Accordion
      label="Accordion"
    >
      <div>Accordion</div>
    </Accordion>
  )
}

Dialog

import { Dialog } from '@01works/react-ui'

export const Component = () => {
  return (
    <Dialog
      trigger={<Button>Open Dialog</Button>}
      title="Dialog"
      description="Dialog"
      button={{
        cancel: 'Cancel',
        submit: 'Submit',
        onSubmit: () => console.log('submit'),
      }}
    >
      <div>Dialog</div>
    </Dialog>
  )
}