dlabs-design-system-demo
v1.1.2
Published
Welcome to the DLabs Design System brought to you by DLabs.
Downloads
3
Readme
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:
- Install Git: https://git-scm.com/downloads
- Install Node.js: https://nodejs.org/en/download/
- Install Yarn: https://yarnpkg.com/getting-started/install
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
andcss
files to create your component. - Add stories! Here you will show all the scenarios your component is made for, be creative.
- Inside the
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:
- Storybook main site - learn more about Storybook and what they offer.
- Storybook guides site - Check the guides so you can take a look of what can you do with storybook
- Storybook tutorials site Check the latest and very complete tutorials from Storybook.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
This is a Next.js project bootstrapped with create-next-app
.