@adobe/spectrum-component-api-schemas 0.0.0-schema-20240613154750

package/index.js

@@ -0,0 +1,52 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { glob } from "glob";
+
+import { resolve } from "path";
+import { readFile } from "fs/promises";
+import * as url from "url";
+import { writeFile } from "fs/promises";
+import { format } from "prettier";
+
+const readJson = async (fileName) =>
+  JSON.parse(await readFile(fileName, "utf8"));
+
+const writeJson = async (fileName, jsonData) => {
+  await writeFile(
+    fileName,
+    await format(JSON.stringify(jsonData), { parser: "json-stringify" }),
+  );
+};
+
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
+export const schemaFileNames = await glob(
+  `${resolve(__dirname, "./schemas")}/**/*.json`,
+);
+
+export const getFile = async (schemaFileName) =>
+  await readJson(resolve(__dirname, "src", schemaFileName));
+
+export const getAllSchemas = async () => {
+  return await Promise.all(schemaFileNames.map(getFileTokens)).then(
+    (tokenFileDataAr) => {
+      return tokenFileDataAr.reduce(
+        (tokenDataAcc, tokenFileData) => ({
+          ...tokenDataAcc,
+          ...tokenFileData,
+        }),
+        {},
+      );
+    },
+  );
+};

package/moon.yml

@@ -0,0 +1,59 @@
+# Copyright 2024 Adobe. All rights reserved.
+# This file is licensed to you under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License. You may obtain a copy
+# of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software distributed under
+# the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+# OF ANY KIND, either express or implied. See the License for the specific language
+# governing permissions and limitations under the License.
+$schema: "https://moonrepo.dev/schemas/project.json"
+type: library
+fileGroups:
+  schemas:
+    - "schemas/**/*.{yaml,yml,json}"
+  tests:
+    - "test/**/*"
+tasks:
+  build:
+    deps:
+      - ~:make
+    command:
+      - cp
+      - -R
+      - schemas/
+      - dist/v1
+    platform: system
+    inputs:
+      - "@globs(schemas)"
+    outputs:
+      - dist/v1
+    local: true
+  make:
+    command:
+      - mkdir
+      - -p
+      - dist/v1
+    platform: system
+    local: true
+  clean:
+    command:
+      - rm
+      - -rf
+      - dist
+    platform: system
+    local: true
+  test:
+    command:
+      - pnpm
+      - ava
+    inputs:
+      - "@globs(schemas)"
+      - "@globs(tests)"
+    platform: node
+  test-watch:
+    command:
+      - ava
+      - --watch
+    local: true
+    platform: node

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@adobe/spectrum-component-api-schemas",
+  "version": "0.0.0-schema-20240613154750",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adobe/spectrum-tokens.git"
+  },
+  "author": "Garth Braithwaite <garthdb@gmail.com> (https://garthdb.com/)",
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-tokens/issues"
+  },
+  "publishConfig": {
+    "provenance": true
+  },
+  "homepage": "https://github.com/adobe/spectrum-tokens/tree/main/packages/component-schemas#readme",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "ajv": "^8.12.0",
+    "ajv-formats": "^3.0.1",
+    "glob": "^10.3.12"
+  },
+  "scripts": {}
+}

package/schemas/component.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "title": "Component",
+  "type": "object",
+  "properties": {
+    "meta": {
+      "type": "object",
+      "properties": {
+        "category": {
+          "type": "string",
+          "enum": [
+            "actions",
+            "containers",
+            "data visualization",
+            "feedback",
+            "inputs",
+            "navigation",
+            "status",
+            "typography"
+          ]
+        },
+        "documentationUrl": { "type": "string", "format": "uri" }
+      },
+      "required": ["category", "documentationUrl"]
+    }
+  },
+  "required": ["meta", "title", "description", "properties", "$id"]
+}

package/schemas/components/action-bar.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/action-bar.json",
+  "title": "Action bar",
+  "description": "Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/action-bar/"
+  },
+  "type": "object",
+  "properties": {
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "examples": [{ "isEmphasized": true }, { "isEmphasized": false }, {}]
+}

package/schemas/components/action-button.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/action-button.json",
+  "title": "Action button",
+  "description": "Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/action-button/"
+  },
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string"
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json",
+      "description": "Icon must be present if the label is not defined."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m",
+      "pattern": "^(x?s|m|x{0,3}l)$"
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white", "black"]
+    },
+    "selectedTextColor": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/hex-color.json"
+    },
+    "hasHoldIcon": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus"],
+      "default": "default"
+    }
+  }
+}

package/schemas/components/action-group.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/action-group.json",
+  "title": "Action group",
+  "description": "An action group is a grouping of action buttons that are related to each other.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/action-group/"
+  },
+  "type": "object",
+  "properties": {
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["regular", "compact"],
+      "default": "regular"
+    },
+    "isJustified": {
+      "type": "boolean",
+      "default": false
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "enableSelection": {
+      "type": "boolean",
+      "default": false
+    },
+    "selectionMode": {
+      "type": "string",
+      "enum": ["single", "multiple"],
+      "default": "single",
+      "description": "Only applicable if selection is enabled"
+    },
+    "allowsEmptySelection": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if selection is enabled"
+    },
+    "overflowMode": {
+      "type": "string",
+      "enum": ["wrap", "collapse"],
+      "default": "wrap"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "examples": [
+    {
+      "size": "s"
+    }
+  ]
+}

package/schemas/components/alert-banner.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/alert-banner.json",
+  "title": "Alert banner",
+  "description": "Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/alert-banner/"
+  },
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["neutral", "informative", "negative"],
+      "default": "neutral"
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "isDismissible": {
+      "type": "boolean",
+      "default": false
+    }
+  }
+}

package/schemas/components/alert-dialog.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/alert-dialog.json",
+  "title": "Alert dialog",
+  "description": "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/alert-dialog/"
+  },
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": [
+        "confirmation",
+        "information",
+        "warning",
+        "destructive",
+        "error"
+      ],
+      "default": "confirmation"
+    },
+    "primaryActionLabel": {
+      "type": "string"
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "cancelActionLabel": {
+      "type": "string",
+      "default": "cancel",
+      "description": "If undefined, this button does not appear."
+    }
+  }
+}

package/schemas/components/avatar.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/avatar.json",
+  "title": "Avatar",
+  "description": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
+  },
+  "type": "object",
+  "properties": {
+    "size": {
+      "type": "number",
+      "enum": [50, 75, 100, 200, 300, 400, 500, 600, 700],
+      "default": 100
+    },
+    "image": {
+      "type": "string"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus"],
+      "default": "default"
+    }
+  }
+}

package/schemas/components/badge.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/badge.json",
+  "title": "Badge",
+  "description": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/badge/"
+  },
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string",
+      "description": "When the label is not defined, the badge appears as icon-only."
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json"
+    },
+    "variant": {
+      "type": "string",
+      "enum": [
+        "neutral",
+        "info",
+        "positive",
+        "negative",
+        "indigo",
+        "yellow",
+        "magenta",
+        "fuchsia",
+        "purple",
+        "seafoam"
+      ]
+    },
+    "fixed": {
+      "type": "string",
+      "enum": ["none", "top", "right", "bottom", "left"],
+      "default": "none"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "s"
+    }
+  }
+}

package/schemas/components/body.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/body.json",
+  "title": "Body",
+  "description": "Body is a typography component primarily used within Spectrum components and for blocks of text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/body/"
+  },
+  "type": "object",
+  "properties": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/typography-script.json"
+    },
+    "classification": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/typography-classification.json"
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "enum": ["xs", "s", "m", "l", "xl", "xxl", "xxxl"],
+      "default": "m"
+    }
+  }
+}

package/schemas/components/bottom-navigation-android.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/bottom-navigation-android.json",
+  "title": "Bottom navigation (Android)",
+  "description": "Bottom navigation is a top-level navigation control for Android apps.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/bottom-navigation-android/"
+  },
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["bottom", "side"],
+      "default": "bottom"
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json"
+    },
+    "background": {
+      "type": "string",
+      "enum": ["primary", "secondary"],
+      "default": "primary"
+    },
+    "hasBadge": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  }
+}

package/schemas/components/breadcrumbs.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/breadcrumbs.json",
+  "title": "Breadcrumbs",
+  "description": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
+  },
+  "type": "object",
+  "properties": {
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus", "drag and drop"],
+      "default": "default"
+    }
+  }
+}

package/schemas/components/button-group.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button-group.json",
+  "title": "Button group",
+  "description": "A button group is a grouping of buttons whose actions are related to each other.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/button-group/"
+  },
+  "type": "object",
+  "properties": {
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "enum": ["horizontal", "vertical"]
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  }
+}

package/schemas/components/button.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button.json",
+  "title": "Button",
+  "description": "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/button/"
+  },
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string"
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json",
+      "description": "Icon must be present if the label is not defined."
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["accent", "negative", "primary", "secondary"],
+      "default": "accent"
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white", "black"]
+    },
+    "style": {
+      "type": "string",
+      "default": "fill",
+      "enum": ["fill", "outline"]
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "justified": {
+      "type": "boolean",
+      "default": false
+    },
+    "isPending": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus"],
+      "default": "default"
+    }
+  }
+}