Basic design system setup

This project aims to create a design system implemented with Design Tokens and a component system for React and React Native.

All display of design tokens and components is done via their respective Storybooks.

•  pnpm workspaces
•  Web
  • Build for distribution
  • Storybook
  • Visual tests with Chromatic
  • Link to Design Tokens
  • Tests
•  React Native
  • Build for distribution
  • Storybook for React Native
  • Link to Design Tokens
  • Tests
  • E2E tests
•  Design Tokens
  • Create sample token set
  • Build for distribution
  • Storybook
  • Tests
  • Visual tests with Chromatic
• Nx
  •  Initial setup and dependency graph
  •  Optional Cache on Azure
• Changesets

• pnpm
• Nx - pnpm add --global nx@latest
• XCode with a working iOS simulator
• Android Studio with a working Android simulator

# If you haven't already
brew install cocoapods

# Install iOS Pods
cd packages/app/ios
# This is only needed when setting up
# the project for the first time.
bundle install

# Then run, then repeat this command whenever you update a Pod
pod install

First off, run pnpm install. Wait for a few seconds.

For the most part, this is the only pnpm command you should need to use. Most other commands should be done with Nx.

Nx will ensure that tasks are run in the correct order. For example, when building web, it needs to build tokens first. Nx orchestrates this for you, so you don't have to think about it.

# Build web project
nx run web:build

# Test app project
nx run app:test

# Start web storybook (also starts the tokens:storybook)
nx run web:storybook

# Build all projects
nx run-many -t build

# Run lint, test, and build on all projects
nx run-many -t lint test build

# Run Storybook on tokens only
nx run tokens:storybook

If you for some reason want to skip the Nx task resolutions, simply run the tasks manually with pnpm in the respective projects:

# In packages/web, will not build packages/tokens first
pnpm run build

The project has been set up with a custom cache on Azure. Copy .env.example to .env and fill out the NXCACHE_AZURE_SAS_URL with information given to you by Pål on request.

If you think the cache is not producing your expected results, you can skip caching with the --skipNxCache option.

nx run-many -t build --skipNxCache