Skip to content

Commit 2b8c8b5

Browse files
JulianCataldoJulianCataldo
committed
feat: initialize adobe spectrum package 🆕
1 parent bfcac92 commit 2b8c8b5

24 files changed

+2710
-5143
lines changed

‎packages/spectrum/custom-elements.json‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
{
2+
"schemaVersion": "1.0.0",
3+
"readme": "",
4+
"modules": [
5+
{
6+
"kind": "javascript-module",
7+
"path": "packages/shoelace/src/form.def.ts",
8+
"declarations": [],
9+
"exports": [
10+
{
11+
"kind": "custom-element-definition",
12+
"name": "jsf-shoelace",
13+
"declaration": {
14+
"name": "JsfShoelace",
15+
"module": "/packages/shoelace/src/form.js"
16+
}
17+
}
18+
]
19+
},
20+
{
21+
"kind": "javascript-module",
22+
"path": "packages/shoelace/src/form.ts",
23+
"declarations": [
24+
{
25+
"kind": "class",
26+
"description": "",
27+
"name": "JsfShoelace",
28+
"members": [
29+
{
30+
"kind": "field",
31+
"name": "widgets",
32+
"privacy": "public",
33+
"default": "widgets"
34+
},
35+
{
36+
"kind": "field",
37+
"name": "styleSheets",
38+
"type": {
39+
"text": "array"
40+
},
41+
"privacy": "public",
42+
"default": "[styles]"
43+
}
44+
],
45+
"superclass": {
46+
"name": "Jsf",
47+
"package": "@jsfe/form"
48+
},
49+
"tagName": "jsf-shoelace",
50+
"customElement": true
51+
}
52+
],
53+
"exports": [
54+
{
55+
"kind": "js",
56+
"name": "JsfShoelace",
57+
"declaration": {
58+
"name": "JsfShoelace",
59+
"module": "packages/shoelace/src/form.ts"
60+
}
61+
}
62+
]
63+
},
64+
{
65+
"kind": "javascript-module",
66+
"path": "packages/shoelace/src/index.ts",
67+
"declarations": [],
68+
"exports": [
69+
{
70+
"kind": "js",
71+
"name": "JsfShoelace",
72+
"declaration": {
73+
"name": "JsfShoelace",
74+
"module": "./form.js"
75+
}
76+
},
77+
{
78+
"kind": "js",
79+
"name": "*",
80+
"declaration": {
81+
"name": "*",
82+
"package": "./widgets/index.js"
83+
}
84+
},
85+
{
86+
"kind": "js",
87+
"name": "*",
88+
"declaration": {
89+
"name": "*",
90+
"package": "@jsfe/types"
91+
}
92+
},
93+
{
94+
"kind": "js",
95+
"name": "Jsf",
96+
"declaration": {
97+
"name": "Jsf",
98+
"package": "@jsfe/form"
99+
}
100+
}
101+
]
102+
},
103+
{
104+
"kind": "javascript-module",
105+
"path": "packages/shoelace/src/styles.ts",
106+
"declarations": [
107+
{
108+
"kind": "variable",
109+
"name": "styles",
110+
"default": "css`\n\t/* STUB - Compiled SCSS goes here */\n`"
111+
}
112+
],
113+
"exports": [
114+
{
115+
"kind": "js",
116+
"name": "styles",
117+
"declaration": {
118+
"name": "styles",
119+
"module": "packages/shoelace/src/styles.ts"
120+
}
121+
}
122+
]
123+
}
124+
]
125+
}

‎packages/spectrum/package.json‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
{
2+
"name": "@jsfe/spectrum",
3+
"version": "0.0.0",
4+
"description": "Spectrum v0 forms, auto-generated by JSON schemas.",
5+
"keywords": [
6+
"json-schema",
7+
"spectrum",
8+
"forms",
9+
"generation",
10+
"declarative",
11+
"openapi",
12+
"mongodb",
13+
"page-builder"
14+
],
15+
"homepage": "https://jsfe.js.org",
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/json-schema-form-element/jsfe",
19+
"directory": "packages/spectrum"
20+
},
21+
"license": "ISC",
22+
"author": {
23+
"name": "Julian Cataldo",
24+
"email": "[email protected]",
25+
"url": "https://www.juliancataldo.com"
26+
},
27+
"type": "module",
28+
"exports": {
29+
".": "./dist/esm/index.js",
30+
"./scss": "./src/styles.scss",
31+
"./scss/*": "./src/widgets/*.scss",
32+
"./css": "./dist/esm/styles.css",
33+
"./jss": "./dist/esm/styles.js",
34+
"./min": "./dist/esm-min"
35+
},
36+
"files": [
37+
"./dist/esm",
38+
"./dist/esm-min",
39+
"./src/**/*.scss",
40+
"./vscode.html-custom-data.json",
41+
"./vscode.css-custom-data.json",
42+
"./custom-elements.json"
43+
],
44+
"scripts": {
45+
"build": "pnpm clean ; pnpm ts:build ; pnpm css:build ; pnpm css:to-js",
46+
"clean": "rm -rf ./dist",
47+
"css:build": "pnpm sass --no-source-map src/styles.scss:dist/esm/styles.css",
48+
"css:dev": "pnpm sass --watch src/styles.scss:dist/esm/styles.css & pnpm css:to-js:dev",
49+
"css:to-js": "node ../../scripts/css-to-js.js dist/esm/styles.css",
50+
"css:to-js:dev": "nodemon dist/esm/styles.css -x 'pnpm css:to-js'",
51+
"dev": "pnpm ts:dev & pnpm css:dev & (sleep 3 && pnpm css:to-js:dev)",
52+
"ts:build": "pnpm tsc",
53+
"ts:dev": "pnpm tsc --watch"
54+
},
55+
"dependencies": {
56+
"@jsfe/form": "workspace:*",
57+
"@jsfe/types": "workspace:*",
58+
"@spectrum-web-components/button": "^0.39.1",
59+
"@spectrum-web-components/help-text": "^0.39.1",
60+
"@spectrum-web-components/radio": "^0.39.1",
61+
"@spectrum-web-components/slider": "^0.39.1",
62+
"@spectrum-web-components/switch": "^0.39.1"
63+
},
64+
"devDependencies": {
65+
"@spectrum-web-components/styles": "^0.39.1",
66+
"sass": "^1.68.0",
67+
"typescript": "^5.2.2"
68+
},
69+
"peerDependencies": {
70+
"@spectrum-web-components/field-label": "^0.39.1",
71+
"@spectrum-web-components/icon": "^0.39.1",
72+
"@spectrum-web-components/icons": "^0.39.1",
73+
"@spectrum-web-components/number-field": "^0.39.1",
74+
"@spectrum-web-components/textfield": "^0.39.1",
75+
"@spectrum-web-components/theme": "^0.39.1",
76+
"lit": "^2.8.0"
77+
},
78+
"publishConfig": {
79+
"access": "public"
80+
}
81+
}

‎packages/spectrum/src/form.def.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { JsfSpectrum } from './form.js';
2+
3+
customElements.define('jsf-spectrum', JsfSpectrum);
4+
5+
declare global {
6+
interface HTMLElementTagNameMap {
7+
'jsf-spectrum': JsfSpectrum;
8+
}
9+
}

‎packages/spectrum/src/form.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Jsf } from '@jsfe/form';
2+
import * as widgets from './widgets/index.js';
3+
import { styles } from './styles.js';
4+
5+
export class JsfSpectrum extends Jsf {
6+
public widgets = widgets;
7+
8+
public styleSheets = [styles];
9+
}

‎packages/spectrum/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import './form.def.js';
2+
3+
export { JsfSpectrum } from './form.js';
4+
export * as widgets from './widgets/index.js';
5+
6+
export type * from '@jsfe/types';
7+
export type { Jsf } from '@jsfe/form';

‎packages/spectrum/src/styles.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// keep-sorted start
2+
// @import './widgets/_all.scss';
3+
@import './widgets/_fieldset.scss';
4+
// @import './widgets/array.scss';
5+
// @import './widgets/callout.scss';
6+
// @import './widgets/checkbox-group.scss';
7+
// @import './widgets/checkbox.scss';
8+
// @import './widgets/color-picker.scss';
9+
// @import './widgets/object.scss';
10+
// @import './widgets/radio-group-boolean.scss';
11+
// @import './widgets/radio-group.scss';
12+
// @import './widgets/rating.scss';
13+
@import './widgets/submit.scss';
14+
@import './widgets/text.scss';
15+
// keep-sorted end
16+
17+
// -
18+
// NOTE: For tokens, SEE:
19+
20+
// ./node_modules/@spectrum-web-components/styles/spectrum-scale-large.css
21+
// ./node_modules/@spectrum-web-components/styles/spectrum-theme-dark.css
22+
// ./node_modules/@spectrum-web-components/styles/typography.css
23+
// ./node_modules/@spectrum-web-components/styles/core-global.css
24+
// ./node_modules/@spectrum-web-components/styles/spectrum-core-global.cs

‎packages/spectrum/src/styles.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* STUB */
2+
3+
import { css } from 'lit';
4+
5+
export const styles = css`
6+
/* STUB - Compiled SCSS goes here */
7+
`;

‎packages/spectrum/src/widgets/_fieldset.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// WIP
2+
3+
.theme-spectrum.widget-fieldset {
4+
display: flex;
5+
flex-direction: column;
6+
gap: var(--spectrum-global-dimension-size-600) 0;
7+
padding: var(--sp-spacing-medium) var(--sp-spacing-small);
8+
margin: 0;
9+
font-weight: var(--sp-font-weight-semibold);
10+
border: 1px solid var(--sp-color-neutral-50);
11+
border-radius: var(--sp-border-radius-large);
12+
13+
.widget-fieldset__description {
14+
font-size: var(--sp-input-help-text-font-size-medium);
15+
color: var(--sp-input-help-text-color);
16+
}
17+
18+
& & {
19+
transition: box-shadow var(--sp-transition-medium);
20+
21+
&:hover {
22+
// background: var(--sp-color-gray-50);
23+
box-shadow: var(--sp-shadow-medium);
24+
}
25+
}
26+
27+
legend {
28+
// font-size: var(--sp-font-size-large);
29+
}
30+
31+
&.level-0 {
32+
legend {
33+
font-size: var(--sp-font-size-2x-large);
34+
font-weight: 200;
35+
}
36+
}
37+
38+
&.level-1 {
39+
legend {
40+
font-size: var(--sp-font-size-x-large);
41+
font-weight: var(--sp-font-weight-light);
42+
}
43+
}
44+
45+
&.level-2 {
46+
legend {
47+
font-size: var(--sp-font-size-large);
48+
font-weight: var(--sp-font-weight-light);
49+
}
50+
}
51+
52+
&.level-3 {
53+
legend {
54+
font-size: var(--sp-font-size-medium);
55+
font-weight: var(--sp-font-weight-bold);
56+
}
57+
}
58+
}

‎packages/spectrum/src/widgets/index.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// import './defs/range.def.js';
2+
3+
// import '@spectrum-web-components/icon/sp-icon.js';
4+
// import '@spectrum-web-components/icons/sp-icons-large.js';
5+
// import '@spectrum-web-components/icons/sp-icons-medium.js';
6+
7+
// keep-sorted start
8+
// export { array } from './array.js';
9+
// export { buttonGroup } from './button-group.js';
10+
// export { buttonGroupBoolean } from './button-group-boolean.js';
11+
// export { callout } from './callout.js';
12+
// export { checkbox } from './checkbox.js';
13+
// export { checkboxGroup } from './checkbox-group.js';
14+
// export { colorPicker } from './color-picker.js';
15+
// export { date } from './date.js';
16+
export { number } from './number.js';
17+
export { object } from './object.js';
18+
export { radioGroup } from './radio-group.js';
19+
// export { radioGroupBoolean } from './radio-group-boolean.js';
20+
export { range } from './range.js';
21+
// export { rating } from './rating.js';
22+
// export { select } from './select.js';
23+
// export { selectMultiple } from './select-multiple.js';
24+
export { submit } from './submit.js';
25+
export { switchh as switch } from './switch.js';
26+
export { text } from './text.js';
27+
export { textarea } from './textarea.js';
28+
// keep-sorted end

‎packages/spectrum/src/widgets/number.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@jsfe/types';
5+
6+
import '@spectrum-web-components/field-label/sp-field-label.js';
7+
import '@spectrum-web-components/number-field/sp-number-field.js';
8+
import '@spectrum-web-components/help-text/sp-help-text.js';
9+
10+
import type { NumberField } from '@spectrum-web-components/number-field';
11+
12+
export const number: Widgets['number'] = (options) =>
13+
html` <!-- -->
14+
<sp-number-field
15+
value=${ifDefined(options.value)}
16+
step=${ifDefined(options.step)}
17+
min=${ifDefined(options.min)}
18+
max=${ifDefined(options.max)}
19+
.label=${options.label}
20+
.helpText=${options.helpText}
21+
placeholder=${options.placeholder}
22+
.name=${options.id}
23+
.id=${options.id}
24+
.required=${options.required}
25+
@input=${(event: Event) => {
26+
const newValue = (event.target as NumberField).valueAsNumber;
27+
console.log(newValue);
28+
options.valueChangedCallback?.(newValue);
29+
}}
30+
></sp-number-field>`;

0 commit comments

Comments
 (0)