APP-2072 Move prime to packages/legacy in a pnpm workspace. (#269)

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install 🔧
         uses: ./.github/actions/setup
       - name: Run lints and checks
-        run: pnpm run check
+        run: pnpm -C packages/legacy check
 
   build:
     runs-on: ubuntu-latest
@@ -25,16 +25,16 @@ jobs:
       - name: Install 🔧
         uses: ./.github/actions/setup
       - name: Build 🏗️
-        run: pnpm run build
+        run: pnpm -C packages/legacy build
       - name: Upload npm artifacts
         uses: actions/upload-artifact@v3
         with:
           name: npm-dist
-          path: dist
+          path: packages/legacy/dist
       - name: Upload GitHub Pages artifacts
         uses: actions/upload-pages-artifact@v1
         with:
-          path: prime
+          path: packages/legacy/prime
 
   test:
     timeout-minutes: 20
@@ -46,14 +46,14 @@ jobs:
         with:
           node-version: 16
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm -C packages/legacy playwright-install --with-deps
       - name: Run Playwright tests
-        run: npx playwright test
+        run: pnpm -C packages/legacy test
       - uses: actions/upload-artifact@v3
         if: ${{ always() }}
         with:
           name: playwright-report
-          path: playwright-report/
+          path: packages/legacy/playwright-report/
           retention-days: 30
 
   deploy-npm:
@@ -70,11 +70,12 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: npm-dist
-          path: dist
+          path: packages/legacy/dist
       - name: Publish 🚀
-        uses: JS-DevTools/npm-publish@541aa6b21b4a1e9990c95a92c21adc16b35e9551
+        uses: JS-DevTools/npm-publish@5a85faf05d2ade2d5b6682bfe5359915d5159c6c # v2.2.1
         with:
           token: ${{ secrets.NPM_TOKEN }}
+          package: packages/legacy
 
   deploy-pages:
     if: ${{ github.repository == 'viamrobotics/prime' && github.event_name == 'push' && github.ref == 'refs/heads/main' }}

.gitignore

@@ -9,7 +9,6 @@ lerna-debug.log*
 
 node_modules
 dist
-dist-ssr
 prime
 *.local
 .storybook/workers
@@ -25,5 +24,5 @@ prime
 *.sln
 *.sw?
 /test-results/
-/playwright-report/
-/playwright/.cache/
+playwright-report
+playwright/.cache

README.md

@@ -1,89 +1,29 @@
 # P.R.I.M.E.
 
-Pretty Rad Interactive Modular Elements.
+Pretty Rad Interactive Modular Elements
 
-Made with ❤️ at Viam.
+Made with ❤️ at Viam
 
-## Getting started
+A collection of UI elements.
 
-PRIME is a collection of atomic UI elements, designed to "just work" in any HTML-based environment, regardless of framework or lack thereof. It is a web component library.
+## Packages
 
-## Installation
+[`@viamrobotics/prime`][legacy] - Legacy web components
 
-The PRIME NPM package contains the following necessary exports for usage:
+[`@viamrobotics/prime-core`][core] - Core components. Exported as Svelte components.
 
-- `prime.es.js` or `prime.umd.js` - JS that defines custom elements. ES modules are recommended over UMD.
-- `prime.css` - stylesheet shared by all elements.
+[`@viamrobotics/prime-blocks`][blocks] - Large blocks of UI that often have dependencies like [Threlte][]. Exported as Svelte components.
 
-If using ES modules, import Prime's JS file into your code:
-
-```ts
-import '@viamrobotics/prime';
-```
-
-You must host `prime.css` in a static file server. This is every prime element loads it as a shared stylesheet.
-
-If you are not hosting `prime.css` at the root directory of your domain, you will need to add a PRIME_CONFIG global variable before loading the JS file:
-
-```html
-<script type="module">
-  window.PRIME_CONFIG = {
-    base: '/path/to/static/folder',
-    query: '?v=someCacheBustingHashIfNeeded',
-  };
-</script>
-```
-
-If the necessary `.css` and `.js` files have been added, then no additional imports are needed!
-You can immediately start adding PRIME elements to your app, since prime elements are simply custom HTML elements:
-
-```html
-<v-button label="Hello world!" />
-```
-
-All elements are prefixed with `v-`. This stands for Viam, the cool company where these elements are made.
-
-## Playground
-
-To use the playground, run the following from the main directory:
-
-```bash
-pnpm install
-pnpm start
-```
-
-Or to run in production mode:
-
-```bash
-pnpm run build
-pnpm run serve
-```
-
-## Linting / Testing
-
-To lint and typecheck:
-
-```bash
-pnpm run lint
-pnpm run check
-```
-
-To test:
-
-```bash
-pnpm run test-dev # to test with the playwright debug UI
-# or
-pnpm run test # to test in headless mode
-
-# to run specific tests
-pnpm run test <test-name> # for <test-name>.spec.ts
-```
+[legacy]: https://github.com/viamrobotics/prime/tree/main/packages/legacy
+[core]: https://github.com/viamrobotics/prime/tree/main/packages/core
+[blocks]: https://github.com/viamrobotics/prime/tree/main/packages/blocks
+[threlte]: https://threlte.xyz
 
 ### Browser Compatibility
 
 `PRIME` supports the following browsers:
 
-| ![Chrome][chrome] | ![Firefox][firefox] | ![Edge][edge] | ![Safari][safari] |
+| ![Chrome][] | ![Firefox][] | ![Edge][] | ![Safari][] |
 | ----------------- | ------------------- | ------------- | ----------------- |
 | Latest ✔          | Latest ✔            | Latest ✔      | Latest ✔          |
 

package.json

@@ -1,101 +1,9 @@
 {
-  "name": "@viamrobotics/prime",
-  "version": "0.3.7",
+  "name": "@viamrobotics/prime-repo",
+  "private": true,
   "license": "Apache-2.0",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/prime.umd.cjs",
-  "module": "./dist/prime.js",
-  "types": "./dist/main.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/prime.js",
-      "require": "./dist/prime.umd.cjs"
-    },
-    "./theme": {
-      "import": "./dist/theme.js"
-    },
-    "./prime.css": "./dist/prime.css"
-  },
   "homepage": "http://viamrobotics.github.io/prime",
   "repository": "git://github.com/viamrobotics/prime.git",
-  "packageManager": "[email protected]",
-  "scripts": {
-    "start": "vite dev",
-    "build": "pnpm run build-bundles && pnpm run build-types && pnpm run build-storybook",
-    "build-bundles": "vite build --mode production",
-    "build-types": "tsc --project tsconfig.build.json",
-    "serve": "vite preview --host",
-    "check": "concurrently -g pnpm:check-*",
-    "check-svelte": "svelte-check --tsconfig ./tsconfig.json",
-    "check-vue": "vue-tsc --project ./playground/tsconfig.json",
-    "check-lint": "eslint --quiet \"./**/*.@(js|cjs|ts|svelte)\"",
-    "check-format": "pnpm run _prettier --check",
-    "format": "pnpm run _prettier --write",
-    "_prettier": "prettier \"./**/*.@(js|cjs|ts|svelte|md|mdx|yml|json)\"",
-    "test": "playwright test",
-    "test-dev": "playwright test --debug",
-    "storybook": "storybook dev -p 6006",
-    "storybook-docs": "storybook dev --docs --no-manager-cache",
-    "build-storybook": "storybook build --docs -o prime"
-  },
-  "devDependencies": {
-    "@floating-ui/dom": "^1.2.6",
-    "@floating-ui/vue": "^1.0.0",
-    "@mdi/js": "^7.2.96",
-    "@playwright/test": "^1.32.3",
-    "@storybook/addon-a11y": "^7.0.7",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-docs": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addons": "^7.0.7",
-    "@storybook/blocks": "^7.0.7",
-    "@storybook/html": "^7.0.7",
-    "@storybook/html-vite": "^7.0.7",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.7",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@types/prismjs": "^1.26.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@viamrobotics/eslint-config": "^0.0.4",
-    "@viamrobotics/prettier-config": "^0.0.1",
-    "@viamrobotics/typescript-config": "^0.0.3",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "classnames": "^2.3.2",
-    "concurrently": "^8.0.1",
-    "element-internals-polyfill": "^1.3.0",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-sonarjs": "^0.19.0",
-    "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-svelte": "^2.31.0",
-    "eslint-plugin-tailwindcss": "^3.11.0",
-    "eslint-plugin-unicorn": "^46.0.0",
-    "mdi-svelte-ts": "^1.0.0",
-    "monaco-editor": "^0.37.1",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "prismjs": "^1.29.0",
-    "react": "^18.2.0",
-    "remark-gfm": "^3.0.1",
-    "storybook": "^7.1.0",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
-    "svelte-preprocess": "^5.0.3",
-    "tailwindcss": "^3.3.1",
-    "typescript": "^5.1.6",
-    "vite": "4.3.1",
-    "vue": "^3.2.45",
-    "vue-tsc": "^1.2.0"
-  }
+  "packageManager": "[email protected]"
 }

.storybook/theme.ts → packages/legacy/.storybook/theme.ts

@@ -2,7 +2,7 @@ import { create } from '@storybook/theming';
 
 // @ts-expect-error: TODO(mc, 2023-03-23): are we missing `base` here?
 export default create({
-  brandImage: 'https://www.viam.com/static/logo.svg',
+  brandImage: 'https://app.viam.com/static/images/viam-logo-white.svg',
   fontBase: '"Public Sans", sans-serif',
   appBg: '#333',
 });

CONTRIBUTING.md → packages/legacy/CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to P.R.I.M.E
+# Contributing to `@viamrobotics/prime`
 
 Please follow these instructions for contributing to `PRIME`.
 
@@ -8,7 +8,7 @@ To run the `Storybook` page locally, pull down the project and run:
 
 ```bash
 pnpm install
-pnpm run storybook
+pnpm -C packages/legacy storybook
 ```
 
 More detailed docs exist on [the storybook](https://prime.viam.com).
@@ -18,7 +18,7 @@ More detailed docs exist on [the storybook](https://prime.viam.com).
 To use the component playground, run:
 
 ```bash
-pnpm start
+pnpm -C packages/legacy start
 ```
 
 The playground will open in your browser automatically. End-to-end tests run against the playground.
@@ -41,17 +41,17 @@ Linked below are some articles that provide knowledge for how to best build reus
 To verify that static assets build correctly:
 
 ```shell
-pnpm run build
+pnpm -C packages/legacy build
 ```
 
 You can typecheck and lint using:
 
 ```shell
 # check linting, types, a11y, and other component quality
-pnpm run check
+pnpm -C packages/legacy check
 
 # autoformat code and other files
-pnpm run format
+pnpm -C packages/legacy format
 ```
 
 ### Tests
@@ -63,8 +63,8 @@ To run tests locally:
 npx playwright install --with-deps
 
 # run tests, with optional debugging
-pnpm run test
-pnpm run test-dev
+pnpm -C packages/legacy test
+pnpm -C packages/legacy test-dev
 ```
 
 When adding a test, look for the following files: