Apiko-design-system NPM

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'