feat: Promote Pill from Preview to Main package

cypress/component/PillPreview.spec.tsx → cypress/component/Pill.spec.tsx

@@ -1,9 +1,9 @@
-import {Basic} from '../../modules/preview-react/pill/stories/examples/Basic';
-import {WithAvatar} from '../../modules/preview-react/pill/stories/examples/WithAvatar';
-import {WithCount} from '../../modules/preview-react/pill/stories/examples/WithCount';
-import {WithList} from '../../modules/preview-react/pill/stories/examples/WithList';
-import {WithRemovable} from '../../modules/preview-react/pill/stories/examples/WithRemovable';
-import {WithReadOnly} from '../../modules/preview-react/pill/stories/examples/WithReadOnly';
+import {Basic} from '../../modules/react/pill/stories/examples/Basic';
+import {WithAvatar} from '../../modules/react/pill/stories/examples/WithAvatar';
+import {WithCount} from '../../modules/react/pill/stories/examples/WithCount';
+import {WithList} from '../../modules/react/pill/stories/examples/WithList';
+import {WithRemovable} from '../../modules/react/pill/stories/examples/WithRemovable';
+import {WithReadOnly} from '../../modules/react/pill/stories/examples/WithReadOnly';
 
 describe('Pill', () => {
   [Basic, WithAvatar, WithCount].forEach(Example => {
@@ -32,7 +32,7 @@ describe('Pill', () => {
     });
   });
 
-  context(`given the [Preview/Pill, With List] story is rendered`, () => {
+  context(`given the [Components/Indicators/Pill, With List] story is rendered`, () => {
     beforeEach(() => {
       cy.mount(<WithList />);
     });
@@ -52,7 +52,7 @@ describe('Pill', () => {
     });
   });
 
-  context(`given the [Preview/Pill, With Removable] story is rendered`, () => {
+  context(`given the [Components/Indicators/Pill, With Removable] story is rendered`, () => {
     beforeEach(() => {
       cy.mount(<WithRemovable />);
     });
@@ -82,7 +82,7 @@ describe('Pill', () => {
     });
   });
 
-  context(`given the [Preview/Pill, With Read Only] story is rendered`, () => {
+  context(`given the [Components/Indicators/Pill, With Read Only] story is rendered`, () => {
     beforeEach(() => {
       cy.mount(<WithReadOnly />);
     });

modules/codemod/lib/v15/index.ts

@@ -1,10 +1,12 @@
 import {Transform} from 'jscodeshift';
+
 import promoteInformationHighlight from './promoteInformationHighlight';
+import promotePill from './promotePill';
 import promoteSegmentedControl from './promoteSegmentedControl';
 
 const transform: Transform = (file, api, options) => {
   // These will run in order. If your transform depends on others, place yours after dependent transforms
-  const fixes: Transform[] = [promoteSegmentedControl, promoteInformationHighlight];
+  const fixes: Transform[] = [promoteSegmentedControl, promoteInformationHighlight, promotePill];
   return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source);
 };
 

modules/codemod/lib/v15/promotePill.ts

@@ -0,0 +1,80 @@
+import {ASTPath, ImportDeclaration, Transform} from 'jscodeshift';
+
+type SpecifierType = {importedName: string; name?: string};
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+  const pillSpecifiers: SpecifierType[] = [];
+  const foundImport: ASTPath<ImportDeclaration>[] = [];
+
+  root
+    .find(j.ImportDeclaration, {
+      source: {value: (value: string) => value.includes('@workday/canvas-kit-preview-react')},
+    })
+    .forEach(nodePath => {
+      nodePath.value.specifiers = nodePath.value.specifiers?.filter(specifier => {
+        if (
+          specifier.type === 'ImportSpecifier' &&
+          specifier.local &&
+          specifier.imported.name === 'Pill'
+        ) {
+          pillSpecifiers.push({
+            importedName: specifier.imported.name,
+            name: specifier.local.name,
+          });
+
+          return false;
+        }
+        return true;
+      });
+
+      if (pillSpecifiers.length) {
+        foundImport.push(nodePath);
+      }
+    });
+
+  const existingPillImports = root.find(j.ImportDeclaration, {
+    source: {value: '@workday/canvas-kit-react/pill'},
+  });
+
+  const mapToSpecifiers = (specifier: SpecifierType) => {
+    return j.importSpecifier(
+      j.identifier(specifier.importedName),
+      specifier.name ? j.identifier(specifier.name) : undefined
+    );
+  };
+
+  // add to existing import
+  if (existingPillImports.length) {
+    existingPillImports.forEach(nodePath => {
+      nodePath.value.specifiers = nodePath.value.specifiers?.concat(
+        pillSpecifiers.map(mapToSpecifiers)
+      );
+    });
+  } else {
+    // create new import
+    if (foundImport.length) {
+      foundImport[0].insertBefore(
+        j.importDeclaration(
+          pillSpecifiers.map(mapToSpecifiers),
+          j.stringLiteral('@workday/canvas-kit-react/pill')
+        )
+      );
+    }
+  }
+
+  foundImport.forEach(importPath => {
+    if (
+      !importPath.value.specifiers?.length ||
+      importPath.value.source.value === '@workday/canvas-kit-preview-react/pill'
+    ) {
+      importPath.prune();
+    }
+  });
+
+  return root.toSource();
+};
+
+export default transform;

modules/codemod/lib/v15/spec/promotePill.spec.ts

@@ -0,0 +1,108 @@
+import {stripIndent} from 'common-tags';
+
+import transform from '../promotePill';
+import {expectTransformFactory} from './expectTransformFactory';
+
+const expectTransform = expectTransformFactory(transform);
+
+describe('Promote Pill to main package', () => {
+  describe('Component package import', () => {
+    it('should not transform Pill from other imports', () => {
+      const input = stripIndent`
+          import { Pill } from "@other-package";
+        `;
+
+      const expected = stripIndent`
+          import { Pill } from "@other-package";
+        `;
+
+      expectTransform(input, expected);
+    });
+
+    it('should not transform other preview imports', () => {
+      const input = stripIndent`
+          import { Avatar } from "@workday/canvas-kit-preview-react/avatar";
+          import { MultiSelect } from "@workday/canvas-kit-preview-react/multi-select";
+        `;
+
+      const expected = input;
+
+      expectTransform(input, expected);
+    });
+
+    it('should properly transform preview import for Pill to react Pill', () => {
+      const input = stripIndent`
+          import { Pill } from "@workday/canvas-kit-preview-react/pill";
+        `;
+
+      const expected = stripIndent`
+          import { Pill } from "@workday/canvas-kit-react/pill";
+        `;
+
+      expectTransform(input, expected);
+    });
+
+    it('should properly transform preview import for Pill to react Pill from main packages', () => {
+      const input = stripIndent`
+          import { Pill } from "@workday/canvas-kit-preview-react";
+        `;
+
+      const expected = stripIndent`
+          import { Pill } from "@workday/canvas-kit-react/pill";
+        `;
+
+      expectTransform(input, expected);
+    });
+
+    it('should properly transform named preview import for Pill only to react Pill', () => {
+      const input = stripIndent`
+          import { Pill as CanvasPill } from "@workday/canvas-kit-preview-react/pill";
+        `;
+
+      const expected = stripIndent`
+          import { Pill as CanvasPill } from "@workday/canvas-kit-react/pill";
+        `;
+
+      expectTransform(input, expected);
+    });
+  });
+
+  describe('Main package import', () => {
+    it('should properly transform main preview import for Pill to react Pill', () => {
+      const input = stripIndent`
+          import { Pill } from "@workday/canvas-kit-preview-react";
+        `;
+
+      const expected = stripIndent`
+          import { Pill } from "@workday/canvas-kit-react/pill";
+        `;
+
+      expectTransform(input, expected);
+    });
+
+    it('should properly transform named main preview import for Pill only to react Pill', () => {
+      const input = stripIndent`
+          import { Pill as CanvasPill } from "@workday/canvas-kit-preview-react";
+        `;
+
+      const expected = stripIndent`
+          import { Pill as CanvasPill } from "@workday/canvas-kit-react/pill";
+        `;
+
+      expectTransform(input, expected);
+    });
+
+    it('should properly transform main preview import for Pill only to react Pill', () => {
+      const input = stripIndent`
+          import {Pill, Avatar} from "@workday/canvas-kit-preview-react";
+        `;
+
+      const expected = stripIndent`
+          import { Pill } from "@workday/canvas-kit-react/pill";
+          import { Avatar } from "@workday/canvas-kit-preview-react";
+        `;
+
+      expectTransform(input, expected);
+    });
+  });
+});

modules/docs/llm/theming.md

@@ -23,9 +23,12 @@ developer experience, and greater flexibility for theming applications.
 > If your application renders within an environment that already imports these CSS variables, \*\*do
 > not re-
 
-<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}> <App /> </CanvasProvider>;
-
-````
+```tsx
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+  {' '}
+  <App />{' '}
+</CanvasProvider>
+```
 
 This would use `chroma.js` to generate a palette based on the `main` color provided.
 
@@ -57,7 +60,7 @@ precedence. Take the following example:
 .my-app {
   --cnvs-brand-primary-base: red;
 }
-````
+```
 
 In the case of the `CanvasProvider` prior to v14, all our brand tokens where defined within a class
 and scoped to the `div` that the `CanvasProvider` created. This meant that anything set on `:root`

modules/docs/llm/upgrade-guides/14.0-UPGRADE-GUIDE.md

@@ -18,65 +18,49 @@ visual reference of what's changed.**
 
 ## Table of Contents
 
-- [Canvas Kit 14.0 Upgrade Guide](#canvas-kit-140-upgrade-guide)
-  - [Why You Should Upgrade](#why-you-should-upgrade)
-  - [Table of Contents](#table-of-contents)
-  - [LLM Assisted Migration ](#llm-assisted-migration-)
-  - [Codemod](#codemod)
-    - [Instructions](#instructions)
+- [LLM Assisted Migration](#llm-assisted-migration)
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [Tokens](#tokens)
+- [Caution Naming](#caution-naming)
+- [Theming](#theming)
+  - [New Documentation](#new-documentation)
+  - [Canvas Provider](#canvas-provider-)
+- [Component Updates](#component-updates)
+  - [Avatar (Preview)](#avatar-preview)
+  - [Branding Changes](#branding-changes-)
+  - [Buttons](#buttons)
+  - [Card](#card-)
+  - [Count Badge](#count-badge)
+  - [Expandable](#expandable)
+  - [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
+  - [Loading Dots](#loading-dots)
+  - [Modals and Dialogs](#modals-and-dialogs)
+  - [Pill (Preview)](#pill-preview)
+  - [Search Form (Labs)](#search-form-labs-)
+  - [Status Indicator (Preview)](#status-indicator-preview-)
+  - [Icons](#icons)
+- [Deprecations](#deprecations)
+  - [Avatar (Main)](#avatar-in-main)
+  - [Combobox (Labs)](#combobox-labs)
+  - [Radio (Main)](#radio-main)
+  - [Search Form (Labs)](#searchform-labs)
+  - [Segmented Control (Main)](#segmented-control-main)
+  - [Side Panel (Main)](#side-panel-main)
   - [Tokens](#tokens)
-  - [Caution Naming](#caution-naming)
-  - [Theming](#theming)
-    - [New Documentation](#new-documentation)
-    - [Canvas Provider 🚨](#canvas-provider-)
-      - [Breaking Changes](#breaking-changes)
-    - [useIsRTL](#useisrtl)
-  - [Component Updates](#component-updates)
-    - [Avatar (Preview)](#avatar-preview)
-      - [API Changes from Avatar (Main)](#api-changes-from-avatar-main)
-    - [Branding Changes 💅](#branding-changes-)
-    - [Buttons](#buttons)
-      - [Tertiary Button 🚨](#tertiary-button-)
-    - [Card 🚨](#card-)
-      - [Removed Box Shadow](#removed-box-shadow)
-      - [New Card Variants](#new-card-variants)
-      - [Replaced Margins with Gap](#replaced-margins-with-gap)
-    - [Count Badge](#count-badge)
-    - [Expandable](#expandable)
-    - [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
-    - [Loading Dots](#loading-dots)
-    - [Pill (Preview)](#pill-preview)
-    - [Modals and Dialogs](#modals-and-dialogs)
-      - [Scoped Theming vs Global Theming](#scoped-theming-vs-global-theming)
-    - [Search Form (Labs) 🚨](#search-form-labs-)
-    - [Status Indicator (Preview) 🚨](#status-indicator-preview-)
-    - [Icons](#icons)
-  - [Deprecations](#deprecations)
-    - [Avatar in Main](#avatar-in-main)
-    - [Combobox (Labs)](#combobox-labs)
-    - [Radio (Main)](#radio-main)
-    - [SearchForm (Labs)](#searchform-labs)
-    - [Segmented Control (Main)](#segmented-control-main)
-    - [Side Panel (Main)](#side-panel-main)
-    - [Tokens](#tokens-1)
-  - [Removals](#removals)
-    - [Deprecated Buttons](#deprecated-buttons)
-    - [Input Provider](#input-provider)
-    - [Menu (Preview)](#menu-preview)
-    - [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
-    - [Text Area (Preview)](#text-area-preview)
-    - [Text Input (Preview)](#text-input-preview)
-  - [Troubleshooting](#troubleshooting)
-    - [Common Issues](#common-issues)
-  - [Glossary](#glossary)
-    - [Main](#main)
-    - [Preview](#preview)
-    - [Labs](#labs)
-  - [Codemod Reference](#codemod-reference)
-- [What is a Codemod?](#what-is-a-codemod)
-  - [Running a Codemod](#running-a-codemod)
-    - [Instructions](#instructions-1)
-  - [Codemod Transformations for v14](#codemod-transformations-for-v14)
+  - [useIsRTL](#useisrtl)
+- [Removals](#removals)
+  - [Deprecated Buttons](#deprecated-buttons)
+  - [Input Provider](#input-provider)
+  - [Menu (Preview)](#menu-preview)
+  - [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
+  - [Text Area (Labs)](#text-area)
+  - [Text Input (Labs)](#text-input)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
 
 ## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
 
@@ -344,7 +328,7 @@ specificity.
 
 ### useIsRTL
 
-**PR:** [#3480](https://github.com/Workday/canvas-kit/pull/3477)
+**PR:** [#3477](https://github.com/Workday/canvas-kit/pull/3477)
 
 The `useIsRTL` hook has been deprecated. Please use
 [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
@@ -919,7 +903,7 @@ replaced the removed component or utility.
 
 ### Deprecated Buttons
 
-**PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
+**PR:** [#3439](https://github.com/Workday/canvas-kit/pull/3439)
 
 Long overdue, but a sign of moving forward, we've removed our `DeprecatedButton`. Our design system
 supported this for quite some time, but with the advancement in theming, our components API and our