@8sistemas/design-system
v1.0.5
Published
A design system used by internal projects at EightSystems
Downloads
151
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
- To install the component library, run:
yarn add @8sistemas/design-system
- Inject the
ThemeProvider
in the project root. By default, theThemeProvider
uses the defaultTheme
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")
);
- Import the fonts specified on the
fontFaces
object of theTheme
in the way that makes the most sense for your project. These are the font imports for the defaultTheme
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"
/>
- 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 withyalc publish
- Run
yalc installations show @8sistemas/design-system
to show all packages to which@8sistemas/design-system
has been installed.