Merge branch 'main' into KZN-2877/scss-to-css

.changeset/twenty-goats-tell.md

@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Updated button v3 disabled styles

docs/.storybook/main.ts

@@ -1,4 +1,4 @@
-import path, { join, dirname } from 'path'
+import path, { dirname, join } from 'path'
 import type { StorybookConfig } from '@storybook/react-vite'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 

docs/.storybook/preview.tsx

@@ -4,7 +4,7 @@ import './preview.css'
 
 import React, { useEffect } from 'react'
 import { decorators as bgDecorators } from '@storybook/addon-backgrounds/preview'
-import { Decorator, Preview } from '@storybook/react'
+import { type Decorator, type Preview } from '@storybook/react'
 import { KaizenProvider } from '~components/KaizenProvider'
 import { I18nProvider } from '~components/__react-aria-components__'
 import { ReversedColors } from '~components/__utilities__/v3'
@@ -155,30 +155,20 @@ const preview = {
         const groupA = titleA.split('/')[0]
         const groupB = titleB.split('/')[0]
 
-        const groups = [
-          'Introduction',
-          'Guides',
-          'Actions',
-          'Containers',
-          'Illustrations',
-          'Layout',
-          'Overlays',
-          'Components',
-          'Pages',
-        ]
+        const groups = ['Introduction', 'Guides', 'Components', 'Pages']
         const groupDifference = groups.indexOf(groupA) - groups.indexOf(groupB)
         if (groupDifference !== 0) {
           // Sort stories of different groups manually by the groups array
           return groupDifference
         }
 
         // Sort Kaizen Provider to top
-        if (a.title.includes('Kaizen Provider')) {
+        if (a.title.includes('KaizenProvider')) {
           // If both are Kaizen Provider, do not sort
-          if (b.title.includes('Kaizen Provider')) return 0
+          if (b.title.includes('KaizenProvider')) return 0
           return -1
         }
-        if (b.title.includes('Kaizen Provider')) return 1
+        if (b.title.includes('KaizenProvider')) return 1
 
         const titleDifference = titleA.localeCompare(titleB, undefined, {
           numeric: true,

docs/components/DocsContainer/BackToTop/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useLayoutEffect } from 'react'
+import React, { useLayoutEffect, type HTMLAttributes } from 'react'
 
 export const BackToTop = ({
   children,

docs/components/DocsContainer/DefaultDocsContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { DocsContainer, DocsContainerProps, DocsContext } from '@storybook/blocks'
+import { DocsContainer, DocsContext, type DocsContainerProps } from '@storybook/blocks'
 import { BackToTop } from './BackToTop'
-import { Content, Main, DocsWrapper } from './Layout'
+import { Content, DocsWrapper, Main } from './Layout'
 
 type LayoutProps = { children: React.ReactNode }
 

docs/components/DocsContainer/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 import styles from './Layout.module.scss'
 
 export const Main = ({ children }: { children: ReactNode }): JSX.Element => (

docs/components/DosAndDonts/DosAndDonts.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type 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/LinkTo/LinkTo.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { linkTo } from '@storybook/addon-links'
 import classnames from 'classnames'
 

docs/components/NoClipCanvas/NoClipCanvas.tsx

@@ -1,5 +1,5 @@
 import React, { useId, useState } from 'react'
-import { Source, SourceProps, Story, Unstyled } from '@storybook/blocks'
+import { Source, Story, Unstyled, type SourceProps } from '@storybook/blocks'
 import classnames from 'classnames'
 import styles from './NoClipCanvas.module.scss'
 

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type 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

docs/components/SbContent/SbContent.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import styles from './SbContent.module.scss'

docs/components/StickerSheet/StickerSheet.tsx

@@ -1,11 +1,11 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 
 import isChromatic from 'chromatic'
 import classnames from 'classnames'
 import { Heading } from '~components/Heading'
 import { StickerSheetCell } from './components/StickerSheetCell'
 import { StickerSheetHeader } from './components/StickerSheetHeader'
-import { StickerSheetRow, StickerSheetRowProps } from './components/StickerSheetRow'
+import { StickerSheetRow, type StickerSheetRowProps } from './components/StickerSheetRow'
 import styles from './StickerSheet.module.css'
 
 const IS_CHROMATIC = isChromatic()

docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 
 export type StickerSheetCellProps = {
   children: React.ReactNode

docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import styles from './StickerSheetHeader.module.css'
 

docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { StickerSheetCell } from '../StickerSheetCell'
 import { StickerSheetHeader } from '../StickerSheetHeader'

docs/test-runner.ts

@@ -1,4 +1,4 @@
-import { getStoryContext, TestRunnerConfig } from '@storybook/test-runner'
+import { getStoryContext, type TestRunnerConfig } from '@storybook/test-runner'
 import { configureAxe, getAxeResults, injectAxe } from 'axe-playwright'
 import { toHaveNoViolations } from 'jest-axe'
 import { globalA11yRules } from './utils/global-a11y-rules'

docs/theme.ts

@@ -1,5 +1,5 @@
 /* eslint import/no-extraneous-dependencies: 0 */
-import { ThemeVars, create } from '@storybook/theming'
+import { create, type ThemeVars } from '@storybook/theming'
 import { defaultTheme } from '@kaizen/design-tokens'
 const colors = defaultTheme.color
 

eslint.config.js

@@ -98,12 +98,19 @@ export default tseslint.config(
         ecmaFeatures: {
           jsx: true,
         },
+        jsxPragma: 'React',
       },
     },
     files: ['**/*.{ts,tsx}'],
     rules: {
       '@typescript-eslint/explicit-function-return-type': ['error', { allowExpressions: true }],
       '@typescript-eslint/consistent-type-definitions': 'off',
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          fixStyle: 'inline-type-imports',
+        },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-inferrable-types': 'off',
       '@typescript-eslint/no-unused-vars': [
@@ -147,6 +154,7 @@ export default tseslint.config(
       'import/order': [
         'error',
         {
+          named: { enabled: true, types: 'types-last' },
           alphabetize: {
             order: 'asc',
           },

packages/components/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 1.69.1
+
+### Patch Changes
+
+- [#5404](https://github.com/cultureamp/kaizen-design-system/pull/5404) [`76eec54`](https://github.com/cultureamp/kaizen-design-system/commit/76eec54aa04c13bc744ac182556a5b02c6d2854e) - Internal architecture restructure. Should not impact consumers.
+
+## 1.69.0
+
+### Minor Changes
+
+- [#5395](https://github.com/cultureamp/kaizen-design-system/pull/5395) [`9068e68`](https://github.com/cultureamp/kaizen-design-system/commit/9068e68b288cbcfa1561fe03b0875fe62011b67d) - Menu: Create MenuPopover, MenuSection and MenuHeader wrappers over RAC
+
+## 1.68.13
+
+### Patch Changes
+
+- [#5392](https://github.com/cultureamp/kaizen-design-system/pull/5392) [`5ac8212`](https://github.com/cultureamp/kaizen-design-system/commit/5ac821288357fd58f073a4375841e2fc32b16aec) - Made Future Tab hover cursor consistent with current Tab.
+
+## 1.68.12
+
+### Patch Changes
+
+- [#5355](https://github.com/cultureamp/kaizen-design-system/pull/5355) [`f6bd88c`](https://github.com/cultureamp/kaizen-design-system/commit/f6bd88c01c8a566fe96ec1df06ff06269784a6b8) - Tabs (future): add carousel functionality when tabs overflow container width
+
 ## 1.68.11
 
 ### Patch Changes

packages/components/__tests__/reactIntlMock.ts

@@ -1,4 +1,4 @@
-import { MessageDescriptor } from '@cultureamp/i18n-react-intl'
+import { type MessageDescriptor } from '@cultureamp/i18n-react-intl'
 import { vi } from 'vitest'
 
 const replaceInputValue = (str: string, value: string): string => {

packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { transformConfirmationModalMoodsToVariant } from './transformConfirmationModalMoodsToVariant'
 
 describe('transformConfirmationModalMoodsToVariant', () => {

packages/components/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { transformNotificationTypeToVariant } from './migrateNotificationTypeToVariant'
 
 describe('transformNotificationTypeToVariant', () => {

packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { transformWellVariantToColor } from './transformWellVariantToColor'
 
 describe('transformWellVariantToColor', () => {

packages/components/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { removeInputEditModalMood } from './removeInputEditModalMood'
 
 describe('removeInputEditModalMood', () => {

packages/components/codemods/removePopoverVariant/removePopoverVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { removePopoverVariant } from './removePopoverVariant'
 
 describe('removePopoverVariant()', () => {

packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -1,6 +1,6 @@
-import * as OLD_ICONS from '~components/Icon'
-import { IconNames } from '~components/__future__/Icon/types'
-import { StringSuggestions } from '~components/types/StringSuggestions'
+import type * as OLD_ICONS from '~components/Icon'
+import { type IconNames } from '~components/__rc__/Icon/types'
+import { type StringSuggestions } from '~components/types/StringSuggestions'
 
 // `undefined` means the icon has no usage, thus is not available in the new icon set
 type NewIconProps = { name: IconNames; isFilled?: boolean } | undefined

packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts

@@ -1,8 +1,8 @@
 import { parseJsx } from '../__tests__/utils'
 import {
   printAst,
-  type ImportModuleNameTagsMap,
   transformSource,
+  type ImportModuleNameTagsMap,
   type TransformSourceArgs,
 } from '../utils'
 import { upgradeIconV1 } from './upgradeIconV1'

packages/components/codemods/upgradeIconV1/upgradeIconV1.ts

@@ -1,10 +1,10 @@
 import ts from 'typescript'
 import {
+  setImportToAdd,
   setImportToRemove,
-  type ImportModuleNameTagsMap,
   updateKaioImports,
+  type ImportModuleNameTagsMap,
   type UpdateKaioImportsArgs,
-  setImportToAdd,
 } from '../utils'
 import { getNewIconPropsFromOldIconName } from './getNewIconPropsFromOldIconName'
 import { transformCaMonogramIconToBrand } from './transformCaMonogramIconToBrand'

packages/components/codemods/utils/createProp.spec.ts

@@ -2,7 +2,7 @@ import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils/parseJsx'
 import { createStyleProp } from './createProp'
 import { printAst } from './printAst'
-import { TransformSourceArgs, transformSource } from './transformSource'
+import { transformSource, type TransformSourceArgs } from './transformSource'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
 export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {

packages/components/codemods/utils/migrateStringProp.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst, TransformSourceForTagNameArgs } from '../utils'
+import { printAst, transformSourceForTagName, type TransformSourceForTagNameArgs } from '../utils'
 import { migrateStringProp } from './migrateStringProp'
 
 const transformTopping = (oldValue: string): string => {

packages/components/codemods/utils/removeProps.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from '../__tests__/utils'
-import { transformSourceForTagName, printAst } from '../utils'
+import { printAst, transformSourceForTagName } from '../utils'
 import { removeProps } from './removeProps'
 
 describe('removeProps()', () => {

packages/components/codemods/utils/transformSource.spec.ts

@@ -3,9 +3,9 @@ import path from 'path'
 import ts from 'typescript'
 import { createEncodedSourceFile } from './createEncodedSourceFile'
 import {
-  TransformSourceForTagNameArgs,
   transformSource,
   transformSourceForTagName,
+  type TransformSourceForTagNameArgs,
 } from './transformSource'
 
 const visit =

packages/components/codemods/utils/updateKaioImports.spec.ts

@@ -1,6 +1,6 @@
 import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils'
-import { updateKaioImports, UpdateKaioImportsArgs } from './updateKaioImports'
+import { updateKaioImports, type UpdateKaioImportsArgs } from './updateKaioImports'
 import { printAst } from '.'
 
 const transformInput =

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.11",
+  "version": "1.69.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",

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.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { Avatar } from './Avatar'
 
 describe('<Avatar />', () => {