[hackathon-2024]: Add Component Selector to storybook

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Accordion.json

@@ -0,0 +1,5 @@
+{
+  "name": "Accordion",
+  "component": "Accordion",
+  "attributes": ["expandable", "tabbable", "navigationByTabKey", "interactive"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ButtonBase.json

@@ -0,0 +1,4 @@
+{
+  "name": "ButtonBase",
+  "attributes": ["staysOnPage", "navigationByTabKey", "interactive"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Checkbox.json

@@ -0,0 +1,5 @@
+{
+  "name": "Checkbox",
+  "component": "Checkbox",
+  "attributes": ["yesOrNo", "notInsideMenu", "navigationByTabKey", "interactive"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Groups.json

@@ -0,0 +1,10 @@
+[
+  {
+    "tags": ["Button", "Link", "SplitButton", "ToggleButton"],
+    "questions": ["hasMoreActions", "doesNavigateToPage"]
+  },
+  {
+    "tags": ["Checkbox", "Radio", "ToggleButton", "MenuItemCheckbox", "MenuItemRadio"],
+    "questions": ["isYesOrNo", "isInsideMenu"]
+  }
+]

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Link.json

@@ -0,0 +1,5 @@
+{
+  "name": "Link",
+  "component": "Link",
+  "attributes": ["singleAction", "navigatesToPage", "navigationByTabKey", "interactive"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/List.json

@@ -0,0 +1,6 @@
+{
+  "name": "List",
+  "component": "List",
+  "extends": "ListBase",
+  "attributes": ["static"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ListBase.json

@@ -0,0 +1,5 @@
+{
+  "name": "ListBase",
+  "attributes": ["narratesPosition", "singleColumn"],
+  "note": "Component not available yet, under development."
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ListSingleAction.json

@@ -0,0 +1,7 @@
+{
+  "name": "ListSingleAction",
+  "component": "List",
+  "story": "Single Action",
+  "extends": "ListBase",
+  "attributes": ["interactive", "navigationByArrowKeys"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Menu.json

@@ -0,0 +1,6 @@
+{
+  "name": "Menu",
+  "component": "Menu",
+  "folder": "Menu",
+  "extends": "MenuBase"
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuBase.json

@@ -0,0 +1,4 @@
+{
+  "name": "MenuBase",
+  "attributes": ["insideMenu", "navigationByArrowKeys", "narratesPosition", "interactive"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuButton.json

@@ -0,0 +1,7 @@
+{
+  "name": "MenuButton",
+  "component": "MenuButton",
+  "folder": "Button",
+  "extends": "ButtonBase",
+  "attributes": ["opensMenu"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuItemCheckbox.json

@@ -0,0 +1,8 @@
+{
+  "name": "MenuItemCheckbox",
+  "component": "Menu",
+  "folder": "Menu",
+  "story": "Checkbox Items",
+  "extends": "MenuBase",
+  "attributes": ["yesOrNo"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuItemRadio.json

@@ -0,0 +1,8 @@
+{
+  "name": "MenuItemRadio",
+  "component": "Menu",
+  "folder": "Menu",
+  "story": "Radio Items",
+  "extends": "MenuBase",
+  "attributes": ["notYesOrNo"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuSubmenu.json

@@ -0,0 +1,8 @@
+{
+  "name": "MenuSubmenu",
+  "component": "Menu",
+  "folder": "Menu",
+  "story": "Nested Submenus",
+  "extends": "MenuBase",
+  "attributes": ["nested"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Questions.json

@@ -0,0 +1,66 @@
+[
+  {
+    "id": "hasMoreActions",
+    "question": "Does component have more actions?",
+    "selectText": "Question 1",
+    "shortSelectText": "Q1:",
+    "answers": [
+      {
+        "value": "moreActions",
+        "text": "Yes"
+      },
+      {
+        "value": "singleAction",
+        "text": "No"
+      }
+    ]
+  },
+  {
+    "id": "doesNavigateToPage",
+    "question": "Does component navigate to new page?",
+    "selectText": "Question 2",
+    "shortSelectText": "Q2:",
+    "answers": [
+      {
+        "value": "navigatesToPage",
+        "text": "Yes"
+      },
+      {
+        "value": "staysOnPage",
+        "text": "No"
+      }
+    ]
+  },
+  {
+    "id": "isYesOrNo",
+    "question": "Is toggle or choice possible between yes or no?",
+    "selectText": "Question 3",
+    "shortSelectText": "Q3:",
+    "answers": [
+      {
+        "value": "yesOrNo",
+        "text": "Yes"
+      },
+      {
+        "value": "notYesOrNo",
+        "text": "No"
+      }
+    ]
+  },
+  {
+    "id": "isInsideMenu",
+    "question": "Is component inside menu?",
+    "selectText": "Question 4",
+    "shortSelectText": "Q4:",
+    "answers": [
+      {
+        "value": "insideMenu",
+        "text": "Yes"
+      },
+      {
+        "value": "notInsideMenu",
+        "text": "No"
+      }
+    ]
+  }
+]

packages/react-components/react-components/stories/ComponentSelector/components-definitions/SplitButton.json

@@ -0,0 +1,7 @@
+{
+  "name": "SplitButton",
+  "component": "SplitButton",
+  "folder": "Button",
+  "extends": "ButtonBase",
+  "attributes": ["moreActions"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TabList.json

@@ -0,0 +1,5 @@
+{
+  "name": "TabList",
+  "component": "TabList",
+  "attributes": ["interactive", "navigationByArrowKeys", "narratesPosition"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Table.json

@@ -0,0 +1,6 @@
+{
+  "name": "Table",
+  "component": "Table",
+  "extends": "TableBase",
+  "attributes": ["static"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TableBase.json

@@ -0,0 +1,4 @@
+{
+  "name": "TableBase",
+  "attributes": ["columnsAndRows", "narratesPosition"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TableCellActions.json

@@ -0,0 +1,7 @@
+{
+  "name": "TableCellActions",
+  "component": "Table",
+  "story": "Cell Actions",
+  "extends": "TableBase",
+  "attributes": ["interactive", "navigationByTabKey"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TableCellNavigation.json

@@ -0,0 +1,7 @@
+{
+  "name": "TableCellNavigation",
+  "component": "Table",
+  "story": "Cell Navigation",
+  "extends": "TableBase",
+  "attributes": ["interactive", "navigationByArrowKeys"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Text.json

@@ -0,0 +1,6 @@
+{
+  "name": "Text",
+  "component": "Text",
+  "attributes": ["textOrHeading", "static"],
+  "note": "Use the 'as' prop to change text to heading."
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ToggleButton.json

@@ -0,0 +1,7 @@
+{
+  "name": "ToggleButton",
+  "component": "ToggleButton",
+  "folder": "Button",
+  "extends": "ButtonBase",
+  "attributes": ["singleAction", "yesOrNo"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Tree.json

@@ -0,0 +1,5 @@
+{
+  "name": "Tree",
+  "component": "Tree",
+  "extends": "TreeBase"
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TreeBase.json

@@ -0,0 +1,4 @@
+{
+  "name": "TreeBase",
+  "attributes": ["interactive", "navigationByArrowKeys", "hierarchical", "narratesPosition"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TreeSelection.json

@@ -0,0 +1,7 @@
+{
+  "name": "TreeSelection",
+  "component": "Tree",
+  "story": "Selection",
+  "extends": "TreeBase",
+  "attributes": ["toggle"]
+}

packages/react-components/react-components/stories/ComponentSelector/components-definitions/index.js

@@ -0,0 +1,30 @@
+export { default as AccordionDef } from './Accordion.json';
+export { default as TextDef } from './Text.json';
+export { default as LinkDef } from './Link.json';
+export { default as CheckboxDef } from './Checkbox.json';
+
+export { default as TableBaseDef } from './TableBase.json';
+export { default as TableDef } from './Table.json';
+export { default as TableCellActionsDef } from './TableCellActions.json';
+export { default as TableCellNavigationDef } from './TableCellNavigation.json';
+
+export { default as MenuBaseDef } from './MenuBase.json';
+export { default as MenuDef } from './Menu.json';
+export { default as MenuItemCheckboxDef } from './MenuItemCheckbox.json';
+export { default as MenuItemRadioDef } from './MenuItemRadio.json';
+export { default as MenuSubmenuDef } from './MenuSubmenu.json';
+
+export { default as ButtonBaseDef } from './ButtonBase.json';
+export { default as SplitButtonDef } from './SplitButton.json';
+export { default as ToggleButtonDef } from './ToggleButton.json';
+export { default as MenuButtonDef } from './MenuButton.json';
+
+export { default as ListBaseDef } from './ListBase.json';
+export { default as ListDef } from './List.json';
+export { default as ListSingleActionDef } from './ListSingleAction.json';
+
+export { default as TreeBaseDef } from './TreeBase.json';
+export { default as TreeDef } from './Tree.json';
+export { default as TreeSelectionDef } from './TreeSelection.json';
+
+export { default as TabListDef } from './TabList.json';

packages/react-components/react-components/stories/ComponentSelector/index.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Selector } from './Selector.stories';
+export const parentPath = 'concepts-developer-tools-stories';
+
+<Meta title="Concepts/Developer/Tools/Stories/Component Selector" />
+
+<h1 class="sbdocs-title"> Component Selector </h1>
+
+<Canvas withSource="none">
+  <Selector />
+</Canvas>

packages/react-components/react-components/stories/ComponentSelector/utils.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+const APP_TITLE = 'Component Selector';
+const APP_TITLE_SEPARATOR = ' | ';
+const formatComponentStoryUrl = (component, story) =>
+  `https://react.fluentui.dev/?path=/docs/components-${component}--docs#${story}`;
+
+interface FullscreenLinkProps {
+  parent: string;
+  story: string;
+  content: string;
+}
+
+// https://storybook.js.org/addons/@storybook/addon-links does not allow opening a story in new tab
+// so this is a naive attempt for opening a story in full screen
+export const FullscreenLink = (props: FullscreenLinkProps) => (
+  <a className="sbdocs sbdocs-a" href={`iframe.html?id=${props.parent}--${props.story}`} target="_blank">
+    {props.content}
+  </a>
+);
+
+export const ScenariosListLink: React.FC = props => (
+  <a
+    className="sbdocs sbdocs-a"
+    href={`iframe.html?id=concepts-developer-accessibility-stories-list-of-scenarios--page`}
+  >
+    {props.children}
+  </a>
+);
+
+export const BackLink = () => <ScenariosListLink>Go back to main menu</ScenariosListLink>;
+
+export const Scenario: React.FC<{ pageTitle: string }> = ({ pageTitle, children }) => {
+  React.useEffect(() => {
+    document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;
+  }, [pageTitle]);
+
+  return (
+    <div role="main">
+      <BackLink />
+      <br />
+      {children}
+    </div>
+  );
+};
+
+export const removeFromArray = (array: string[], item: string) => {
+  const index = array.indexOf(item);
+  if (index >= 0) {
+    array.splice(index, 1);
+  }
+};
+
+const camelToDashed = camel => {
+  const dashed = camel.toLowerCase().replace(/\ |\:/g, '-');
+  return dashed;
+};
+
+export const getComponentStoryUrl = component => {
+  const camelComponent = component.folder ? component.folder + ' ' + component.component : component.component;
+  const dashedComponent = camelToDashed(camelComponent);
+  const dashedStory = component.story ? camelToDashed(component.story) : 'default';
+  const url = formatComponentStoryUrl(dashedComponent, dashedStory);
+  return url;
+};

packages/react-components/react-theme/stories/src/Theme/colors/index.stories.mdx

@@ -6,5 +6,6 @@ import { Colors } from './ThemeColors.stories.tsx';
 <h1 class="sbdocs-title"> Colors </h1>
 
 <Canvas withSource="none">
+  <span>test</span>
   <Colors />
 </Canvas>