@adapt-design-system/core

adapt-design-system/core

React components that implement ADAPT Design System.

Getting Started

Using the ADAPT Design System in your project

1. Install library

yarn add @adapt-design-system/core styled-components

1. Use <AdaptThemeProvider /> with a theme file and set the global fonts.

import { createGlobalStyle } from 'styled-components';
import { AdaptThemeProvider, Button } from '@adapt-design-system/core';

const GlobalStyle = createGlobalStyle`
  body {
    font-family: ${props => props.theme.fonts.default};
  }
`;

const App = () => (
  <AdaptThemeProvider>
    <>
      <GlobalStyle />
      <Button>Hi!</Button>
    </>
  </AdaptThemeProvider>
);

1. You're ready to go! Import components as you need them. Check out the docs

Developing

Install

1. Install dependencies (monorepo users: remember to be in the /packages/adapt-design-system-core folder).

yarn install

1. To actively develop components, you can run

yarn run build:watch

The build will re-run every time you save changes. Alternatively you can run yarn run build each time you wish to build.

Trying out changes locally

To test out your changes to the DS locally, run npm link in this repo directory to link it locally. Then, in your new consumer project (Gatsby, for example*) run yarn add @adapt-design-system/core (if it's never been installed), then run npm link @adapt-design-system/core to link it to the local version. If you're running the design system the build:watch mode, your project should reload every time you save a change to the DS.

Note for Gatsby, Create React App etc...

You may run into issues where styled-components throws a warning about multiple running instances. This will prevent your project from properly compiling the locally-linked design system. To fix this, you need to edit or add a gatsby-node.js file (for Gatsby users) or edit your webpack config to add the alias below.

Gatsby example:

const path = require('path');
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        'styled-components': path.resolve('./node_modules/styled-components'),
      },
    },
  });
};

Publish new version

To publish a new version run yarn publish-package. If you introduce a breaking change, bump the major version (2.0.3 -> 3.0.0). If you add new (non-breaking) functionality bump the minor version (2.0.3 -> 2.1.0). Otherwise bump patch when adding new icons (2.0.3 -> 2.0.4). You will be asked for a new version.

⚠️ Important!

Don't forget to upgrade the consuming packages, in this case /docs, to make use of the new version. Like so: yarn upgrade @adapt-design-system/core@^2.0.4