@kaizen/components 1.69.1 → 1.70.0

package/codemods/utils/transformComponentsInDir.ts

@@ -1,16 +1,18 @@
 import fs from 'fs'
 import path from 'path'
 import { createEncodedSourceFile } from './createEncodedSourceFile'
-import { getKaioTagName } from './getKaioTagName'
-import { transformSourceForTagName, type TransformSourceForTagNameArgs } from './transformSource'
+import {
+  getKaioTagNamesMapByComponentName,
+  getKaioTagNamesMapByPattern,
+  type TagImportAttributesMap,
+} from './getKaioTagName'
+import { transformSource, type TransformSourceArgs } from './transformSource'
 
 export const traverseDir = (
   dir: string,
   transformFile: (componentFilePath: string, sourceCode: string) => void,
 ): void => {
-  if (dir.includes('node_modules')) {
-    return
-  }
+  if (dir.includes('node_modules')) return
 
   const files = fs.readdirSync(dir)
 
@@ -26,21 +28,46 @@ export const traverseDir = (
   })
 }
 
-/** Walks the directory and runs the AST transformer on the given component name */
+/**
+ * Walks the directory and runs the AST transformers on the given component name
+ */
 export const transformComponentsInDir = (
   dir: string,
-  transformer: TransformSourceForTagNameArgs['astTransformer'],
-  componentName: string,
+  componentNames: string[],
+  transformers: (kaioTagNamesMap: TagImportAttributesMap) => TransformSourceArgs['transformers'],
 ): void => {
   const transformFile = (componentFilePath: string, sourceCode: string): void => {
     const sourceFile = createEncodedSourceFile(componentFilePath, sourceCode)
+    const kaioTagNamesMap = getKaioTagNamesMapByComponentName(sourceFile, componentNames)
+    if (kaioTagNamesMap) {
+      const updatedSourceFile = transformSource({
+        sourceFile,
+        transformers: transformers(kaioTagNamesMap),
+      })
+
+      fs.writeFileSync(componentFilePath, updatedSourceFile, 'utf8')
+    }
+  }
 
-    const tagName = getKaioTagName(sourceFile, componentName)
-    if (tagName) {
-      const updatedSourceFile = transformSourceForTagName({
+  traverseDir(dir, transformFile)
+}
+
+/**
+ * Walks the directory and runs the AST transformers on the given component name regex pattern
+ * eg. "Icon$" will match all components that end with `Icon`
+ */
+export const transformComponentsInDirByPattern = (
+  dir: string,
+  componentNamePattern: RegExp | string,
+  transformers: (kaioTagNamesMap: TagImportAttributesMap) => TransformSourceArgs['transformers'],
+): void => {
+  const transformFile = (componentFilePath: string, sourceCode: string): void => {
+    const sourceFile = createEncodedSourceFile(componentFilePath, sourceCode)
+    const kaioTagNamesMap = getKaioTagNamesMapByPattern(sourceFile, componentNamePattern)
+    if (kaioTagNamesMap) {
+      const updatedSourceFile = transformSource({
         sourceFile,
-        astTransformer: transformer,
-        tagName,
+        transformers: transformers(kaioTagNamesMap),
       })
 
       fs.writeFileSync(componentFilePath, updatedSourceFile, 'utf8')

package/codemods/utils/transformSource.spec.ts

@@ -2,11 +2,7 @@ import fs from 'fs'
 import path from 'path'
 import ts from 'typescript'
 import { createEncodedSourceFile } from './createEncodedSourceFile'
-import {
-  transformSource,
-  transformSourceForTagName,
-  type TransformSourceForTagNameArgs,
-} from './transformSource'
+import { transformSource } from './transformSource'
 
 const visit =
   (context: ts.TransformationContext, tagName: string) =>
@@ -55,25 +51,3 @@ describe('transformSource()', () => {
     expect(transformed).toMatchSnapshot()
   })
 })
-
-describe('transformSourceForTagName', () => {
-  it('updates the value of Pancakes topping to jam', () => {
-    const filePath = path.resolve(path.join(__dirname, './__fixtures__/KaioComponent.tsx'))
-    const fileContent = fs.readFileSync(filePath, 'utf8')
-    const sourceFile = createEncodedSourceFile(filePath, fileContent)
-    const mockTransformer =
-      (context: ts.TransformationContext, tagName: string) =>
-      (rootNode: ts.SourceFile): ts.SourceFile =>
-        ts.visitNode(rootNode, visit(context, tagName)) as ts.SourceFile
-
-    const mockTransformSourceForTagNameArgs = {
-      sourceFile,
-      astTransformer: mockTransformer,
-      tagName: 'Pancakes',
-    } satisfies TransformSourceForTagNameArgs
-
-    const transformed = transformSourceForTagName(mockTransformSourceForTagNameArgs)
-
-    expect(transformed).toMatchSnapshot()
-  })
-})

package/codemods/utils/transformSource.ts

@@ -12,29 +12,3 @@ export const transformSource = ({ sourceFile, transformers }: TransformSourceArg
   const transformedSource = printAst(result.transformed[0])
   return decodeEmptyLines(transformedSource)
 }
-
-/**
- * @deprecated - use transformSource instead of transformSourceForTagName
- */
-export type TransformSourceForTagNameArgs = {
-  sourceFile: ts.SourceFile
-  astTransformer: (
-    context: ts.TransformationContext,
-    tagName: string,
-  ) => (rootNode: ts.SourceFile) => ts.SourceFile
-  tagName: string
-}
-
-/**
- * @deprecated - use transformSource instead
- * Transforms the source file with the transformer and target import alias provided
- */
-export const transformSourceForTagName = ({
-  sourceFile,
-  astTransformer,
-  tagName,
-}: TransformSourceForTagNameArgs): string =>
-  transformSource({
-    sourceFile,
-    transformers: [(context) => astTransformer(context, tagName)],
-  })

package/codemods/utils/updateKaioImports.ts

@@ -121,6 +121,8 @@ export const updateKaioImports =
     if (!ts.isSourceFile(rootNode)) return rootNode
 
     if (!importsToRemove && !importsToAdd) return rootNode
+    if (importsToRemove && importsToRemove.size === 0 && importsToAdd && importsToAdd.size === 0)
+      return rootNode
 
     const { factory } = context
 

package/dist/cjs/LinkButton/LinkButton.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var buttonStyles = require('~components/__rc__/Button/Button.module.css');
+require('classnames');
+require('../Loading/LoadingGraphic/LoadingGraphic.cjs');
+require('../Loading/LoadingHeading/LoadingHeading.cjs');
+require('../Loading/LoadingInput/LoadingInput.cjs');
+require('../Loading/LoadingParagraph/LoadingParagraph.cjs');
+require('../Loading/LoadingSpinner/LoadingSpinner.cjs');
+require('../VisuallyHidden/VisuallyHidden.cjs');
+var ButtonContent = require('../__rc__/Button/subcomponents/ButtonContent/ButtonContent.cjs');
+var mergeClassNames = require('../utils/mergeClassNames.cjs');
+var LinkButton_module = require('./LinkButton.module.css.cjs');
+var ReversedColors = require('../__utilities__/ReversedColors/v3/ReversedColors.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var buttonStyles__default = /*#__PURE__*/_interopDefault(buttonStyles);
+var LinkButton = React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'primary' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'medium' : _c,
+    icon = _a.icon,
+    _d = _a.iconPosition,
+    iconPosition = _d === void 0 ? 'start' : _d,
+    _e = _a.hasHiddenLabel,
+    hasHiddenLabel = _e === void 0 ? false : _e,
+    _f = _a.isFullWidth,
+    isFullWidth = _f === void 0 ? false : _f,
+    isDisabled = _a.isDisabled,
+    className = _a.className,
+    isReversed = _a.isReversed,
+    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className", "isReversed"]);
+  var shouldUseReverse = ReversedColors.useReversedColors();
+  var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+  return React__default.default.createElement(reactAriaComponents.Link, tslib.__assign({
+    ref: ref,
+    className: mergeClassNames.mergeClassNames(LinkButton_module.linkButton, buttonStyles__default.default.button, buttonStyles__default.default[size], hasHiddenLabel && buttonStyles__default.default["".concat(size, "IconButton")], isDisabled && buttonStyles__default.default.isDisabled, isReversedVariant ? buttonStyles__default.default["".concat(variant, "Reversed")] : buttonStyles__default.default[variant], isFullWidth && buttonStyles__default.default.fullWidth, className),
+    isDisabled: isDisabled
+  }, otherProps), function (racStateProps) {
+    var childIsFunction = typeof children === 'function';
+    return React__default.default.createElement(ButtonContent.ButtonContent, {
+      size: size,
+      icon: icon,
+      iconPosition: iconPosition,
+      hasHiddenLabel: hasHiddenLabel
+    }, childIsFunction ? children(racStateProps) : children);
+  });
+});
+LinkButton.displayName = 'LinkButton';
+exports.LinkButton = LinkButton;

package/dist/cjs/LinkButton/LinkButton.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "linkButton": "LinkButton-module_linkButton__Kvn6k"
+};
+module.exports = styles;

package/dist/cjs/__rc__/Button/Button.module.css.cjs

@@ -10,11 +10,11 @@ var styles = {
   "mediumIconButton": "Button-module_mediumIconButton__amipN",
   "largeIconButton": "Button-module_largeIconButton__h0dR8",
   "secondary": "Button-module_secondary__dSBU1",
+  "isDisabled": "Button-module_isDisabled__FDp7k",
   "tertiary": "Button-module_tertiary__7iiaM",
   "primaryReversed": "Button-module_primaryReversed__Asrrp",
   "secondaryReversed": "Button-module_secondaryReversed__us2lk",
   "tertiaryReversed": "Button-module_tertiaryReversed__lB1o6",
-  "isDisabled": "Button-module_isDisabled__FDp7k",
   "hideContentWidth": "Button-module_hideContentWidth__WTIHN",
   "retainContentWidth": "Button-module_retainContentWidth__dRMEx"
 };

package/dist/cjs/index.cjs

@@ -317,6 +317,7 @@ var KaizenProvider = require('./KaizenProvider/KaizenProvider.cjs');
 var Label = require('./Label/Label.cjs');
 var LabelledMessage = require('./LabelledMessage/LabelledMessage.cjs');
 var LikertScaleLegacy = require('./LikertScaleLegacy/LikertScaleLegacy.cjs');
+var LinkButton = require('./LinkButton/LinkButton.cjs');
 var LoadingGraphic = require('./Loading/LoadingGraphic/LoadingGraphic.cjs');
 var LoadingHeading = require('./Loading/LoadingHeading/LoadingHeading.cjs');
 var LoadingInput = require('./Loading/LoadingInput/LoadingInput.cjs');
@@ -936,6 +937,7 @@ exports.KaizenProvider = KaizenProvider.KaizenProvider;
 exports.Label = Label.Label;
 exports.LabelledMessage = LabelledMessage.LabelledMessage;
 exports.LikertScaleLegacy = LikertScaleLegacy.LikertScaleLegacy;
+exports.LinkButton = LinkButton.LinkButton;
 exports.LoadingGraphic = LoadingGraphic.LoadingGraphic;
 exports.LoadingHeading = LoadingHeading.LoadingHeading;
 exports.LoadingInput = LoadingInput.LoadingInput;

package/dist/esm/LinkButton/LinkButton.mjs

@@ -0,0 +1,53 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { Link } from 'react-aria-components';
+import buttonStyles from '~components/__rc__/Button/Button.module.css';
+import 'classnames';
+import '../Loading/LoadingGraphic/LoadingGraphic.mjs';
+import '../Loading/LoadingHeading/LoadingHeading.mjs';
+import '../Loading/LoadingInput/LoadingInput.mjs';
+import '../Loading/LoadingParagraph/LoadingParagraph.mjs';
+import '../Loading/LoadingSpinner/LoadingSpinner.mjs';
+import '../VisuallyHidden/VisuallyHidden.mjs';
+import { ButtonContent } from '../__rc__/Button/subcomponents/ButtonContent/ButtonContent.mjs';
+import { mergeClassNames } from '../utils/mergeClassNames.mjs';
+import styles from './LinkButton.module.css.mjs';
+import { useReversedColors } from '../__utilities__/ReversedColors/v3/ReversedColors.mjs';
+const LinkButton = /*#__PURE__*/function () {
+  const LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {
+    var children = _a.children,
+      _b = _a.variant,
+      variant = _b === void 0 ? 'primary' : _b,
+      _c = _a.size,
+      size = _c === void 0 ? 'medium' : _c,
+      icon = _a.icon,
+      _d = _a.iconPosition,
+      iconPosition = _d === void 0 ? 'start' : _d,
+      _e = _a.hasHiddenLabel,
+      hasHiddenLabel = _e === void 0 ? false : _e,
+      _f = _a.isFullWidth,
+      isFullWidth = _f === void 0 ? false : _f,
+      isDisabled = _a.isDisabled,
+      className = _a.className,
+      isReversed = _a.isReversed,
+      otherProps = __rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className", "isReversed"]);
+    var shouldUseReverse = useReversedColors();
+    var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+    return /*#__PURE__*/React.createElement(Link, __assign({
+      ref: ref,
+      className: mergeClassNames(styles.linkButton, buttonStyles.button, buttonStyles[size], hasHiddenLabel && buttonStyles["".concat(size, "IconButton")], isDisabled && buttonStyles.isDisabled, isReversedVariant ? buttonStyles["".concat(variant, "Reversed")] : buttonStyles[variant], isFullWidth && buttonStyles.fullWidth, className),
+      isDisabled: isDisabled
+    }, otherProps), function (racStateProps) {
+      var childIsFunction = typeof children === 'function';
+      return /*#__PURE__*/React.createElement(ButtonContent, {
+        size: size,
+        icon: icon,
+        iconPosition: iconPosition,
+        hasHiddenLabel: hasHiddenLabel
+      }, childIsFunction ? children(racStateProps) : children);
+    });
+  });
+  LinkButton.displayName = 'LinkButton';
+  return LinkButton;
+}();
+export { LinkButton };

package/dist/esm/LinkButton/LinkButton.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "linkButton": "LinkButton-module_linkButton__Kvn6k"
+};
+export { styles as default };

package/dist/esm/__rc__/Button/Button.module.css.mjs

@@ -8,11 +8,11 @@ var styles = {
   "mediumIconButton": "Button-module_mediumIconButton__amipN",
   "largeIconButton": "Button-module_largeIconButton__h0dR8",
   "secondary": "Button-module_secondary__dSBU1",
+  "isDisabled": "Button-module_isDisabled__FDp7k",
   "tertiary": "Button-module_tertiary__7iiaM",
   "primaryReversed": "Button-module_primaryReversed__Asrrp",
   "secondaryReversed": "Button-module_secondaryReversed__us2lk",
   "tertiaryReversed": "Button-module_tertiaryReversed__lB1o6",
-  "isDisabled": "Button-module_isDisabled__FDp7k",
   "hideContentWidth": "Button-module_hideContentWidth__WTIHN",
   "retainContentWidth": "Button-module_retainContentWidth__dRMEx"
 };

package/dist/esm/index.mjs

@@ -315,6 +315,7 @@ export { KaizenProvider } from './KaizenProvider/KaizenProvider.mjs';
 export { Label } from './Label/Label.mjs';
 export { LabelledMessage } from './LabelledMessage/LabelledMessage.mjs';
 export { LikertScaleLegacy } from './LikertScaleLegacy/LikertScaleLegacy.mjs';
+export { LinkButton } from './LinkButton/LinkButton.mjs';
 export { LoadingGraphic } from './Loading/LoadingGraphic/LoadingGraphic.mjs';
 export { LoadingHeading } from './Loading/LoadingHeading/LoadingHeading.mjs';
 export { LoadingInput } from './Loading/LoadingInput/LoadingInput.mjs';