Skip to content

Commit b5079ad

Browse files
castastrophecastastrophe
committed
feat: fork into custom local add-on
1 parent 9d6789f commit b5079ad

File tree

141 files changed

+8156
-1719
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+8156
-1719
lines changed

‎.changeset/big-chairs-care.md

-6
This file was deleted.

‎.changeset/young-cheetahs-peel.md

-6
This file was deleted.

‎.eslintrc

+10-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
"parserOptions": {
99
"sourceType": "module"
1010
},
11+
"settings": {
12+
"react": {
13+
"version": "detect"
14+
}
15+
},
1116
"extends": "eslint:recommended",
1217
"rules": {
1318
"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
@@ -17,7 +22,8 @@
1722
"no-console": ["warn", { "allow": ["warn", "error"] }],
1823
"quotes": ["warn", "double"],
1924
"semi": ["warn", "always"],
20-
"space-before-blocks": ["warn", "always"]
25+
"space-before-blocks": ["warn", "always"],
26+
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
2127
},
2228
"overrides": [
2329
{
@@ -172,8 +178,10 @@
172178
"files": [
173179
"components/*/stories/*.js",
174180
".storybook/*.js",
175-
".storybook/**/*.js"
181+
".storybook/**/*.js",
182+
"plugins/storybook-addon-*/*.js"
176183
],
184+
"extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"],
177185
"parserOptions": {
178186
"ecmaVersion": "latest",
179187
"sourceType": "module",

‎.github/workflows/lint.yml

-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ jobs:
105105
# stylelint_input: "components/*/index.css components/*/themes/*.css"
106106
stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
107107
stylelint_config: "${{ github.workspace }}/stylelint.config.js"
108-
packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical'
109108

110109
- name: Run eslint on packages and stories
111110
uses: reviewdog/[email protected]

‎.storybook/decorators/utilities.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -556,12 +556,12 @@ export const renderContent = (content = [], {
556556
if (content.length === 0) return nothing;
557557

558558
return html`
559-
${content.map((c) => {
559+
${content.map((c, idx) => {
560560
if (typeof c === "undefined") return nothing;
561561
562562
/* If the content is an object (but not a lit object), we need to merge the object with the template */
563563
if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
564-
return callback({ ...args, ...c }, context);
564+
return callback({ ...args, ...c, idx }, context);
565565
}
566566
567567
if (typeof c === "function") {

‎.storybook/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -63,20 +63,20 @@ export default {
6363
name: "@storybook/addon-actions",
6464
options: {},
6565
},
66-
// https://www.npmjs.com/package/@whitespace/storybook-addon-html
67-
"@whitespace/storybook-addon-html",
66+
// Local: plugins/storybook-addon-custom-properties
67+
"@spectrum-tools/storybook-addon-custom-properties",
6868
// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
69-
"@storybook/addon-a11y",
69+
"@whitespace/storybook-addon-html",
7070
// https://storybook.js.org/addons/@etchteam/storybook-addon-status
71+
"@storybook/addon-a11y",
72+
// https://www.npmjs.com/package/@whitespace/storybook-addon-html
7173
"@etchteam/storybook-addon-status",
7274
// https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
7375
"@storybook/addon-interactions",
7476
// https://docs.chromatic.com/docs/visual-tests-addon/
7577
"@chromatic-com/storybook",
7678
// https://storybook.js.org/addons/@storybook/addon-designs/
7779
"@storybook/addon-designs",
78-
// https://github.com/ljcl/storybook-addon-cssprops
79-
"@ljcl/storybook-addon-cssprops",
8080
],
8181
core: {
8282
disableTelemetry: true,

‎.storybook/package.json

+20-19
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,27 @@
4646
"@spectrum-css/ui-icons": "1.1.2"
4747
},
4848
"devDependencies": {
49-
"@babel/core": "^7.26.0",
49+
"@babel/core": "^7.26.10",
5050
"@chromatic-com/storybook": "^3.2.3",
5151
"@etchteam/storybook-addon-status": "^5.0.0",
52-
"@storybook/addon-a11y": "^8.4.7",
53-
"@storybook/addon-actions": "^8.4.7",
54-
"@storybook/addon-designs": "^8.0.4",
55-
"@storybook/addon-docs": "^8.4.7",
56-
"@storybook/addon-essentials": "^8.4.7",
57-
"@storybook/addon-interactions": "^8.4.7",
58-
"@storybook/blocks": "^8.4.7",
59-
"@storybook/builder-vite": "^8.4.7",
60-
"@storybook/components": "^8.4.7",
61-
"@storybook/core-events": "^8.4.7",
62-
"@storybook/manager-api": "^8.4.7",
63-
"@storybook/preview-api": "^8.4.7",
64-
"@storybook/test-runner": "^0.21.0",
65-
"@storybook/theming": "^8.4.7",
66-
"@storybook/web-components-vite": "^8.4.7",
52+
"@spectrum-tools/storybook-addon-custom-properties": "0.0.0",
53+
"@storybook/addon-a11y": "^8.6.9",
54+
"@storybook/addon-actions": "^8.6.9",
55+
"@storybook/addon-designs": "^8.2.1",
56+
"@storybook/addon-docs": "^8.6.9",
57+
"@storybook/addon-essentials": "^8.6.9",
58+
"@storybook/addon-interactions": "^8.6.9",
59+
"@storybook/blocks": "^8.6.9",
60+
"@storybook/builder-vite": "^8.6.9",
61+
"@storybook/components": "^8.6.9",
62+
"@storybook/core-events": "^8.6.9",
63+
"@storybook/manager-api": "^8.6.9",
64+
"@storybook/preview-api": "^8.6.9",
65+
"@storybook/test-runner": "^0.22.0",
66+
"@storybook/theming": "^8.6.9",
67+
"@storybook/web-components-vite": "^8.6.9",
6768
"@whitespace/storybook-addon-html": "^6.1.1",
68-
"chromatic": "^11.22.2",
69+
"chromatic": "^11.27.0",
6970
"lit": "^3.2.1",
7071
"lodash-es": "^4.17.21",
7172
"npm-registry-fetch": "^18.0.2",
@@ -76,8 +77,8 @@
7677
"react-syntax-highlighter": "^15.6.1",
7778
"remark-gfm": "^4.0.0",
7879
"rollup-plugin-postcss-lit": "^2.1.0",
79-
"storybook": "^8.4.7",
80-
"vite": "^5.4.11"
80+
"storybook": "^8.6.9",
81+
"vite": "^5.4.14"
8182
},
8283
"keywords": [
8384
"design-system",

‎components/accordion/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
&:lang(ja),
7373
&:lang(zh),
7474
&:lang(ko) {
75+
/* @description When the language is CJK, update line-height values to prevent cut off diacritics */
7576
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
7677
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
7778
}

‎components/accordion/stories/accordion.stories.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import { Sizes } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
44
import { size } from "@spectrum-css/preview/types";
55
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
6-
import metadata from "../dist/metadata.json";
7-
import packageJson from "../package.json";
86
import { AccordionGroup } from "./accordion.test.js";
97
import { Template } from "./template.js";
108

9+
// Local assets to render the component styles and structure
10+
import styles from "../index.css?inline";
11+
import metadata from "../dist/metadata.json";
12+
import packageJson from "../package.json";
13+
1114
/**
1215
* The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
1316
*
@@ -68,17 +71,7 @@ export default {
6871
},
6972
packageJson,
7073
metadata,
71-
cssprops: {
72-
...metadata.modifiers.reduce((collection, item) => {
73-
const key = item.replace(/^--/, "");
74-
collection[key] = {
75-
category: "Modifiers",
76-
control: key.includes("color") ? "color" : "text",
77-
value: key.includes("color") ? undefined : " ",
78-
};
79-
return collection;
80-
}, {})
81-
},
74+
cssprops: { styles },
8275
},
8376
};
8477

‎components/actionbar/stories/actionbar.stories.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
33
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
44
import { disableDefaultModes } from "@spectrum-css/preview/modes";
55
import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
6-
import metadata from "../dist/metadata.json";
7-
import packageJson from "../package.json";
86
import { ActionBarGroup } from "./actionbar.test.js";
97
import { BehavioralTemplate } from "./template.js";
108

9+
// Local assets to render the component styles and structure
10+
import styles from "../index.css?inline";
11+
import metadata from "../dist/metadata.json";
12+
import packageJson from "../package.json";
13+
1114
/**
1215
* The action bar component is a floating full width bar that appears upon selection. 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.
1316
*
@@ -72,17 +75,7 @@ export default {
7275
},
7376
packageJson,
7477
metadata,
75-
cssprops: {
76-
...metadata.modifiers.reduce((collection, item) => {
77-
const key = item.replace(/^--/, "");
78-
collection[key] = {
79-
category: "Modifiers",
80-
control: key.includes("color") ? "color" : "text",
81-
value: key.includes("color") ? undefined : " ",
82-
};
83-
return collection;
84-
}, {})
85-
},
78+
cssprops: { styles },
8679
},
8780
};
8881

‎components/actionbar/stories/template.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Container } from "@spectrum-css/preview/decorators";
21
import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
32
import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
43
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
54
import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
5+
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
66
import { html } from "lit";
77
import { classMap } from "lit/directives/class-map.js";
8+
import { ifDefined } from "lit/directives/if-defined.js";
89
import { styleMap } from "lit/directives/style-map.js";
910

1011
import "../index.css";
@@ -14,6 +15,7 @@ import "../themes/express.css";
1415

1516
export const Template = ({
1617
rootClass = "spectrum-ActionBar",
18+
id = getRandomId("action-bar"),
1719
size = "m",
1820
isOpen = true,
1921
isEmphasized = false,
@@ -36,6 +38,7 @@ export const Template = ({
3638
"is-open": isOpen,
3739
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
3840
})}
41+
id=${ifDefined(id)}
3942
style=${styleMap(customStyles)}
4043
>
4144
${Popover({

‎components/actionbutton/stories/actionbutton.stories.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
22
import { Sizes } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
44
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
5-
import metadata from "../dist/metadata.json";
6-
import packageJson from "../package.json";
75
import { ActionButtonGroup } from "./actionbutton.test.js";
86
import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js";
97

8+
// Local assets to render the component styles and structure
9+
import styles from "../index.css?inline";
10+
import metadata from "../dist/metadata.json";
11+
import packageJson from "../package.json";
12+
1013
/**
1114
* The action button component represents an action a user can take.
1215
*
@@ -90,17 +93,7 @@ export default {
9093
},
9194
packageJson,
9295
metadata,
93-
cssprops: {
94-
...metadata.modifiers.reduce((collection, item) => {
95-
const key = item.replace(/^--/, "");
96-
collection[key] = {
97-
category: "Modifiers",
98-
control: key.includes("color") ? "color" : "text",
99-
value: key.includes("color") ? undefined : " ",
100-
};
101-
return collection;
102-
}, {})
103-
},
96+
cssprops: { styles },
10497
docs: {
10598
story: {
10699
height: "auto",

‎components/actionbutton/stories/template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
4646
*/
4747
export const Template = ({
4848
rootClass = "spectrum-ActionButton",
49+
id = getRandomId("action-button"),
4950
size = "m",
5051
iconName,
5152
iconSet = "workflow",
@@ -65,7 +66,6 @@ export const Template = ({
6566
customStyles = {},
6667
customIconClasses = [],
6768
onclick,
68-
id = getRandomId("actionbutton"),
6969
testId,
7070
role = "button",
7171
} = {}, context = {}) => {

‎components/actiongroup/stories/actiongroup.stories.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
22
import { Sizes } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
44
import { size } from "@spectrum-css/preview/types";
5-
import metadata from "../dist/metadata.json";
6-
import packageJson from "../package.json";
75
import { ActionGroups } from "./actiongroup.test.js";
86
import { OverflowOption, TreatmentTemplate } from "./template.js";
97

8+
// Local assets to render the component styles and structure
9+
import styles from "../index.css?inline";
10+
import metadata from "../dist/metadata.json";
11+
import packageJson from "../package.json";
12+
1013
/**
1114
* An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other.
1215
*/
@@ -99,17 +102,7 @@ export default {
99102
},
100103
packageJson,
101104
metadata,
102-
cssprops: {
103-
...metadata.modifiers.reduce((collection, item) => {
104-
const key = item.replace(/^--/, "");
105-
collection[key] = {
106-
category: "Modifiers",
107-
control: key.includes("color") ? "color" : "text",
108-
value: key.includes("color") ? undefined : " ",
109-
};
110-
return collection;
111-
}, {})
112-
},
105+
cssprops: { styles },
113106
},
114107
};
115108

‎components/actiongroup/stories/template.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
2-
import { Container, renderContent } from "@spectrum-css/preview/decorators";
2+
import { Container, getRandomId, renderContent } from "@spectrum-css/preview/decorators";
33
import { html } from "lit";
44
import { classMap } from "lit/directives/class-map.js";
5+
import { ifDefined } from "lit/directives/if-defined.js";
56
import { styleMap } from "lit/directives/style-map.js";
67
import { capitalize } from "lodash-es";
78

@@ -12,6 +13,7 @@ import "../themes/express.css";
1213

1314
export const Template = ({
1415
rootClass = "spectrum-ActionGroup",
16+
id = getRandomId("accordion-group"),
1517
size = "m",
1618
areQuiet = false,
1719
areEmphasized = false,
@@ -41,6 +43,7 @@ export const Template = ({
4143
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
4244
})}
4345
style=${styleMap(customStyles)}
46+
id=${ifDefined(id)}
4447
>
4548
${renderContent(content, {
4649
callback: ActionButton,

0 commit comments

Comments
 (0)