fix: update documentation and codemods

Orfium · May 21, 2024 · c6d731e · c6d731e
1 parent af075d1
commit c6d731e
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 39 deletions.
diff --git a/bin/migrate.mjs b/bin/migrate.mjs
@@ -12,7 +12,7 @@ const runCodemods = (targetPath) => {
   const codemodsPath = path.join(dirname, '../dist/codemods');
 
   const codemods = fs.readdirSync(codemodsPath)
-    .filter(file => file.endsWith('.js'));
+    .filter(file => file.endsWith('.cjs'));
 
   codemods.forEach(codemod => {
     const codemodPath = path.join(codemodsPath, codemod);

diff --git a/codemods/buttonCodemod.ts b/codemods/buttonCodemod.ts
@@ -17,10 +17,30 @@ const transform: Transform = (file, api) => {
         }
 
         // If the attribute is one of the ones that changed, update it
+        if (attr.name === 'size') {
+          const sizeValue = attrPath.node.value.value;
+          if (sizeValue === 'sm' && attrPath.node.value.type === 'StringLiteral') {
+            attrPath.node.value.value = 'compact';
+          } else if (
+            attrPath.node.value.type === 'JSXExpressionContainer' &&
+            attrPath.node.value.expression.value === 'sm'
+          ) {
+            attrPath.node.value.expression.value = 'compact';
+          } else if (attrPath.node.value.type === 'StringLiteral') {
+            attrPath.node.value.value = 'normal';
+          } else if (attrPath.node.value.type === 'JSXExpressionContainer') {
+            attrPath.node.value.expression.value = 'normal';
+          }
+        }
+        if (attr.name === 'type') {
+          const sizeValue = attrPath.node.value.value;
+          if (sizeValue === 'link' && attrPath.node.value.type === 'Literal') {
+            attrPath.node.value.value = 'tertiary';
+          }
+        }
         if (attr.name === 'loading') attr.name = 'isLoading';
         if (attr.name === 'disabled') attr.name = 'isDisabled';
         if (attr.name === 'buttonType') attr.name = 'htmlType';
-        if (attr.name === 'type') attr.name = 'buttonType';
         if (attr.name === 'iconLeft') attr.name = 'iconLeftName';
         if (attr.name === 'iconRight') attr.name = 'iconRightName';
       });

diff --git a/codemods/chipCodemode.ts b/codemods/chipCodemode.ts
@@ -4,45 +4,39 @@ const transform: Transform = (file, api) => {
   const j = api.jscodeshift;
   const root = j(file.source);
 
-  const validColors = ['teal', 'red', 'purple', 'teal'];
-  const attributesToRemove = ['isChecked', 'badgeNumber', 'disabled', 'thumbnail'];
-
-  root.find(j.JSXElement, { openingElement: { name: { name: 'Chip' } } }).forEach((path) => {
-    path.node.openingElement.attributes.forEach((attribute) => {
-      if (!attribute.name || !attribute.name.name) {
-        // Skip if attribute name is missing
-        return;
-      }
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === '@orfium/ictinus')
+    .forEach((path) => {
+      path.node.specifiers.forEach((specifier) => {
+        if (specifier.imported && specifier.imported.name === 'Chip') {
+          specifier.imported.name = 'Tag';
+        }
+      });
+    });
 
-      const attributeName = attribute.name.name;
+  root.find(j.JSXElement).forEach((path) => {
+    const openingElement = path.node.openingElement;
+    const closingElement = path.node.closingElement;
 
-      // Rename fill to color and adjust values
-      if (attributeName === 'fill') {
-        attribute.name.name = 'color';
+    if (openingElement.name.name === 'Chip') {
+      openingElement.name.name = 'Tag';
 
-        // Check if the value is a string literal
-        if (attribute.value.type === 'StringLiteral') {
-          if (!validColors.includes(attribute.value.value)) {
-            attribute.value.value = 'blue';
-          }
-        }
+      if (closingElement && closingElement.name) {
+        closingElement.name.name = 'Tag';
+      }
 
-        // Check if the value is within JSX expression container
-        else if (
-          attribute.value.type === 'JSXExpressionContainer' &&
-          attribute.value.expression.type === 'StringLiteral'
-        ) {
-          if (!validColors.includes(attribute.value.expression.value)) {
-            attribute.value.expression.value = 'blue';
+      // Rename 'fill' attribute to 'color'
+      openingElement.attributes.forEach((attribute) => {
+        if (attribute.name && attribute.name.name === 'fill') {
+          const colorValue = attribute.value.value;
+          if (colorValue === 'neutralWhite') {
+            attribute.value.value = 'neutral';
           }
+          attribute.name.name = 'color';
         }
-      }
-
-      // Remove deprecated attributes
-      if (attributesToRemove.includes(attributeName)) {
-        j(attribute).remove();
-      }
-    });
+      });
+    }
   });
 
   return root.toSource({ quote: 'single' });

diff --git a/codemods/iconButtonCodemod.ts b/codemods/iconButtonCodemod.ts
@@ -16,6 +16,29 @@ const transform: Transform = (file, api) => {
           j(attrPath).remove();
         }
 
+        // If the attribute is one of the ones that changed, update it
+        if (attr.name === 'size') {
+          const sizeValue = attrPath.node.value.value;
+          if (sizeValue === 'sm' && attrPath.node.value.type === 'StringLiteral') {
+            attrPath.node.value.value = 'compact';
+          } else if (
+            attrPath.node.value.type === 'JSXExpressionContainer' &&
+            attrPath.node.value.expression.value === 'sm'
+          ) {
+            attrPath.node.value.expression.value = 'compact';
+          } else if (attrPath.node.value.type === 'StringLiteral') {
+            attrPath.node.value.value = 'normal';
+          } else if (attrPath.node.value.type === 'JSXExpressionContainer') {
+            attrPath.node.value.expression.value = 'normal';
+          }
+        }
+        if (attr.name === 'type') {
+          const sizeValue = attrPath.node.value.value;
+          if (sizeValue === 'link' && attrPath.node.value.type === 'Literal') {
+            attrPath.node.value.value = 'tertiary';
+          }
+        }
+
         // If the attribute is one of the ones that changed, update it
         if (attr.name === 'loading') attr.name = 'isLoading';
         if (attr.name === 'disabled') attr.name = 'isDisabled';

diff --git a/docs/GettingStarted/Migration/COMPONENT_CHANGES.mdx b/docs/GettingStarted/Migration/COMPONENT_CHANGES.mdx
@@ -22,7 +22,7 @@ import { Meta } from '@storybook/addon-docs';
 
 - [Box](../?path=/docs/updated-components-box--overview)
 
-- [Tag](../?path=/docs/updated-components-tag--overview)
+- [Tag](../?path=/docs/updated-components-tag--overview) (in replacement of Chip)
 
 - [Link](../?path=/docs/updated-components-link--overview)
 
@@ -200,7 +200,7 @@ import { Meta } from '@storybook/addon-docs';
 
 - `onClear` - deprecated, component calls `onChange` with undefined (SingleSelect) or empty array (MultiSelect)
 
-- `onOptionDelete` - deprecated, component calls `onChange` with the updated array of selected values. 
+- `onOptionDelete` - deprecated, component calls `onChange` with the updated array of selected values.
 
 - `selectedOptions` renamed to singular for both cases `selectedOption`
 
@@ -336,6 +336,10 @@ Icon name changes from v4 to v5:
 
 - `view` replaced with `eye`
 
+- `users2` replaced with `users`
+
+- `searchMusic` replaced with `search`
+
 <SubsectionHeader title={'InlineNotification'} variant="headline03" />
 
 - `withIcon` renamed to `hasIcon`

diff --git a/vite.codemods.config.ts b/vite.codemods.config.ts
@@ -23,12 +23,16 @@ export default defineConfig({
     }),
   ],
   build: {
+    lib: {
+      entry: codemodsEntries,
+      formats: ['cjs'],
+    },
     rollupOptions: {
       input: codemodsEntries,
       output: {
         dir: path.resolve(__dirname, 'dist/codemods'),
-        format: 'es',
-        entryFileNames: '[name].js',
+        format: 'cjs',
+        entryFileNames: '[name].cjs',
       },
       external: ['react', 'react-dom', 'emotion-reset', /@emotion\/styled/, /@emotion\/react/],
     },