@carbon/upgrade 11.16.0 → 11.18.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.16.0",
+  "version": "11.18.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0",
-    "jscodeshift": "^0.13.1"
+    "jscodeshift": "^17.0.0"
   },
-  "gitHead": "2e82ab9625d65b607a7510b70d2cb4bacf209378"
+  "gitHead": "124d86cfad8f2efd4d60372f735fea534fc6f374"
 }

package/transforms/__testfixtures__/featureflag-deprecate-flags-prop.input.js

@@ -0,0 +1,134 @@
+import { FeatureFlags } from '../FeatureFlags';
+import {
+  RadioTile,
+  TileGroup,
+  TreeView,
+  VStack,
+  TreeNode,
+  OverflowMenu,
+  MenuItem,
+} from '@carbon/react';
+import { Document, Folder } from '@carbon/icons-react';
+export const EnableV12TileDefaultIconsFlag = () => {
+  return (
+    <FeatureFlags flags={{ 'enable-v12-tile-default-icons': true }}>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>
+  );
+};
+export const EnableExperimentalFocusWrapWithoutSentinels = () => {
+  return (
+    // prettier-ignore
+    <FeatureFlags flags={{ 'enable-experimental-focus-wrap-without-sentinels': true }}>
+      <ActionableNotification
+        title="Notification title"
+        subtitle="Subtitle text goes here"
+        closeOnEscape
+        inline={false}
+        actionButtonLabel="Action"
+      />
+    </FeatureFlags>
+  );
+};
+export const EnableTreeviewControllable = (args) => {
+  return (
+    <div>
+      <FeatureFlags flags={{ 'enable-treeview-controllable': true }}>
+        <TreeView
+          label="Tree View"
+          active={true}
+          onActivate={() => {
+            console.log('test');
+          }}
+          selected={[]}
+          onSelect={() => {
+            console.log('test');
+          }}>
+          {renderTree(nodes)}
+        </TreeView>
+      </FeatureFlags>
+    </div>
+  );
+};
+export const EnableV12Overflowmenu = () => {
+  return (
+    <FeatureFlags flags={{ 'enable-v12-overflowmenu': true }}>
+      <OverflowMenu autoAlign={true}>
+        <MenuItem label="Stop app" />
+        <MenuItem label="Restart app" />
+        <MenuItem label="Rename app" />
+        <MenuItem label="Edit routes and access" />
+
+        <MenuItem label="Delete app" kind="danger" />
+      </OverflowMenu>
+    </FeatureFlags>
+  );
+};
+export const EnableV12TileRadioIcons = () => {
+  return (
+    <FeatureFlags flags={{ 'enable-v12-tile-radio-icons': true }}>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>
+  );
+};
+export const TestRegularJsx = () => {
+  return <div className={wrapperClasses}></div>;
+};
+export const CombinedFlags = () => {
+  return (
+    // prettier-ignore
+    <FeatureFlags
+      flags={{
+        'enable-v12-tile-default-icons': true,
+        'enable-v12-tile-radio-icons': true,
+        'enable-v12-overflowmenu': true,
+        'enable-treeview-controllable': true,       
+        'enable-experimental-focus-wrap-without-sentinels': true,
+        'enable-v11-release': true,
+        'enable-css-custom-properties': true,
+        'enable-css-grid': true,
+      }}>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>
+  );
+};
+export const OldFlags = () => {
+  return (
+    <FeatureFlags
+      flags={{
+        'enable-v11-release': true,
+        'enable-css-custom-properties': true,
+        'enable-css-grid': true,
+      }}>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>
+  );
+};

package/transforms/__testfixtures__/featureflag-deprecate-flags-prop.output.js

@@ -0,0 +1,124 @@
+import { FeatureFlags } from '../FeatureFlags';
+import {
+  RadioTile,
+  TileGroup,
+  TreeView,
+  VStack,
+  TreeNode,
+  OverflowMenu,
+  MenuItem,
+} from '@carbon/react';
+import { Document, Folder } from '@carbon/icons-react';
+export const EnableV12TileDefaultIconsFlag = () => {
+  return (
+    (<FeatureFlags enableV12TileDefaultIcons>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>)
+  );
+};
+export const EnableExperimentalFocusWrapWithoutSentinels = () => {
+  return (
+    // prettier-ignore
+    (<FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
+      <ActionableNotification
+        title="Notification title"
+        subtitle="Subtitle text goes here"
+        closeOnEscape
+        inline={false}
+        actionButtonLabel="Action"
+      />
+    </FeatureFlags>)
+  );
+};
+export const EnableTreeviewControllable = (args) => {
+  return (
+    (<div>
+      <FeatureFlags enableTreeviewControllable>
+        <TreeView
+          label="Tree View"
+          active={true}
+          onActivate={() => {
+            console.log('test');
+          }}
+          selected={[]}
+          onSelect={() => {
+            console.log('test');
+          }}>
+          {renderTree(nodes)}
+        </TreeView>
+      </FeatureFlags>
+    </div>)
+  );
+};
+export const EnableV12Overflowmenu = () => {
+  return (
+    (<FeatureFlags enableV12Overflowmenu>
+      <OverflowMenu autoAlign={true}>
+        <MenuItem label="Stop app" />
+        <MenuItem label="Restart app" />
+        <MenuItem label="Rename app" />
+        <MenuItem label="Edit routes and access" />
+
+        <MenuItem label="Delete app" kind="danger" />
+      </OverflowMenu>
+    </FeatureFlags>)
+  );
+};
+export const EnableV12TileRadioIcons = () => {
+  return (
+    (<FeatureFlags enableV12TileRadioIcons>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>)
+  );
+};
+export const TestRegularJsx = () => {
+  return <div className={wrapperClasses}></div>;
+};
+export const CombinedFlags = () => {
+  return (
+    // prettier-ignore
+    (<FeatureFlags
+      enableV12TileDefaultIcons
+      enableV12TileRadioIcons
+      enableV12Overflowmenu
+      enableTreeviewControllable
+      enableExperimentalFocusWrapWithoutSentinels>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>)
+  );
+};
+export const OldFlags = () => {
+  return (
+    (<FeatureFlags>
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+    </FeatureFlags>)
+  );
+};

package/transforms/__testfixtures__/icons-react-size-prop-rename.output.js

@@ -10,23 +10,23 @@ import { Search } from 'test';
 
 function RendersIconDirectly() {
   return (
-    <div>
+    (<div>
       <Add size={32} />
       <Bee size={24} />
       <Caret size={20} />
       <DownArrow />
-    </div>
+    </div>)
   );
 }
 
 function RendersIconWithProps(props) {
   return (
-    <div>
+    (<div>
       <Add size={32} aria-label="test" {...props} />
       <Bee size={24} aria-label="test" {...props} />
       <Caret size={20} aria-label="test" {...props} />
       <DownArrow aria-label="test" {...props} />
-    </div>
+    </div>)
   );
 }
 
@@ -36,9 +36,9 @@ function AliasedIcon() {
 
 function ExistingScope() {
   return (
-    <div>
+    (<div>
       <Search />
       <SearchIcon size={24} />
-    </div>
+    </div>)
   );
 }

package/transforms/__testfixtures__/icons-react-size-prop-with-prop.input.js

@@ -2,14 +2,11 @@ import { Add16, Bee24, Chevron24 as chevron } from '@carbon/icons-react';
 
 const mapped = {
   default: Add16,
-  // prettier-ignore
   size: Bee24,
-  // prettier-ignore
   lowercase: chevron,
 };
 
 function RenderIconProp() {
-  // prettier-ignore
   return (
     <div>
       <DefaultSize renderIcon={Add16} />

package/transforms/__testfixtures__/icons-react-size-prop-with-prop.output.js

@@ -2,9 +2,7 @@ import { Add, Bee, Chevron as chevron } from '@carbon/icons-react';
 
 const mapped = {
   default: Add,
-  // prettier-ignore
   size: props => <Bee size={24} {...props} />,
-  // prettier-ignore
   lowercase: props => React.createElement(chevron, {
     size: 24,
     ...props
@@ -12,11 +10,10 @@ const mapped = {
 };
 
 function RenderIconProp() {
-  // prettier-ignore
   return (
-    <div>
+    (<div>
       <DefaultSize renderIcon={Add} />
       <Size renderIcon={props => <Bee size={24} {...props} />} />
-    </div>
+    </div>)
   );
 }

package/transforms/__testfixtures__/size-prop-update.output.js

@@ -1,23 +1,23 @@
 function Accordion() {
   return (
-    <div>
+    (<div>
       <Accordion className="test" size="lg" />
       <Accordion className="test" size="lg">
         <AccordionItem>Test</AccordionItem>
       </Accordion>
-    </div>
+    </div>)
   );
 }
 
 function Button() {
   return (
-    <div>
+    (<div>
       <Button className="test" size="sm" />
       <Button className="test" size="md"></Button>
       <Button className="test" size="lg"></Button>
       <Button className="test" size="xl"></Button>
       <Button className="test" size="2xl"></Button>
-    </div>
+    </div>)
   );
 }
 
@@ -27,11 +27,11 @@ function ComboBox() {
 
 function ContentSwitcher() {
   return (
-    <ContentSwitcher className="test" size="lg">
+    (<ContentSwitcher className="test" size="lg">
       <Switch name="one" text="First section" />
       <Switch name="two" text="Second section" />
       <Switch name="three" text="Third section" />
-    </ContentSwitcher>
+    </ContentSwitcher>)
   );
 }
 
@@ -41,31 +41,31 @@ function Dropdown() {
 
 function DataTable() {
   return (
-    <div>
+    (<div>
       <Table className="test" size="xs"></Table>
       <Table className="test" size="sm"></Table>
       <Table className="test" size="xl"></Table>
       <DataTable className="test" size="xs"></DataTable>
       <DataTable className="test" size="sm"></DataTable>
       <DataTable className="test" size="xl"></DataTable>
-    </div>
+    </div>)
   );
 }
 
 function DatePicker() {
   return (
-    <DatePicker datePickerType="single">
+    (<DatePicker datePickerType="single">
       <DatePickerInput
         size="lg"
         id="datepicker"
         labelText="Datepicker Test"></DatePickerInput>
-    </DatePicker>
+    </DatePicker>)
   );
 }
 
 function FileUploader() {
   return (
-    <div>
+    (<div>
       <FileUploader size="sm"></FileUploader>
       <FileUploader size="md"></FileUploader>
       <FileUploader size="lg"></FileUploader>
@@ -78,7 +78,7 @@ function FileUploader() {
       <FileUploaderDropContainer size="sm"></FileUploaderDropContainer>
       <FileUploaderDropContainer size="md"></FileUploaderDropContainer>
       <FileUploaderDropContainer size="lg"></FileUploaderDropContainer>
-    </div>
+    </div>)
   );
 }
 
@@ -88,7 +88,7 @@ function Link() {
 
 function MultiSelect() {
   return (
-    <div>
+    (<div>
       <MultiSelect
         size="lg"
         items={items}
@@ -99,7 +99,7 @@ function MultiSelect() {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
       />
-    </div>
+    </div>)
   );
 }
 
@@ -113,28 +113,28 @@ function OverflowMenu() {
 
 function Search() {
   return (
-    <div>
+    (<div>
       <Search className="test" size="md" />
       <Search className="test" size="lg" />
-    </div>
+    </div>)
   );
 }
 
 function Select() {
   return (
-    <div>
+    (<div>
       <Select className="test" size="md" />
       <Select className="test" size="lg" />
-    </div>
+    </div>)
   );
 }
 
 function TextInput() {
   return (
-    <div>
+    (<div>
       <TextInput size="md" id="textinput1" labelText="lg -> md"></TextInput>
       <TextInput size="lg" id="textinput1" labelText="xl -> lg"></TextInput>
-    </div>
+    </div>)
   );
 }
 

package/transforms/__testfixtures__/small-to-size-prop.output.js

@@ -4,8 +4,7 @@ function Test1() {
 
 function Test2() {
   return (
-    <Button className="test" size="sm">
-      Test
-    </Button>
+    (<Button className="test" size="sm">Test
+          </Button>)
   );
 }

package/transforms/__tests__/featureflag-deprecate-flags-prop-test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'featureflag-deprecate-flags-prop');

package/transforms/featureflag-deprecate-flags-prop.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Migrate the `flags` object prop to individual boolean props
+ *
+ * Transforms:
+ *
+ * <FeatureFlags flags={{ 'enable-v12-tile-default-icons': true }}>
+ *
+ * Into:
+ *
+ * <FeatureFlags enableV12TileDefaultIcons>
+ */
+
+'use strict';
+
+const defaultOptions = {
+  quote: 'single',
+  trailingComma: true,
+};
+
+//This list can be updated as needed, if any flags are made true by default
+const flagsToRemove = [
+  'enable-v11-release',
+  'enable-css-custom-properties',
+  'enable-css-grid',
+];
+
+function transform(fileInfo, api, options) {
+  const { jscodeshift: j } = api;
+  const root = j(fileInfo.source);
+  const printOptions = options.printOptions || defaultOptions;
+  if (
+    !root.find(j.JSXOpeningElement, { name: { name: 'FeatureFlags' } }).size()
+  ) {
+    return null; // if no FeatureFlags found, don't modify & return the file
+  }
+  root
+    .find(j.JSXOpeningElement, { name: { name: 'FeatureFlags' } })
+    .forEach((path) => {
+      const flagsAttribute = path.node.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'flags'
+      );
+
+      if (flagsAttribute?.value?.expression?.type === 'ObjectExpression') {
+        const properties = flagsAttribute.value.expression.properties;
+
+        // Filter out flags to remove
+        const filteredProperties = properties.filter((prop) => {
+          const keyName =
+            prop.key.type === 'Identifier' ? prop.key.name : prop.key.value;
+          return !flagsToRemove.includes(keyName);
+        });
+
+        // Convert remaining flags to boolean props
+        const newAttributes = filteredProperties
+          .filter((flag) => flag.value.value === true)
+          .map((flag) => {
+            const flagName =
+              flag.key.type === 'Identifier' ? flag.key.name : flag.key.value;
+            const propName = flagName.replace(/-(\w)/g, (_, c) =>
+              c.toUpperCase()
+            );
+            return j.jsxAttribute(j.jsxIdentifier(propName));
+          });
+
+        path.node.attributes = [
+          ...path.node.attributes.filter((attr) => attr.name.name !== 'flags'),
+          ...newAttributes,
+        ];
+      }
+    });
+
+  return root.toSource(printOptions);
+}
+
+module.exports = transform;