@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

package/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stories.tsx

@@ -1,6 +1,4 @@
 import { Meta, StoryObj } from "@storybook/react"
-// import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
-// import { TagColorKeys } from "../../Tag/types"
 import { RemovableTag } from "../RemovableTag"
 
 const meta = {
@@ -20,19 +18,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  // This can be added when we add Icon support
-  // argTypes: {
-  // icon: {
-  // options: ["AcademyIcon", "ActionOffIcon", "AddIcon", "TagIcon"],
-  // control: { type: "radio" },
-  // mapping: {
-  // AcademyIcon: <AcademyIcon role="presentation" />,
-  // ActionOffIcon: <ActionOffIcon role="presentation" />,
-  // AddIcon: <AddIcon role="presentation" />,
-  // TagIcon: <TagIcon role="presentation" />,
-  // },
-  // },
-  // },
   parameters: {
     docs: {
       canvas: {
@@ -46,68 +31,6 @@ export const Children: Story = {
   args: { children: "This text is the children" },
 }
 
-// Colors and Icons may be added in at a later time.
-//
-// export const Color: Story = {
-// render: () => (
-// <>
-// {TagColorKeys.map(color => (
-// <RemovableTag
-// color={color}
-// icon={<TagIcon role="presentation" />}
-// key={color}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// {color}
-// </RemovableTag>
-// ))}
-// </>
-// ),
-// parameters: {
-// docs: {
-// source: { type: "dynamic" },
-// },
-// },
-// }
-// export const Icon: Story = {
-// render: () => (
-// <>
-// <RemovableTag
-// icon={<AcademyIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// AcademyIcon
-// </RemovableTag>
-// <RemovableTag
-/// / color="yellow"
-// icon={<ActionOffIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// ActionOffIcon
-// </RemovableTag>
-// <RemovableTag
-/// / color="green"
-// icon={<AddIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// AddIcon
-// </RemovableTag>
-// </>
-// ),
-// }
-
 export const ClassNameOverride: Story = {
   args: {
     classNameOverride: "border-red-500 border-solid border-",

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -8,6 +8,7 @@
   position: relative;
   display: inline-flex;
   border-radius: 50%;
+  color: rgba($color-purple-800-rgb, 0.7);
 
   &:focus,
   &:focus-visible {
@@ -34,8 +35,6 @@
     border-radius: 50%;
   }
 
-  color: rgba($color-purple-800-rgb, 0.7);
-
   &:hover,
   &:focus,
   &:focus-visible {
@@ -44,59 +43,3 @@
     color: $color-purple-800;
   }
 }
-
-// .gray {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-gray-600-rgb, 0.2);
-// }
-// }
-
-// .blue {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-blue-500-rgb, 0.3);
-// }
-// }
-
-// .green {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-green-500-rgb, 0.3);
-// }
-// }
-
-// .yellow {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-yellow-500-rgb, 0.5);
-// }
-// }
-
-// .orange {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-orange-500-rgb, 0.3);
-// }
-// }
-
-// .red {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-red-500-rgb, 0.3);
-// }
-// }
-
-// .purple {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-purple-500-rgb, 0.3);
-// }
-// }

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx

@@ -1,20 +1,10 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import { RemoveTagIcon } from "./RemoveTagIcon"
 import styles from "./RemoveButton.module.scss"
 
-// type RemoveButtonColor =
-// | "gray"
-// | "blue"
-// | "green"
-// | "yellow"
-// | "orange"
-// | "red"
-// | "purple"
-
 export type RemoveButtonBaseProps = {
-  // color?: RemoveButtonColor
   ariaLabel: string
   onClick: () => void
 }
@@ -37,7 +27,7 @@ export const RemoveButton = ({
     onClick={onClick}
     {...restProps}
   >
-    <RemoveTagIcon role="presentation" />
+    <Icon name="close" isPresentational />
   </button>
 )
 

package/src/__future__/Tag/Tag/Tag.module.scss

@@ -47,7 +47,7 @@
   color: $color-yellow-700;
 
   .iconContainer {
-    color: $color-yellow-500;
+    color: $color-yellow-700;
   }
 }
 

package/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx

@@ -2,14 +2,9 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 import { Avatar } from "~components/Avatar"
-import {
-  CautionIcon,
-  ExclamationIcon,
-  InformationIcon,
-  SuccessIcon,
-  LiveIcon,
-} from "~components/Icon"
+import { LiveIcon } from "~components/Icon"
 import styles from "~components/Tag/Tag.module.scss"
+import { Icon } from "~components/__future__/Icon"
 import { Tag, RemovableTag } from "../.."
 
 const meta = {
@@ -148,25 +143,19 @@ export const ValidationMigration: StoryObj = {
     <>
       <Tag
         color="green"
-        icon={<SuccessIcon role="img" aria-label="Success," />}
+        icon={<Icon name="check_circle" isFilled alt="Success," />}
       >
         Tag
       </Tag>
-      <Tag
-        color="blue"
-        icon={<InformationIcon role="img" aria-label="Note," />}
-      >
+      <Tag color="blue" icon={<Icon name="info" isFilled alt="Note," />}>
         Tag
       </Tag>
-      <Tag
-        color="red"
-        icon={<ExclamationIcon role="img" aria-label="Error," />}
-      >
+      <Tag color="red" icon={<Icon name="error" isFilled alt="Error," />}>
         Tag
       </Tag>
       <Tag
         color="yellow"
-        icon={<CautionIcon role="img" aria-label="Warning," />}
+        icon={<Icon name="warning" isFilled alt="Warning," />}
       >
         Tag
       </Tag>

package/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { TagIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -26,7 +26,10 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Tag color={color}>
               {color.charAt(0).toUpperCase() + color.slice(1)}
             </Tag>
-            <Tag icon={<TagIcon role="presentation" />} color={color}>
+            <Tag
+              icon={<Icon name="label" isPresentational isFilled />}
+              color={color}
+            >
               {color.charAt(0).toUpperCase() + color.slice(1)}
             </Tag>
           </StickerSheet.Row>

package/src/__future__/Tag/Tag/_docs/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TagColorKeys } from "../types"
 import { Tag } from ".."
 
@@ -34,7 +34,11 @@ export const Color: StoryObj = {
   render: () => (
     <div className="flex gap-16">
       {TagColorKeys.map(color => (
-        <Tag color={color} icon={<TagIcon role="presentation" />} key={color}>
+        <Tag
+          color={color}
+          icon={<Icon name="label" isPresentational isFilled />}
+          key={color}
+        >
           {color}
         </Tag>
       ))}
@@ -47,14 +51,17 @@ export const Color: StoryObj = {
   },
 }
 
-export const Icon: StoryObj = {
+export const IconStory: StoryObj = {
+  name: "Icon",
   render: () => (
     <div className="flex gap-16">
-      <Tag icon={<AcademyIcon role="presentation" />}>AcademyIcon</Tag>
-      <Tag color="yellow" icon={<ActionOffIcon role="presentation" />}>
+      <Tag icon={<Icon name="school" isPresentational isFilled />}>
+        AcademyIcon
+      </Tag>
+      <Tag color="yellow" icon={<Icon name="flash_on" isPresentational />}>
         ActionOffIcon
       </Tag>
-      <Tag color="green" icon={<AddIcon role="presentation" />}>
+      <Tag color="green" icon={<Icon name="add" isPresentational />}>
         AddIcon
       </Tag>
     </div>

package/src/__future__/index.ts

@@ -1,2 +1,4 @@
+export * from "./Icon"
 export * from "./Select"
 export * from "./Tag"
+export * from "./Tabs"

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Decorator, Meta } from "@storybook/react"
 import isChromatic from "chromatic/isChromatic"
-import { MeatballsIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -38,7 +38,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="above" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -46,7 +46,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="below" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -54,7 +54,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="left" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -67,7 +67,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               >
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -90,7 +90,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="default">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -98,7 +98,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="informative">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -106,7 +106,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="positive">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -114,7 +114,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="highlight">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -122,7 +122,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="cautionary">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx

@@ -3,7 +3,6 @@ import { Meta, StoryObj } from "@storybook/react"
 import { ButtonGroup } from "~components/ButtonGroup"
 import { CheckboxField } from "~components/Checkbox"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { InformationIcon, RemoveLinkIcon, QuestionIcon } from "~components/Icon"
 import {
   TableContainer,
   TableHeader,
@@ -12,6 +11,7 @@ import {
 } from "~components/Table"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__"
 import { Tag } from "~components/__future__/Tag"
 import { Tooltip } from "../index"
 
@@ -106,7 +106,7 @@ export const OverflowScroll: Story = {
             }}
           >
             <Tooltip {...props} display="inline" text="Tooltip label">
-              <InformationIcon role="img" aria-label="Info" />
+              <Icon name="info" alt="Info" isFilled />
             </Tooltip>
           </div>
         </div>
@@ -159,12 +159,15 @@ export const ButtonsWithTooltip: Story = {
   render: args => (
     <>
       <Tooltip {...args} text="Contact customer support.">
-        <Button label="Help" icon={<QuestionIcon role="presentation" />} />
+        <Button
+          label="Help"
+          icon={<Icon name="help" isPresentational isFilled />}
+        />
       </Tooltip>
       <Tooltip {...args} text="Remove the link from current selection.">
         <IconButton
           label="Remove link"
-          icon={<RemoveLinkIcon role="presentation" />}
+          icon={<Icon name="link_off" isPresentational />}
         />
       </Tooltip>
     </>

package/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx

@@ -1,8 +1,9 @@
 import React from "react"
 import { vi } from "vitest"
-import { ArrowRightIcon } from "~components/Icon"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__"
 import { isSemanticElement } from "./isSemanticElement"
+
 describe("isSemanticElement", () => {
   it("returns true if provided a native element with a semantic role", () => {
     expect(
@@ -48,15 +49,7 @@ describe("isSemanticElement", () => {
   })
 
   it("returns false if provided an element using a role 'presentation' or 'none'", () => {
-    expect(isSemanticElement(<ArrowRightIcon role="presentation" />)).toBe(
-      false
-    )
-    expect(
-      isSemanticElement(
-        <span role="none">
-          <ArrowRightIcon role="presentation" />
-        </span>
-      )
-    ).toBe(false)
+    expect(isSemanticElement(<Icon name="add" isPresentational />)).toBe(false)
+    expect(isSemanticElement(<span role="none">Hello</span>)).toBe(false)
   })
 })

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx

@@ -2,11 +2,11 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { FieldMessage } from "~components/FieldMessage"
-import { AddIcon, QuestionIcon } from "~components/Icon"
 import { Input } from "~components/Input"
 import { Label } from "~components/Label"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
 import * as TestStories from "./Tooltip.spec.stories"
@@ -49,7 +49,7 @@ export const Primary: Story = {
     <TooltipTrigger>
       <IconButton
         label="Add something"
-        icon={<AddIcon role="presentation" />}
+        icon={<Icon name="add" isPresentational />}
         primary
         // Negate the aria description (added by RAC) as it should be the
         // same as the accessible name, therefore no need to duplicate it
@@ -86,12 +86,12 @@ export const DontFieldTooltip: Story = {
         <Focusable>
           <Label>
             Password{" "}
-            <span className="inline-flex align-middle">
-              <QuestionIcon
-                classNameOverride="w-[15px] m-auto"
-                role="presentation"
-              />
-            </span>
+            <Icon
+              name="help"
+              isPresentational
+              isFilled
+              className="text-paragraph"
+            />
           </Label>
         </Focusable>
         <Tooltip>Password must be at least 8 characters</Tooltip>
@@ -114,7 +114,7 @@ export const DoConcise: Story = {
       <TooltipTrigger>
         <IconButton
           label="Add topic"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           // Negate the aria description (added by RAC) as it should be the
           // same as the accessible name, therefore no need to duplicate it
@@ -137,7 +137,7 @@ export const DontConcise: Story = {
       <TooltipTrigger>
         <IconButton
           label="Add something"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           // Negate the aria description (added by RAC) as it should be the
           // same as the accessible name, therefore no need to duplicate it

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx

@@ -2,10 +2,10 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { expect, userEvent, waitFor, within } from "@storybook/test"
 import isChromatic from "chromatic"
-import { AddIcon } from "~components/Icon"
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "~components/Tabs"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tag } from "~components/__future__/Tag"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
@@ -87,7 +87,7 @@ export const OnButtonWithDesc: Story = {
       <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
         <IconButton
           label="(TESTING) Add label"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           aria-describedby="blah"
         />
@@ -105,7 +105,7 @@ export const OnIconButton: Story = {
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
       <IconButton
         label="Add something"
-        icon={<AddIcon role="presentation" />}
+        icon={<Icon name="add" isPresentational />}
         primary
         // Negate the aria description (added by RAC) as it should be the
         // same as the accessible name, therefore no need to duplicate it

package/codemods/utils/getTagName.spec.ts

@@ -1,24 +0,0 @@
-import { parseJsx } from "../__tests__/utils"
-import { getTagName } from "./getTagName"
-
-describe("getTagName", () => {
-  it("returns the import name if it matches the target specifier", () => {
-    const input = parseJsx('import { Well } from "@kaizen/components"')
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe("Well")
-  })
-
-  it("returns the import alias if it matches the target specifier", () => {
-    const input = parseJsx(
-      'import { Well as KaizenWell } from "@kaizen/components"'
-    )
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe("KaizenWell")
-  })
-
-  it("returns undefined if there is no match to the target specifier", () => {
-    const input = parseJsx('import { Well } from "@kaizen/well"')
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe(undefined)
-  })
-})

package/codemods/utils/getTagName.ts

@@ -1,32 +0,0 @@
-import ts from "typescript"
-
-/** Recurses through AST to find the import specifier name and check it against the `importSpecifierTarget`. If found, it will return the import name or alias, otherwise will return `undefined` */
-export const getTagName = (
-  node: ts.Node,
-  importSpecifierTarget: string
-): string | undefined => {
-  let alias: string | undefined
-
-  const visitNode = (visitedNode: ts.Node): string | undefined => {
-    if (ts.isImportDeclaration(visitedNode)) {
-      const moduleSpecifier = visitedNode.moduleSpecifier.getText()
-      if (moduleSpecifier.includes("@kaizen/components")) {
-        const namedBindings = visitedNode.importClause?.namedBindings
-        if (namedBindings && ts.isNamedImports(namedBindings)) {
-          namedBindings.elements.forEach(importSpecifier => {
-            const importName = importSpecifier.name.getText()
-            const tagName = importSpecifier.propertyName
-              ? importSpecifier.propertyName.getText()
-              : importName
-            if (tagName === importSpecifierTarget) {
-              alias = importName
-            }
-          })
-        }
-      }
-    }
-    return alias || ts.forEachChild(visitedNode, visitNode) || undefined
-  }
-
-  return visitNode(node)
-}

package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__4SQsH",
-  "spinner": "LoadingSpinner-module_spinner__bDpy0"
-};
-module.exports = styles;

package/dist/cjs/TextArea/TextArea.module.scss.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "TextArea-module_wrapper__ytS6M",
-  "textarea": "TextArea-module_textarea__GeHn4",
-  "focusRing": "TextArea-module_focusRing__kECqH",
-  "default": "TextArea-module_default__Z8jvR",
-  "error": "TextArea-module_error__XOQRm",
-  "caution": "TextArea-module_caution__9BGd0",
-  "disabled": "TextArea-module_disabled__N09tP",
-  "reversed": "TextArea-module_reversed__-SoNq"
-};
-module.exports = styles;