OCTO Design System Components

Package for implementation of OCTO's design system components. It includes the standalone @octo-produits-internes/design-system package. A demo storybook is also available.

1. Getting started

Requirements

| Package | Version | | -------------------------------------------------------------------- | -------------------------------- | | react | 16.0.0, 17.0.0, 18.0.0 or higher | | styled-components | 4.0.0, 5.0.0 or higher |

With a package manager

1. Install the react and styled-components packages (unless you already have them) :

yarn add react styled-components

2. Install the package :

yarn add @octo-produits-internes/design-system-components

3. Import the design system package components in your main script :

import { /* see documentation*/ } from '@octo-produits-internes/design-system-components'

On a static website

1. Add the unpkg.com origin to your script-src and font-src CSPs.

2. Add the react and styled-components script tags to your HTML page (unless you already have them) :

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/styled-components@4/dist/styled-components.js"></script>

3. Add the package script tag to your HTML page :

<script src="https://unpkg.com/@octo-produits-internes/design-system-components"></script>

4. Import the package namespace in your script :

const { /* see documentation*/ } = OctoDesignSystemComponents

2. Documentation

WIP

3. Development

Clone this repository and install all dependencies with yarn install --check-files. Then, the following commands will be usable :

• yarn start:example: starts a headless server at localhost:8080 to show a use case example (defined in src/main.example.ts)
• yarn start:example:ssl: same as yarn start:example but the server will serve over HTTPS, as long as you have both certs/octopod-auth.pem and certs/octopod-auth-key.pem
• yarn reinstall: reinstalls all dependencies in a clean state
• yarn build: transpiles the project from Typescript to a Javascript module in dist
• yarn build:pack: same as yarn build but compiles the code and packs it for browser use
• yarn build:pack:example: same as yarn build:pack but writes the output pack file to example, alongside all the assets and the source map file
• yarn build:pack:production: same as yarn build:pack but writes the output pack file to dist/packs, alongside the imported assets and without the source map file
• yarn test: starts tests for the specified file if specified, all files if not
• yarn test:watch: same as yarn test, but will run in watch mode
• yarn test:output: same as yarn test, but will output the results in src/config/jest/jest.result.json
• yarn test:coverage: same as yarn test:output, but will output the coverage in the console and in src/config/jest/coverage/
• yarn test:coverage:inspect: same as yarn test:coverage, but will start a headless server at localhost:8081 to show coverage results
• yarn lint:code: lint the specified TS or TSX file
• yarn lint:code:all: same as yarn lint:code, but lints on all TS and TSX files
• yarn lint:style: lint the specified style file
• yarn lint:style:all: same as yarn lint:style, but lints on all style files

4. License

All rights reserved to OCTO Technology (France). Credit goes to the Produits Internes team. Use for other businesses is strictly prohibited.