feat(all): #1096 ssr (#1103)

.github/workflows/compile.yml

@@ -26,8 +26,5 @@ jobs:
       - name: Install modules
         run: yarn
 
-      - name: Generate tokens
-        run: yarn tokens:generate
-
       - name: Run Compile
-        run: yarn compile
+        run: yarn build:ui-library

.node-version

@@ -1 +1 @@
-18
+18.18.0

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Example App",
+      "skipFiles": ["<node_internals>/**"],
+      "args": ["./dist/server.js"],
+      "runtimeArgs": ["--enable-source-maps", "--conditions=development", "--watch"],
+      "preLaunchTask": "js-example-app::build:dev",
+      "cwd": "${workspaceFolder}/packages/js-example-app"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "shell",
+      "command": "yarn build:dev --watch",
+      "options": {
+        "cwd": "packages/js-example-app"
+      },
+      "group": "build",
+      "problemMatcher": ["$tsc-watch"],
+      "label": "js-example-app::build:dev",
+      "isBackground": true
+    }
+  ]
+}

README.md

@@ -202,7 +202,7 @@ component can also be viewed
    ```
 5. Now start up your app
    ```sh
-   $ yarn start
+   $ yarn start:storybook
    ```
 
 > Note: This command will also open up Storybook locally. This provides you with a full list of available components
@@ -260,7 +260,7 @@ your first icon:
    ```
 2. To check that your icon has been added run your project locally and inspect the Icons tab:
    ```sh
-   $ yarn start
+   $ yarn start:storybook
    ```
 
 #### Changing Icons
@@ -271,8 +271,7 @@ It is also possible to just change existing icon file without renaming it.
 3. Replace the `<svg>` and `<path>` tags with yours
 4. Compile and run your project locally with:
    ```sh
-   $ yarn compile:icons
-   $ yarn start
+   $ yarn start:storybook
    ```
 5. If now you navigate to the local Storybook and inspect Icons tab, you will see that the icon `blrBook` is updated
 
@@ -310,7 +309,7 @@ const defaultParams: BlrCheckboxType ={
 To check that changes have applied do the following:
 1. Run you project locally with:
    ```sh
-   $ yarn start
+   $ yarn start:storybook
    ```
 2. Navigate to the Checkbox tab in your local Storybook
 3. Check the checkbox

docs/CONTRIBUTING.md

@@ -142,7 +142,7 @@ Please, before submitting any contribution, be sure that your branch is passing
 
 ```bash
 yarn test
-yarn compile
+yarn build:ui-library
 ```
 
 

package.json

@@ -5,24 +5,17 @@
   "main": "",
   "types": "",
   "scripts": {
-    "start": "yarn tokens:generate && yarn workspace @boiler/ui-library start:storybook",
-    "build:storybook-and-js-example": "yarn build:storybook && yarn build:js-example:prod",
-    "join-publish:storybook-and-js-example": "cp -R packages/ui-library/storybook-static dist && cp -R packages/js-example-app/dist dist/js-example-app",
-    "build:storybook": "yarn workspace @boiler/ui-library build:storybook",
-    "serve:js-example": "yarn workspace @boiler/js-example-app serve",
-    "build:ui-library": "yarn workspace @boiler/ui-library build && yarn workspace @boiler/ui-library compile",
-    "build:js-example": "yarn build:ui-library && yarn workspace @boiler/js-example-app build",
-    "build:js-example:prod": "yarn build:ui-library && yarn workspace @boiler/js-example-app build:prod",
+    "start:storybook": "yarn tokens:generate && yarn compile:icons && yarn workspace @boiler/ui-library start:storybook",
+    "start:js-example-app": "yarn workspace @boiler/js-example-app start:dev",
+    "build:storybook": "yarn tokens:generate && yarn compile:icons && yarn workspace @boiler/ui-library build:storybook",
+    "build:ui-library": "yarn tokens:generate && yarn compile:icons && yarn workspace @boiler/ui-library build && yarn workspace @boiler/ui-library compile",
     "lint": "yarn workspace @boiler/ui-library lint",
     "format": "yarn workspace @boiler/ui-library format:eslint && yarn workspace @boiler/ui-library format:prettier",
-    "test:ui-library": "yarn workspace @boiler/ui-library test",
-    "build-and-test:ui-library": "yarn build:ui-library && yarn workspace @boiler/ui-library test",
-    "test": "yarn build-and-test:ui-library",
+    "test": "yarn build:ui-library && yarn workspace @boiler/ui-library test",
     "doc:install": "deven-documentation-skeleton install",
     "doc:check": "deven-documentation-skeleton check",
     "doc:update": "deven-documentation-skeleton update",
     "compile:icons": "yarn workspace @boiler/icons compile:icons",
-    "compile": "yarn workspace @boiler/ui-library compile",
     "analyze": "yarn workspace @boiler/ui-library analyze",
     "tokens:generate": "yarn workspace @boiler/figma-design-tokens tokens:generate",
     "prepare": "husky install"
@@ -47,7 +40,6 @@
     "@babel/plugin-transform-class-properties": "^7.23.0",
     "@babel/preset-env": "^7.23.0",
     "@babel/preset-typescript": "^7.23.0",
-    "@boiler/figma-design-tokens": "0.0.1",
     "@commitlint/cli": "17.4.2",
     "@commitlint/config-conventional": "17.4.2",
     "@deven-org/documentation-skeleton": "^2.1.0",
@@ -80,7 +72,6 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.1.0",
     "lit-analyzer": "^2.0.2",
-    "lit-html": "^2.6.1",
     "lodash.camelcase": "4.3.0",
     "mini-css-extract-plugin": "^2.7.2",
     "pa11y-ci": "3.0.1",
@@ -97,21 +88,20 @@
     "stylelint-config-standard": "^29.0.0",
     "svgo": "^3.0.2",
     "ts-lit-plugin": "^2.0.1",
-    "ts-node": "^10.9.1",
     "typescript": "^5.3.0",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+    "webpack-merge": "^5.10.0",
+    "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
-    "@lit-labs/react": "^1.1.1",
     "http-server": "^14.1.1",
-    "lit": "^2.7.4",
     "nested-css-to-flat": "^1.0.5",
     "rimraf": "^5.0.5"
   },
   "engines": {
-    "node": "^18",
+    "node": "18.18.0",
     "yarn": "^4.1.0"
   }
 }

packages/figma-design-tokens/config/generate-index-files.mjs

@@ -43,7 +43,7 @@ themes.array.map((theme) => {
     (item) => `export {${convertToCamelCase(item.split('.')[0])}Wrapped as ${convertToCamelCase(item.split('.')[0])}}`
   );
 
-  const fileOutPut = `import {wrapValuesWithCss} from '../../utils/wrap-values-with-css';
+  const fileOutPut = `import {wrapValuesWithCss} from '../../utils/wrap-values-with-css.js';
       ${importsPart.join('\n')}
   
       ${constsPart.join('\n')}

packages/icons/.gitignore

@@ -0,0 +1,2 @@
+icons-optimized
+*.generated.*