Dulux UI
A design system for Dulux.
Requirements
Installation
Install Required Dependecies
Dulux UI requires you to install the following dependencies before installing the package.
Inter Font
Install the Inter font by adding the following to the <head> of your project:
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
Tailwind CSS
Install the tailwindcss library by following the instructions here: Tailwind Installation.
Make sure you add the following tailwind.config.js to your projects root directory:
const tailwindConfig = require("dulux-ui/tailwind/tailwindConfig");
module.exports = {
purge: [],
theme: {
...tailwindConfig.override,
extend: { ...tailwindConfig.extend },
},
variants: {},
plugins: [],
};
Note: you will need to configure the purge paths in the config. This is so tailwind can remove all the unused CSS to keep file size smaller.
Installing the Dulux-UI package
Follow the instructions below to install the dulux-ui package on your project:
yarn add dulux-ui
or
npm install dulux-ui --save
Development Installation
1.) Clone the repository to your local environment
git clone repo
2.) CD into the dulux-ui directory
4.) Run the yarn command to install all required dependencies for the project
yarn
5.) Run the command below to start up the storybook dev server
yarn dev
If you experience any issues during the setup of this project. Please contact the developer team below:
Commands
Please see all CLI commands below:
yarn size - check the size of exported package
yarn storybook - start the local storybook server
yarn build-storybook - build storybook
yarn dev - start the local storybook server
yarn lint-components-check - lint all components with ESLint
yarn lint-components-fix - fix ESLint issues with components (where possible)
yarn format-check - check all project code for prettier formatting
yarn format-fix - fix all project code with prettier formatting rules
yarn test - runs both eslint and prettier linting
yarn clean-build - cleans the build directories /esm and /commonjs
yarn build-esm - builds package esm directory with babel
yarn build-commonsjs - builds package commonjs directory with babel
yarn build - cleans and builds both /esm and /commonjs
yarn publish-package - publishes the package to nom
Development
Dulux UI is built both using Storybook and React.
Please refer to the Storybook documentation to learn more about how to document components.
Building a component
Components are a great way to split the user interface into independent, reusable pieces. Dulux UI components are very small atomized components that are shared across multiple Dulux projects. Eg Headings, Text, Spacing, Buttons.
If a component is specific to a project, then it should not be built into Dulux UI, and instead built into the project itself.
Note: Please ensure that you are following the steps outlined in the contributing section when adding to code to this project.
To create a component on this project follow the steps below:
1.) Under the /src/components directory, create the following folders and sub folders for your component. Note: we are using 'Heading' as the component name.
/src
/components
/Hero
/src
Heading.jsx
/stories
Heading.stories.js
src/Heading.jsx - This is the JSX file where the component is built. For more information on building a react component, visit the React Docs. An example of a basic component is shown below:
import React from "react";
import PropTypes from "prop-types";
const Heading = (props) => {
const { text } = props;
return (
<div>
<h1>{text && text}</h1>
</div>
);
};
Heading.propTypes = {
text: PropTypes.string,
};
Heading.defaultProps = {
text: "",
};
export default Heading;
stories/Heading.stories.js - This is the Storybook file which documents the use of the component. The stories are purely for documentation and presentation of components and will only ever be shown on Storybook. To read more on how to write stories, please visit the Storybook Docs. An example of a basic stories file can be seen below:
import React from 'react';
import Heading from '../src/Heading';
export default {
title: 'Components/Heading',
component: Heading,
}
export const H1 = () => <Heading size="h1" text="Hello World" />;
export const H2 = () => <Heading size="h2" text="Hello World" />;
export const H3 = () => <Heading size="h3" text="Hello World" />;
export const H4 = () => <Heading size="h4" text="Hello World" />;
export const H5 = () => <Heading size="h5" text="Hello World" />;
export const H6 = () => <Heading size="h6" text="Hello World" />;Testing
Pre-commit
When you commit code, your code is automatically checked using both ESLint and Prettier. If your code does not pass the checks then it cannot be committed. You will need to fix the errors or warnings before committing the code.
Both the ESLint and Prettier configuration will be explained in more detail below:
ESLint
ESLint is our javascript linter. It is able to lint all of our javascript code including our react components. Our ESLint configuration has been set to follow the Airbnb javascript style guide, which are a default set of great standards. You can read more about the rules here.
Prettier
Prettier is our code formatter. It is able to check and fix all of our code formatting across the project to it is easy to read and follows the project standards. It uses the default config set by Prettier.
Text editor plugins for ESLint and Prettier
It is recommended that you install both the ESLint and Prettier plugins for your text editor of choice.
The ESLint plugin will check your code as you type and let you know if it is going to pass based on our config. Usually it lets you know if there is code that you need to rewrite or if an error exists.
The Prettier plugin will also check your code and let you know if the formatting does not match our config. You can easily set your text editor to format the code with prettier every time you save the file. Alternativly you can run yarn format-fix to automatically fix formatting in all files across the project.
Contributing
This project uses the Git Flow workflow which you can read more about here.
1.) Follow the installation section above to setup the project
2.) Using GIT, create a new feature branch from develop using the following format:
feature/[jira-ticket-number]-feature-name
Example: feature/DBCW-999-button-component
Try to keep the feature name simple and digestible.
3.) Work on code changes
4.) Once you have finished a small piece of code, commit the changes in git using the following commit message format:
DBCW-999 - Complete styling of the button component.
A feature can have many commits, as long as it follows the format above.
Usually it is best to commit code in small sizable chunks to prevent any one commit from being to large. However sometimes this isnt possible and some commits may be larger in size.
5.) When you think the feature branch is complete, submit a pull request
Pull requests require at least 2 other developers to review and approve the code before it can be merged into develop. This is to ensure solid code standards and pick up on anything that may have been missed. Normally this requires the developer to reply with a +1 or
If another developer has an issue with the code. It is up to the developer who submitted the pull request to fix the issues and commit them again for review.
Please tag the relevant developers in the pull request so they are notified.
6.) Once the pull request has passed code review, you can merge it into the develop branch