/hache-design-system

An attempt of doing a design system with (at least) ten lines of codes per day

Primary LanguageJavaScript

hache-design-system

An attempt of doing a design system.

Why this?

Check the challenge.

Design System

The implementation to be done here will be based on https://ant.design, a Chinese product. Style guide at https://www.figma.com/file/JltJT3Uda92nX1yiiCYBOG/Ant-Design-System-UI-Kit-(1.0)-(Preview)?node-id=322%3A22090.

Components

Notes

How to?

Start this project

This is based on create-react-app so just follow their instructions.

npm install && npm start

Run tests

npm run test

Setup my IDE (in case you're using one)

Configs for VSCode

Create a jsconfig.json file at root level and put this:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

That should allow VSCode to detect the folders inside src as "aliases" (so you can avoid the ../../mystuff imports).

Todo

  • Add tests to the new component.
  • Add dismissable alert functionality.
  • Try to fix the issue with author's name in git commits
  • Add styles to alert.
  • Add onDismiss callback. No need to: if the alert needs it, then I'll add it. Not before.
  • (Alert) Add support for custom content
  • Find out how to setup aliases within a create-react-app (probably will imply VSCode changes) .
  • Add documentation for Alert component.
  • Set color palette based on ant.design.
  • Set Icons.
  • Complete TODO's in Icons.
  • Adapt Alert to new design system.