Confetti is Labcodes Software Studio's Design System for digital experiences and products. It consists of two component libraries: one for design, in Figma, and another in React, in Storybook.
- Buttons
- Cards
- Dropdowns
- Tags
- Inputs
- Check box
- Search Bar
- Sidebar
- Alert
- Banner
- Tooltip
Confetti's design specifications can be found on Figma.
Nowadays, the Confetti imports some icons from the Fluent UI repository. The @fluentui/react-icons are listed as a dev dependency, so the usage and the import must follow the Fluent UI guidelines. The all the Confetti icons at size of 20 and with the Regular theme as following:
Code20Regular
(...)
if (type === "Code") IconComponent = Code20Regular;However, if you wish to import an Icon that is not listed at the Confetti's list you can import it as code below:
import { AccessTimeFilled20Regular } from '@fluentui/react-icons';Hipotetically, you also might need to import an Icon with another size or theme, so you can import as the following example:
import { AccessTime24Filled } from '@fluentui/react-icons';Clone the project
git clone git@github.com:labcodes/confetti-ds.gitGo to the project directory and instal its dependencies
npm installStarting the server
The project will run at localhost:8000
npx turbo startAlternatively, you can perform the commands below:
cd apps/docs
npm startTo run tests, run the following command inside at any folder
npx turbo testIn order to run the application build, run the following command inside at any folder
npx turbo buildWe use Netlify for running checks for the review apps and deployment.
We use the manage of Confetti CI is Github Actions, which runs all the tests before opening a Pull Request. However, the deployment process itself is managed by the Netlify platform. To check our configurations, visit this link with the configuration file source and the Netlify setup file.
You can install and use Confetti on your project via npm. Instructions on Confetti's package README.
Distributed under the MIT License. See LICENSE file for more information.
Labcodes Software Studio - Linkedin - contato@labcodes.com.br