rail-tech-ui

Building and testing

npm install
npm run build # not actually needed for testing
npm test

Development within Glorbit

npm run watch

Building Figma Tokens

Downloading from Figma

1. From Figma settings, ensure your account has "Dev seat" listed
2. Open the "Glides/Orbit Design Library" in Figma
3. In the bottom toolbar, click "Dev Mode"
4. In the Figma right-hand sidebar, click "Plugins" and then "Prism Token Exporter - W3C Token JSON" (if the plugin has not been saved, open the Prism Token Exporter community plugin and click the bookmark icon)
5. Click "Download Tokens" and save

Importing into rail-tech-ui

1. Unzip the design-tokens.zip file previously downloaded
2. Copy the contents above to assets/figma-tokens/ (overwriting existing files)
3. TEMP: check for any "hover" states in the JSON files and manually delete them (temporary workaround)
4. Run npm run process-tokens to invoke process-figma-tokens.ts, which will generate variables.*.css stylesheets in assets/css/, as well as tokens.js, which will be used to build the Tailwind theme
5. Manually update tailwind.config.ts following the hierarchy and casing conventions for keys, using the values defined in tokens.js

Important about npm link

If running a local copy within glides or orbit using npm link, make sure to ALSO run:

npm link ../glides/node_modules/react ../glides/node_modules/react-dom

within rail-tech-ui to ensure that they're using the same react. Otherwise, the ladder will error out on load!

This assumes that rail-tech-ui and glides share a parent directory. If developing against orbit, change glides to orbit.