InspireX Design System

This repo represents the first steps toward our in-house design system. At time of writing, it is little more than a proof of concept, but in time will grow to include

• a test suite asserting each component's adherance to the designs
• a Storybook style interface for browsing components
• code snippet examples of for
• examples of common compositions of components
• layout components for consistency of implementation and minimize the "glue" styling required to implement screens in consuming applications

Components are written as StencilJS web components, and include bindings for the frameworks that we use (currently just React). This means the components can be used as if they were native components written for each framework, and developers may not realise they're web components under the hood.

Naming

While this repo is appropriately named 'inspirex-design-system', the packages are published under the @wclib "scope" on NPM. This choice enables terse import statements such as

import { AlertBar } from @wclib/react

This may seem confusing, as our existing (React specific) component library is also called wclib (short for "web component library"). We should rename that library at some point, for now it's not a priority as these components will not be a direct dependency of the consuming application:

@wclib/core -> @wclib/react -> wclib -> consuming application