Free Bee
free-bee
Demo link:
Access our site at free-bee-design-systems.netlify.app Access our site at Free Bee
Table of Content:
About The App
free-bee is a react + storybook + typescript + rollup app which is being built around to experiment with design systems. We don;t have a precise plan yet but soon we will have one.
Screenshots
Uploading...
Technologies/Plugins
We've used React
, Typescript
, Storybook
, Rollup
, Tailwind
, clsx
, class variance autority(cva)
and other stuff mentioned in package.json
. Feel free to checkout.
Why are we using these technologies/plugins?
Loading...
Setup
- download or clone the repository
- Go to
main
branch - run
npm install
ornpm i
- check
scripts
inpackage.json
to run a command to run the app, run storybook, build the app etc.
Setup a new design system
- download the repository
- Go to
boilerplate/v1
branch - add
git remote
to this downloaded code - push your first commit
Approach
We've kept it very simple and will be following Atlassian's design system and develop some of their components.
- Add Atlassian's coloring system in tailwind here.
- Add Atlassian's typography system in tailwind here.
- Add Popup, Button, Flags like components here.
- Keep adding components until we have a minimal design system ready to implement atleast one of Atlassian's product like JIRA or Confluence.
- Peiodically rollout npm package for same to be used externally.
Tailwind Configuration
At src/utility/theme.json
we have theme configurations, and we make use of this file in tailwind config to set most of the theming values. We will discuss about each here.
NOTE: We will be mentioning only those values which are being used in this project. In future we will be covering those config as well once we start using them.
-
Background color:
background
property in theme.json has different kinds of colors which is used to determine background color of different components like button, labels, progress etc. Checkoutsrc/components/Button
folder for a good intuitive usage of same. NOTE: There are some un-used values which starts after a space. -
Theme color:
theme_color
is used at multiple places. -
Text color:
text_color
is also being used in the same way background is being used. -
Spacing tokens have been added which can be found in
tailwind.config.js
which can be used as a shorthands in various components.
Status
Components | Status |
---|---|
Button | Completed |
Flags | Completed |
Multiple select | Completed |
Lozenges | Completed |
Modal | Completed |
Avatars | Completed |
Input Field | Completed |
Tags | Completed |
Banner | Completed |
Text Field | Completed |
Checkbox | Completed |
Radio | Completed |
Toggle | Completed |
Tabs | Completed |
Menu | Completed |
Dropdown Menu | Completed |
Navigation | In Progress |
Loader | In Progress |
Tooltip | In Progress |
PopUp | In Progress |
Comments | In Progress |
Breadcrumbs | In Progress |
Group Checkbox | Not Started |
Dropdown Menu with Checkbox | Not Started |
Dropdown Menu with Radio Button | Not Started |
Storybook Deployment to github pages
- run
npm run build-storybook
. - run
npm run buildcss
. - run
npm run buildcss-minify
. - run
npm run deploy-storybook
.
Publish to NPM
- run
npm publish
.
Credits
List of contriubutors:
License
MIT license