dulux-ui

v1.0.13

Published

3 years ago

A design system and base components for Dulux.

Downloads

0High
0Medium
0Low

drewkennelly

design system ui components react

Dulux UI

A design system for Dulux.

Requirements

NodeJS

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

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 :thumbsup:

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