Skip to content

Commit

Permalink
Add Storybook to fast-foundation (microsoft#6113)
Browse files Browse the repository at this point in the history 
* reify lockfile

* add storybook to fast-foundation

* add utilities.js export to fast-element

* add reusable svg to preview-body for storybook

* add elevation shortcuts as vars

* add anchor stories

* add accordion and accordion-item stories

* update anchor story register

* add avatar stories

* add badge stories

* add breadcrumb and breadcrmb-item stories

* add button stories

* add card stories

* add stories folders to exclusion list for CEM config

* add types config to fast-animation

* reify lockfile

* update start command

* remove console log and extra resolve

* add height number var

* add checkbox stories

* add anchored region stories

* disable shortcuts in storybook

* add listbox-option stories

* add listbox stories

* add combobox stories

* improve combobox styles

* improve listbox-option styles

* improve listbox styles

* add select stories

* add data-grid, data-grid-row, and data-grid-cell stories

* set default arg values for anchored-region

* point imports to direct modules instead of index files

* use require.context to load registration modules

* fix console warning

* add dialog stories

* reify lockfile

* Change files

* add divider stories

* add flipper stories

* add picker stories

* rename register modules

* add horizontal-scroll stories

* add number-field stories

* add progress stories

* separate progress-ring specific exports and use stub modules

* add progress-ring stories

* fix radio template setting classList instead of class

* add radio stories

* add radio-group stories

* add search stories

* add text-area stories

* add text-field stories

* add tree-item and tree-view stories

* convert SkeletonShape to a const

* add skeleton stories

* convert AutoUpdateMode to a const

* add tooltip stories

* add slider and slider-label stories

* add disclosure stories

* add tab stories

* add tab-panel stories

* add tabs stories

* fix tests and api-report errors

* add toolbar stories

* remove exports from register modules

* remove old comments from register modules

* add switch stories

* remove extra utilities export from fast-element

* reify lockfile

* remove changefile for fast-element

* add menu and menu-item stories

* use explicit imports for storybook component registrations

* throw eslint error when importing from stories folders

* add calendar stories

* use functions for styles

* minor fixes and api-report

* fix styling issues with select and picker
  • Loading branch information
@radium-v
radium-v authored Jun 24, 2022
1 parent 1e4a383 commit 0466b2c
Show file tree
Hide file tree
Showing 133 changed files with 11,552 additions and 1,085 deletions.
7 changes: 7 additions & 0 deletions change/@microsoft-fast-animation-f200b0ef-a819-4de3-bc92-53b5a7f21c43.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "add types config to fast-animation",
"packageName": "@microsoft/fast-animation",
"email": "863023+radium-v@users.noreply.github.com",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@microsoft-fast-foundation-f804cc33-e521-40c5-b2a2-1dbd708cbdf4.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "add storybook to fast-foundation",
"packageName": "@microsoft/fast-foundation",
"email": "863023+radium-v@users.noreply.github.com",
"dependentChangeType": "prerelease"
}
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,6 @@
"trim": "^0.0.3",
"typescript": "^4.7.0",
"ua-parser-js": "^0.7.28",
"ws": "^7.4.6",
"xmlhttprequest-ssl": "^1.6.2"
},
"devDependencies": {
Expand Down
3 changes: 2 additions & 1 deletion packages/utilities/fast-animation/lib/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"target": "es5",
"baseUrl": ".",
"declaration": true,
"outDir": "../dist"
"outDir": "../dist",
"types": ["jest", "webpack-env", "node"],
}
}
1 change: 1 addition & 0 deletions packages/utilities/fast-animation/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"sourceMap": true,
"rootDir": "./",
"baseUrl": ".",
"types": ["jest", "webpack-env", "node"],
"lib": [ "es2015", "es2017", "dom", "scripthost" ],
"paths": {
"[lib]/*": [
Expand Down
6 changes: 6 additions & 0 deletions packages/web-components/fast-foundation/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
},
"extendDefaults": true
}
],
"no-restricted-imports": [
"error",
{
"patterns": ["**/stories/**"]
}
]
}
}
36 changes: 36 additions & 0 deletions packages/web-components/fast-foundation/.storybook/main.cjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const ResolveTypescriptPlugin = require("resolve-typescript-plugin");
const path = require("path");

module.exports = {
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
stories: ["../src/**/stories/*.stories.ts"],
framework: "@storybook/html",
features: {
babelModeV7: true,
},
core: {
disableTelemetry: true,
builder: "webpack5",
},
webpackFinal: async config => {
config.module.rules = [
{
test: /\.ts$/,
loader: "ts-loader",
sideEffects: true,
options: {
configFile: path.resolve("./tsconfig.json"),
transpileOnly: true,
},
},
];

config.resolve.plugins = [
...(config.resolve.plugins || []),
new ResolveTypescriptPlugin({
includeNodeModules: true,
}),
];
return config;
},
};
5 changes: 5 additions & 0 deletions packages/web-components/fast-foundation/.storybook/manager.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { addons } from "@storybook/addons";

addons.setConfig({
enableShortcuts: false,
});
1 change: 1 addition & 0 deletions packages/web-components/fast-foundation/.storybook/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
7 changes: 7 additions & 0 deletions packages/web-components/fast-foundation/.storybook/preview-body.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<svg style="display: none;">
<symbol id="test-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
/>
</symbol>
</svg>
170 changes: 170 additions & 0 deletions packages/web-components/fast-foundation/.storybook/preview-head.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<style>
:root {
--accent-color: #da1a5f;
--accent-fill-active: #df3c77;
--accent-fill-focus: #dc2969;
--accent-fill-hover: #da1a5f;
--accent-fill-rest: #dc2969;
--accent-foreground-active: #dc2969;
--accent-foreground-focus: #da1a5f;
--accent-foreground-hover: #b3154e;
--accent-foreground-rest: #da1a5f;
--ambient-shadow-alpha: calc(0.11 * (2 - var(--background-luminance, 1)));
--ambient-shadow-color: rgba(0, 0, 0, var(--ambient-shadow-alpha));
--ambient-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px)
var(--ambient-shadow-color);
--base-height-multiplier: 10;
--base-horizontal-spacing-multiplier: 3;
--base-layer-luminance: 1;
--body-font: Arial, Helvetica, sans-serif;
--clear-button-active: #ededed;
--clear-button-hover: #f2f2f2;
--control-corner-radius: 4;
--density: 0;
--design-unit: 4;
--direction: ltr;
--directional-shadow: 0 calc(var(--elevation) * 0.4px)
calc((var(--elevation) * 0.9px)) var(--directional-shadow-color);
--directional-shadow-alpha: calc(0.13 * (2 - var(--background-luminance, 1)));
--directional-shadow-color: rgba(0, 0, 0, var(--directional-shadow-alpha));
--disabled-opacity: 0.3;
--elevation: 14;
--elevation-shadow: var(--ambient-shadow), var(--directional-shadow);
--height-number: (var(--base-height-multiplier) + var(--density)) *
var(--design-unit);
--fill-color: #ffffff;
--focus-stroke-inner: #ffffff;
--focus-stroke-outer: #888888;
--focus-stroke-width: 2;
--foreground-on-accent-active-large: #000000;
--foreground-on-accent-active: #000000;
--foreground-on-accent-focus-large: #000000;
--foreground-on-accent-focus: #ffffff;
--foreground-on-accent-hover-large: #000000;
--foreground-on-accent-hover: #ffffff;
--foreground-on-accent-rest-large: #000000;
--foreground-on-accent-rest: #ffffff;
--neutral-color: #808080;
--neutral-fill-active: #f2f2f2;
--neutral-fill-focus: #ffffff;
--neutral-fill-hover: #e5e5e5;
--neutral-fill-input-active: #ffffff;
--neutral-fill-input-focus: #ffffff;
--neutral-fill-input-hover: #ffffff;
--neutral-fill-input-rest: #ffffff;
--neutral-fill-layer-rest: #f7f7f7;
--neutral-fill-rest: #ededed;
--neutral-fill-stealth-active: #f7f7f7;
--neutral-fill-stealth-focus: #ffffff;
--neutral-fill-stealth-hover: #f2f2f2;
--neutral-fill-stealth-rest: #ffffff;
--neutral-fill-strong-active: #838383;
--neutral-fill-strong-focus: #767676;
--neutral-fill-strong-hover: #616161;
--neutral-fill-strong-rest: #767676;
--neutral-foreground-hint: #767676;
--neutral-foreground-rest: #2b2b2b;
--neutral-layer-1: #ffffff;
--neutral-layer-2: #e5e5e5;
--neutral-layer-3: #dddddd;
--neutral-layer-4: #d6d6d6;
--neutral-layer-card-container: #f7f7f7;
--neutral-layer-floating: #ffffff;
--neutral-stroke-active: #d6d6d6;
--neutral-stroke-divider-rest: #eaeaea;
--neutral-stroke-focus: #bebebe;
--neutral-stroke-hover: #979797;
--neutral-stroke-rest: #bebebe;
--stroke-width: 1;
--tree-item-expand-collapse-hover: #e5e5e5;
--tree-item-expand-collapse-selected-hover: #e0e0e0;
--type-ramp-base-font-size: 14px;
--type-ramp-base-line-height: 20px;
--type-ramp-minus-1-font-size: 12px;
--type-ramp-minus-1-line-height: 16px;
--type-ramp-minus-2-font-size: 10px;
--type-ramp-minus-2-line-height: 16px;
--type-ramp-plus-1-font-size: 16px;
--type-ramp-plus-1-line-height: 24px;
--type-ramp-plus-2-font-size: 20px;
--type-ramp-plus-2-line-height: 28px;
--type-ramp-plus-3-font-size: 28px;
--type-ramp-plus-3-line-height: 36px;
--type-ramp-plus-4-font-size: 34px;
--type-ramp-plus-4-line-height: 44px;
--type-ramp-plus-5-font-size: 46px;
--type-ramp-plus-5-line-height: 56px;
--type-ramp-plus-6-font-size: 60px;
--type-ramp-plus-6-line-height: 72px;
}

html {
background-color: var(--fill-color);
min-height: 100%;
}

html,
body,
#root {
width: 100%;
}

@media (prefers-color-scheme: dark) {
:root {
--accent-fill-active: #a01346;
--accent-fill-focus: #c01754;
--accent-fill-hover: #da1a5f;
--accent-fill-rest: #c01754;
--accent-foreground-active: #df3874;
--accent-foreground-focus: #e1477e;
--accent-foreground-hover: #e55e8e;
--accent-foreground-rest: #e1477e;
--base-layer-luminance: 0.1;
--clear-button-active: #3b3b3b;
--clear-button-hover: #404040;
--fill-color: #1a1a1a;
--focus-stroke-inner: #350617;
--focus-stroke-outer: #717171;
--foreground-on-accent-active-large: #ffffff;
--foreground-on-accent-active: #ffffff;
--foreground-on-accent-focus-large: #000000;
--foreground-on-accent-focus: #ffffff;
--foreground-on-accent-hover-large: #000000;
--foreground-on-accent-hover: #ffffff;
--foreground-on-accent-rest-large: #000000;
--foreground-on-accent-rest: #ffffff;
--neutral-fill-active: #262626;
--neutral-fill-focus: #181818;
--neutral-fill-hover: #333333;
--neutral-fill-input-active: #181818;
--neutral-fill-input-focus: #181818;
--neutral-fill-input-hover: #181818;
--neutral-fill-input-rest: #181818;
--neutral-fill-layer-rest: #212121;
--neutral-fill-rest: #2b2b2b;
--neutral-fill-stealth-active: #212121;
--neutral-fill-stealth-focus: #181818;
--neutral-fill-stealth-hover: #262626;
--neutral-fill-stealth-rest: #181818;
--neutral-fill-strong-active: #767676;
--neutral-fill-strong-focus: #838383;
--neutral-fill-strong-hover: #979797;
--neutral-fill-strong-rest: #838383;
--neutral-foreground-hint: #838383;
--neutral-foreground-rest: #e8e8e8;
--neutral-layer-1: #181818;
--neutral-layer-2: #101010;
--neutral-layer-3: #000000;
--neutral-layer-4: #000000;
--neutral-layer-card-container: #101010;
--neutral-layer-floating: #292929;
--neutral-stroke-active: #424242;
--neutral-stroke-divider-rest: #2e2e2e;
--neutral-stroke-focus: #5a5a5a;
--neutral-stroke-hover: #808080;
--neutral-stroke-rest: #5a5a5a;
--tree-item-expand-collapse-hover: #333333;
--tree-item-expand-collapse-selected-hover: #383838;
}
}
</style>
57 changes: 57 additions & 0 deletions packages/web-components/fast-foundation/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import "../src/anchor/stories/anchor.register.js";
import "../src/anchored-region/stories/anchored-region.register.js";
import "../src/avatar/stories/avatar.register.js";
import "../src/badge/stories/badge.register.js";
import "../src/button/stories/button.register.js";
import "../src/card/stories/card.register.js";
import "../src/checkbox/stories/checkbox.register.js";
import "../src/dialog/stories/dialog.register.js";
import "../src/disclosure/stories/disclosure.register.js";
import "../src/divider/stories/divider.register.js";
import "../src/flipper/stories/flipper.register.js";
import "../src/number-field/stories/number-field.register.js";
import "../src/picker/stories/picker.register.js";
import "../src/progress-ring/stories/progress-ring.register.js";
import "../src/progress/stories/progress.register.js";
import "../src/radio/stories/radio.register.js";
import "../src/search/stories/search.register.js";
import "../src/skeleton/stories/skeleton.register.js";
import "../src/switch/stories/switch.register.js";
import "../src/text-area/stories/text-area.register.js";
import "../src/text-field/stories/text-field.register.js";
import "../src/tooltip/stories/tooltip.register.js";

import "../src/data-grid/stories/data-grid-cell.register.js";
import "../src/data-grid/stories/data-grid-row.register.js";
import "../src/data-grid/stories/data-grid.register.js";

import "../src/calendar/stories/calendar.register.js";

import "../src/slider-label/stories/slider-label.register.js";
import "../src/slider/stories/slider.register.js";

import "../src/accordion-item/stories/accordion-item.register.js";
import "../src/accordion/stories/accordion.register.js";

import "../src/breadcrumb-item/stories/breadcrumb-item.register.js";
import "../src/breadcrumb/stories/breadcrumb.register.js";

import "../src/listbox-option/stories/listbox-option.register.js";

import "../src/combobox/stories/combobox.register.js";
import "../src/listbox/stories/listbox.register.js";
import "../src/select/stories/select.register.js";

import "../src/tab-panel/stories/tab-panel.register.js";
import "../src/tab/stories/tab.register.js";
import "../src/tabs/stories/tabs.register.js";

import "../src/horizontal-scroll/stories/horizontal-scroll.register.js";
import "../src/radio-group/stories/radio-group.register.js";
import "../src/toolbar/stories/toolbar.register.js";

import "../src/menu-item/stories/menu-item.register.js";
import "../src/menu/stories/menu.register.js";

import "../src/tree-item/stories/tree-item.register.js";
import "../src/tree-view/stories/tree-view.register.js";
3 changes: 3 additions & 0 deletions packages/web-components/fast-foundation/api-extractor.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"extends": "../../../api-extractor.json",
"mainEntryPointFilePath": "./dist/dts/index.d.ts",
"compiler": {
"tsconfigFilePath": "./tsconfig.build.json"
},
"dtsRollup": {
"enabled": true,
"untrimmedFilePath": "./dist/fast-foundation.untrimmed.d.ts",
Expand Down
22 changes: 14 additions & 8 deletions packages/web-components/fast-foundation/custom-elements-manifest.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import {jsdocLinkFix} from "./custom-elements-manifest-plugins.mjs";
import { jsdocLinkFix } from "./custom-elements-manifest-plugins.mjs";

export default {
/** Globs to analyze */
globs: ['src/**/*.ts'],
globs: ["src/**/*.ts"],
/** Globs to exclude */
exclude: ['src/*.ts','src/__test__/*','src/di/*','src/**/*.md','src/**/*.spec.ts','src/**/index.ts'],
exclude: [
"src/*.ts",
"src/__test__/*",
"src/di/*",
"src/**/*.md",
"src/**/*.spec.ts",
"src/**/index.ts",
"src/**/stories/*",
],
/** Directory to output CEM to */
outdir: 'dist',
outdir: "dist",
/** Run in dev mode, provides extra logging */
dev: false,
/** Enable special handling for fast */
fast: true,
plugins: [
jsdocLinkFix(),
]
}
plugins: [jsdocLinkFix()],
};
Loading

0 comments on commit 0466b2c

Please sign in to comment.