chore(styles): add playground setup (#3610)

This adds an index.html playground for quickly prototyping with the styles package. It also includes a very simple tokens switch. The dev server is using vite to directly load sass files. Run `pnpm styles:play` to start the playground.
swisspost · Oct 7, 2024 · c01b02e · c01b02e
1 parent ac68940
commit c01b02e
Show file tree

Hide file tree

Showing 4 changed files with 264 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -26,14 +26,15 @@
     "demo:lint": "pnpm --filter design-system-demo lint",
     "docs": "pnpm docs:start",
     "docs:only": "pnpm --filter design-system-documentation start",
-    "docs:start": "pnpm --filter design-system-tokens build && pnpm --filter design-system-documentation... --parallel --stream start",    
+    "docs:start": "pnpm --filter design-system-tokens build && pnpm --filter design-system-documentation... --parallel --stream start",
     "docs:build": "pnpm --filter design-system-documentation build",
     "docs:headless": "pnpm --filter design-system-documentation start:headless",
     "docs:test": "pnpm --filter design-system-documentation test",
     "docs:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-documentation e2e'",
     "docs:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-documentation e2e:watch'",
     "styles": "pnpm styles:start",
     "styles:start": "pnpm --filter design-system-styles start",
+    "styles:play": "pnpm --filter design-system-styles play",
     "styles:build": "pnpm --filter design-system-styles build",
     "styles:lint": "pnpm --filter design-system-styles lint",
     "styles:lint:fix": "pnpm --filter design-system-styles lint:fix",

diff --git a/packages/styles/index.html b/packages/styles/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Styles playground</title>
+    <link id="tokens" rel="stylesheet" href="src/post-tokens-external.scss" />
+    <link rel="stylesheet" href="src/elements/_index.scss" />
+    <link rel="stylesheet" href="src/components/_index.scss" />
+  </head>
+  <body class="p-4">
+    <h1>Styles package playground</h1>
+    <p class="mb-4">
+      Use this playground for quickly developing HTML/CSS components. Run
+      <code style="background-color: lightgrey; padding: 0.125rem 0.25rem; border-radius: 0.25rem"
+        >pnpm styles:start</code
+      >
+      to get going.
+    </p>
+    <label for="tokens-select">Select tokens package: </label>
+    <select
+      name="tokens"
+      id="tokens-select"
+      value="external"
+      class="mb-4"
+      onchange="document.getElementById('tokens').setAttribute('href', `/src/post-tokens-${this.value}.scss`)"
+    >
+      <option value="external">Post external</option>
+      <option value="internal">Post internal</option>
+    </select>
+    <hr />
+
+    <!-- Place your component markup here -->
+    <button class="btn btn-primary">Primary button</button>
+  </body>
+</html>
diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -19,6 +19,7 @@
   },
   "scripts": {
     "start": "gulp watch",
+    "play": "vite --open",
     "build": "pnpm clean && gulp build",
     "unit": "gulp sass:tests",
     "clean": "rimraf out-tsc dist",
@@ -47,8 +48,8 @@
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.0",
     "@swisspost/design-system-icons": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.0",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
@@ -67,7 +68,8 @@
     "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.2",
     "stylelint-scss": "6.5.1",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "vite": "5.4.8"
   },
   "sass": {
     "includePaths": [