chore: refactor component-schemas into package

.github/workflows/release-snapshot.yml

@@ -1,13 +1,52 @@
 name: Release Snapshot
 
-on: workflow_dispatch
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Tag used on changeset version and NPM package"
+        required: false
+        type: string
 
 jobs:
   get-snapshot-tag:
-    name: Split branch name
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
     steps:
-      - id: split
+      - name: Split branch name
+        id: split
         env:
           BRANCH: ${{ github.ref_name }}
-        run: echo "::set-output name=fragment::${BRANCH##*/}"
+        run: echo "fragment=${BRANCH##*snapshot-}" >> $GITHUB_OUTPUT
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Get last author info
+        id: author
+        run: |
+          echo "authorName=$(git log -1 --pretty=format:'%an')" >> $GITHUB_OUTPUT
+          echo "authorEmail=$(git log -1 --pretty=format:'%ae')" >> $GITHUB_OUTPUT
+      - uses: moonrepo/setup-toolchain@v0
+        with:
+          auto-install: true
+      - run: moon setup
+      - run: moon run :build --query "projectSource~packages/*"
+      - name: Snapshot release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          SNAPSHOT_TAG: ${{ inputs.tag || steps.split.outputs.fragment }}
+          USERNAME: ${{ steps.author.outputs.authorName }}
+          EMAIL: ${{ steps.author.outputs.authorEmail }}
+        run: |
+          pnpm changeset version --snapshot $SNAPSHOT_TAG
+          git config --global user.name "$USERNAME"
+          git config --global user.email "$EMAIL"
+          git add .
+          git commit -m "chore: snapshot release $SNAPSHOT_TAG"
+          npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          pnpm changeset publish --tag $SNAPSHOT_TAG
+          git push origin HEAD
+          git push origin --tags

.moon/workspace.yml

@@ -2,6 +2,7 @@
 $schema: "https://moonrepo.dev/schemas/workspace.json"
 projects:
   tokens: "packages/tokens"
+  componentSchemas: "packages/component-schemas"
   visualizer: "docs/visualizer"
   site: "docs/site"
   root: "."

docs/site/lib/components.js

@@ -101,8 +101,16 @@ export async function getAllComponentSlugs() {
 }
 
 export async function getComponentData(slug) {
+  // not sure, if this should use the public/schemas folder, like getAllComponentSlugs()
   const schemaDir = path.resolve(
-    path.join(process.cwd(), "..", "..", "packages", "tokens", "schemas"),
+    path.join(
+      process.cwd(),
+      "..",
+      "..",
+      "packages",
+      "component-schemas",
+      "schemas",
+    ),
   );
   const file = await readJSON(
     path.join(schemaDir, "components", `${slug}.json`),

docs/site/moon.yml

@@ -16,7 +16,18 @@ fileGroups:
   target:
     - "/site/[!visualizer]"
 tasks:
-  copySchema:
+  copyComponentSchema:
+    command:
+      - cp
+      - -r
+      - ../../packages/component-schemas/schemas
+      - public/
+    platform: system
+    inputs:
+      - /packages/component-schemas/schemas/**/*.json
+    outputs:
+      - public/schemas
+  copyTokenTypeSchema:
     command:
       - cp
       - -r
@@ -33,7 +44,8 @@ tasks:
       - build
     platform: node
     deps:
-      - ~:copySchema
+      - ~:copyComponentSchema
+      - ~:copyTokenTypeSchema
     outputs:
       - "/site/"
   clean:

docs/site/public/schemas/components/action-button.json

@@ -22,9 +22,8 @@
     },
     "size": {
       "type": "string",
-      "enum": ["s", "m", "l", "xl"],
-      "default": "m",
-      "pattern": "^(x?s|m|x{0,3}l)$"
+      "enum": ["xs", "s", "m", "l", "xl"],
+      "default": "m"
     },
     "isQuiet": {
       "type": "boolean",
@@ -40,7 +39,8 @@
     },
     "staticColor": {
       "type": "string",
-      "enum": ["white", "black"]
+      "enum": ["white", "black"],
+      "description": "Static color must not be set for the default version of this component."
     },
     "selectedTextColor": {
       "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/hex-color.json"

docs/site/public/schemas/components/avatar.json

@@ -15,7 +15,9 @@
       "default": 100
     },
     "image": {
-      "type": "string"
+      "type": "string",
+      "enum": ["text", "image"],
+      "default": "image"
     },
     "isDisabled": {
       "type": "boolean",

docs/site/public/schemas/components/button.json

@@ -27,7 +27,8 @@
     },
     "staticColor": {
       "type": "string",
-      "enum": ["white", "black"]
+      "enum": ["white", "black"],
+      "description": "Static color must not be set for the default version of this component."
     },
     "style": {
       "type": "string",

docs/site/public/schemas/components/close-button.json

@@ -20,7 +20,7 @@
     "staticColor": {
       "type": "string",
       "enum": ["white", "black"],
-      "default": null
+      "description": "Static color must not be set for the default version of this component."
     },
     "isDisabled": {
       "type": "boolean",

docs/site/public/schemas/components/link.json

@@ -21,7 +21,7 @@
     "staticColor": {
       "type": "string",
       "enum": ["white", "black"],
-      "default": null
+      "description": "Static color must not be set for the default version of this component."
     },
     "state": {
       "type": "string",

docs/site/public/schemas/components/popover.json

@@ -10,7 +10,7 @@
   "type": "object",
   "properties": {
     "width": {
-      "type": "integer"
+      "type": "number"
     },
     "height": {
       "type": "number"

docs/site/public/schemas/components/rating.json

@@ -10,9 +10,10 @@
   "type": "object",
   "properties": {
     "value": {
-      "type": "integer",
-      "minimum": 0,
-      "maximum": 5
+      "type": "number",
+      "enum": [0, 1, 2, 3, 4, 5],
+      "default": 0,
+      "description": "From 0 to 5"
     },
     "isEmphasized": {
       "type": "boolean",

docs/site/public/schemas/components/search-field.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/search-field.json",
+  "title": "Search field",
+  "description": "A search field is used for searching and filtering items.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/search-field/"
+  },
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string"
+    },
+    "value": {
+      "type": "string"
+    },
+    "width": {
+      "type": "number"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m",
+      "pattern": "^(x?s|m|x{0,3}l)$"
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "description": {
+      "type": "string"
+    },
+    "state": {
+      "type": "string",
+      "enum": [
+        "default",
+        "hover",
+        "focus + hover",
+        "focus + not hover",
+        "keyboard focus"
+      ],
+      "default": "default"
+    }
+  }
+}

docs/site/public/schemas/components/tabs.json

@@ -9,24 +9,46 @@
   },
   "type": "object",
   "properties": {
-    "label": {
-      "type": "string"
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "vertical"
     },
-    "icon": {
-      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json"
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
     },
-    "isSelected": {
+    "density": {
+      "type": "string",
+      "enum": ["compact", "regular"],
+      "default": "regular"
+    },
+    "isFluid": {
+      "type": "boolean",
+      "default": false,
+      "description": "This overrides density and is only applicable to horizontal tabs."
+    },
+    "isQuiet": {
       "type": "boolean",
       "default": false
     },
-    "isDisabled": {
+    "isEmphasized": {
       "type": "boolean",
       "default": false
     },
-    "state": {
+    "alignment": {
+      "type": "string",
+      "enum": ["start", "center"],
+      "default": "start"
+    },
+    "selectedItem": {
+      "description": "(list of available items)"
+    },
+    "keyboardActivation": {
       "type": "string",
-      "enum": ["default", "hover", "down", "keyboard focus"],
-      "default": "default"
+      "enum": ["manual", "automatic"],
+      "default": "manual"
     }
   }
 }

packages/component-schemas/CHANGELOG.md

@@ -0,0 +1,31 @@
+# @adobe/spectrum-component-api-schemas
+
+## 0.0.0-schema-20240821152525
+
+### Patch Changes
+
+- [#353](https://github.com/adobe/spectrum-tokens/pull/353) [`dc2d6c6`](https://github.com/adobe/spectrum-tokens/commit/dc2d6c6e12c1ea4fdc0d891b3fd50ea0b1697dd7) Thanks [@karstens](https://github.com/karstens)! - Making adjustments to bring the schema more in line with what was on the spectrum website.
+
+## 0.0.0-schema-20240620220450
+
+### Minor Changes
+
+- [#353](https://github.com/adobe/spectrum-tokens/pull/353) [`64379eb`](https://github.com/adobe/spectrum-tokens/commit/64379ebeaf9402fe77ca1adfd020f42df60c60d9) Thanks [@karstens](https://github.com/karstens)! - Added schema for search-field and fixed some path bugs in testing
+
+## 0.0.0-schema-20240618053842
+
+### Minor Changes
+
+- [#353](https://github.com/adobe/spectrum-tokens/pull/353) [`b5c1579`](https://github.com/adobe/spectrum-tokens/commit/b5c15792ec5f5e5c269bfa7bf58af3df42e648c1) Thanks [@karstens](https://github.com/karstens)! - Initial release
+
+## 0.0.0-schema-20240614194147
+
+### Patch Changes
+
+- [#353](https://github.com/adobe/spectrum-tokens/pull/353) [`9805167`](https://github.com/adobe/spectrum-tokens/commit/980516791c0bef9e2f0bbeffe6515f103f3ad7a2) Thanks [@karstens](https://github.com/karstens)! - fixed some bugs
+
+## 0.0.0-schema-20240613154750
+
+### Patch Changes
+
+- [#353](https://github.com/adobe/spectrum-tokens/pull/353) [`6ff5ad7`](https://github.com/adobe/spectrum-tokens/commit/6ff5ad7a75356f4b93d07a2818b357da19ce5b4b) Thanks [@karstens](https://github.com/karstens)! - Initial release

packages/component-schemas/README.md

@@ -0,0 +1,42 @@
+# Spectrum Component Schemas
+
+An NPM package of JSON Schema for Spectrum components. Used in the table of options on the Spectrum Design System website (example).
+
+| **Property**        | **Values**                              | **Default value** |
+| ------------------- | --------------------------------------- | ----------------- |
+| label               | text                                    | -                 |
+| hide label          | yes / no                                | no                |
+| icon                | icon / nothing                          | nothing           |
+| size                | s / m / l / xl                          | m                 |
+| is quiet            | yes / no                                | no                |
+| is selected         | yes / no                                | no                |
+| is emphasized       | yes / no                                | no                |
+| static color        | white / black                           | none              |
+| selected text color | hex value                               | #000000           |
+| has hold icon       | yes / no                                | no                |
+| is disabled         | yes / no                                | no                |
+| state               | default / hover / down / keyboard focus | default           |
+
+## Helper functions
+
+- `schemaFileNames`
+- `getSchemaFile()`
+- `getAllSchemas()`
+- `getAllSlugs()`
+
+## Project file structure
+
+```
+├── schemas
+│   ├── components
+│   │   └── // component json files
+│   ├── types
+│   │   └── // shared types like hex-color
+├── test
+│   └── // tests
+├── CHANGELOG.md // generated by changeset
+├── index.js // helpful functions for fetching the schema file data
+├── moon.yml // config file for moon monorepo task management
+├── package.json
+└── README.md // this file!
+```