Substrate

Substrate is a platform for designing, developing, and evolving GUIs at Virta. It's principles are:

• Accessibility—we serve everyone; patients with impaired or no eyesight should be able to use and enjoy our products
• Quality—a high-quality design language cultivates trust and familiarity with our products, and by extension our company
• Expressiveness—a declarative, component-based UI paradigm increases developer productivity and reduces the cost of changing directions
• Evergreen—avoid becoming stale; make it easy to explore, iterate, and propogate fresh new ways of doing things, be it styling or component architecture

Packages

Substrate Styles

A single source of truth for UI primitives including color, typography, iconography, and space. These primitives are composed together to create styles, which are semantically named variables like backgroundColorButtonPrimary. Styles are transformed to several formats including CSS, JS modules, JSON, et al., so that any Virta product can leverage them. Visual design software like Figma can also be synced with Substrate; colors and other styles can be shared, potentially bi-directionally.

Substrate Components

A collection of cross-platform React and React Native UI components that are ready to be used in any Virta project. Components are developed, documented, and viewable in a living, interactive component library powered by Storybook.

• View the Substrate Storybook 👀.

Substrate CLI

Currently a proof of concept and an excuse to play with a React-based CLI renderer. Could serve as tool for generating component/style boilerplate and other design system-related operations (syncing with third-party tools like Figma, etc)

Development

Prerequisites

• Yarn: npm install -g yarn

Start Developing

cd ~/code
git clone git:[email protected]/VirtaHealth/substrate.git
cd substrate
yarn
yarn start

🐬 yarn start Runs and watches both the Styles and Components packages so they can be developed simultaneously.

• Substrate Components and Styles are built and watched by tsc.
• A hot-reloaded Storybook instance is served from localhost:6006.

🛠 yarn build

• Outputs Substrate styles in several formats (CSS, JS, JSON, et al.) to packages/styles/dist to be imported in compatible modules.
• Creates a static production build of Storybook at packages/components/storybook-static for deployment.

🚀 yarn deploy

• Builds a production build of Storybook
• Deploys it to a unique web URL using now. These function like unique staging/preview environments.
• To deploy to 'production' (https://substrate.now.sh) use now alias [unique-alias-url] substrate.now.sh

🚿 yarn clean

• Cleans, installs, hoists, and symlinks the dependencies of all @substrate packages to the the root node_modules directory.