The aim of Akeneo Design System is to help Akeneo designers and developers deliver work faster and better. It provides teams with a common language and encourages adherence to design guidelines with compliant components while offering consistent experience to users.
Designers can validate each component independently and have a global view on available components when designing a new view. Developers don't need to re-implement components on each bounded contexts/projects.
Because components implemented here are used several times they have to be tested unitary and visually.
This project uses Storybook (https://storybook.js.org/) to display components and guidelines.
Preview
Latest version is available here: https://akeneo.github.io/akeneo-design-system/
Locally
To build this project, you need to have the following package installed:
You should execute the following commands:
$ yarn install
$ yarn 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.
To add Akeneo Design System to your React application, run:
$ yarn add akeneo-design-system
Once the package installed, you should provide the theme related to your project at the top of your application:
import React from 'react';
import {ThemeProvider} from 'styled-components';
{/* change with your theme path */}
import {theme} from 'akeneo-design-system/theme/pim'
const App = () => {
return (
<>
<ThemeProvider theme={theme}>
{/* All your application*/}
</ThemeProvider>
</>
)
};
After you can include and render all needed components in your application:
import { Badge } from 'akeneo-design-system'
const MyHomePage = () => (
<div>
<Badge level="primary">Hello Word!</Badge>
</div>
)
To know props of each component, visit dedicated page to the component here: https://akeneo.github.io/akeneo-design-system/, at the playground section of each component, you can edit all properties and click on "Show code".
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.
This repository contains:
- Simple and complex (composition) components used several times in multiple projects/bounded contexts
- Illustrations used several times in multiple projects/bounded contexts
- Icons used by components in this repository
- Basic React hooks
- Specific themes of Akeneo products (PIM, Onboarder, Shared Catalogs)
- Specific view => each project should keep in charge of create her own view logic
- Code relative to infrastructure (fetchers translation, routing, validation ...)
- Logic specific to the domain
We have collected notes on how to contribute to this project in CONTRIBUTING.md.
There is two type of tests, unit and visual tests.
Unit tests can be launched with the following commands:
# Launch only one time
$ yarn test:unit:run
# Launch in watch mode
$ yarn 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.
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.