Web: Components: added examples story

packages/asc-web-components/.storybook/main.js

@@ -58,6 +58,7 @@ module.exports = {
     "../toggle-content/*.stories.@(js|mdx)",
     "../tooltip/*.stories.@(js|mdx)",
     "../tree-menu/*.stories.@(js|mdx)",
+    "../examples/*.*.stories.@(js|mdx)",
   ],
   addons: [
     "@storybook/addon-links",

packages/asc-web-components/examples/people.group-buttons-menu.stories.js

@@ -1,12 +1,19 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { withKnobs, text } from "@storybook/addon-knobs/react";
-import { BooleanValue } from "react-values";
+import React, { useState } from "react";
 import styled from "@emotion/styled";
 import GroupButtonsMenu from "../group-buttons-menu";
 import DropDownItem from "../drop-down-item";
 import Button from "../button";
 
+export default {
+  title: "Examples/GroupButtonsMenu",
+  component: GroupButtonsMenu,
+  subcomponents: { DropDownItem, Button },
+  parameters: { docs: { description: { component: "Example" } } },
+  argTypes: {
+    closeAction: { action: "close action", table: { disable: true } },
+  },
+};
+
 const GroupButtonsMenuContainer = styled.div`
   height: 2000px;
 `;
@@ -55,35 +62,35 @@ const peopleItems = [
   },
 ];
 
-storiesOf("EXAMPLES|GroupButtonsMenu", module)
-  .addDecorator(withKnobs)
-  .add("people", () => (
-    <BooleanValue>
-      {({ value: visible, toggle }) => (
-        <>
-          <Button
-            label="Show menu"
-            onClick={() => {
-              toggle(visible);
-            }}
-          />
-          <GroupButtonsMenuContainer>
-            <BooleanValue>
-              {({ value: checked, toggle }) => (
-                <GroupButtonsMenu
-                  checked={checked}
-                  menuItems={peopleItems}
-                  visible={visible}
-                  moreLabel={text("moreLabel", "More")}
-                  closeTitle={text("closeTitle", "Close")}
-                  onClose={() => console.log("Close action")}
-                  onChange={() => toggle(checked)}
-                  selected={peopleItems[0].label}
-                />
-              )}
-            </BooleanValue>
-          </GroupButtonsMenuContainer>
-        </>
-      )}
-    </BooleanValue>
-  ));
+const Template = ({ closeAction, closeTitle, moreLabel, ...args }) => {
+  const [visible, setVisible] = useState(false);
+  const [checked, setChecked] = useState(false);
+  return (
+    <>
+      <Button
+        label="Show menu"
+        onClick={() => {
+          setVisible(!visible);
+        }}
+      />
+      <GroupButtonsMenuContainer>
+        <GroupButtonsMenu
+          checked={checked}
+          menuItems={peopleItems}
+          visible={visible}
+          moreLabel={moreLabel}
+          closeTitle={closeTitle}
+          onClose={closeAction}
+          onChange={() => setChecked(!checked)}
+          selected={peopleItems[0].label}
+        />
+      </GroupButtonsMenuContainer>
+    </>
+  );
+};
+
+export const people = Template.bind({});
+people.args = {
+  closeTitle: "Close",
+  moreLabel: "More",
+};

packages/asc-web-components/examples/people.row.stories.js

@@ -1,13 +1,19 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
+
 import Row from "../row";
 import Avatar from "../avatar";
 import Link from "../link";
 import RowContent from "../row-content";
-import { Icons } from "../icons";
-import Section from "../../../.storybook/decorators/section";
-import SendClockIcon from "../../../../../public/images/send.clock.react.svg";
-import CatalogSpamIcon from "../../../../../public/images/catalog.spam.react.svg";
+import SendClockIcon from "../public/static/images/send.clock.react.svg";
+import CatalogSpamIcon from "../public/static/images/catalog.spam.react.svg";
+
+export default {
+  title: "Examples/Row",
+  component: Row,
+  subcomponents: { Avatar, Link, RowContent },
+  parameters: { docs: { description: { component: "Example" } } },
+};
+
 const fakeUsers = [
   {
     id: "1",
@@ -216,9 +222,9 @@ const fakeUsers = [
   },
 ];
 
-storiesOf("EXAMPLES|Row", module).add("people", () => {
+const Template = (args) => {
   return (
-    <Section>
+    <>
       {fakeUsers.map((user) => {
         const element = (
           <Avatar
@@ -305,6 +311,8 @@ storiesOf("EXAMPLES|Row", module).add("people", () => {
           </Row>
         );
       })}
-    </Section>
+    </>
   );
-});
+};
+
+export const people = Template.bind({});

packages/asc-web-components/examples/people.tree-menu.stories.js

@@ -1,11 +1,18 @@
 import React, { useState } from "react";
-import { storiesOf } from "@storybook/react";
 import TreeMenu from "../tree-menu";
 import TreeNode from "../tree-menu/sub-components/tree-node";
-import CatalogDepartmentsIcon from "../../../../../public/images/catalog.departments.react.svg";
-import CatalogFolderIcon from "../../../../../public/images/catalog.folder.react.svg";
-import ExpanderDownIcon from "../../../../../public/images/expander-down.react.svg";
-import ExpanderRightIcon from "../../../../../public/images/expander-right.react.svg";
+import CatalogDepartmentsIcon from "../public/static/images/catalog.departments.react.svg";
+import CatalogFolderIcon from "../public/static/images/catalog.folder.react.svg";
+import ExpanderDownIcon from "../public/static/images/expander-down.react.svg";
+import ExpanderRightIcon from "../public/static/images/expander-right.react.svg";
+
+export default {
+  title: "Examples/Tree",
+  component: TreeMenu,
+  subcomponents: { TreeNode },
+  parameters: { docs: { description: { component: "Example" } } },
+  argTypes: { data: { table: { disable: true } } },
+};
 
 const treeData = [
   {
@@ -23,9 +30,9 @@ const treeData = [
   },
 ];
 
-const TreeMenuStory = (props) => {
+const Template = (args) => {
   // eslint-disable-next-line react/prop-types
-  const { data } = props;
+  const { data } = args;
 
   const [gData, setGData] = useState(data);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
@@ -151,9 +158,9 @@ const TreeMenuStory = (props) => {
       return null;
     }
     if (obj.expanded) {
-      return <ExpanderDownIcon size="scale" isfill={true} color="dimgray" />;
+      return <ExpanderDownIcon width="8px" isfill={true} color="dimgray" />;
     } else {
-      return <ExpanderRightIcon size="scale" isfill={true} color="dimgray" />;
+      return <ExpanderRightIcon width="8px" isfill={true} color="dimgray" />;
     }
   };
 
@@ -182,6 +189,8 @@ const TreeMenuStory = (props) => {
     </div>
   );
 };
-storiesOf("EXAMPLES|Tree.", module).add("people tree menu", () => (
-  <TreeMenuStory data={treeData} />
-));
+
+export const peopleTreeMenu = Template.bind({});
+peopleTreeMenu.args = {
+  data: treeData,
+};