@kjetil-hoel/design-system-svelte
v0.0.121
Published
WIP Component library for Statsforvalternes Fellesorganisasjon
Downloads
30
Keywords
Readme
WIP Component library for Statsforvalternes Fellesorganisasjon
Adding or updating dependencies
- In the terminal, navigate to the /packages/svelte folder
- Run
yarn install
Creating new component
- Examine the React code of the equivalent React component 0a. If there is no React code, use your own intuition on how to implement the component and skip to step 4.
- You will have to understand the React implementation in order to create an equivalent implementation in Svelte. You might not be able to use the exact same markup or Javascript logic.
- In the conversion process, ensure to allow for the same props except those props which are React-specific or otherwise not possible/sensible to implement in a Svelte component
- The ComponentName.module.css from the React-equivalent can be directly copy-pasted into the Svelte component's style block
- Add your component's information in the package.json file in the /packages/svelte folder, under the "exports" key. Looking at existing exported components should be enough to understand the pattern to follow.
- Ensure your component is exported from the index.js inside /lib/components
Testing your component
- Add your component to the homepage or a route of your choosing
- Navigate to the /packages/svelte folder
- Run
npm run dev
- In your browser, navigate to the route you placed the component
- You should now be able to iterate over and test your component as you would in a regular Svelte application
Publishing to NPM
- Navigate to the /packages/svelte folder.
- Bump the version number of the package in package.json:
0.0.x + 1
. - Commit and push your changes.
- Use this terminal command to publish:
npm publish --access public
. (This step requires you to be logged in with NPM credentials if you haven't already done so)
Build & Publish Design Tokens
- Navigate to the root folder
- Run
yarn build
1a. You may get errors related to yarn.lock file. You can try to remove the yarn.lock file, and/or runyarn install
- In the /packages/tokens folder, bump the version number of the package in package.json:
0.0.x + 1
. - Navigate to the /packages/tokens folder
- Use this terminal command to publish:
npm publish --access public
. (This step requires you to be logged in with NPM credentials if you haven't already done so)