Gui-docline NPM

A guideline to build SUI Docline This repository is a guideline to build the Docline Storybook application based on ReactJS and Storybook with Atomic Design methodology. This Readme should clarify how to wire up all the modules of your application, even when we understand that in some cases there must be some changes needed by the structure to fit your needs correctly.

Overview
Architecture
Guidelines
Getting Started
Testing the application
Publish to chromatic
How to use in a project
Authors

🔨 Overview

sui-docline makes use of the latest tools to improve the workflow, and enables you to create the future of Docline

ReactJs v17
Developing UI components in isolation with Storybook
styled-components for styling components and application
Integration with Typescript
Compiled of modern JavaScript with babel
Jest and React testing library for unit/ui testing
Automate Git With Hooks And Husky
Code Linting using Eslint
Code formatter using Prettier

🔥 Architecture

Unilae-Storybook is based on Atomic Design, methodology for creating design systems. There are five distinct levels in atomic design:

Atomic Design component structure:
- Atoms
- Molecules
- Organism
- Templates
- Pages

Config:

  - `.prettierrc` Prettier configuration
  - `.eslintrc.json` EsLint configuration
  - `tsconfig.json` specify the files and compiler options to compile from Typescript

Component structure:

src: is the place where to put our application source code
src/components: we use "featured based" distribution, so all the necessary code for each page/feature is located in its own folder. Below, the is an example: This folder is divided from "Atomic Design":

Example of component

MyComponent: Folder which contains our component
- index.tsx: Contains the React component, HTML and CSS content or imports from Storybook
- MyComponent.stories.tsx: Contains the stories of component for Storybook
- MyComponent.test.tsx: Contains the test of component.
- __mocks__: Folder to contains the mocks logic

📋 Guidelines

Component's file name should be in pascal case Should be like MyComponent and not myComponent

Write your component When developing components, we can do it as a styled-components and functional components of react. When we stylize a component we can do it as follows:

Styled component:

const Button = styled.button`
  color: #ff6000;
  ... more properties  
`;

Functional component with styled component:

const Wrapper = styled.div`
  display: flex;
  ... more properties
`;

const MyComponent = () => (
  <Wrapper>
    <Button>Send form</Button>
  </Wrapper>
);

Use as a Wrapper component name when it is necessary to create a container for a functional component.

const MyComponent = () => (
  <Wrapper>
    <List>
      <Item>Item 01</Item>
      <Item>Item 02</Item>
    </List>
  </Wrapper>
);

If you need to create a type list (ul, ol), use For the children of that list (li), you can use

const StyledButton = styled(Button)`
  color: #ffa066
`;

const MyComponent = () => (
  <Wrapper>
    <StyledButton>My styled button</StyledButton>
  </Wrapper>
);

If you need to use a current component, you must do so by extending the styles of this one and name it by adding the prefix Styled

🏠 Getting Started

To get you started, you need to meet the prerequisites, and then follow the installation instructions.

Installing

You can clone our Git repository: $ git clone git@gitlab.com:docline/frontend/sui-docline.git

Wiring up your development environment

Setting up sui-docline is as easy as running:

$ npm install

This command will install all the required dependencies. Please note that npm install is only required on your first start, or in case of updated dependencies.

Initializing Storybook

Once all the dependencies are installed, you can run $ npm run storybook to initialize your development server using webpack-dev-server middleware.

✨ Testing the application

sui-docline uses Jest, a delightful JavaScript Testing Framework and React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components.

✨ Publish to chromatic

You could check the buils in Chromatic, and the storybook published here

Every time, you need to publish a new version, only type this: $ npm run chromatic

This will deploy automatically to Chromatic, and update the project with the last changes

Running your tests

$ npm run test will perform your unit testing.

📭 How to use in a project

Install this package and styled-components with a dependency in your project:

npm install sui-docline styled-components

Once the dependencies have been installed, we must wrap the application with a ThemeWrapper to add the theme and also add the global styles:

import { ThemeProvider } from 'styled-components';
import { themes, Button, GlobalStyle } from 'sui-docline';

const App = () => (
  <ThemeProvider theme={themes.docline}>
      <GlobalStyle />

      <Button label="Hello" primary />
      ...some more component

  </ThemeProvider>
);

Run your application with a awesome components!

Building your production application

$ npm run build will create a minified version for your application, ready for production.

Upload new version to Chromatic

$ npm run chromatic will create a production version for your application, ready to be visualized from Chromatic in https://www.chromatic.com/builds?appId=6194ca1ef0559c003a858904.