Letrus Components Lib

Getting started

Clone the repository with:

git clone [email protected]:letrustech/letrus-ui.git

Move to the root folder and install all the dependencies using yarn:

To run the project you must create a .env file in the root folder and paste the variables regarding your operational system from .env-example file

yarn

The design system lib is organized using Storybook. To run the project execute:

yarn start

and open the browser in: http://localhost:9009/

During development, following the TDD approach, we write tests before. To run Jest in whatch mode use:

yarn test

The folder/files tree of a Component is located into src/components/ and is composed by:

├── src
│   ├── components
│   │   ├── [ComponentName]
│   │   │   ├── [ComponentName].module.scss
│   │   │   ├── [ComponentName].stories.tsx
│   │   │   ├── [ComponentName].test.tsx
│   │   │   └── index.tsx

The index.tsx is the main component file, usually a Functional Component like:

import React from 'react';
import styles from './Title.module.scss';

export interface TitleProps {
  title: string;
}

const Title: React.FC<TitleProps> = props => (
  <h1 className={styles.title}>{props.title}</h1>
);

export default Title;

For the style, we use SCSS Modules that allow to import the class styles into the component and use them as objects (i.e. className={styles.title}). The .scss file is a common SCSS file, with all the functionalities of SCSS. Style utils should be stored in src/styles folder and the specific util file should be named with an _ at the beginning of the file name, since its scope is as a private file. Inside the SCSS Modules files for each component, should be added the typography file and colors imports to apply the default Typography and Colors to all components created.

@import 'styles/letrusTheme';

.title {
  background-color: $primary;
}

The [ComponentName].test.tsx is the testing file, that uses Jest and React Testing Library. A basic structure is like:

import React from 'react';
import {render} from '@testing-library/react';
import Title from './index';

it('renders a welcome message', () => {
  const {getByText} = render(<Title title="Doh!" />);
  expect(getByText('Doh!'));
});

The [ComponentName].stories.tsx is the Storybook file. An example story is:

import React from 'react';
import Title from './index';

export default {
  title: 'Design System/Title',
  component: Title,
  parameters: {
    info: {
      text: 'Foo component'
    }
  }
};

export const Default = () => <Title text="Foo" icon="thumbs-up" />;

To automatically create a new Component, install the VSCode extension Blueprint and then, right click in src/components folder and select the item New File from Template. In the opened menu, select ui-component and then write the component name in the input field.