update docs, folder examples and rollup config

packages/components/package.json

@@ -14,7 +14,8 @@
   },
   "files": [
     "future",
-    "overlays",
+    "v2",
+    "v3",
     "dist",
     "icons",
     "locales",

packages/components/rollup.config.mjs

@@ -3,8 +3,8 @@ import { pluginsSharedUi, rollupConfig } from "@kaizen/package-bundler";
 export default rollupConfig({
   input: { index: "./src/index.ts",
   future: "./src/__future__/index.ts",
-  overlaysV1: "./src/overlays/v1/index.ts",
-  overlaysV2: "./src/overlays/v2/index.ts",
+  overlaysV2: "./src/__overlays__/v2.ts",
+  overlaysV3: "./src/__overlays__/v3.ts",
   },
   plugins: pluginsSharedUi,
   alias: {

packages/components/src/ButtonGroup/ButtonGroup.tsx

@@ -4,7 +4,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip, TooltipProps } from "~components/overlays/v1"
+import { Tooltip, TooltipProps } from "~components/__overlays__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./ButtonGroup.module.scss"
 

packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip } from "~components/overlays/v1"
+import { Tooltip } from "~components/__overlays__/v2"
 import {
   StickerSheet,
   StickerSheetStory,

packages/components/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { ClearIcon } from "~components/Icon"
-import { Tooltip } from "~components/overlays/v1"
+import { Tooltip } from "~components/__overlays__/v2"
 import { DataAttributes } from "~types/DataAttributes"
 import { isRefObject } from "~utils/isRefObject"
 import { FilterButton, FilterButtonProps } from "../FilterButton"

packages/components/src/GuidanceBlock/GuidanceBlock.tsx

@@ -6,7 +6,7 @@ import { Heading, HeadingProps } from "~components/Heading"
 import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { Tooltip, TooltipProps } from "~components/overlays/v1"
+import { Tooltip, TooltipProps } from "~components/__overlays__/v2"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
 

packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { Tooltip } from "~components/overlays/v1"
+import { Tooltip } from "~components/__overlays__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { ToggleIconButtonMoods } from "./types"
 import styles from "./ToggleIconButton.module.scss"

packages/components/src/Table/Table.tsx

@@ -7,7 +7,7 @@ import {
   SortAscendingIcon,
   SortDescendingIcon,
 } from "~components/Icon"
-import { Tooltip } from "~components/overlays/v1"
+import { Tooltip } from "~components/__overlays__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Table.module.scss"
 

packages/components/src/__overlays__/Modal/v2/Modal.tsx

@@ -0,0 +1,19 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+
+export type ModalProps = {
+  children?: React.ReactNode
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const Modal = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: ModalProps): JSX.Element => (
+  <div className={classnames(classNameOverride)} {...restProps}>
+    {children}
+  </div>
+)
+
+Modal.displayName = "Modal"

packages/components/src/__overlays__/Modal/v2/_docs/Modal.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, Installation } from "~storybook/components"
+import * as ModalStories from "./Modal.stories"
+
+<Meta of={ModalStories} />
+
+# Modal
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Modal"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=1929%3A14167&t=1IXoBrHg5uK6MAJp-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604733/Modal"
+  className="!mb-8"
+/>
+
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Tooltip } from "@kaizen/components/v2/overlays"'
+ />
+
+
+## Overview
+
+Modals are used as a visual container around secondary content.
+
+<Canvas of={ModalStories.Playground} />
+<Controls of={ModalStories.Playground} />

packages/components/src/__overlays__/Modal/v2/_docs/Modal.stickersheet.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { Text } from "~components/Text"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Modal } from "../"
+
+export default {
+  title: "Overlays/Modal/v2",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <>
+      <StickerSheet>
+        <StickerSheet.Header
+          headings={["Solid Border", "Dashed Border", "None"]}
+          hasVerticalHeadings
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <Modal>
+              <Text variant="body">
+                Bacon ipsum dolor amet andouille buffalo beef boudin kielbasa
+                drumstick fatback cow tongue ground round chicken. Jowl cow
+                short ribs, ham tongue turducken spare ribs pig drumstick chuck
+                meatball. Buffalo turducken pancetta tail salami chicken.
+                Bresaola venison pastrami beef.
+              </Text>
+            </Modal>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

packages/components/src/__overlays__/Modal/v2/_docs/Modal.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Text } from "~components/Text"
+import { Modal } from "../"
+
+const meta = {
+  title: "Overlays/Modal/v2",
+  component: Modal,
+  args: {
+    children: (
+      <Text variant="body">
+        Bacon ipsum dolor amet andouille buffalo beef boudin kielbasa drumstick
+        fatback cow tongue ground round chicken. Jowl cow short ribs, ham tongue
+        turducken spare ribs pig drumstick chuck meatball. Buffalo turducken
+        pancetta tail salami chicken. Bresaola venison pastrami beef.
+      </Text>
+    ),
+  },
+  argTypes: {
+    children: { control: false },
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}

packages/components/src/__overlays__/Modal/v2/index.ts

@@ -0,0 +1 @@
+export * from "./Modal"

packages/components/src/__overlays__/Modal/v3/Modal.tsx

@@ -0,0 +1,19 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+
+export type ModalProps = {
+  children?: React.ReactNode
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const Modal = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: ModalProps): JSX.Element => (
+  <div className={classnames(classNameOverride)} {...restProps} style={{}}>
+    {children}
+  </div>
+)
+
+Modal.displayName = "Modal"

packages/components/src/__overlays__/Modal/v3/_docs/Modal.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, Installation } from "~storybook/components"
+import * as ModalStories from "./Modal.stories"
+
+<Meta of={ModalStories} />
+
+# Modal
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Modal"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=1929%3A14167&t=1IXoBrHg5uK6MAJp-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604733/Modal"
+  className="!mb-8"
+/>
+
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Tooltip } from "@kaizen/components/v3/overlays"'
+ />
+
+
+## Overview
+
+Modals are used as a visual container around secondary content.
+
+<Canvas of={ModalStories.Playground} />
+<Controls of={ModalStories.Playground} />

packages/components/src/__overlays__/Modal/v3/_docs/Modal.stickersheet.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { Text } from "~components/Text"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Modal } from "../"
+
+export default {
+  title: "Overlays/Modal/v3",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <>
+      <StickerSheet>
+        <StickerSheet.Header
+          headings={["Solid Border", "Dashed Border", "None"]}
+          hasVerticalHeadings
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <Modal>
+              <Text variant="body">
+                Bacon ipsum dolor amet andouille buffalo beef boudin kielbasa
+                drumstick fatback cow tongue ground round chicken. Jowl cow
+                short ribs, ham tongue turducken spare ribs pig drumstick chuck
+                meatball. Buffalo turducken pancetta tail salami chicken.
+                Bresaola venison pastrami beef.
+              </Text>
+            </Modal>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

packages/components/src/__overlays__/Modal/v3/_docs/Modal.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Text } from "~components/Text"
+import { Modal } from "~components/__overlays__/v3"
+
+const meta = {
+  title: "Overlays/Modal/v3",
+  component: Modal,
+  args: {
+    children: (
+      <Text variant="body">
+        Bacon ipsum dolor amet andouille buffalo beef boudin kielbasa drumstick
+        fatback cow tongue ground round chicken. Jowl cow short ribs, ham tongue
+        turducken spare ribs pig drumstick chuck meatball. Buffalo turducken
+        pancetta tail salami chicken. Bresaola venison pastrami beef.
+      </Text>
+    ),
+  },
+  argTypes: {
+    children: { control: false },
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  render: () => <Modal></Modal>,
+}

packages/components/src/__overlays__/Modal/v3/index.ts

@@ -0,0 +1 @@
+export * from "./Modal"

packages/components/src/overlays/v1/Tooltip/_docs/Tooltip.mdx → packages/components/src/__overlays__/Tooltip/v2/_docs/Tooltip.mdx

@@ -15,7 +15,7 @@ import * as TooltipStories from "./Tooltip.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Tooltip } from "@kaizen/components/overlays/v1"'
+  importStatement='import { Tooltip } from "@kaizen/components/v2/overlays"'
  />
 
 ## Overview

packages/components/src/overlays/v1/Tooltip/_docs/Tooltip.stickersheet.stories.tsx → packages/components/src/__overlays__/Tooltip/v2/_docs/Tooltip.stickersheet.stories.tsx

@@ -7,15 +7,15 @@ import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { Tooltip } from "../index"
+import { Tooltip } from "../"
 
 const openTooltipInChromatic: Decorator = (Story, { args }) => {
   if (isChromatic()) args.isInitiallyVisible = true
   return <Story />
 }
 
 export default {
-  title: "Components/Overlays/V1/Tooltip",
+  title: "Overlays/Tooltip/v2",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

packages/components/src/overlays/v1/Tooltip/_docs/Tooltip.stories.tsx → packages/components/src/__overlays__/Tooltip/v2/_docs/Tooltip.stories.tsx

@@ -13,10 +13,10 @@ import {
 } from "~components/Table"
 import { Text } from "~components/Text"
 import { Tag } from "~components/__future__"
-import { Tooltip } from "../index"
+import { Tooltip } from "../"
 
 const meta = {
-  title: "Components/Overlays/V1/Tooltip",
+  title: "Overlays/Tooltip/v2",
   component: Tooltip,
   args: {
     text: "Example tooltip text.",

packages/components/src/overlays/v2/_docs/Tooltip.mdx → packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.mdx

@@ -15,7 +15,7 @@ import * as TooltipStories from "./Tooltip.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Tooltip } from "@kaizen/components/overlays/v2"'
+  importStatement='import { Tooltip } from "@kaizen/components/v3/overlays"'
  />
 
 ## Overview