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

package/src/__future__/Icon/types.ts

@@ -0,0 +1,11 @@
+import iconsMetadata from "./material-symbols-metadata.json"
+
+// Icon names are from https://github.com/marella/material-symbols/blob/main/metadata/versions.json
+// Update `material-symbols-metadata.json` for new icons.
+// Last updated: 28 Aug 2024
+type MaterialIconNames = keyof typeof iconsMetadata
+
+// `auto_awesome` is not listed as part of Material Symbols, however is
+// available in Material Icons, which appears to still work.
+// https://fonts.google.com/icons?icon.query=auto+awesome&icon.set=Material+Icons&icon.size=20&icon.color=%23000000&selected=Material+Icons+Outlined:auto_awesome:
+export type IconNames = MaterialIconNames | "auto_awesome"

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

@@ -188,14 +188,13 @@ export const PortalContainer: Story = {
             Open Modal
           </button>
           <ContextModal
-            {...args}
             isOpen={isOpen}
             onConfirm={handleClose}
             onDismiss={handleClose}
             title="Select test"
           >
             <div
-              className="flex gap-24 bg-gray-200 p-12 h-[500px] relative"
+              className="flex gap-24 bg-gray-200 p-12"
               id={portalContainerId}
             >
               <Select

package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes, Key, useEffect, useRef, ReactNode } from "react"
 import { AriaListBoxOptions, useListBox } from "@react-aria/listbox"
 import { SelectState } from "@react-stately/select"
 import classnames from "classnames"
-import { useIsClientReady } from "~components/__utilities__/isClientReady"
+import { useIsClientReady } from "~components/__utilities__/useIsClientReady"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { useSelectContext } from "../../context"
 import { SelectOption, SelectItem } from "../../types"
@@ -38,7 +38,7 @@ const safeQuerySelector = (selector: string): HTMLElement | null => {
     return document.querySelector(selector)
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.error("QuerySelector failed:", error)
+    console.error("Kaizen querySelector failed:", error)
     return null
   }
 }
@@ -56,7 +56,7 @@ export const ListBox = <Option extends SelectOption>({
     {
       ...menuProps,
       disallowEmptySelection: true,
-      // This is to ensure that the listbox use React Aria's auto focus feature for Listbox, which creates a visual bug
+      // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
       autoFocus: false,
     },
     state,
@@ -81,7 +81,6 @@ export const ListBox = <Option extends SelectOption>({
   }, [isClientReady])
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <ul
       ref={ref}
       className={classnames(styles.listBox, classNameOverride)}

package/src/__future__/Select/subcomponents/Option/Option.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import { FocusableElement } from "@react-types/shared"
 import classnames from "classnames"
 import { mergeProps, useFocusRing, useOption } from "react-aria"
-import { CheckIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { useSelectContext } from "../../context"
 import { SelectOption, SelectOptionNode } from "../../types"
@@ -56,7 +56,7 @@ export const Option = <Option extends SelectOption = SelectOption>({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon inheritSize role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
     </li>
   )

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -9,7 +9,6 @@
 }
 
 .icon {
-  margin-inline-start: $spacing-12;
   color: $color-gray-500;
 }
 
@@ -145,4 +144,5 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-inline-end: var(--spacing-12);
 }

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from "react"
 import { DOMAttributes, FocusableElement } from "@react-types/shared"
 import classnames from "classnames"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Label } from "~components/Label"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./SelectToggle.module.scss"
 
@@ -69,14 +69,11 @@ export const SelectToggle = React.forwardRef<
         <span {...valueProps} className={styles.value}>
           {value ?? placeholder}
         </span>
-        {isOpen ? (
-          <ChevronUpIcon role="presentation" classNameOverride={styles.icon} />
-        ) : (
-          <ChevronDownIcon
-            role="presentation"
-            classNameOverride={styles.icon}
-          />
-        )}
+        <Icon
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          isPresentational
+          className={styles.icon}
+        />
       </button>
     </div>
   )

package/src/__future__/Tabs/Tabs.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import {
+  Tabs as RACTabs,
+  TabsProps as RACTabsProps,
+  Key as RACKey,
+} from "react-aria-components"
+
+export type TabsProps = Omit<RACTabsProps, "orientation">
+export type Key = RACKey
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
+ *
+ * Wrapper around all of the tab subcomponents
+ * Holds a TabList and TabPanels
+ */
+export const Tabs = (props: TabsProps): JSX.Element => <RACTabs {...props} />

package/src/__future__/Tabs/_docs/Tabs--api-specification.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as TabsStories from "./Tabs.stories"
+
+<Meta title="Components/Tabs/Tabs (Future)/API Specification" />
+
+# Tabs
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A28886&mode=design&t=AGMmnoJia9RscurE-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs"
+
+/>
+
+<KAIOInstallation
+  exportNames={["Tabs", "TabList", "Tab", "TabPanel"]}
+  isFuture
+/>
+
+## Overview
+
+<Canvas of={TabsStories.Playground} />
+<Controls of={TabsStories.Playground} />
+
+## Uncontrolled vs controlled
+
+This component is uncontrolled by default. You can specify a default active tab on load with `defaultSelectedKey`.
+
+If you need to control the state of the active tabs on the consuming side, use the `selectedKey` prop instead of `defaultSelectedKey`, and hook into `onSelectionChange`.
+
+<Canvas of={TabsStories.Controlled} />
+
+
+## `tablist|tab` role vs `nav|link`
+
+This component implements the `tablist` role and WAI ARIA guidelines for tabs:
+https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role
+https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+
+It's not intended to be used for a navigation bar where you need links wrapped in a `<nav>` instead.
+
+If you really need to, you can add a URL history change here (using onChange), but that's probably a sign that this component is being misused.

package/src/__future__/Tabs/_docs/Tabs--migration-guide.mdx

@@ -0,0 +1,93 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Components/Tabs/Tabs (Future)/Migration Guide" />
+
+# Future Tabs migration guide
+
+A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `future` release.
+
+## Why the change?
+
+Current Tabs uses the Reach UI library under the hood, which is no longer actively maintained. This switches the library used internally to React Aria Components.
+
+## Component and API changes at a glance
+
+The Reach UI and React Aria APIs are fairly similar so there's not too much to adjust.
+
+The biggest adjustment is that you now need to provide an `id` for each `<Tab>` and match it with the one on `<TabPanel>`
+
+Additionally:
+- `<TabPanel>`s no longer needs to be wrapped in a `<TabPanels>` component
+- `classNameOverride` changes to `className`
+- `<Tabs defaultIndex={}>` changes to `<Tabs defaultSelectedKey={}>`
+- `<Tabs index={}>` changes to `<Tabs selectedKey={}>`
+- `<Tabs onChange={}>` changes to `<Tabs onSelectionChange={}>`
+- `<Tab disabled>` changes to `<Tab isDisabled>`
+
+## Migration examples
+
+### Uncontrolled
+
+#### Before
+
+```tsx
+<Tabs defaultIndex={1}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel classNameOverride="p-4">Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+  </TabPanels>
+</Tabs>
+```
+
+#### After
+
+```tsx
+<Tabs defaultSelectedKey="two">
+  <TabList>
+    <Tab id="one">Tab 1</Tab>
+    <Tab id="two">Tab 2</Tab>
+    <Tab id="three" isDisabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanel id="one" className="p-4">Content 1</TabPanel>
+  <TabPanel id="two">Content 2</TabPanel>
+</Tabs>
+```
+
+### Controlled
+
+#### Before
+
+```tsx
+<Tabs onChange={setSelectedTab} defaultIndex={1}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+  </TabPanels>
+</Tabs>
+```
+
+#### After
+
+```tsx
+<Tabs onSelectionChange={setSelectedTab} selectedKey="two">
+  <TabList>
+    <Tab id="one">Tab 1</Tab>
+    <Tab id="two">Tab 2</Tab>
+    <Tab id="three" isDisabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanel id="one">Content 1</TabPanel>
+  <TabPanel id="two">Content 2</TabPanel>
+</Tabs>
+```

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

@@ -0,0 +1,74 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Text } from "~components/Text"
+import { Button } from "~components/__actions__/v2"
+import { Tab, TabList, TabPanel, Tabs, Key } from "../index"
+
+const meta = {
+  title: "Components/Tabs/Tabs (Future)",
+  component: Tabs,
+  args: {
+    children: (
+      <>
+        <TabList aria-label="Tabs">
+          <Tab id="one">Tab 1</Tab>
+          <Tab id="two">Tab 2</Tab>
+          <Tab id="three" badge="3">
+            Tab 3
+          </Tab>
+          <Tab id="four" isDisabled>
+            Disabled Tab
+          </Tab>
+        </TabList>
+        <TabPanel id="one" className="p-24">
+          <Text variant="body">Content 1</Text>
+        </TabPanel>
+        <TabPanel id="two" className="p-24">
+          <Text variant="body">Content 2</Text>
+        </TabPanel>
+        <TabPanel id="three" className="p-24">
+          <Text variant="body">Content 3</Text>
+        </TabPanel>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    chromatic: { disable: false },
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  args: {
+    defaultSelectedKey: "one",
+    // eslint-disable-next-line no-console
+    onSelectionChange: (key): void => console.log("Tab changed to ", key),
+  },
+}
+
+export const Controlled: Story = {
+  render: args => {
+    const [selectedKey, setSelectedKey] = useState<Key>(0)
+    return (
+      <>
+        <Tabs
+          {...args}
+          selectedKey={selectedKey}
+          onSelectionChange={setSelectedKey}
+        />
+        <Button
+          label="Switch to tab 2"
+          onClick={(): void => setSelectedKey("two")}
+        />
+      </>
+    )
+  },
+}

package/src/__future__/Tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs"
+export * from "./subcomponents"

package/src/__future__/Tabs/subcomponents/Tab/Tab.module.css

@@ -0,0 +1,94 @@
+.tab {
+  display: inline-flex;
+  align-items: center;
+  border: 2px solid transparent;
+  border-bottom: 0;
+  border-top-left-radius: var(--border-borderless-border-radius);
+  border-top-right-radius: var(--border-borderless-border-radius);
+  background: var(--color-white);
+  white-space: nowrap;
+  text-decoration: none;
+  padding: var(--spacing-md) var(--spacing-md);
+  margin: 0;
+  font-family: var(--typography-heading-4-font-family);
+  font-size: var(--typography-heading-4-font-size);
+  font-weight: var(--typography-heading-4-font-weight);
+  line-height: var(--typography-heading-4-line-height);
+  letter-spacing: var(--typography-heading-4-letter-spacing);
+  color: var(--color-purple-800);
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+    border-color: var(--color-blue-500);
+  }
+
+  &[data-disabled] {
+    opacity: 0.3;
+  }
+
+  &:not(:first-child) {
+    margin-inline-start: var(--spacing-xs);
+  }
+
+  &:not([data-disabled]):hover {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+  }
+}
+
+.tab[data-selected] {
+  position: relative;
+  color: var(--color-blue-500);
+
+  &::before {
+    content: "";
+    display: block;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background-color: currentcolor;
+    height: 5px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.badge {
+  margin-inline-start: var(--spacing-sm);
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (forced-colors: active) {
+  .tab {
+    border: 2px solid transparent;
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-radius: var(--border-focus-ring-border-radius);
+      border-width: var(--border-focus-ring-border-width);
+      border-style: var(--border-focus-ring-border-style);
+      border-color: transparent;
+      inset: -2px;
+    }
+  }
+
+  .tab[data-selected]::before {
+    /* High contrast also doesn't see the pseudo element created to show the active tab. */
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+  }
+}

package/src/__future__/Tabs/subcomponents/Tab/Tab.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import classnames from "classnames"
+import { Tab as RACTab, TabProps as RACTabProps } from "react-aria-components"
+import { Badge } from "~components/Badge"
+import styles from "./Tab.module.css"
+
+export type TabProps = {
+  /**
+   * Adds a Kaizen Badge component to the tab.
+   * Comes with some logic baked in - changes variant based on active/focus/hover state.
+   */
+  badge?: string
+} & Omit<
+  RACTabProps,
+  // omitting link functionality because it goes against WAI ARIA standards https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+  | "href"
+  | "hrefLang"
+  | "target"
+  | "rel"
+  | "download"
+  | "ping"
+  | "referrerPolicy"
+>
+
+/**
+ * A tab button
+ */
+export const Tab = (props: TabProps): JSX.Element => {
+  const { badge, children, className, ...restProps } = props
+
+  const tabProps = {
+    className: classnames(styles.tab, className),
+    ...restProps,
+  }
+
+  return (
+    <RACTab {...tabProps}>
+      {({ isSelected, isFocusVisible, isHovered }) => (
+        <>
+          {children}
+          {badge && (
+            <span className={styles.badge}>
+              <Badge
+                variant={
+                  isSelected || isFocusVisible || isHovered
+                    ? "active"
+                    : "default"
+                }
+              >
+                {badge}
+              </Badge>
+            </span>
+          )}
+        </>
+      )}
+    </RACTab>
+  )
+}

package/src/__future__/Tabs/subcomponents/Tab/index.ts

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

package/src/__future__/Tabs/subcomponents/TabList/TabList.module.css

@@ -0,0 +1,8 @@
+.tabList {
+  border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  padding: var(--spacing-xs) var(--spacing-md) 0;
+}
+
+.noPadding {
+  padding: 0;
+}

package/src/__future__/Tabs/subcomponents/TabList/TabList.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react"
+import classnames from "classnames"
+import {
+  TabList as RACTabList,
+  TabListProps as RACTabListProps,
+} from "react-aria-components"
+import styles from "./TabList.module.css"
+
+export type TabListProps = {
+  /**
+   * Accessible name for the set of tabs
+   */
+  "aria-label": string
+  /**
+   * Removes the built in padding
+   */
+  noPadding?: boolean
+  children: ReactNode
+} & RACTabListProps<HTMLElement>
+
+/**
+ * Wrapper for the tabs themselves
+ */
+export const TabList = (props: TabListProps): JSX.Element => {
+  const {
+    "aria-label": ariaLabel,
+    noPadding = false,
+    children,
+    className,
+    ...restProps
+  } = props
+  return (
+    <RACTabList
+      aria-label={ariaLabel}
+      className={classnames(
+        styles.tabList,
+        className,
+        noPadding && styles.noPadding
+      )}
+      {...restProps}
+    >
+      {children}
+    </RACTabList>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabList/index.ts

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

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.module.css

@@ -0,0 +1,12 @@
+.tabPanel {
+  border: 2px solid transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
+  }
+}

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import {
+  TabPanel as RACTabPanel,
+  TabPanelProps as RACTabPanelProps,
+} from "react-aria-components"
+import styles from "./TabPanel.module.css"
+
+export type TabPanelProps = RACTabPanelProps
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+export const TabPanel = (props: TabPanelProps): JSX.Element => {
+  const { className, children, ...restProps } = props
+  return (
+    <RACTabPanel className={(styles.tabPanel, className)} {...restProps}>
+      {children}
+    </RACTabPanel>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabPanel/index.ts

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

package/src/__future__/Tabs/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export * from "./Tab/"
+export * from "./TabList/"
+export * from "./TabPanel/"