Tooling: Move Storybook reusable components to __docs__ to optimize T…

…urbosnap (#2408)

## Summary:

While investigating the performance of Chromatic/Turbosnap, I found that
chromatic was disabling Turbosnap of the storybook stories in a lot of builds
because apparently we were making changing changes in files inside the
`.storybook` folder. This is not the case as those builds didn't include changes
in such files, but this made me realize that we could optimize the performance
of Turbosnap by moving the reusable components from the `.storybook` folder to
the `__docs__` folder.

Issue: XXX-XXXX

## Test plan:

Verify that Storybook still works as expected and check the Chromatic build to
see if Turbosnap is enabled for the stories that were previously disabled.

Author: jandrade

Reviewers: beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: #2408

.storybook/components/component-info.tsx → __docs__/components/component-info.tsx

@@ -1,31 +1,26 @@
 import * as React from "react";
 
+import githubLogo from "@phosphor-icons/core/fill/github-logo-fill.svg";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Caption} from "@khanacademy/wonder-blocks-typography";
-import githubLogo from "@phosphor-icons/core/fill/github-logo-fill.svg";
 
 type Props = {
     /**
      * The package name.
      */
-    name: string,
+    name: string;
     /**
      * The latest stable version.
      */
-    version: string
+    version: string;
 };
 
 /**
  * An internal component that displays the package name and version. It also
  * includes a link to the Github repo.
  */
-const ComponentInfo: React.FC<Props> = (
-    {
-        name,
-        version,
-    },
-): React.ReactElement => {
+function ComponentInfo({name, version}: Props): React.ReactElement {
     const packageFolder = name.split("/")?.[1];
     return (
         <View
@@ -50,6 +45,6 @@ const ComponentInfo: React.FC<Props> = (
             </Button>
         </View>
     );
-};
+}
 
 export default ComponentInfo;

.storybook/components/token-table.tsx → __docs__/components/token-table.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {addStyle, View} from "@khanacademy/wonder-blocks-core";
-import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 const StyledTable = addStyle("table");

__docs__/wonder-blocks-accordion/accordion-section.stories.tsx

@@ -12,7 +12,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {HeadingSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-accordion/package.json";
 
 import AccordionSectionArgtypes from "./accordion-section.argtypes";

__docs__/wonder-blocks-accordion/accordion.stories.tsx

@@ -17,7 +17,7 @@ import {
     SingleSelect,
 } from "@khanacademy/wonder-blocks-dropdown";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-accordion/package.json";
 
 import AccordionArgtypes from "./accordion.argtypes";

__docs__/wonder-blocks-banner/banner.stories.tsx

@@ -12,7 +12,7 @@ import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import Banner from "@khanacademy/wonder-blocks-banner";
 
 import BannerArgTypes from "./banner.argtypes";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-banner/package.json";
 import crownIcon from "../wonder-blocks-icon/icons/crown.svg";
 

__docs__/wonder-blocks-birthday-picker/birthday-picker.stories.tsx

@@ -6,7 +6,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import packageConfig from "../../packages/wonder-blocks-birthday-picker/package.json";
 import BirthdayPicker from "@khanacademy/wonder-blocks-birthday-picker";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 import ArgTypes from "./birthday-picker.argtypes";
 

__docs__/wonder-blocks-breadcrumbs/breadcrumbs.stories.tsx

@@ -8,7 +8,7 @@ import {
     BreadcrumbsItem,
 } from "@khanacademy/wonder-blocks-breadcrumbs";
 import packageConfig from "../../packages/wonder-blocks-breadcrumbs/package.json";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 import BreadcrumbsArgTypes from "./breadcrumbs.argtypes";
 

__docs__/wonder-blocks-button/button.stories.tsx

@@ -22,7 +22,7 @@ import {
 
 import Button from "@khanacademy/wonder-blocks-button";
 import packageConfig from "../../packages/wonder-blocks-button/package.json";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";

__docs__/wonder-blocks-cell/compact-cell.stories.tsx

@@ -10,7 +10,7 @@ import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import {CompactCell} from "@khanacademy/wonder-blocks-cell";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import CompactCellArgTypes, {AccessoryMappings} from "./compact-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 

__docs__/wonder-blocks-cell/detail-cell.stories.tsx

@@ -10,7 +10,7 @@ import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import DetailCellArgTypes from "./detail-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 

__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx

@@ -8,7 +8,7 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import packageConfig from "../../packages/wonder-blocks-clickable/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import argTypes from "./clickable-behavior.argtypes";
 
 const ClickableBehavior = getClickableBehavior();

__docs__/wonder-blocks-clickable/clickable.stories.tsx

@@ -10,7 +10,7 @@ import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import packageConfig from "../../packages/wonder-blocks-clickable/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import argTypes from "./clickable.argtypes";
 import Button from "@khanacademy/wonder-blocks-button";
 

__docs__/wonder-blocks-core/initial-fallback.stories.tsx

@@ -5,7 +5,7 @@ import {Body} from "@khanacademy/wonder-blocks-typography";
 import {View, InitialFallback} from "@khanacademy/wonder-blocks-core";
 import packageConfig from "../../packages/wonder-blocks-core/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 type StoryComponentType = StoryObj<typeof InitialFallback>;
 

__docs__/wonder-blocks-core/view.stories.tsx

@@ -11,7 +11,7 @@ import {
 import {View} from "@khanacademy/wonder-blocks-core";
 import packageConfig from "../../packages/wonder-blocks-core/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import viewArgTypes from "./view.argtypes";
 
 export default {

__docs__/wonder-blocks-dropdown/action-item.stories.tsx

@@ -6,7 +6,7 @@ import {ActionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import actionItemArgtypes from "./action-item.argtypes";

__docs__/wonder-blocks-dropdown/action-menu.stories.tsx

@@ -21,7 +21,7 @@ import {
 
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import actionMenuArgtypes from "./action-menu.argtypes";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 
 import type {Item} from "../../packages/wonder-blocks-dropdown/src/util/types";

__docs__/wonder-blocks-dropdown/combobox.stories.tsx

@@ -18,7 +18,7 @@ import argTypes from "./combobox.argtypes";
 
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 const items = [
     <OptionItem label="Banana" value="banana" key={0} />,

__docs__/wonder-blocks-dropdown/listbox.stories.tsx

@@ -10,7 +10,7 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import {allProfilesWithPictures} from "./option-item-examples";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 
 const items = [

__docs__/wonder-blocks-dropdown/multi-select.stories.tsx

@@ -14,7 +14,7 @@ import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import Pill from "@khanacademy/wonder-blocks-pill";
 import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 import multiSelectArgtypes from "./multi-select.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";

__docs__/wonder-blocks-dropdown/option-item.stories.tsx

@@ -6,7 +6,7 @@ import {OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import optionItemArgtypes, {AccessoryMappings} from "./option-item.argtypes";

__docs__/wonder-blocks-dropdown/single-select.stories.tsx

@@ -29,7 +29,7 @@ import {
 import type {SingleSelectLabels} from "@khanacademy/wonder-blocks-dropdown";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import singleSelectArgtypes from "./single-select.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";

__docs__/wonder-blocks-form/checkbox-group.stories.tsx

@@ -9,7 +9,7 @@ import {LabelLarge, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 export default {
     title: "Packages / Form / CheckboxGroup",

__docs__/wonder-blocks-form/checkbox.stories.tsx

@@ -8,7 +8,7 @@ import {Checkbox, CheckboxGroup, Choice} from "@khanacademy/wonder-blocks-form";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import Strut from "../../packages/wonder-blocks-layout/src/components/strut";
 
 export default {

__docs__/wonder-blocks-form/choice.stories.tsx

@@ -12,7 +12,7 @@ import {
     RadioGroup,
 } from "@khanacademy/wonder-blocks-form";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
 export default {

__docs__/wonder-blocks-form/labeled-text-field.stories.tsx

@@ -11,7 +11,7 @@ import Link from "@khanacademy/wonder-blocks-link";
 import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import LabeledTextFieldArgTypes from "./labeled-text-field.argtypes";
 
 /**

__docs__/wonder-blocks-form/radio-group.stories.tsx

@@ -9,7 +9,7 @@ import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 export default {
     title: "Packages / Form / RadioGroup",

__docs__/wonder-blocks-form/radio.stories.tsx

@@ -5,7 +5,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
 import Radio from "../../packages/wonder-blocks-form/src/components/radio";

__docs__/wonder-blocks-form/text-area.stories.tsx

@@ -5,7 +5,7 @@ import {StyleSheet} from "aphrodite";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import Button from "@khanacademy/wonder-blocks-button";
 import {LabelSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";

__docs__/wonder-blocks-form/text-field.stories.tsx

@@ -16,7 +16,7 @@ import {
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import TextFieldArgTypes from "./text-field.argtypes";
 import {validateEmail, validatePhoneNumber} from "./form-utilities";
 

__docs__/wonder-blocks-icon-button/icon-button.stories.tsx

@@ -18,7 +18,7 @@ import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-icon-button/package.json";
 import IconButtonArgtypes from "./icon-button.argtypes";
 import TextField from "../../packages/wonder-blocks-form/src/components/text-field";

__docs__/wonder-blocks-icon/phosphor-icon.stories.tsx

@@ -18,7 +18,7 @@ import {
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-icon/package.json";
 import PhosphorIconArgtypes, {IconMappings} from "./phosphor-icon.argtypes";
 

__docs__/wonder-blocks-layout/media-layout.stories.tsx

@@ -19,7 +19,7 @@ import {
     MediaLayoutContext,
 } from "@khanacademy/wonder-blocks-layout";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-layout/package.json";
 
 export default {

__docs__/wonder-blocks-layout/spring.stories.tsx

@@ -9,7 +9,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
 import packageConfig from "../../packages/wonder-blocks-layout/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 type StoryComponentType = StoryObj<typeof Spring>;
 

__docs__/wonder-blocks-layout/strut.stories.tsx

@@ -9,7 +9,7 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import packageConfig from "../../packages/wonder-blocks-layout/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 export default {
     title: "Packages / Layout / Strut",

__docs__/wonder-blocks-link/link.stories.tsx

@@ -20,7 +20,7 @@ import {
 import Link from "@khanacademy/wonder-blocks-link";
 import packageConfig from "../../packages/wonder-blocks-link/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import LinkArgTypes from "./link.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 

__docs__/wonder-blocks-modal/modal-dialog.stories.tsx

@@ -15,7 +15,7 @@ import {
     ModalPanel,
 } from "@khanacademy/wonder-blocks-modal";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 import modalDialogArgtypes from "./modal-dialog.argtypes";
 

__docs__/wonder-blocks-modal/modal-footer.stories.tsx

@@ -15,7 +15,7 @@ import {
 } from "@khanacademy/wonder-blocks-modal";
 import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 const customViewports = {
     phone: {

__docs__/wonder-blocks-modal/modal-header.stories.tsx

@@ -17,7 +17,7 @@ import {
 } from "@khanacademy/wonder-blocks-modal";
 import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import ModalHeaderArgtypes from "./modal-header.argtypes";
 
 const customViewports = {

__docs__/wonder-blocks-modal/modal-launcher.stories.tsx

@@ -30,7 +30,7 @@ import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 import type {ModalElement} from "../../packages/wonder-blocks-modal/src/util/types";
 import ModalLauncherArgTypes from "./modal-launcher.argtypes";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 const customViewports = {
     phone: {

__docs__/wonder-blocks-modal/modal-panel.stories.tsx

@@ -15,7 +15,7 @@ import {
     ModalFooter,
 } from "@khanacademy/wonder-blocks-modal";
 import packageConfig from "../../packages/wonder-blocks-modal/package.json";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import modalPanelArgtypes from "./modal-panel.argtypes";
 
 const customViewports = {