How to use it?

Install dependencies

The design system library has some peer depencendies, but they should be installed by the "main" package of the monorepo, and accessible to this package thanks to yarn hoisting.

run from ./frontend :

yarn install
yarn install

Import component

The design sytem is divided in two bundle :

• main, containing all legacy modules
• next, produced by the new organisation

Importing a next component

You can import from the bundle @ulule/owl-kit-components/dist/next.esm

import * as React from 'react'
import { styles as S } from '@ulule/owl-kit-components/dist/next.esm'

function MyReactComponent() {
    return (
      <S.image.Avatar
        src="https://img.ulule.com/display/e730a7983adba81d9b624e4bde22e6400ecc12ff/thumbnail/180x180/avatars/2018/05/29/extellion.130509.130801.jpg"
        type="small"
      />
    )
  }
}
import * as React from 'react'
import { styles as S } from '@ulule/owl-kit-components/dist/next.esm'

function MyReactComponent() {
    return (
      <S.image.Avatar
        src="https://img.ulule.com/display/e730a7983adba81d9b624e4bde22e6400ecc12ff/thumbnail/180x180/avatars/2018/05/29/extellion.130509.130801.jpg"
        type="small"
      />
    )
  }
}

Importing a legacy component

You can directly import it from the module @ulule/owl-kit-components. This allows to keep compatibility with modules create before the migration to the new organisation. You should always prefere importing from next when you can. Components from legacy are a last resort.

import * as React from 'react'
import { UserCard } from '@ulule/owl-kit-components'

class MyReactComponent extends React.Component {
  render() {
    return (
      <UserCard
        name="extellion"
        url="https://fr.ulule.com/extellion/"
        avatar="https://img.ulule.com/display/e730a7983adba81d9b624e4bde22e6400ecc12ff/thumbnail/180x180/avatars/2018/05/29/extellion.130509.130801.jpg"
      />
    )
  }
}
import * as React from 'react'
import { UserCard } from '@ulule/owl-kit-components'

class MyReactComponent extends React.Component {
  render() {
    return (
      <UserCard
        name="extellion"
        url="https://fr.ulule.com/extellion/"
        avatar="https://img.ulule.com/display/e730a7983adba81d9b624e4bde22e6400ecc12ff/thumbnail/180x180/avatars/2018/05/29/extellion.130509.130801.jpg"
      />
    )
  }
}