refactor(stories): organize storybook files and breakdown large stori…

…es into smaller files

.prettierrc.js

@@ -5,4 +5,5 @@ module.exports = {
   endOfLine: "lf",
   tabWidth: 2,
   trailingComma: "es5",
+  printWidth: 80,
 };

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { defaultTheme } from "../packages/components/src/core/styles";
 import { ThemeProvider } from "@mui/material/styles";
-import { BADGE } from "../packages/components/src/common/storybookBadges";
+import { BADGE } from "../packages/components/src/common/storybook/storybookBadges";
 
 export const decorators = [
   (Story) => (

jest.common.config.js

@@ -3,6 +3,20 @@ module.exports = {
   preset: "ts-jest",
   setupFilesAfterEnv: ["./jest.setup.ts"],
   testEnvironment: "jsdom",
+  /**
+   * A list of paths to directories that Jest should use to search for files in.
+   * The first two paths are the default paths that Jest uses to search for files.
+   * The third path specifies the namespace-test files that we want to exclude from the test run.
+   * The fourth path specifies the storybook files that we want to exclude from the test run.
+   *
+   * https://jestjs.io/docs/configuration#testmatch-arraystring
+   */
+  testMatch: [
+    "**/__tests__/**/*.[jt]s?(x)",
+    "**/?(*.)+(spec|test).[jt]s?(x)",
+    "!**/__tests__/**/*.namespace-test.[jt]s?(x)",
+    "!**/__storybook__/**/*",
+  ],
   transform: {
     "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "../../fileTransformer.js",

packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx → packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx

@@ -1,6 +1,6 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
-import Icon from "../core/Icon";
+import Icon from "../../core/Icon";
 import CustomSdsIcon from "./customSdsIcon";
 import CustomSvgIcon from "./customSvgIcon";
 

packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx → packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx

@@ -1,6 +1,6 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
-import Tag from "../core/Tag";
+import Tag from "../../core/Tag";
 import CustomSdsIcon from "./customSdsIcon";
 import CustomSvgIcon from "./customSvgIcon";
 

packages/components/src/common/customSdsIcon.tsx → packages/components/src/common/storybook/customSdsIcon.tsx

@@ -1,4 +1,4 @@
-import Icon, { IconProps } from "../core/Icon";
+import Icon, { IconProps } from "../../core/Icon";
 
 /**
  * CustomSdsIcon is an Icon component built on top of the core SDS Icon.

packages/components/src/common/storybook/loremIpsum.ts

@@ -0,0 +1,19 @@
+// Extra Short Lorem Ipsum = 1 sentence
+
+export const EXTRA_SHORT_LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`;
+
+// Short Lorem Ipsum = 2 sentences
+
+export const SHORT_LOREM_IPSUM = `${EXTRA_SHORT_LOREM_IPSUM} Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper.`;
+
+// Medium Lorem Ipsum = 5 sentences
+
+export const MEDIUM_LOREM_IPSUM = `${SHORT_LOREM_IPSUM} Urna duis convallis convallis tellus id interdum velit laoreet id. Donec ultrices tincidunt arcu non sodales. Aliquam eleifend mi in nulla posuere.`;
+
+// Long Lorem Ipsum = 1 paragraph
+
+export const LONG_LOREM_IPSUM = `${MEDIUM_LOREM_IPSUM} Quisque id diam vel quam elementum pulvinar. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Id consectetur purus ut faucibus. Molestie at elementum eu facilisis sed odio morbi quis commodo. Et leo duis ut diam. Nulla facilisi cras fermentum odio. Magnis dis parturient montes nascetur ridiculus mus mauris. Maecenas volutpat blandit aliquam etiam erat. Arcu dui vivamus arcu felis bibendum ut tristique. Id porta nibh venenatis cras sed felis eget. Mi ipsum faucibus vitae aliquet nec ullamcorper.`;
+
+// Extra Long Lorem Ipsum = 3 paragraphs
+
+export const EXTRA_LONG_LOREM_IPSUM = `${LONG_LOREM_IPSUM} ${LONG_LOREM_IPSUM}`;

packages/components/src/core/Accordion/__storybook__/constants.tsx

@@ -0,0 +1,6 @@
+export const ACCORDION_EXCLUDED_CONTROLS = [
+  "id",
+  "subtitle",
+  "useDivider",
+  "togglePosition",
+];

packages/components/src/core/Accordion/__storybook__/index.stories.tsx

@@ -0,0 +1,71 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Accordion } from "./stories/default";
+import { ACCORDION_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    id: {
+      control: { type: "text" },
+      required: true,
+    },
+    subtitle: {
+      control: { type: "text" },
+    },
+    togglePosition: {
+      control: { type: "select" },
+      options: ["right", "left"],
+    },
+    useDivider: {
+      control: { type: "boolean" },
+    },
+  },
+  component: Accordion,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Accordion",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    togglePosition: "right",
+  },
+};
+
+// LivePreview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: ACCORDION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    id: "test-story",
+    togglePosition: "right",
+  },
+  parameters: {
+    controls: {
+      exclude: ACCORDION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (props: Args): JSX.Element => (
+    <Accordion {...props} data-testid="accordion" />
+  ),
+};

packages/components/src/core/Accordion/__storybook__/stories/default.tsx

@@ -0,0 +1,23 @@
+import { Args } from "@storybook/react";
+import RawAccordion, {
+  AccordionDetails,
+  AccordionHeader,
+} from "src/core/Accordion";
+import { EXTRA_SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const Accordion = (props: Args): JSX.Element => {
+  const { id, subtitle, useDivider, togglePosition } = props;
+  return (
+    <RawAccordion
+      id={id}
+      useDivider={useDivider}
+      togglePosition={togglePosition}
+      {...props}
+    >
+      <AccordionHeader id={`${id}-header`} subtitle={subtitle}>
+        Accordion Header
+      </AccordionHeader>
+      <AccordionDetails>{EXTRA_SHORT_LOREM_IPSUM}</AccordionDetails>
+    </RawAccordion>
+  );
+};

packages/components/src/core/Accordion/__storybook__/stories/livePreview.tsx

@@ -0,0 +1,37 @@
+import { Args } from "@storybook/react";
+import { Accordion } from "./default";
+
+const livePreviewStyles = {
+  display: "grid",
+  gridColumnGap: "24px",
+  gridRowGap: "50px",
+  gridTemplateColumns: "repeat(4, 200px)",
+};
+
+export function LivePreviewDemo(props: Args): JSX.Element {
+  return (
+    <div style={livePreviewStyles as React.CSSProperties}>
+      <Accordion
+        id="accordion-1"
+        togglePosition="right"
+        useDivider
+        {...props}
+      />
+      <Accordion
+        id="accordion-2"
+        togglePosition="right"
+        subtitle="Optional Subtitle"
+        useDivider
+        {...props}
+      />
+      <Accordion id="accordion-3" togglePosition="left" useDivider {...props} />
+      <Accordion
+        id="accordion-4"
+        togglePosition="left"
+        subtitle="Optional Subtitle"
+        useDivider
+        {...props}
+      />
+    </div>
+  );
+}

packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap → packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap

@@ -55,7 +55,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
           <div
             class="MuiAccordionDetails-root css-kcniag-MuiAccordionDetails-root"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
         </div>
       </div>

packages/components/src/core/Accordion/index.test.tsx → packages/components/src/core/Accordion/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);

packages/components/src/core/Accordion/style.ts

@@ -13,7 +13,7 @@ import {
   getShadows,
   getSpaces,
   getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface AccordionExtraProps extends CommonThemeProps {
   useDivider?: boolean;

packages/components/src/core/Alert/index.stories.tsx → packages/components/src/core/Alert/__storybook__/index.stories.tsx

@@ -3,10 +3,10 @@ import { Snackbar } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import Button from "../Button";
-import { defaultTheme } from "../styles/common/defaultTheme";
-import Alert from "./index";
-import { BADGE } from "../../common/storybookBadges";
+import Button from "src/core/Button";
+import { defaultTheme } from "src/core/styles/common/defaultTheme";
+import Alert from "../index";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 const DismissButton = styled(Button)`
   margin-left: -${defaultTheme.spacing(3)}px;

packages/components/src/core/Alert/style.ts

@@ -1,7 +1,7 @@
 import { Alert, AlertProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { Colors, getColors, getShadows, getSpaces } from "../styles";
-import { defaultTheme } from "../styles/common/defaultTheme";
+import { defaultTheme } from "src/core/styles/common/defaultTheme";
 
 export const StyledAlert = styled(Alert)`
   ${(props) => {