feat: tailwind theme & Vue base components extracted to own NPM packa…

…ges (specklesystems#1576)

.circleci/config.yml

@@ -24,15 +24,20 @@ workflows:
               only: /.*/
 
       - test-frontend-2:
-          filters: &filters-frontend-2
-            tags:
-              # frontend-2 prefix only
-              only: /^frontend\-2.*/
+          filters: *filters-allow-all
 
-      - chromatic:
+      - test-ui-components:
+          filters: *filters-allow-all
+
+      - frontend-2-chromatic:
           context:
             - chromatic
-          filters: *filters-frontend-2
+          filters: *filters-allow-all
+
+      - ui-components-chromatic:
+          context:
+            - chromatic-ui-components
+          filters: *filters-allow-all
 
       - get-version:
           filters: *filters-allow-all
@@ -59,6 +64,7 @@ workflows:
       - docker-build-frontend-2:
           filters: *filters-build
           requires:
+            - test-frontend-2
             - get-version
 
       - docker-build-webhooks:
@@ -219,6 +225,9 @@ workflows:
             - npm-registry
           requires:
             - get-version
+            - test-server
+            - test-ui-components
+            - test-frontend-2
 
 jobs:
   get-version:
@@ -374,7 +383,7 @@ jobs:
 
   test-frontend-2:
     docker:
-      - image: cimg/node:16.15-browsers
+      - image: cimg/node:18.16.0-browsers
     resource_class: xlarge
     steps:
       - checkout
@@ -411,10 +420,59 @@ jobs:
           command: yarn storybook:test:ci
           working_directory: 'packages/frontend-2'
 
-  chromatic:
+  test-ui-components:
+    docker:
+      - image: cimg/node:18.16.0-browsers
+    resource_class: xlarge
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-server-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn
+
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-server-{{ checksum "yarn.lock" }}
+          paths:
+            - .yarn/cache
+            - .yarn/unplugged
+
+      - run:
+          name: Build public packages
+          command: yarn build:public
+
+      - run:
+          name: Lint tailwind theme
+          command: yarn lint
+          working_directory: 'packages/tailwind-theme'
+
+      - run:
+          name: Lint ui components
+          command: yarn lint
+          working_directory: 'packages/ui-components'
+
+      - run:
+          name: Lint component nuxt package
+          command: yarn lint
+          working_directory: 'packages/ui-components-nuxt'
+
+      - run:
+          name: Install Playwright
+          command: cd ~ && npx playwright install --with-deps
+
+      - run:
+          name: Test via Storybook
+          command: yarn storybook:test:ci
+          working_directory: 'packages/ui-components'
+
+  frontend-2-chromatic:
     resource_class: medium+
     docker:
-      - image: cimg/node:16.15
+      - image: cimg/node:18.16.0
     steps:
       - checkout
       - restore_cache:
@@ -441,6 +499,36 @@ jobs:
           command: yarn chromatic
           working_directory: 'packages/frontend-2'
 
+  ui-components-chromatic:
+    resource_class: medium+
+    docker:
+      - image: cimg/node:18.16.0
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-server-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn
+
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-server-{{ checksum "yarn.lock" }}
+          paths:
+            - .yarn/cache
+            - .yarn/unplugged
+
+      - run:
+          name: Build shared packages
+          command: yarn build:public
+
+      - run:
+          name: Run chromatic
+          command: yarn chromatic
+          working_directory: 'packages/ui-components'
+
   vulnerability-scan:
     # snyk can undertake most types of scans through GitHub integration
     # which does not require integration with the CI

.gitignore

@@ -60,3 +60,4 @@ packages/server/.vscode/*.log
 .cache_ggshield
 
 storybook-static
+build-storybook.log

lint-staged.config.js

@@ -11,7 +11,9 @@ module.exports = {
       // Filter out types in object loader
       '**/packages/objectloader/types/**/*',
       // Filter out nuxt plugin templates
-      '**/templates/plugin.js'
+      '**/templates/plugin.js',
+      // ui-components ignore
+      '**/packages/ui-components/utils/tailwind-configure.d.ts'
     ])
 
     return 'eslint --cache --max-warnings=0 ' + finalFiles.join(' ')

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "build": "yarn workspaces foreach -ptv run build",
     "build:public": "yarn workspaces foreach -ptv --no-private run build",
+    "build:tailwind-deps": "yarn workspaces foreach -iv -j unlimited --include '{@speckle/shared,@speckle/tailwind-theme,@speckle/ui-components}' run build",
     "lint": "eslint . --ext .js,.ts,.vue --max-warnings=0",
     "helm:readme:generate": "./utils/helm/update-documentation.sh",
     "prettier:check": "prettier --check .",
@@ -33,6 +34,7 @@
     "cm": "cz"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.0",
     "@swc/core": "^1.2.222",
     "@types/eslint": "^8.4.1",
     "commitizen": "^4.2.5",

packages/frontend-2/Dockerfile

@@ -11,12 +11,18 @@ COPY package.json yarn.lock ./
 COPY packages/viewer/package.json ./packages/viewer/
 COPY packages/objectloader/package.json ./packages/objectloader/
 COPY packages/shared/package.json ./packages/shared/
+COPY packages/ui-components/package.json ./packages/ui-components/
+COPY packages/ui-components-nuxt/package.json ./packages/ui-components-nuxt/
+COPY packages/tailwind-theme/package.json ./packages/tailwind-theme/
 COPY packages/frontend-2/package.json ./packages/frontend-2/
 COPY packages/frontend-2/type-augmentations ./packages/frontend-2/ 
 
 COPY packages/objectloader ./packages/objectloader/
 COPY packages/viewer ./packages/viewer/
 COPY packages/shared ./packages/shared/
+COPY packages/ui-components ./packages/ui-components/
+COPY packages/ui-components-nuxt ./packages/ui-components-nuxt/
+COPY packages/tailwind-theme ./packages/tailwind-theme/
 COPY packages/frontend-2 ./packages/frontend-2/
 
 RUN yarn workspaces focus -A