Nocturnal Pumpkin Maelstrom
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

orcs-design-system

0.9.148 • Public • Published

ORCS: Orchestrated design system

featuring Styled System + Styled Components

GitHub repository | Deployed on GitHub Pages

npm version GitHub last commit GitHub license

FOSSA Status

Getting Started

Clone repository:

git clone https://github.com/orchestrated-io/orca-design-system.git

Install dependencies:

npm install

Run the ORCS Storybook

Start the ORCS development server:

cd packages/orcs-design-system
npm run storybook

A new browser window will open with a random localhost port. ORCS runs Storybook 6.

Working with ORCS

All library files are located in /lib. Static files are located in /assets.

Viewing changes in PM / TD.

As an alternative to npm link you can run npm run dist and then copy the es folder directly into TD or PM:

cp -R es/ ../../../team-directory/node_modules/orcs-design-system/

Symlinking with npm link

We haven't had much success with this recently

If you need to do npm link in your local environment you might encounter the following issues:

Both react and styled-components cause duplicate instance issue after npm link, to fix that we need to ensure both app project and lib project are sharing the same instance of them.

In orcs-design-system folder:

npm link {PATH_APP_REPO}/node_modules/react
npm link {PATH_APP_REPO}/node_modules/styled-components
npm link

In {PATH_APP_REPO}:

npm i orcs-design-system
npm link orcs-design-system
npm start

Testing

npm run test

Publishing changes

npm version patch
git commit -am "Update to version n.m"
git push

Your changes will be published to the NPM package when the commit is merged into (or pushed to) master.

Deploying to GitHub Pages

ORCS automatically deploys to GitHub Pages when a new version is published. To manually deploy:

npm run deploy-storybook

Using ORCS in a project

In your project's root, install ORCS and styled-components:

npm i orca-design-system
npm i styled-components

Using components

Once ORCS is installed, you can directly import components. For example, for Box:

import { Box } from "orcs-design-system"
...
<Box>
...
</Box>

The ORCS Storybook contains documentation for each component, including code examples and props tables.

For components with subcomponents, each subcomponent must be imported. For example, to use Tabs:

import { TabsContainer, Tab } from "orcs-design-system"

Using Styled System props

The design system components are built with Styled System props. Generally, components can access the space and layout prop categories, with additional prop categories on a per-component basis. Check the Properties section in a component's documentation to see what props it can use. Custom props will be listed in the props table.

As a guide to using these props, see the Styled System reference table.

The design system's theme scales are contained in systemtheme.

You may also find it useful to install the following Styled System utilities: theme-get and css.

npm i @styled-system/theme-get
npm i @styled-system/css

Theming

This design system uses styled-components ThemeProvider and comes with a default theme, systemtheme that uses styled-system arrays. To apply the theme to your app, you can use systemtheme or your own theme object.

import { ThemeProvider } from "styled-components"
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>

Variables can be referenced using theme.arrayName.variableAlias. When using Styled System props, components refer to the theme field associated with the prop as set out in the reference table.

Using icons

You will need to add the icon library that we are using (which is Font Awesome). To do this, install the Font Awesome packages:

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-solid-svg-icons

Then add this to the top of your root app file:

import { library } from '@fortawesome/fontawesome-svg-core'
import {far} from '@fortawesome/free-regular-svg-icons'
import {fas} from '@fortawesome/free-solid-svg-icons'
library.add(far, fas);

Alternatively, you can use the full icon packages if you purchase Font Awesome Pro license.

Once you have purchased a license you need to add your Font Awesome NPM token as an environment variable in a .npmrc file at the root of your app in the following format:

@fortawesome:registry=https://npm.fontawesome.com
//npm.fontawesome.com/:_authToken=FONT_AWESOME_NPM_TOKEN_GOES_HERE

For further usage guidelines for the Icon component, see the Icon docs.

Browser/device support

This design system is intended to work correctly on all modern desktop and mobile browsers.


"A design system is a living, funded product with a roadmap and backlog, serving an ecosystem." — Nathan Curtis

Install

npm i orcs-design-system

DownloadsWeekly Downloads

2,541

Version

0.9.148

License

none

Unpacked Size

432 kB

Total Files

81

Last publish

Collaborators

  • avatar