Repo owner: @juampy.araneta
This repository contains a React design system with TypeScript support that utilizes Webpack for compilation. The design system includes ui components, as well as styles for shadows, color palettes, typography, etc.
It's the url website for storybook docs.
To use this design system in your React project, follow these steps:
-
Installation: Install the design system package in your project.
yarn add dept-central-lib-client
-
Import the global styles: Import the stylesheet into your root component file.
import 'dept-central-lib-client/dist/styles.css'
-
Import Components: Import the desired components into your React components.
import { Button, Checkbox, Radio } from 'dept-central-lib-client'
-
Usage: Use the components in your JSX as needed.
<Button colorScheme="primary" variant="solid"> Click me </Button>
- We follow Conventional Commits syntax, and use
commitlint
to enforce its appliance.- It's recommended to install any
commitlint
extension in your IDE/editor.
- It's recommended to install any
- We will spell check our commits so that they look good in our change log.
- Depending on the verb in the commit a new release will be created and the package will publish it
Commit message | Release type |
---|---|
fix(pencil): stop graphite breaking when too much pressure applied | Patch Fix Release |
feat(pencil): add 'graphiteWidth' option | Minor Feature Release |
perf(pencil): remove graphiteWidth option BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reasons. |
Major Breaking Release (Note that the BREAKING CHANGE: token must be in the footer of the commit) |
The design system includes a predefined color palette with primary, grayscale, error, warning, and success colors. These can be accessed and customized as needed.
Typography settings, including font family, weights, and sizes, are defined in the design system. You can use these settings to ensure a consistent typography style throughout your application using the provides css classes.
The design system provides CSS classes for different shadow sizes. You can apply these classes to elements to achieve various shadow effects.
<div className="shadowMedium">This element has a medium shadow.</div>
The design system includes Tailwind CSS as a dependency. This allows you to use Tailwind CSS classes in your application. You can also customize the Tailwind CSS configuration to suit your needs.
Learn more about Tailwind CSS here.
The design system includes utility functions, some of them for example are for working with colors, such as getting contrast colors, lightening, and darkening colors.
import {
getContrastColor,
getLightenColor,
getDarkenColor,
getColor,
} from 'dept-central-lib-client/utils'
Feel free to explore and customize these utilities based on your project's needs.
The design system includes Storybook stories for colors, typography, and all the components.
To contribute to the design system, follow these steps:
-
Clone the repository:
git clone https://github.com/deptagency-dar/dept-central-lib-client.git
-
Install dependencies:
cd dept-central-lib-client npm install
-
Make your changes and create a pull request.
This design system includes comprehensive unit tests to ensure the reliability and correctness of its components. The testing is done using Jest and Testing Library. Follow the guidelines below to run and extend the tests.
To execute the unit tests, use the following npm scripts:
-
Run all tests:
npm test
-
Generate test coverage report:
npm run test:coverage
-
Run tests in watch mode:
npm run test:dev
The Jest configuration is defined in the jest.config.js
file. Some key settings include:
- Preset: The preset is set to
ts-jest
for TypeScript support. - Test Environment: The test environment is configured as
jsdom
. - Module Mapper: The module mapper is set up to handle CSS imports using
identity-obj-proxy
. - Setup Files After Env: The setup file includes extended expectations from
@testing-library/jest-dom
. - Test Match: Tests are matched based on the file pattern in the
src/components
directory. - Transform: TypeScript files are transformed using
ts-jest
with the specifiedtsconfig.json
file.