Arduino React Components
npm install @arduino/arcsh
npm i @arduino/arc
`
Please note that this package has a peer dependecy on react, react-dom and react-aria, you might need to install.
`sh
npm i react@^17.0.2 react-dom@^17.0.2 react-aria@3.6.0
`
$3
This package also offers Arduino color themes, provided in the themes/themes.css file.
Themes are directly pulled from Figma using the Figma API. As reported on the website "The Figma API supports read access and interactions with Figma files. This gives you the ability to view and extract any objects or layers, and their properties."
This data is fetched as a .json file with the following structure:
- core contains the colors library which defines the hex value for each color name, e.g.: 'tealscale-teal0': '#7fcbcd'
- ide-default, ide-dark, ..., are the different themes available, each containing two types of information:
- mapping between color name and semantic value, e.g.: 'accent-strong': 'tealscale-teal0'
- mapping between variable name of an element and the semantic value, e.g.: 'button-primary-bg-hover': 'accent-strong'
This file is parsed to generate a ColorLibrary, a list of colors associated with their hex value, and DesignTokens, an object in which each variable is associated with all the available themes and each theme is associated with a color defined in the ColorLibrary.
A workflow has been implemented to pull themes weekly from Figma. It is also possible to do it manually.
#### Pull themes manually
Whenever you need to update themes manually, follow these steps:
1. Get the FIGMA_THEME_FILE_ID from the URL of the Figma file
2. Generate your FIGMA_API_ACCESS_TOKEN from Figma
3. Export the environment variables
`sh
export FIGMA_API_ACCESS_TOKEN=xxxxxx && export FIGMA_THEME_FILE_ID=xxxxxx
`
4. Run the script
`sh
npm run update-json-themes
`
#### Generate themes/themes.css file
Once the updated themes are pulled from Figma it's possible to generate the themes/themes.css file using:
`sh
npm run build
`
The generated file will be available in the dist folder. This file will contain a css rule for each theme with internal mapping between all Arduino variables and their values.
An example:
`sh
:root .arc-dark {
--arduino-button-primary-bg: #0ca1a6;
--arduino-button-primary-bg-hover: #7fcbcd;
}
`
Develop
1. Install dependencies with
`sh
npm i
`
2. Build the project with
`sh
npm run build
`
3. to test the components locally, run storybook
`sh
npm run storybook
`
4. to reference a WIP branch from another repo, set the package.json of the other repo to
`json
"dependencies": {
"@arduino/arc": "github:arduino/arc#your-branch",
...
`
Versioning
Versioning is automated, and managed via semantic-release
All the commits that lands to main` must stick with the Angular Commit Message Conventions (which is CaseSensitive!):