Shared-UI.

Intro

A simple app displaying canvas design components for fireflies.ai.

How To Set Up

• Open the terminal in the project folder and run:

  npm install bit-bin -g
  npm config set '@bit:registry' https://node.bit.dev
  npm install

or run yarn

  yarn global add bit-bin
  yarn config set '@bit:registry' https://node.bit.dev
  yarn

The dependies will be installed on your local machine.

  npm start

or run yarn

  yarn start

• Koala CSS processor: download Koala from here and install.

• Open the project folder.
  

• Navigate to src/components to view the canvas components.
  

• Open the Koala app
  

• Move the folder of any component you want to work on into the Koala app.
  

• Open the folder in the app and click on the .scss file to set up the compiler on the right sidebar like so:
  

• Right-click on the .scss file and set the output path of the compiled file.
  

• Set the output path to the .module.css file in the folder: eg - toggle-button.module.css

• Any change in the scss file will be compiled directly to the module.css file. All style changes should be made in the scss file, Koala will compile it into css.

How To Edit Canvas component.

• Request Sam to add you to the bit collection.
• Pull this repo and follow the set up guide.
• Make changes to the file.
• Open terminal and run:

  bit status

• If an update is required for any of the component, run:

  bit import

• If all changes are complete, run:

  bit tag --all --patch

• After tagging, export the component to bit:

  bit export sudo.firefliesai

Conclusion

You just completed the guide. For more info on how to use bit.dev visit the docs.