Environment setup

Storybook 📖

This project is developed using Storybook - an open source tool for building UI components in isolation. Our hosted storybook showcases the current library of iot-cardboard-js components. Learn more about Storybook.

Note: Stories which require authentication or API interaction can be found in the local development storybook.

Things to install

• node - 14.19 - download
• npm - 8.3.1 - (upgrade from default v6 that comes with node using npm install -g npm@8.3.1)
• git - https://git-scm.com/download

Setting up local development

1. Install the above dependencies
2. Clone this repository.
3. Open this project in VS code
4. Install the recommended VS Code extensions
5. Add 127.0.0.1 <your_callback_url> to your hosts file. A valid callback URL is required for auth tokens in local development.
   • Windows hosts file path: C:\Windows\System32\drivers\etc
   • Mac hosts file path: /etc/hosts
6. npm ci to install this project's dependencies
7. Create a secrets.user.js file in the .storybook/ folder using the secrets.placeholder.js file as a template.
8. npm run storybook starts the local development storybook. Navigate to the callback URL you entered in the secrets.user.js file to see the development storybook!

Note: If you have any questions about setting up your hosts file, configuring your development secrets, or any other local development setup issues, please post in the Q&A forum here

Setup git

If you haven't used git on your machine run these commands in your console so you can contribute. git config --global user.name "<First> <Last>" git config --global user.email "<email>@microsoft.com"

Important npm scripts

Command (prefix with npm run)	Effect
build	Bundles library with rollup.js
storybook	Starts Storybook UI component explorer
generate <component_name>	Creates template files for new component
test	Run jest test suite
test:watch	Run tests in hot-reloading watch mode
lint	Formats code to conform to prettier and stylelint format
lint:check	Checks for eslint, prettier, and stylelint formatting errors/warnings.

Recommended VS Code extensions

We recommend you install the following vs-code extensions to streamline the code quality and linting process.

Name	Purpose
Prettier - Code formatter	Enforces a consistent style by parsing your code and re-printing it. To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language. To allow for auto-linting on file save, you must have the default formatter set as prettier-vscode and have Editor: format on save checked. These settings can be changed in your VS Code preferences.
ESLint	Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
stylelint	A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint

Contributor License Agreement 📃

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

Code of conduct 📏

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.