@kaizen/components 0.0.0-canary-fix-select-focus-add-small-delay-20241013230007 → 0.0.0-canary-tsx-codemod-20241029235345

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;

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var SVG = require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
-var RemoveTagIcon = function (props) {
-  var svgContent = React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8.97304 10.0337L5.05893 13.9478L6.11959 15.0085L10.0337 11.0944L13.9478 15.0085L15.0085 13.9478L11.0944 10.0337L15.0085 6.11959L13.9478 5.05893L10.0337 8.97304L6.11959 5.05893L5.05893 6.11959L8.97304 10.0337Z",
-    fill: "currentColor"
-  }));
-  return React__default.default.createElement(SVG.SVG, tslib.__assign({}, props, {
-    viewBox: "0 0 20 20"
-  }), svgContent);
-};
-exports.RemoveTagIcon = RemoveTagIcon;

package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__4SQsH",
-  "spinner": "LoadingSpinner-module_spinner__bDpy0"
-};
-export { styles as default };

package/dist/esm/TextArea/TextArea.module.scss.mjs

@@ -1,11 +0,0 @@
-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"
-};
-export { styles as default };

package/dist/esm/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.mjs

@@ -1,15 +0,0 @@
-import { __assign } from 'tslib';
-import React from 'react';
-import { SVG } from '../../../../Icon/subcomponents/SVG/SVG.mjs';
-var RemoveTagIcon = function (props) {
-  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8.97304 10.0337L5.05893 13.9478L6.11959 15.0085L10.0337 11.0944L13.9478 15.0085L15.0085 13.9478L11.0944 10.0337L15.0085 6.11959L13.9478 5.05893L10.0337 8.97304L6.11959 5.05893L5.05893 6.11959L8.97304 10.0337Z",
-    fill: "currentColor"
-  }));
-  return /*#__PURE__*/React.createElement(SVG, __assign({}, props, {
-    viewBox: "0 0 20 20"
-  }), svgContent);
-};
-export { RemoveTagIcon };

package/dist/types/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.d.ts

@@ -1,2 +0,0 @@
-import type { IconProps } from "../../../../Icon/types";
-export declare const RemoveTagIcon: (props: IconProps) => JSX.Element;

package/src/Loading/LoadingSpinner/LoadingSpinner.module.scss

@@ -1,16 +0,0 @@
-@import "~@kaizen/design-tokens/sass/animation";
-
-.loadingSpinner {
-  display: flex;
-}
-
-.spinner {
-  animation: spinner $animation-duration-deliberate
-    $animation-easing-function-ease-in-out infinite;
-}
-
-@keyframes spinner {
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/TextArea/TextArea.module.scss

@@ -1,137 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "../../styles/utils/forms";
-@import "../../styles/utils/form-variables";
-
-// Vars
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
-
-.wrapper {
-  position: relative;
-}
-
-.textarea {
-  @include form-input-reset;
-
-  border-radius: $border-solid-border-radius;
-  width: 100%;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  padding: $spacing-sm;
-  color: $color-purple-800-rgb;
-  display: block;
-  resize: vertical;
-
-  @include form-input-placeholder {
-    line-height: 1.5;
-    color: $dt-color-form-text-color-placeholder;
-  }
-
-  &:disabled {
-    resize: none;
-  }
-}
-
-.textarea:focus + .focusRing {
-  $focus-ring-offset: 3px;
-
-  position: absolute;
-  background: transparent;
-  border-radius: $border-focus-ring-border-radius;
-  border-width: $border-focus-ring-border-width;
-  border-style: $border-focus-ring-border-style;
-  border-color: transparent;
-  inset: -$focus-ring-offset;
-  pointer-events: none;
-}
-
-.textarea.default {
-  @include form-input-focus-state {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-500;
-  }
-
-  &:not(.error, .caution) {
-    &:disabled {
-      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    }
-  }
-
-  &.error {
-    border-color: $color-red-500;
-
-    @include form-input-focus-state {
-      border-color: $color-red-500;
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-600;
-
-    @include form-input-focus-state {
-      border-color: $color-yellow-600;
-    }
-  }
-
-  &.disabled {
-    background-color: $color-white;
-    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-}
-
-// Reversed (Dark Backgrounds)
-.textarea.reversed {
-  @include form-input-focus-state {
-    background: rgba($color-white-rgb, 0.1);
-    border-color: $color-white;
-  }
-
-  border-color: rgba($color-white-rgb, 0.65);
-  background: transparent;
-  color: $color-white;
-
-  @include form-input-placeholder {
-    line-height: 1.5;
-    color: $color-white;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-300;
-  }
-
-  &.error {
-    border-color: $color-red-300;
-
-    @include form-input-focus-state {
-      border-color: $color-red-300;
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-400;
-
-    @include form-input-focus-state {
-      border-color: $color-yellow-400;
-    }
-  }
-
-  &.disabled {
-    background: transparent;
-    border-color: rgba($color-white-rgb, $input-disabled-opacity);
-    color: rgba($color-white-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-import React from "react"
-import { SVG } from "~components/Icon/subcomponents/SVG"
-import type { IconProps } from "~components/Icon/types"
-
-export const RemoveTagIcon = (props: IconProps): JSX.Element => {
-  const svgContent = (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.97304 10.0337L5.05893 13.9478L6.11959 15.0085L10.0337 11.0944L13.9478 15.0085L15.0085 13.9478L11.0944 10.0337L15.0085 6.11959L13.9478 5.05893L10.0337 8.97304L6.11959 5.05893L5.05893 6.11959L8.97304 10.0337Z"
-        fill="currentColor"
-      />
-    </>
-  )
-  return (
-    <SVG {...props} viewBox="0 0 20 20">
-      {svgContent}
-    </SVG>
-  )
-}