@trading-strategy/design-system v0.0.11
Trading Strategy Design System
This repository contains all essential re-usable design tokens used in Trading Strategy's products:
- CSS files with styling presets and variables
- Svelte UI components
Getting started
Usage
1. Install the package from NPM:
npm i -D @trading-strategy/design-system
2. Use the UI components and other design tokens by importing them
Importing UI Component
import { Button } from "@trading-strategy/design-system";
Importing global CSS
import "@trading-strategy/design-system/css/index.css";
(Optional) Importing fonts
Authenticate to GitHub NPM registry
If you're a member of the @tradingstrategy-ai
org, you can login to the
GitHub NPM registry on the corresponding scope to add the optional font
dependency. See Authenticating to GitHub Packages
Create a GitHub Personal Access Token with read:packages
OAuth scope and use
it in the login
flow below:
npm login --scope=@tradingstrategy-ai --registry=https://npm.pkg.github.com
> Username: USERNAME
> Password: TOKEN
> Email: PUBLIC-EMAIL-ADDRESS
Import fonts
import "@tradingstrategy-ai/fonts
Check the available UI Components & Design Tokens in the public Storybook — https://design-system.tradingstrategy.ai/
Development
1. Clone the repo
git clone git@git@github.com:tradingstrategy-ai/design-system.git
2. (Optional) Authenticate to GitHub NPM registry
This package includes an optional font dependency from a private GitHub
repo. If you're a member of the @tradingstrategy-ai
org, you should login
to the GitHub NPM registry to ensure this is included. Follow the instructions
in the Usage › Authenticate to GitHub NPM registry section above.
You should only need to do this once (until your PAT
expires), since it
stores global credentials for the @tradingstrategy-ai
NPM scope.
IMPORTANT NOTE:
@tradingstrategy-ai/fonts
optional dependency is a private package that is available only for Trading Strategy. You still can use Trading Strategy Design System with the fallback fonts (system-ui, "Helvetica Neue", sans-serif
) or overrwrite them with your own fonts by updating the--ff
CSS variable at the:root
level.
3. Install dependencies
cd design-systen
npm i
4. Develop the Design System with Storybook
npm run storybook
IMPORTANT NOTE: to run or build storybook without the optional font dependency, comment out the following line in both
.storybook/manager.js
and.storybook/preview.js
:
import "@tradingstrategy-ai/fonts";
TODO: gracefully degrade when font dependency is not available.
5. Run tests
npm test