fix: update storybook to use custom element definitions and fix rollup (#4629)

* update storybook to use custom element defintions

* Change files

Co-authored-by: nicholasrice <[email protected]>

Author: nicholasrice

change/@microsoft-fast-components-be84dce5-5d4e-43bc-967f-c015c3e94c62.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "packageName": "@microsoft/fast-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-components/.storybook/preview.js

@@ -1,4 +1,7 @@
 import "../src/design-system-provider";
+import * as FAST from "../src/index-rollup";
+
+FAST;
 
 const withThemeProvider = Story => `
   <fast-design-system-provider id="root-provider" use-defaults>

packages/web-components/fast-components/src/custom-elements.ts

@@ -0,0 +1,40 @@
+/**
+ * Export all custom element definitions
+ */
+export { fastAccordion, fastAccordionItem } from "./accordion/index";
+export { fastAnchor } from "./anchor/index";
+export { fastAnchoredRegion } from "./anchored-region/index";
+export { fastBadge } from "./badge/index";
+export { fastBreadcrumb } from "./breadcrumb/index";
+export { fastBreadcrumbItem } from "./breadcrumb-item/index";
+export { fastButton } from "./button/index";
+// export * from "./card/index";
+export { fastCheckbox } from "./checkbox/index";
+export { fastCombobox } from "./combobox/index";
+// export * from "./data-grid/index";
+// export * from "./design-system-provider/index";
+export { fastDialog } from "./dialog/index";
+export { fastDisclosure } from "./disclosure/index";
+export { fastDivider } from "./divider/index";
+export { fastFlipper } from "./flipper/index";
+export { fastHorizontalScroll } from "./horizontal-scroll/index";
+export { fastListbox } from "./listbox/index";
+export { fastOption } from "./listbox-option/index";
+export { fastMenu } from "./menu/index";
+export { fastMenuItem } from "./menu-item/index";
+export { fastNumberField } from "./number-field/index";
+export { fastProgress } from "./progress/index";
+export { fastProgressRing } from "./progress-ring/index";
+export { fastRadio } from "./radio/index";
+export { fastRadioGroup } from "./radio-group/index";
+export { fastSelect } from "./select/index";
+export { fastSkeleton } from "./skeleton/index";
+export { fastSlider } from "./slider/index";
+export { fastSliderLabel } from "./slider-label/index";
+export { fastSwitch } from "./switch/index";
+export { fastTabs, fastTab, fastTabPanel } from "./tabs/index";
+export { fastTextArea } from "./text-area/index";
+export { fastTextField } from "./text-field/index";
+export { fastTooltip } from "./tooltip/index";
+export { fastTreeView } from "./tree-view/index";
+export { fastTreeItem } from "./tree-item/index";

packages/web-components/fast-components/src/index-rollup.ts

@@ -1,4 +1,17 @@
 // TODO: Is exporting Foundation still necessary with the updated API's?
 // export * from "@microsoft/fast-element";
-// export * from "@microsoft/fast-foundation";
+import { DesignSystem } from "@microsoft/fast-foundation";
+import * as fastComponents from "./custom-elements";
+
 export * from "./index";
+
+/**
+ * TODO rename this to FASTDesignSystem when {@link @FASTDesignSystem} interface is removed.
+ */
+export const fastDesignSystem = new DesignSystem();
+
+Object.values(fastComponents).forEach(definition => {
+    fastDesignSystem.register(definition());
+});
+
+fastDesignSystem.applyTo(document.body);

packages/web-components/fast-components/src/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Export all custom element definitions.
+ */
+export * from "./custom-elements";
+
 export * from "./accordion/index";
 export * from "./anchor/index";
 export * from "./anchored-region/index";