feat: initialize adobe spectrum package 🆕

packages/spectrum/custom-elements.json

@@ -0,0 +1,125 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "packages/shoelace/src/form.def.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "jsf-shoelace",
+          "declaration": {
+            "name": "JsfShoelace",
+            "module": "/packages/shoelace/src/form.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/shoelace/src/form.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "JsfShoelace",
+          "members": [
+            {
+              "kind": "field",
+              "name": "widgets",
+              "privacy": "public",
+              "default": "widgets"
+            },
+            {
+              "kind": "field",
+              "name": "styleSheets",
+              "type": {
+                "text": "array"
+              },
+              "privacy": "public",
+              "default": "[styles]"
+            }
+          ],
+          "superclass": {
+            "name": "Jsf",
+            "package": "@jsfe/form"
+          },
+          "tagName": "jsf-shoelace",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "JsfShoelace",
+          "declaration": {
+            "name": "JsfShoelace",
+            "module": "packages/shoelace/src/form.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/shoelace/src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "JsfShoelace",
+          "declaration": {
+            "name": "JsfShoelace",
+            "module": "./form.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./widgets/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "@jsfe/types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Jsf",
+          "declaration": {
+            "name": "Jsf",
+            "package": "@jsfe/form"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/shoelace/src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css`\n\t/* STUB - Compiled SCSS goes here */\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "packages/shoelace/src/styles.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

packages/spectrum/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@jsfe/spectrum",
+  "version": "0.0.0",
+  "description": "Spectrum v0 forms, auto-generated by JSON schemas.",
+  "keywords": [
+    "json-schema",
+    "spectrum",
+    "forms",
+    "generation",
+    "declarative",
+    "openapi",
+    "mongodb",
+    "page-builder"
+  ],
+  "homepage": "https://jsfe.js.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/json-schema-form-element/jsfe",
+    "directory": "packages/spectrum"
+  },
+  "license": "ISC",
+  "author": {
+    "name": "Julian Cataldo",
+    "email": "[email protected]",
+    "url": "https://www.juliancataldo.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./scss": "./src/styles.scss",
+    "./scss/*": "./src/widgets/*.scss",
+    "./css": "./dist/esm/styles.css",
+    "./jss": "./dist/esm/styles.js",
+    "./min": "./dist/esm-min"
+  },
+  "files": [
+    "./dist/esm",
+    "./dist/esm-min",
+    "./src/**/*.scss",
+    "./vscode.html-custom-data.json",
+    "./vscode.css-custom-data.json",
+    "./custom-elements.json"
+  ],
+  "scripts": {
+    "build": "pnpm clean ; pnpm ts:build ; pnpm css:build ; pnpm css:to-js",
+    "clean": "rm -rf ./dist",
+    "css:build": "pnpm sass --no-source-map src/styles.scss:dist/esm/styles.css",
+    "css:dev": "pnpm sass --watch src/styles.scss:dist/esm/styles.css & pnpm css:to-js:dev",
+    "css:to-js": "node ../../scripts/css-to-js.js dist/esm/styles.css",
+    "css:to-js:dev": "nodemon dist/esm/styles.css -x 'pnpm css:to-js'",
+    "dev": "pnpm ts:dev & pnpm css:dev & (sleep 3 && pnpm css:to-js:dev)",
+    "ts:build": "pnpm tsc",
+    "ts:dev": "pnpm tsc --watch"
+  },
+  "dependencies": {
+    "@jsfe/form": "workspace:*",
+    "@jsfe/types": "workspace:*",
+    "@spectrum-web-components/button": "^0.39.1",
+    "@spectrum-web-components/help-text": "^0.39.1",
+    "@spectrum-web-components/radio": "^0.39.1",
+    "@spectrum-web-components/slider": "^0.39.1",
+    "@spectrum-web-components/switch": "^0.39.1"
+  },
+  "devDependencies": {
+    "@spectrum-web-components/styles": "^0.39.1",
+    "sass": "^1.68.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "@spectrum-web-components/field-label": "^0.39.1",
+    "@spectrum-web-components/icon": "^0.39.1",
+    "@spectrum-web-components/icons": "^0.39.1",
+    "@spectrum-web-components/number-field": "^0.39.1",
+    "@spectrum-web-components/textfield": "^0.39.1",
+    "@spectrum-web-components/theme": "^0.39.1",
+    "lit": "^2.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/spectrum/src/form.def.ts

@@ -0,0 +1,9 @@
+import { JsfSpectrum } from './form.js';
+
+customElements.define('jsf-spectrum', JsfSpectrum);
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'jsf-spectrum': JsfSpectrum;
+	}
+}

packages/spectrum/src/form.ts

@@ -0,0 +1,9 @@
+import { Jsf } from '@jsfe/form';
+import * as widgets from './widgets/index.js';
+import { styles } from './styles.js';
+
+export class JsfSpectrum extends Jsf {
+	public widgets = widgets;
+
+	public styleSheets = [styles];
+}

packages/spectrum/src/index.ts

@@ -0,0 +1,7 @@
+import './form.def.js';
+
+export { JsfSpectrum } from './form.js';
+export * as widgets from './widgets/index.js';
+
+export type * from '@jsfe/types';
+export type { Jsf } from '@jsfe/form';

packages/spectrum/src/styles.scss

@@ -0,0 +1,24 @@
+// keep-sorted start
+// @import './widgets/_all.scss';
+@import './widgets/_fieldset.scss';
+// @import './widgets/array.scss';
+// @import './widgets/callout.scss';
+// @import './widgets/checkbox-group.scss';
+// @import './widgets/checkbox.scss';
+// @import './widgets/color-picker.scss';
+// @import './widgets/object.scss';
+// @import './widgets/radio-group-boolean.scss';
+// @import './widgets/radio-group.scss';
+// @import './widgets/rating.scss';
+@import './widgets/submit.scss';
+@import './widgets/text.scss';
+// keep-sorted end
+
+// -
+// NOTE: For tokens, SEE:
+
+// ./node_modules/@spectrum-web-components/styles/spectrum-scale-large.css
+// ./node_modules/@spectrum-web-components/styles/spectrum-theme-dark.css
+// ./node_modules/@spectrum-web-components/styles/typography.css
+// ./node_modules/@spectrum-web-components/styles/core-global.css
+// ./node_modules/@spectrum-web-components/styles/spectrum-core-global.cs

packages/spectrum/src/styles.ts

@@ -0,0 +1,7 @@
+/* STUB */
+
+import { css } from 'lit';
+
+export const styles = css`
+	/* STUB - Compiled SCSS goes here */
+`;

packages/spectrum/src/widgets/_fieldset.scss

@@ -0,0 +1,58 @@
+// WIP
+
+.theme-spectrum.widget-fieldset {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spectrum-global-dimension-size-600) 0;
+	padding: var(--sp-spacing-medium) var(--sp-spacing-small);
+	margin: 0;
+	font-weight: var(--sp-font-weight-semibold);
+	border: 1px solid var(--sp-color-neutral-50);
+	border-radius: var(--sp-border-radius-large);
+
+	.widget-fieldset__description {
+		font-size: var(--sp-input-help-text-font-size-medium);
+		color: var(--sp-input-help-text-color);
+	}
+
+	& & {
+		transition: box-shadow var(--sp-transition-medium);
+
+		&:hover {
+			// background: var(--sp-color-gray-50);
+			box-shadow: var(--sp-shadow-medium);
+		}
+	}
+
+	legend {
+		// font-size: var(--sp-font-size-large);
+	}
+
+	&.level-0 {
+		legend {
+			font-size: var(--sp-font-size-2x-large);
+			font-weight: 200;
+		}
+	}
+
+	&.level-1 {
+		legend {
+			font-size: var(--sp-font-size-x-large);
+			font-weight: var(--sp-font-weight-light);
+		}
+	}
+
+	&.level-2 {
+		legend {
+			font-size: var(--sp-font-size-large);
+			font-weight: var(--sp-font-weight-light);
+		}
+	}
+
+	&.level-3 {
+		legend {
+			font-size: var(--sp-font-size-medium);
+			font-weight: var(--sp-font-weight-bold);
+		}
+	}
+}

packages/spectrum/src/widgets/index.ts

@@ -0,0 +1,28 @@
+// import './defs/range.def.js';
+
+// import '@spectrum-web-components/icon/sp-icon.js';
+// import '@spectrum-web-components/icons/sp-icons-large.js';
+// import '@spectrum-web-components/icons/sp-icons-medium.js';
+
+// keep-sorted start
+// export { array } from './array.js';
+// export { buttonGroup } from './button-group.js';
+// export { buttonGroupBoolean } from './button-group-boolean.js';
+// export { callout } from './callout.js';
+// export { checkbox } from './checkbox.js';
+// export { checkboxGroup } from './checkbox-group.js';
+// export { colorPicker } from './color-picker.js';
+// export { date } from './date.js';
+export { number } from './number.js';
+export { object } from './object.js';
+export { radioGroup } from './radio-group.js';
+// export { radioGroupBoolean } from './radio-group-boolean.js';
+export { range } from './range.js';
+// export { rating } from './rating.js';
+// export { select } from './select.js';
+// export { selectMultiple } from './select-multiple.js';
+export { submit } from './submit.js';
+export { switchh as switch } from './switch.js';
+export { text } from './text.js';
+export { textarea } from './textarea.js';
+// keep-sorted end

packages/spectrum/src/widgets/number.ts

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import type { Widgets } from '@jsfe/types';
+
+import '@spectrum-web-components/field-label/sp-field-label.js';
+import '@spectrum-web-components/number-field/sp-number-field.js';
+import '@spectrum-web-components/help-text/sp-help-text.js';
+
+import type { NumberField } from '@spectrum-web-components/number-field';
+
+export const number: Widgets['number'] = (options) =>
+	html` <!--  -->
+		<sp-number-field
+			value=${ifDefined(options.value)}
+			step=${ifDefined(options.step)}
+			min=${ifDefined(options.min)}
+			max=${ifDefined(options.max)}
+			.label=${options.label}
+			.helpText=${options.helpText}
+			placeholder=${options.placeholder}
+			.name=${options.id}
+			.id=${options.id}
+			.required=${options.required}
+			@input=${(event: Event) => {
+				const newValue = (event.target as NumberField).valueAsNumber;
+				console.log(newValue);
+				options.valueChangedCallback?.(newValue);
+			}}
+		></sp-number-field>`;

packages/spectrum/src/widgets/object.scss

@@ -0,0 +1,2 @@
+.theme-spectrum.widget-object {
+}