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@[email protected]: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