Package Exports
- @apolitical/styleguide2
- @apolitical/styleguide2/build/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@apolitical/styleguide2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
This project was bootstrapped with Create React Library.
All library files are located inside src/lib folder.
Inside src/demo folder, you can test your library while developing.
Available Scripts
In the project directory, you can run:
npm figmagic or yarn figmagic
Reads the styles defined in design system on figma and re-creates the Token folder in the src folder.
Before running this file, you would need to make sure you have correct values in your .env. This can be found on lastpass under "styleguide .env"
There are some files within the Tokens folder that are not auto-generated so when you run the command you have to recreate them. They are:
- breakpoints.js file.
- index.js file to export all the files within that folder.
- mobileFontSizes.js export all mobile fonts
Tip: copy and paste these files somewhere before running the command
In the changelog, make a note of whats been added to the folder or removed so we can keep track. This is not created by default.
After the script is run, change the module.exports in the tokens directory to export default and fix any formatting changes.
npm start or yarn start
Runs the library in development mode. Open http://localhost:3000 to view it in the browser.
npm run test or yarn run test
Runs the test watcher in an interactive mode.
npm run build or yarn build
Builds the library for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
npm run storybook or yarn start:storybook
Starts the storybook components explorer on port 6006. Storybook is hosted at https://apolitical.gitlab.io/node-modules/apolitical-styleguide/
npm publish
Publishes the library to NPM.
Typescript
Troubleshooting
Developing locally
You will probably run into an error while developing saying you cannot have two Reacts in one app. This resource explains the issue in detail and how to solve it by linking react.
When you make changes in the Styleguide, you need to run yarn build in order for the changes to be reflected in the
UI using Styleguide
Usage of other libraries within your library
- Add the library as a peer dependency in package.json (effectively requiring the calling project to provide this dependency)
- Add the library as a dev dependency in package.json (effectively allowing this library to successfully build without complaining about not having this dependency)
- Add the library to the externals config in your webpack.config file(s). By default, only react and react-dom are there, meaning that those are the only two libraries that you can use within your new shared library.