nl-design-system/nldesignsystem.nl-storybook

Website van NL Design System in Storybook templates voor visuele regressie tests

nldesignsystem.nl-storybook's Issues

Todo

• Choose a prefix for your organisation. For example: the main NL Design System uses nl-, The Hague uses denhaag-, and you can choose something unique for you to use.
  • Update: Prefix will be kernteam-
• Modify .stylelintrc.json by replacing the prefix example with the prefix you have chosen, in the following rules: custom-property-pattern, selector-class-pattern, keyframes-name-pattern, scss/dollar-variable-pattern and scss/percent-placeholder-pattern.
• Choose and register an npm organisation on npmjs.com, if you haven't already. This is very important to keep your project secure. The core NL Design System uses @nl-design-system/, and you can choose something for yourself. This prevents others from adding their code to your teams codebase.
• Modify all package.json files to use your npm organisation scope. Don't forget the locally linked packages under devDependencies.
• Modify .npmpackagejsonlintrc.json to require your organisation scope in package names, by configuring the valid-values-name-scope property.
• Modify the imports in /packages/storybook/config/preview.tsx and packages/web-components-stencil/src/button/index.scss to use your prefix.

Configuring the GitHub repository

Things we usually do:

• Generate fine grained personal access token in GitHub, with rights to push npm version commits. Use a name that will be clear when the token expires, for example: nl-design-system/example GH_TOKEN. Choose "All repositories". Expand "Account permissions", then for "Contents" select "Read and write".
• Configure GH_TOKEN in Repository tokens, for use in the publish-npm GitHub Action. You might notice the GITHUB_TOKEN already exists, but the GITHUB_ prefix is used by GitHub itself and the token has read-only rights.
• Go to npmjs.com and create an "Access Token" for "Automation". Use a name that serves as hint where to reset the token when it expires, for example: nl-design-system/example NPM_TOKEN. Do not store the token anywhere, just copy it to GitHub once. You can always generate new tokens, and they will be protected by multi-factor authentication.
• Configure NPM_TOKEN in Repository tokens, for use in the publish-npm GitHub Action.
• Configure GitHub repository settings
  • General settings
    • Uncheck "Allow merge commits"
    • Should already be checked: "Allow squash merging"
    • Should already be checked: "Allow rebase merging"
    • Check "Allow auto-merge"
    • Check "Automatically delete head branches"
  • Branches
    • Add rule to protect main branch. Branch pattern should be exactly main.
      • Check "Require a pull request before merging"
      • Check "Require approvals" with at least one approval.
      • Check "Require approval of the most recent reviewable push"
      • Check "Require status checks to pass before merging"
      • Search for the following status checks, and make them required:
      • Make install a required status check.
      • Make lint a required status check.
      • Make test a required status check.
      • Make build a required status check.
      • Optional: configure Chromatic visual regression tests as a required status check.
      • Check "Require linear history"
    • Add rule to protect gh-pages branch, to prevent someone from deleting it accidentally.
• Enable GitHub Pages to host Storybook
  • Go to Pages, choose "Deploy from a branch" with gh-pages as branch with / (root) as folder. If gh-pages is not in the list, make sure the publish-website action succeeds at least once.
  • In the "Code" tab (the home page of your repository), configure the "About" section. Use "your GitHub Pages website" as "Website" of your repository.
  • Configure "nl-design-system" as one of the topics of your repository.