Design system

React UI library

🔓 Pre-requirements

Make sure you've installed all pear dependencies

npm install -S react react-dom styled-components

📦 Install

npm install @apiko-org/design-system

🔨 Usage

Use components with default theme

import { Button } from '@apiko-org/design-system'

const App = () => (
  <>
    <Button>Click me</Button>
    <Button variant="outline" size="l" disabled>
      Can't touch this
    </Button>
  </>
)

⌨️ Development

design-system is a React UI library with the aim to implement reusable lightweight components for Apiko projects.

Scripts

npm run dev # start dev server in watch mode

npm run lint # run eslint

npm run lint:styled # run stylelint

npm run prettier # run prettier

npm run test # run test

npm run test:w # run test in watch mode

npm run storybook # run storybook in dev mode

GitHub

• Linking PR to an issue

How to add new component

Implement component

• Implement component in the src/components/[ComponentName]/[ComponentName].tsx
• Make sure that React props well typed.
• Declare additional types in the src/components/[ComponentName]/types.ts if needed
• Implement ref forwarding if needed.

Exporting

• Add component exports in the src/components/[ComponentName]/index.ts
• Export only public code like component itself, prop types etc.
• Add export * from './[ComponentName]' to the src/components/index.ts

Styling

• Add styles to the src/components/[ComponentName]/styles.tsx\
• Make sure that you set the default theme for all of your styled components, so using them
  without ThemeProvider will not lead to the error.

import { defaultTheme } from './path/to/default-theme'

const ButtonStyled = styled.button``

ButtonStyled.defaultProps = {
  theme: defaultTheme,
}

• Most colors, spacings, fonts should be taken from the theme like: color: ${(props) => props.theme.color.textPrimary};
• Styled component name should have specific ending like Styled | Wrapper | Container etc.
• Import all styled components at once import * as Styled from './styles'

Testing

• Implement tests in the src/components/[ComponentName]/[ComponentName].test.tsx

Storybook

• Add stories for component in the src/components/[ComponentName]/[ComponentName].stories.tsx