The Design System 2.0 builds on Material UI (MUI) to provide a maintained and bullet proven set of UI components. It extends on the foundation of MUI to provide additional components documented with Storybook

Intention It is not providing any business logic but instead is meant to help you focus on the business logic by providing comprehensive UI components. It's foundation is Material UI while we extend on it to customize for anynines' needs.

You first need to setup github private package access via confluence.

# yarn
yarn add avarteqgmbh/a9s-design-system

# npm
npm install avarteqgmbh/a9s-design-system

In the project directory, you can run:

Runs the storybook in the development mode.
Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.

Builds the app for production or publishing to the build folder.\

To publish a new version of the Design System, you first need to set a access token. You can find one in Onepassword (NPM avarteq private github package management).

launchctl setenv PKG_ACCESS_TOKEN Github Access Token with Package Read/Write & Repo

Restart your terminal afterwards. Then run:

To build the library and copy the result straight into the node_modules of a local development repo, run

To use MUI premium components like the XGrid or DateRangePicker you need to add a .env file to your root directory and add your MUI License key like this:

REACT_APP_MUI_LICENSE_KEY="..."

Find license key in 1Password as MUI License key, if you don't have access pm DL.

You can use any component from Material UI and simply import it from @anynines/a9s-design-system instead of @mui/material. If a component or type from MUI is not part of the design system you can also import it right from MUI, by default all components should just work fine.

On top of Material UI we have built more helpful components. The documentation can be found here (TODO: Add deployed version of storybook here). Locally you can start storybook with npm run storybook on port localhost:6006.

A React Boilerplate using Typescript proper ESLint and Prettier setup as well as the Design System to quickstart a basic frontend applciation, can be found here.

The Design System comes with a light and dark mode following the anynines Corporate Identity. Anynines team can access the Token System to easily switch to the branding of one of our customers.