@8sistemas/design-system

A design system used by internal projects at EightSystems

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@8sistemas/design-system
300.9.142 months ago2 years agoMinified + gzip package size for @8sistemas/design-system in KB

Readme

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

  1. 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")
);

  1. 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"
/>

  1. 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.