Skip to content

Commit

Permalink
feat(storybook): add a shared decorator for focus-state and static co…
Browse files Browse the repository at this point in the history 
…lor settings
  • Loading branch information
@castastrophe
castastrophe committed Jan 2, 2024
1 parent 3e292d9 commit e536999
Show file tree
Hide file tree
Showing 229 changed files with 2,658 additions and 3,309 deletions.
16 changes: 10 additions & 6 deletions .storybook/assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ nav .spectrum-Site-logo {

.docblock-argstable-body td > span:has(select),
.docblock-argstable-body td textarea {
max-width: 280px !important;
max-inline-size: 280px !important;
}

#storybook-explorer-tree {
Expand All @@ -51,7 +51,7 @@ button.sidebar-item {
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1.4em !important;
height: 32px !important;
block-size: 32px !important;
border-radius: 4px !important;
padding-inline-start: 24px !important;
padding-inline-end: 12px !important;
Expand Down Expand Up @@ -122,7 +122,7 @@ select:focus,
}

[role="main"] > div > div:first-child .os-content > div > div > * {
margin-top: 0 !important;
margin-block-start: 0 !important;
}

[role="main"] > div > div:first-child .os-content > div > div > div > a {
Expand Down Expand Up @@ -161,8 +161,8 @@ select:focus,
button::after {
content: "◢";
position: absolute;
bottom: -3px;
right: -1px;
inset-block-end: -3px;
inset-inline-end: -1px;
display: inline-block;
transform: scale(0.5);
color: rgb(177, 177, 177);
Expand Down Expand Up @@ -190,7 +190,7 @@ select:focus,
> div
> div
:is(button, a:not(:has(button)), span) {
height: 32px;
block-size: 32px;
}

[role="main"]
Expand All @@ -202,3 +202,7 @@ select:focus,
:is(button:hover, a:hover:not(:has(button))) {
background-color: rgb(230, 230, 230) !important;
}

.docs-story #root-inner {
margin: 10px;
}
71 changes: 27 additions & 44 deletions .storybook/decorators/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useEffect, makeDecorator } from "@storybook/preview-api";
import { makeDecorator, useEffect } from "@storybook/preview-api";

import { html } from "lit";

export { withContextWrapper } from "./contextsWrapper.js";
Expand All @@ -12,7 +13,7 @@ export const withTextDirectionWrapper = makeDecorator({
parameterName: "textDecoration",
wrapper: (StoryFn, context) => {
const { globals, parameters } = context;
const defaultDirection = "ltr"
const defaultDirection = "ltr"
const textDirection = parameters.textDirection || globals.textDirection || defaultDirection;

// Shortkeys for the global types
Expand Down Expand Up @@ -90,53 +91,35 @@ export const withLanguageWrapper = makeDecorator({
},
});


/**
* @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework>
**/
export const withSizingWrapper = makeDecorator({
name: "withSizingWrapper",
parameterName: "context",
export const withPreviewStyles = makeDecorator({
name: "withPreviewStyles",
parameterName: "customStyles",
wrapper: (StoryFn, context) => {
const { argTypes, parameters } = context;
const sizes = argTypes?.size?.options || [];
const sizeVariants =
typeof parameters?.sizeVariants === "undefined"
? true
: parameters.sizeVariants;

/** To suppress the sizing wrapper, add `sizeVariants: false` to the parameters of a story */
if (sizes.length === 0 || !sizeVariants) return StoryFn(context);
const printSize = (size) => {
if (size === "xs") return "Extra-small";
if (size === "s") return "Small";
if (size === "m") return "Medium";
if (size === "l") return "Large";
if (size === "xl") return "Extra-large";
if (size === "xxl") return "Extra-extra-large";
return size;
const { args } = context;
const staticColor = args.staticColor;
const customStyles = args.customStorybookStyles ?? {};
const customStorybookStyles = {
/** @todo: do we really want flex as our default display type? does this make development harder b/c we have to consider how it impacts a component or is it helpful so we can stack components in a view easily? */
display: "flex",
// automatically set the background color for static color settings
backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
// Gap is only supported for flex and grid so we don't need to set it for other display types
gap: customStyles.gap ?? (!customStyles.display || customStyles.display && ["flex", "grid"].some(d => customStyles.display.endsWith(d))) ? "10px" : undefined,
padding: customStyles.padding ?? (customStyles.display && ["flex", "grid", "contents"].every(d => !customStyles.display.endsWith(d))) ? "10px 0" : undefined,
...customStyles,
};

context.parameters.html.root =
'.spectrum-Examples-item[data-value="m"] #scoped-root';
context.argTypes.size.table = {
...context.argTypes.size.table,
disable: true,
};
useEffect(() => {
const root = document.querySelector("#root-inner");
Object.entries(customStorybookStyles).forEach(([key, value]) => {
if (value) root.style[key] = value;
});
}, [customStorybookStyles]);

return html` <div class="spectrum-Examples">
${sizes.map((size) => {
context.args.size = size;
return html` <div class="spectrum-Examples-item" data-value=${size}>
<div class="spectrum-Examples-itemGroup" id="scoped-root">
${StoryFn(context)}
</div>
<h4
class="spectrum-Detail spectrum-Detail--sizeXS spectrum-Examples-itemHeading"
>
${printSize(size)}
</h4>
</div>`;
})}
</div>`;
},
return StoryFn(context);
}
});
9 changes: 1 addition & 8 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ module.exports = {
postcssOptions: {
config: resolve(__dirname, "postcss.config.js"),
},
sourceMap: true,
},
},
],
Expand All @@ -154,21 +155,13 @@ module.exports = {
},
framework: {
name: "@storybook/web-components-webpack5",
options: {},
},
features: {
/* Code splitting flag; load stories on-demand */
storyStoreV7: true,
/* Builds stories.json to help with on-demand loading */
buildStoriesJson: true,
},
// refs: {
// 'swc': {
// title: 'Spectrum Web Components',
// url: 'https://opensource.adobe.com/spectrum-web-components/storybook/',
// expanded: false,
// },
// },
docs: {
autodocs: true, // see below for alternatives
defaultName: "Docs", // set to change the name of generated docs entries
Expand Down
35 changes: 18 additions & 17 deletions .storybook/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"homepage": "https://opensource.adobe.com/spectrum-css/preview",
"main": "main.js",
"scripts": {
"build": "storybook build --config-dir . --output-dir ./storybook-static"
"build": "storybook build --config-dir ."
},
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
Expand All @@ -21,24 +21,25 @@
"@babel/core": "^7.22.1",
"@chromaui/addon-visual-tests": "^0.0.124",
"@etchteam/storybook-addon-status": "^4.2.4",
"@spectrum-css/component-builder": "^4.0.19",
"@storybook/addon-a11y": "^7.5.1",
"@storybook/addon-actions": "^7.5.1",
"@storybook/addon-a11y": "^7.6.7",
"@storybook/addon-actions": "^7.6.7",
"@storybook/addon-console": "^1.2.3",
"@storybook/addon-docs": "^7.5.1",
"@storybook/addon-essentials": "^7.0.20",
"@storybook/addon-interactions": "^7.5.1",
"@storybook/api": "^7.5.1",
"@storybook/blocks": "^7.0.20",
"@storybook/client-api": "^7.5.1",
"@storybook/components": "^7.0.20",
"@storybook/core-events": "^7.0.20",
"@storybook/addon-docs": "^7.6.7",
"@storybook/addon-essentials": "^7.6.7",
"@storybook/addon-interactions": "^7.6.7",
"@storybook/addons": "^7.6.7",
"@storybook/api": "^7.6.7",
"@storybook/blocks": "^7.6.7",
"@storybook/client-api": "^7.6.7",
"@storybook/client-logger": "^7.6.7",
"@storybook/components": "^7.6.7",
"@storybook/core-events": "^7.6.7",
"@storybook/jest": "^0.2.3",
"@storybook/manager-api": "^7.0.20",
"@storybook/preview-api": "^7.0.20",
"@storybook/manager-api": "^7.6.7",
"@storybook/preview-api": "^7.6.7",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^7.0.20",
"@storybook/web-components-webpack5": "^7.5.1",
"@storybook/theming": "^7.6.7",
"@storybook/web-components-webpack5": "^7.6.7",
"@whitespace/storybook-addon-html": "^5.1.6",
"chromatic": "^7.0.0",
"file-loader": "6.2.0",
Expand All @@ -56,7 +57,7 @@
"react-dom": "^18.0.0",
"react-syntax-highlighter": "^15.5.0",
"source-map-loader": "^4.0.1",
"storybook": "^7.5.1",
"storybook": "^7.6.7",
"storybook-addon-pseudo-states": "^2.1.0",
"style-loader": "3.3.3",
"webpack": "^5.83.1"
Expand Down
62 changes: 17 additions & 45 deletions .storybook/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
const { resolve, basename } = require("path");
const { existsSync } = require("fs");
const warnCleaner = require("postcss-warn-cleaner");

const simpleBuilder = require("@spectrum-css/component-builder-simple/css/processors.js");
const legacyBuilder = require("@spectrum-css/component-builder/css/processors.js");
const { join, basename } = require("path");

/**
* Determines the package name from a file path
Expand All @@ -15,11 +10,16 @@ function getPackageFromPath(filePath) {
}

module.exports = (ctx) => {
let plugins = [];
const componentPath = resolve(__dirname, "../components");
/** @todo put together a more robust fallback determination */
const cwd = ctx.cwd ?? process.cwd();
const plugins = [
require("postcss-import")({
root: cwd,
addModulesDirectories: [join(cwd, "node_modules"), join(__dirname, "node_modules")],
})
];

/** @todo put together a more robust fallback determination */
const folderName = getPackageFromPath(ctx.file) ?? "tokens";
const pkgPath = resolve(componentPath, folderName, "package.json");

/**
* For our token libraries, include a little extra parsing to allow duplicate
Expand All @@ -33,8 +33,7 @@ module.exports = (ctx) => {
.replace("global", "")
: "";

plugins = [
require("postcss-import")(),
plugins.push(
require("postcss-selector-replace")({
before: [":root"],
after: [
Expand All @@ -43,8 +42,10 @@ module.exports = (ctx) => {
}${!isExpress && !modifier ? ".spectrum" : ""}`,
],
}),
...(isExpress
? [
);

if (isExpress) {
plugins.push(
require("postcss-prefix-selector")({
prefix: ".spectrum--express",
transform(_prefix, selector, prefixedSelector) {
Expand All @@ -53,44 +54,15 @@ module.exports = (ctx) => {
return prefixedSelector.replace(" ", "");
},
}),
]
: []),
];
} else if (existsSync(pkgPath)) {
/**
* If a path has a package.json, we can assume it's a component and
* we want to leverage the correct plugins for it.
*/
const {
peerDependencies = {},
devDependencies = {},
dependencies = {}
} = require(pkgPath);

const deps = [...new Set([
...Object.keys(peerDependencies),
...Object.keys(dependencies),
...Object.keys(devDependencies),
])];

if (
deps.includes("@spectrum-css/vars")
) {
plugins.push(...legacyBuilder.processors);
} else {
if (ctx.file.split("/").includes("themes")) {
plugins.push(...simpleBuilder.getProcessors({ noSelectors: false }));
} else {
plugins.push(...simpleBuilder.getProcessors());
}
);
}
}

/**
* For storybook, add a tool to suppress unnecessary warnings
*/
plugins.push(
warnCleaner({
require("postcss-warn-cleaner")({
ignoreFiles: "**/*.css",
})
);
Expand Down
Loading

0 comments on commit e536999

Please sign in to comment.