Skip to content

Latest commit

 

History

History
229 lines (155 loc) · 6.17 KB

README.md

File metadata and controls

229 lines (155 loc) · 6.17 KB
Raw

📔 Table of Contents

🌟 About the Project

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.

📷 Screenshots

Screenshot of Button border, padding and spacing specifications Screenshot of Select and Tag Components

👾 Tech Stack

🧩 Components

  • Buttons
  • Cards
  • Dropdowns
  • Tags
  • Inputs
  • Check box
  • Search Bar
  • Sidebar
  • Alert
  • Banner
  • Tooltip

🎨 Figma

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';

🧰 Getting Started

‼️ Prerequisites

🏃 Run Locally

Clone the project

  git clone git@github.com:labcodes/confetti-ds.git

Go to the project directory and instal its dependencies

  npm install

Starting the server

The project will run at localhost:8000

  npx turbo start

Alternatively, you can perform the commands below:

  cd apps/docs
  npm start

🧪 Running Tests

To run tests, run the following command inside at any folder

  npx turbo test

⚙️ Running the Build

In order to run the application build, run the following command inside at any folder

  npx turbo build

:engine: Deployment

We use Netlify for running checks for the review apps and deployment.

👀 Continous 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.

👀 Usage

You can install and use Confetti on your project via npm. Instructions on Confetti's package README.

⚠️ License

Distributed under the MIT License. See LICENSE file for more information.

🤝 Contact

Labcodes Software Studio - Linkedin - contato@labcodes.com.br

💎 Acknowledgements