Atom Learning Design System

This repo contains both the Design System (./lib) and its documentation site (./site).

lib/, released as @atom-learning/components, is a collection of generic React components built using stitches, it includes components that cover layout, content, data collection, media and a host of other UI concerns. It uses @atom-learning/theme to provide the design tokens for color, typography, spacing and layout.

yarn add @atom-learning/components @atom-learning/theme

import { Box, Heading, Text } from "@atom-learning/components";

const Component = () => {
  return (
    <Box as="article">
      <Heading css={{ mb: "$3" }}>This is a heading</Heading>
      <Text>This is a paragraph of text</Text>
    </Box>
  );
};

You can read more about the components included in @atom-learning/components at https://design.atomlearning.technology

Working with the repo locally ft. useful scripts

We can run the documentation site locally, with hot-reloading triggered by changes in the library. This offers a low-friction dev environment where we can see the effects of any local changes when applied to all existing components. (Note: hot reloading is currently only supported for changes to Typescript/.tsx files, not markdown files.)

First, run yarn build:docs && yarn dev:lib. yarn build:docs collects the markdown documentation files for each component in lib into its dist directory, where the documentation site can find them. yarn dev:lib compiles the React component library and watches for changes.

In another terminal, run yarn dev:site to run the documentation site at http://localhost:3000, taking the output as the previous commands as its input.

In the future, you only need to rerun yarn build:docs after you either delete the content of lib/dist or you add/update some markdown files inside lib.

Tests

Make sure you run test commands for lib components from within the lib directory, otherwise Jest won't run with the correct configuration and it won't be able to interpret JSX.

jonsherrard/components

Atom Learning Design System

Working with the repo locally ft. useful scripts

Tests