feat: Importing in Next.js project and scoping CSS (#166)

Make it possible to import in and use in a Next.js project

* chore(css): include token-transformer to dependencies

* refactor(css): rename src files to `.module.css`

* chore(css): remove leading `_` from vars

* refactor(react): use css modules

* feat(react): re-export css package

* refactor(react): allow to tree-shake dev only code

* refactor(react): fix css modules inconsistencies

* chore(react): skip creating typings for tests and stories

* chore(css): extract scripts

* chore: package prepare scripts to be able to install from git

* Publish

 - @compassion-gds/[email protected]
 - @compassion-gds/[email protected]

* chore: try fix failing Percy jobs

A comment on GH suggested this workaround until Storybook 7 is officially supported by Percy
percy/percy-storybook#715 (comment)

* refactor(react): update table to match old snaps

* refactor(css): fix storybook preview

* chore(workflow): add percy config

* chore(workflow): add some delay for snapshots

* refactor(css): remove copy-paste mistake

* chore(react): remove unused deps

.github/workflows/storybook.yml

@@ -54,6 +54,18 @@ jobs:
       # We don't need to install all of our dependencies but percy
       - name: Install dependencies
         run: npm i --silent @percy/cli @percy/storybook
+      # We do this because we've not checked out the repo, but only took the artifacts
+      - name: Create Config
+        run: | 
+          tee .percy.yml <<EOF
+          version: 2
+          storybook:
+            waitForTimeout: 1000
+          discovery:
+            network-idle-timeout: 1000
+          snapshot:
+            widths: [375, 1280]
+          EOF
       - name: Capture snapshots
         env:
           PERCY_TOKEN: ${{ secrets[matrix.token] }}

.prettierrc.js

@@ -1,9 +1,9 @@
 module.exports = {
-  arrowParens: "always",
-  endOfLine: "lf",
+  arrowParens: 'always',
+  endOfLine: 'lf',
   printWidth: 80,
   semi: true,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: "es5",
+  trailingComma: 'all',
 };