APP-2280 Add @viamrobotics/prime-core package

.github/actions/setup/action.yml

@@ -5,6 +5,8 @@ inputs:
   node-version:
     description: 'Node.js version to install'
     default: '18'
+  registry-url:
+    description: Registry to configure for publish
 
 runs:
   using: 'composite'
@@ -15,6 +17,7 @@ runs:
       uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
       with:
         node-version: ${{ inputs.node-version }}
+        registry-url: ${{ inputs.registry-url }}
         cache: pnpm
 
     - name: 'Install dependencies'

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install 🔧
         uses: ./.github/actions/setup
       - name: Run lints and checks
-        run: pnpm -C packages/legacy check
+        run: pnpm -r --aggregate-output check
 
   build:
     runs-on: ubuntu-latest
@@ -25,12 +25,17 @@ jobs:
       - name: Install 🔧
         uses: ./.github/actions/setup
       - name: Build 🏗️
-        run: pnpm -C packages/legacy build
-      - name: Upload npm artifacts
+        run: pnpm -r --aggregate-output build
+      - name: Upload npm @viamrobotics/prime artifacts
         uses: actions/upload-artifact@v3
         with:
-          name: npm-dist
+          name: npm-legacy-dist
           path: packages/legacy/dist
+      - name: Upload npm @viamrobotics/prime-core artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: npm-core-dist
+          path: packages/core/dist
       - name: Upload GitHub Pages artifacts
         uses: actions/upload-pages-artifact@v1
         with:
@@ -47,8 +52,8 @@ jobs:
           node-version: 16
       - name: Install Playwright Browsers
         run: pnpm -C packages/legacy playwright-install --with-deps
-      - name: Run Playwright tests
-        run: pnpm -C packages/legacy test
+      - name: Run tests
+        run: pnpm -r --aggregate-output test
       - uses: actions/upload-artifact@v3
         if: ${{ always() }}
         with:
@@ -62,21 +67,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: 'Install Node.js'
-        uses: actions/setup-node@v3
+      - name: Install 🔧
+        uses: ./.github/actions/setup
         with:
-          node-version: 18
-      - name: Download npm artifacts
+          node-version: 16
+          registry-url: https://registry.npmjs.org
+      - name: Download @viamrobotics/prime npm artifacts
         uses: actions/download-artifact@v3
         with:
-          name: npm-dist
+          name: npm-legacy-dist
           path: packages/legacy/dist
-      - name: Publish 🚀
-        uses: JS-DevTools/npm-publish@5a85faf05d2ade2d5b6682bfe5359915d5159c6c # v2.2.1
+      - name: Download @viamrobotics/prime-core npm artifacts
+        uses: actions/download-artifact@v3
         with:
-          token: ${{ secrets.NPM_TOKEN }}
-          package: packages/legacy
-
+          name: npm-core-dist
+          path: packages/core/dist        
+      - name: Publish 🚀
+        run: pnpm publish -r
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
   deploy-pages:
     if: ${{ github.repository == 'viamrobotics/prime' && github.event_name == 'push' && github.ref == 'refs/heads/main' }}
     needs: [check, build, test]

.gitignore

@@ -12,6 +12,7 @@ dist
 prime
 *.local
 .storybook/workers
+.svelte-kit
 
 # Editor directories and files
 .vscode/*

README.md

@@ -19,6 +19,26 @@ A collection of UI elements.
 [blocks]: https://github.com/viamrobotics/prime/tree/main/packages/blocks
 [threlte]: https://threlte.xyz
 
+## Building
+
+```bash
+pnpm -r build
+```
+
+## Linting
+
+```bash
+pnpm -r check
+pnpm -r format
+```
+
+## Testing
+
+```bash
+pnpm -C packages/legacy playwright-install
+pnpm -r test
+```
+
 ### Browser Compatibility
 
 `PRIME` supports the following browsers:

packages/core/.eslintignore

@@ -0,0 +1,4 @@
+/build
+/.svelte-kit
+/package
+dist

packages/core/.eslintrc.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  extends: ['@viamrobotics/eslint-config/svelte'],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+};

packages/core/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

packages/core/.prettierignore

@@ -0,0 +1,4 @@
+/build
+/.svelte-kit
+/package
+dist

packages/core/.prettierrc.cjs

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = '@viamrobotics/prettier-config/svelte';

packages/core/README.md

@@ -0,0 +1,82 @@
+# `@viamrobotics/prime-core`
+
+## Getting started
+
+`@viamrobotics/prime-core` is a collection of core Svelte components.
+
+## Installation
+
+Add PRIME core using your package manager of choice:
+
+```
+pnpm add --save-dev @viamrobotics/prime-core
+```
+
+Install [Tailwind][]. In the `tailwind.config.js`, add the components to the content and include the theme:
+
+```js
+import { theme } from '@viamrobotics/prime-core/theme';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/**/*.{html,js,svelte,ts}',
+    './node_modules/@viamrobotics/prime-core/**/*.{ts,svelte}',
+  ],
+  theme,
+  plugins: [],
+};
+```
+
+Import the stylesheet. If you are using [SvelteKit][], you can do this in `src/routes/+layout.svelte`.
+
+```js
+import '@viamrobotics/prime-core/prime.css';
+```
+
+You can now use the components in your app:
+
+```html
+<script lang="ts">
+  import { Badge } from '@viamrobotics/prime-core';
+</script>
+
+<Badge
+  variant="green"
+  label="Active"
+/>
+```
+
+[tailwind]: https://tailwindcss.com/
+[sveltekit]: https://kit.svelte.dev/
+
+## Playground
+
+The playground can be used during development but is not used outside of the package.
+
+```bash
+pnpm install
+pnpm -C packages/core dev
+```
+
+## Linting
+
+To lint and typecheck:
+
+```bash
+pnpm -C packages/core check        # check svelte and lint
+pnpm -C packages/core check-svelte # check svelte only
+pnpm -C packages/core check-lint   # check lint only with prettier and eslint
+pnpm -C packages/core format       # format with prettier
+```
+
+## Testing
+
+To test with [vitest][]:
+
+```bash
+pnpm -C packages/core test        # run once
+pnpm -C packages/core test:watch  # watch tests
+```
+
+[vitest]: https://vitest.dev/

packages/core/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@viamrobotics/prime-core",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "pnpm run package",
+    "check": "concurrently -g pnpm:check-*",
+    "check-svelte": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check-lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./theme": "./theme.ts",
+    "./prime.css": "./prime.css"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "theme.ts",
+    "prime.css"
+  ],
+  "peerDependencies": {
+    "svelte": ">=4.0.0 <5"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/svelte": "^4.0.3",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "@viamrobotics/eslint-config": "^0.1.0",
+    "@viamrobotics/prettier-config": "^0.1.0",
+    "@viamrobotics/typescript-config": "^0.0.3",
+    "autoprefixer": "^10.4.14",
+    "classnames": "^2.3.2",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-svelte": "^2.32.4",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "jsdom": "^22.1.0",
+    "postcss": "^8.4.27",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "publint": "^0.1.16",
+    "svelte": "^4.1.1",
+    "svelte-check": "^3.4.6",
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.7",
+    "vitest": "^0.33.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module"
+}

packages/core/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/core/prime.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+*,
+input,
+button {
+  font-family: inherit;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}

packages/core/src/app.d.ts

@@ -0,0 +1,16 @@
+/*
+ * See https://kit.svelte.dev/docs/types#app
+ * for information about these interfaces
+ */
+declare global {
+  namespace App {
+    /*
+     * interface Error {}
+     * interface Locals {}
+     * interface PageData {}
+     * interface Platform {}
+     */
+  }
+}
+
+export {};

packages/core/src/app.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="icon"
+      href="%sveltekit.assets%/favicon.png"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div>%sveltekit.body%</div>
+  </body>
+</html>