refactor: clean up internal architecture (#5404)

* refactor: rename __future__ dir to __rc__

* refactor(Tooltip): move v1/v2 to src

* refactor(Tooltip): move v3 to rc

* refactor(Focusable): move into subcomponents of Tooltip

* refactor(Button): move v1/v2 to src

* refactor(Button): move v3 to rc

* refactor(Menu): move v1/v2 to src

* refactor(Menu): move v3 to rc

.changeset/twelve-panthers-push.md

@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Internal architecture restructure. Should not impact consumers.

docs/components/DosAndDonts/DosAndDonts.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react'
 import { Canvas, Unstyled } from '@storybook/blocks'
 import classnames from 'classnames'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import styles from './DosAndDonts.module.css'
 
 export const DosAndDonts = ({

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react'
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 
 type ResourceLinkProps = {
   href: string

packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -1,5 +1,5 @@
 import * as OLD_ICONS from '~components/Icon'
-import { IconNames } from '~components/__future__/Icon/types'
+import { IconNames } from '~components/__rc__/Icon/types'
 import { StringSuggestions } from '~components/types/StringSuggestions'
 
 // `undefined` means the icon has no usage, thus is not available in the new icon set

packages/components/future/README.md

@@ -6,7 +6,7 @@ More details: [https://github.com/theKashey/multiple-entry-points-example](https
 
 ## Contribution
 
-All "future" components are to be added to the `src/__future__` directory.
+All "future" components are to be added to the `src/__rc__` directory.
 
 ### What is a "future" component?
 

packages/components/future/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../dist/cjs/future.cjs",
   "module": "../dist/esm/future.mjs",
-  "types": "../dist/types/__future__/index.d.ts"
+  "types": "../dist/types/__rc__/index.d.ts"
 }

packages/components/rollup.config.mjs

@@ -3,13 +3,13 @@ import { pluginsSharedUi, rollupConfig } from '@kaizen/package-bundler'
 export default rollupConfig({
   input: {
     index: './src/index.ts',
-    future: './src/__future__/index.ts',
-    actionsV1: './src/__actions__/v1.ts',
-    actionsV2: './src/__actions__/v2.ts',
-    actionsV3: './src/__actions__/v3.ts',
-    overlaysV1: './src/__overlays__/v1.ts',
-    overlaysV2: './src/__overlays__/v2.ts',
-    overlaysV3: './src/__overlays__/v3.ts',
+    future: './src/__rc__/index.ts',
+    actionsV1: './src/v1-actions.ts',
+    actionsV2: './src/v2-actions.ts',
+    actionsV3: './src/v3-actions.ts',
+    overlaysV1: './src/v1-overlays.ts',
+    overlaysV2: './src/v2-overlays.ts',
+    overlaysV3: './src/v3-overlays.ts',
     utilitiesV3: './src/__utilities__/v3.ts',
     reactAriaV3: './src/__react-aria__/index.ts',
     reactAriaComponentsV3: './src/__react-aria-components__/index.ts',

packages/components/src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Avatar.module.scss'
 

packages/components/src/BrandMoment/BrandMoment.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode, ReactElement, HTMLAttributes } from 'react'
 import classnames from 'classnames'
+import { Button, ButtonProps } from '~components/Button'
 import { Heading } from '~components/Heading'
 import { SceneProps } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Button, ButtonProps } from '~components/__actions__/v2'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { useMediaQueries } from '~components/utils/useMediaQueries'

packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -9,7 +9,7 @@ import {
   AnimatedSceneProps,
 } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { BrandMoment } from '../index'
 import { MinimalBasic, MinimalCustomerFocused, FakeNavBar } from './ExampleHeaders'
 

packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Button } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
+import { Button } from '~components/Button'
+import { Icon } from '~components/__rc__/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import styles from './ExampleHeaders.module.scss'
 

packages/components/src/__actions__/Button/v1/Button/Button.module.scss → packages/components/src/Button/Button/Button.module.scss

@@ -2,7 +2,7 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/typography';
-@import '../../../../../styles/utils/button-reset';
+@import '../../../styles/utils/button-reset';
 @import '../utils/mixins';
 @import '../utils/variables';
 

packages/components/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx → packages/components/src/Button/Button/_docs/Button.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Meta } from '@storybook/react'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Button, ButtonProps } from '../index'
 

packages/components/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx → packages/components/src/Button/Button/_docs/Button.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { StoryObj, Meta } from '@storybook/react'
 import { LoadingInput } from '~components/Loading'
 import { TextField } from '~components/TextField'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { Button } from '../index'
 
 const meta = {

packages/components/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx → packages/components/src/Button/Button/_docs/v2/Button.stories.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react'
 import { StoryObj, Meta } from '@storybook/react'
 import { LoadingInput } from '~components/Loading'
 import { TextField } from '~components/TextField'
-import { Icon } from '~components/__future__/Icon'
-import { Button } from '../index'
+import { Icon } from '~components/__rc__/Icon'
+import { Button } from '../../index'
 
 const meta = {
   title: 'Components/Button/Button (v2)',

packages/components/src/__actions__/Button/v1/GenericButton/GenericButton.module.scss → packages/components/src/Button/GenericButton/GenericButton.module.scss

@@ -1,8 +1,8 @@
 @import '../utils/variables';
 @import '../Button/Button.module';
 @import '../IconButton/IconButton.module';
-@import '../../../../Pagination/subcomponents/PaginationLink/PaginationLink.module';
-@import '../../../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module';
+@import '../../Pagination/subcomponents/PaginationLink/PaginationLink.module';
+@import '../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module';
 
 .container {
   display: inline-block;

packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx → packages/components/src/Button/IconButton/_docs/IconButton.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Meta } from '@storybook/react'
-import { ButtonProps } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
+import type { ButtonProps } from '~components/Button'
+import { Icon } from '~components/__rc__/Icon'
 import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
 import { IconButton, IconButtonProps } from '../index'
 

packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx → packages/components/src/Button/IconButton/_docs/IconButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { IconButton } from '../index'
 
 const meta = {

packages/components/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx → packages/components/src/Button/IconButton/_docs/v2/IconButton.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { Icon } from '~components/__future__/Icon'
-import { IconButton } from '../index'
+import { Icon } from '~components/__rc__/Icon'
+import { IconButton } from '../../index'
 
 const meta = {
   title: 'Components/IconButton/IconButton (v2)',

packages/components/src/__actions__/Button/v1/utils/_variables.scss → packages/components/src/Button/utils/_variables.scss

@@ -1,7 +1,7 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/border';
-@import '../../../../../styles/utils/legacy/color';
-@import '../../../../../styles/utils/legacy/layout';
+@import '../../../styles/utils/legacy/color';
+@import '../../../styles/utils/legacy/layout';
 
 $button-height: $spacing-xl;
 $button-small-height: calc(#{$spacing-md} * 5 / 3);

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__/Tooltip/v1'
+import { Tooltip, TooltipProps } from '~components/Tooltip'
 import { OverrideClassName } from '~components/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__/Tooltip/v1'
+import { Tooltip } from '~components/Tooltip'
 import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
 import { ButtonGroup } from '../index'
 

packages/components/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { enAU } from 'date-fns/locale'
 import { DayPicker, DayPickerRangeProps } from 'react-day-picker'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
 import { isInvalidDate } from '../utils'

packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { enAU } from 'date-fns/locale'
 import { DayPicker, DayPickerSingleProps } from 'react-day-picker'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
 import { isInvalidDate, isValidWeekStartsOn } from '../utils'

packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -7,7 +7,7 @@ import {
   Matcher,
   DayPickerRangeProps,
 } from 'react-day-picker'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
 import { DayOfWeek } from '../enums'
 import { isInvalidDate, isValidWeekStartsOn } from '../utils'

packages/components/src/Checkbox/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Checkbox.module.scss'
 

packages/components/src/ClearButton/ClearButton.tsx

@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './ClearButton.module.scss'
 

packages/components/src/Collapsible/Collapsible/Collapsible.tsx

@@ -1,9 +1,9 @@
 import React, { HTMLAttributes, useId, useState } from 'react'
 import classnames from 'classnames'
 import AnimateHeight from 'react-animate-height'
+import { IconButton } from '~components/Button'
 import { Heading } from '~components/Heading'
-import { IconButton } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import { Sticky } from '../types'
 import styles from './Collapsible.module.scss'

packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import { Heading } from '~components/Heading'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { Collapsible } from '../index'
 
 const meta = {

packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { isRefObject } from '~components/utils/isRefObject'
 import { DateInput, DateInputProps } from '../DateInput'
 import styles from './DateInputWithIconButton.module.scss'

packages/components/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions'
 import { Meta, StoryObj } from '@storybook/react'
 import { userEvent, within, expect } from '@storybook/test'
 import Highlight from 'react-highlight'
+import { Button } from '~components/Button'
 import { defaultMonthControls } from '~components/Calendar/_docs/controls/defaultMonthControls'
 import { weekStartsOnControls } from '~components/Calendar/_docs/controls/weekStartsOnControls'
 import { FieldMessageStatus } from '~components/FieldMessage'
 import { Text } from '~components/Text'
-import { Button } from '~components/__actions__/v2'
 import { DatePicker, ValidationResponse } from '../index'
 import { datePickerLocaleControls } from './controls/datePickerLocaleControls'
 import { disabledDayMatchersControls } from './controls/disabledDayMatchersControls'

packages/components/src/DateRangePicker/DateRangePicker.tsx

@@ -11,7 +11,7 @@ import {
 } from '~components/Calendar/LegacyCalendarRange'
 import { Label } from '~components/Label'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import styles from './DateRangePicker.module.scss'
 
 export type DateRangePickerProps = {

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

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Meta } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Button } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
+import { Button } from '~components/Button'
+import { Icon } from '~components/__rc__/Icon'
 import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
 import { EmptyState, EmptyStateProps } from '../index'
 

packages/components/src/EmptyState/_docs/EmptyState.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { Button } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
+import { Button } from '~components/Button'
+import { Icon } from '~components/__rc__/Icon'
 import { EmptyState } from '../index'
 
 const meta = {

packages/components/src/ErrorPage/ErrorPage.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { BrandMoment } from '~components/BrandMoment'
 import { BrandMomentError } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import { ErrorStatuses, useErrorMessages } from './hooks'
 import styles from './ErrorPage.module.scss'

packages/components/src/FieldMessage/FieldMessage.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './FieldMessage.module.scss'
 

packages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
-import { Menu, MenuList, MenuItem, Button } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
+import { Button } from '~components/Button'
+import { Menu, MenuList, MenuItem } from '~components/Menu'
+import { Icon } from '~components/__rc__/Icon'
 import { useFilterBarContext } from '../../context/FilterBarContext'
 
 export const AddFiltersMenu = (): JSX.Element => {

packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
-import { Button } from '~components/__actions__/v2'
+import { Button } from '~components/Button'
 import { useFilterBarContext } from '../../context/FilterBarContext'
 import styles from './ClearAllButton.module.scss'
 

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { isRefObject } from '~components/utils/isRefObject'
 import { FilterTriggerRef } from '../../Filter/types'
 import { FilterButtonBase, FilterButtonBaseProps } from '../subcomponents/FilterButtonBase'

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

@@ -3,8 +3,8 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { ButtonGroup, ButtonGroupProps } from '~components/ButtonGroup'
 import { FilterTriggerRef } from '~components/Filter/Filter'
-import { Icon } from '~components/__future__/Icon'
-import { Tooltip } from '~components/__overlays__/Tooltip/v1'
+import { Tooltip } from '~components/Tooltip'
+import { Icon } from '~components/__rc__/Icon'
 import { DataAttributes } from '~components/types/DataAttributes'
 import { isRefObject } from '~components/utils/isRefObject'
 import { FilterButton, FilterButtonProps } from '../FilterButton'

packages/components/src/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonProps } from '~components/__actions__/v2'
+import { Button, type ButtonProps } from '~components/Button'
 import styles from './LoadMoreButton.module.scss'
 
 export type LoadMoreButtonProps = ButtonProps

packages/components/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx

@@ -5,7 +5,7 @@ import { mergeProps } from '@react-aria/utils'
 import classnames from 'classnames'
 import { Badge } from '~components/Badge'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { useSelectionContext } from '../../context'
 import { MultiSelectItem } from '../../types'
 import styles from './MultiSelectOption.module.scss'