DLABS Design System
Welcome to the DLabs Design System brought to you by DLabs.
Tailored for building DLabs apps: Using the Dlabs Design System markup and CSS framework results in UIs that reflect the DLabs look and feel.
Want to see the project hosted live? Go to {TODO: ADD PROD DOMAIN}
Pre Requisites
You'll need the following installed:
Quick start
Clone the project with
git clone https://github.com/DeAceroDLabs/design-system.git
Change into the design-system
folder using
cd design-system
Install the dependencies using
yarn install
You can also use npm
npm install
For running the development server
yarn storybook
Open http://localhost:6006/ with your browser to see the result.
You can edit the components or add new ones in the src/stories
folder.
How to colaborate
If you are assigned with creating a new component for the design system, there are these simple steps.
-
Create the branch where you will build your component. PLEASE don't do it directly con development.
git checkout -b feature/[jira_ticket] // for a new component or adding extra functionality 🔥
git checkout -b fix/[jira_ticket] // for fixing a bad bahaviour with any component 👩🚒
git checkout -b chore/[jira_ticket] // for other stuff like refactoring, moving stuff... 👩🎨
-
Develop your component.
- Inside the
src/stories
folder, create a new folder with the name of your new component. - Inside your folder create a file for the component with
.tsx
extension, one more for the .css
and lastly the one for stories using .stories.ts
. - Start with your
tsx
and css
files to create your component. - Add stories! Here you will show all the scenarios your component is made for, be creative.
-
Create the pull request for your new feature or fix. Be sure to ask your teammates for a deep review.
Learn More
To learn more about Storybook, take a look at the following resources:
To learn more about Next.js, take a look at the following resources:
This is a Next.js project bootstrapped with create-next-app
.