Akeneo Design System

What is a design system?

$3

Welcome to the Akeneo Design System. This comprehensive guide and resource library contains everything you'll need to design with us. The use of the system reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life in their best visual form.

But why it's so important?

$3

As teams grow, it's common for designers to concentrate on discrete areas of an app and solve problems individually and not systematically. It can lead to a fragmented and not consistent visual language.

$3

We created this library to manage all brand and UX components to keep internal and external Akeneo designers and engineers informed and easier to work processes.

$3

Empower your process to create delightful and consistent user experiences across every product and collaborator - Everyone gets the building blocks to contribute right away on every topic.
The aim of Akeneo Design System is to help Akeneo designers and developers deliver work faster and better.

How to see components and guidelines?

This project uses Storybook (https://storybook.js.org/) to display components and guidelines.

Preview

Latest version is available here: https://dsm.akeneo.com

Locally

You should execute the following commands:
``shell
npm install && \
npm run storybook:start
`

Then open http://localhost:6006 on your browser.
You don't have to relaunch the command at each time you create or update a component.

Using Akeneo Design System component in my project

To add Akeneo Design System to your React application, run:
`shell
npm add akeneo-design-system
`

Once the package installed, you should provide the theme related to your project at the top of your application:
`tsx
import React from 'react';
import { ThemeProvider } from 'styled-components';
{/ change with your theme path /}
import { connectorTheme } from "akeneo-design-system";

const App = () => {
return (
<>

{/ All your application/}


)
};
`

After you can include and render all needed components in your application:
`tsx
import { Badge } from 'akeneo-design-system'

const MyHomePage = () => (



)
`

To know the props of each component, visit the dedicated page of the component here: https://dsm.akeneo.com. You can edit all properties and click on "Show code" in the playground section available for each components.

Play around with an hello world react App example

The DSM repository contains an example folder with a minimal React App already configured to be used with the Akeneo Design System.

Go into the example directory
`shell
cd example
`
Install dependencies
`shell
npm install
`
Run the dev server
`shell
npm run dev
`

Feel free to adapt the example/src/App.tsx file and integrate other components of the DSM.

Contribution

This project has been automatically extracted from the following mono-repository: https://github.com/akeneo/pim-community-dev.
If you want to contribute please create a pull request in this repository.

$3

This repository contains:
- Simple and complex (composition) components used several times in multiple products
- Illustrations used several times in multiple products
- Icons used by components in this repository
- Basic React hooks
- Specific themes of Akeneo products (PIM, Onboarder, Shared Catalogs)

$3

- Specific views: each project can specify specific components for specific UI logic.
- Code relative to infrastructure (fetchers translation, routing, validation ...)
- Logic specific to the domain

$3

We have collected notes on how to contribute to this project in CONTRIBUTING.md.

Testing instructions

There is two type of tests, unit and visual tests.

$3

Unit tests can be launched with the following commands:
`shell


Launch only one time

npm run test:unit:run

Launch in watch mode

npm run test:unit:watch
``

Unit test should validate all component behaviors => coverage of 100% is required for component in this project.
Unit tests are in the same directory of the component.

$3

All components in Storybook are automatically tested visually through snapshot comparison.
Normally, stories should describe all possible states, adding manually visual test should be an exception.

Visual tests cannot be launched on your local computer, they are only launched by the continuous integration because the rendering is dependent on the platform.
When you create a new story or you modify the visual of a component, continuous integration will automatically create and assign to you a pull request.