@8sistemas/design-system

The full documentations can be found in the Storybook page generated by this repository: https://eightsystems.github.io/design-system/

Using as a library

1. To install the component library, run:

yarn add @8sistemas/design-system

2. Inject the ThemeProvider in the project root. By default, the ThemeProvider uses the default Theme object included in the package. If you wish, you can specify your custom theme to match the project's needs (see more about theming and customization here).

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Theme, ThemeProvider } from "@8sistemas/design-system";

ReactDOM.render(
    <React.StrictMode>
        <ThemeProviderInjector theme={Theme}>
            <App />
        </ThemeProviderInjector>
    </React.StrictMode>,
    document.getElementById("root")
);

3. Import the fonts specified on the fontFaces object of the Theme in the way that makes the most sense for your project. These are the font imports for the default Theme object:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap"
    rel="stylesheet"
/>

4. Use the components in any place of the project that is in the scope of ThemeProvider and the project root. Use the Storybook generated documentation as reference for the components, props, and API's available.

import React from "react";
import { Button } from "@8sistemas/design-system";

const Example = () => <Button color="primary">Hello World</Button>;

Local Testing with Yalc

Local development and testing of authored packages can become problematic when using yarn/npm link due to constraints and problems with dependency resolution and symlink interoperability between file systems.

Yalc tries to solve this problem by acting as a simple local repository for your locally developed packages. That way, they behave like they would with a regular npm install / yarn add from the remote package repository, and we don't need to deal with duplicate dependencies and symlink shenanigans.

Usage

Install globally:

yarn global add yalc

Run:

yarn local:publish

Yalc will copy all the files that should be published in remote NPM registry and generate a log of the that would be included in the published package.

Now, in the project that will consume the design system's components:

yalc add @8sistemas/design-system

To update during active development:

# Publish a new version to the yalc "store" from the design system directory:
yarn local:publish

# Uptade the package from the newly published version on the consumer project:
yalc update @8sistemas/design-system

Managing installations:

• Run yalc installations clean @8sistemas/design-system to unpublish a package published with yalc publish
• Run yalc installations show @8sistemas/design-system to show all packages to which @8sistemas/design-system has been installed.