README

@onrewind/ui

The React implementation of our design system.

Geting started

Import the css file in your main file :

import '@onrewind/ui/lib/onrewind-ui.css';

Import the Tailwind presets in your tailwind.config.js:

module.exports = {
  // .....
  presets : [require('@onrewind/ui/origins.preset.js')]
  theme : {
    // .....
  }
}

Files architecture

Path aliases

@components -> "./src/components"
@hooks -> "./src/hooks"
@utils -> "./src/utils"

Please prefer using them instead of "../../../......"

Components

Each component should be in his own file, using this architecture ⬇️

-- Component
  |- index.ts
  |- Component.tsx
  |- Component.stories.tsx
  |- Component.types.ts

Example:
index.ts

export { default } from './Component';

Component.types.ts

export interface ComponentProps {
  children: React.ReactNode;
}

Component.tsx

import React from 'react';

import { ComponentProps } from './Component.types';

function Component({ children }: ComponentProps): JSX.Element {
  return <p>{children}</p>;
}

export default Component;

Component.stories.tsx

import React from 'react';

import { CSFType } from '@utils/typeHelpers';
import Component from './Component';

const meta = {
  component: Component,
  args: {
    //  props that are consistent for all stories
  },
};

type Story = CSFType<typeof meta>;

export const Usage: Story = {
  args: {
    // ... props for Storybook
  },
};

export default meta;

className, clsx and twMerge

We are using clsx and twMerge for handling dynamic classNames.

When you want to pass conditionnal className please use clsx with object style, like so:

<div
  className={clsx({
    'bg-white': condition1,
    'bg-black': !condition1,
    'text-green-500': condition2,
  })}
></div>

When you want to pass a className prop to your component, please use twMerge so there won't be issue with classes overriding default, like so:

function Component({ className }: Props) {
  return <div className={twMerge('bg-white flex flex-col text-primary', className)}></div>;
}

Remember, you can use both !

function Component({ className }: Props) {
  return (
    <div
      className={clsx(
        {
          'bg-white': condition1,
          'bg-black': !condition1,
        },
        twMerge('flex flex-col text-primary', className),
      )}
    ></div>
  );
}

How to run

Install dependencies

yarn install

Start Storybook on localhost:9009 by running the following command

yarn guide

Connect to Next.js apps locally

Follow the guide

Usage no npm install needed!