osom-react-ui-kit

Osom private react ui kit for usage in internal projects

Usage

import { H1, Button } from 'osom-react-ui-kit';

const App = () => (
  <>
    <H1>Hello world!</H1>
    <Button $type="outlined">PRESS ME</Button>
  </>
);

Global style:

import { createGlobalStyle } from 'styled-components';
import { globalStyles } from 'osom-react-ui-kit';
import 'osom-react-ui-kit/dist/styles.css'; // import style manually, contains reset.css and fonts

const GlobalStyle = createGlobalStyle`
  ${globalStyles}
`;

or

import { ThemeProvider } from 'styled-components';
import { GlobalStyle } from 'osom-react-ui-kit';

import mainTheme from '@styled/themes/mainTheme';

function App({ children }) {
  return (
    <ThemeProvider theme={mainTheme}>
      <GlobalStyle />
      {children}
    </ThemeProvider>
  );
}

export default App;

Theme:

import { mainTheme as osomTheme } from 'osom-react-ui-kit';

const mainTheme = {
  ...osomTheme,
};

export default mainTheme;

Storybook

Start (at 6006 port)

yarn storybook

Build for production

yarn build-storybook