@octaviaflow/upgrade 1.0.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@octaviaflow/upgrade",
+  "description": "A tool for upgrading OctaviaFlow versions",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "bin": {
+    "octaviaflow-upgrade": "./bin/octaviaflow-upgrade.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octaviaflow-design-system.git",
+    "directory": "packages/upgrade"
+  },
+  "bugs": "https://github.com/octaviaflow-design-system/issues",
+  "files": [
+    "bin",
+    "cli.js",
+    "transforms",
+    "telemetry.yml"
+  ],
+  "keywords": [
+    "octaviaflow",
+    "components",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "esbuild src/cli.js --bundle --platform=node --outfile=cli.js --target=node14 --external:jscodeshift",
+    "clean": "rimraf cli.js",
+    "watch": "bun run build --watch"
+  },
+  "devDependencies": {
+    "chalk": "^4.1.1",
+    "change-case": "^4.1.2",
+    "esbuild": "^0.24.0",
+    "execa": "^5.1.1",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^11.0.0",
+    "inquirer": "^8.1.0",
+    "is-git-clean": "^1.1.0",
+    "jest-diff": "^28.1.0",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.merge": "^4.6.2",
+    "memfs": "^4.0.0",
+    "nanoid": "^3.1.30",
+    "npm-which": "^3.0.1",
+    "rimraf": "^6.0.0",
+    "semver": "^7.3.5",
+    "yargs": "^17.0.1"
+  },
+  "dependencies": {
+    "jscodeshift": "^17.0.0"
+  }
+}

package/telemetry.yml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=https://unpkg.com/@octaviaflow/telemetry-config-schema@v1.0.0/dist/config.schema.json
+version: 1
+projectId: '6d3533b7-48f9-4615-a86f-f90214cdb0b5'
+name: 'OctaviaFlow Upgrade'
+storage:
+  type: 'file'
+  file:
+    directory: '/Volumes/Main/Projects/OctaviaFlow-Design-System/telemetry-logs'
+    fileNamePattern: 'octaviaflow-upgrade-{timestamp}.json'
+    maxFileSizeMB: 10
+    compress: false
+collect:
+  npm:
+    dependencies: null
+  js:
+    functions: {}
+    tokens: null

package/transforms/ARCHITECTURE.md

@@ -0,0 +1,47 @@
+# transforms
+
+> A folder of codemod transforms to be ran independently or via the
+> @octaviaflow/upgrade cli
+
+## Usage
+
+The transforms contained within this folder are primarily intended to be used
+within @octaviaflow/upgrade cli commands.
+
+You can run a specific transform for a path in the project by running:
+
+```bash
+yarn jscodeshift -t transforms/<name>.js 'path/to/file'
+```
+
+If you want to preview changes that are being made, you should enable the `dry`
+and `print` options:
+
+```bash
+yarn jscodeshift -d -p -t transforms/<name>.js 'path/to/file'
+```
+
+## Writing transforms
+
+Transforms are written in the `transforms` directory with their tests and
+fixtures written in the `__tests__` and `__testfixtures__` directories,
+accordingly.
+
+As an example, to add a transform called `sort-prop-types` one would create the
+following files:
+
+```
+- codemods
+  - transforms
+    - __testfixtures__
+      - sort-prop-types.input.js
+      - sort-prop-types.output.js
+    - __tests__
+      - sort-prop-types-test.js
+    - sort-prop-types.js
+```
+
+In this structure, the test file will determine which test fixtures get run.
+Test fixtures are written with a `*.input.js` and `*.output.js` convention.
+Files that end with `*.input.js` are given to your transform and the test runner
+will assert that the output matches what is available in `*.output.js`.

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

@@ -0,0 +1,143 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { FeatureFlags } from '../FeatureFlags';
+import {
+  RadioTile,
+  TileGroup,
+  TreeView,
+  VStack,
+  TreeNode,
+  OverflowMenu,
+  MenuItem,
+} from '@octaviaflow/react';
+import { Document, Folder } from '@octaviaflow/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,133 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { FeatureFlags } from '../FeatureFlags';
+import {
+  RadioTile,
+  TileGroup,
+  TreeView,
+  VStack,
+  TreeNode,
+  OverflowMenu,
+  MenuItem,
+} from '@octaviaflow/react';
+import { Document, Folder } from '@octaviaflow/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__/ibm-products-update-userprofileimage.input.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { UserProfileImage } from '@octaviaflow/ibm-products';
+import { Add } from '@octaviaflow/react/icons';
+
+const ImageUrl =
+  'https://img.freepik.com/free-photo/portrait-man-cartoon-style_23-2151133939.jpg?semt=ais_hybrid';
+
+export const Example = () => (
+  <>
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      initials="thomas j. watson"
+    />
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      kind="user"
+    />
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      icon={() => <Add size={20} />}
+    />
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      image={ImageUrl}
+      imageDescription="Avatar of Thomas Watson"
+    />
+  </>
+);

package/transforms/__testfixtures__/ibm-products-update-userprofileimage.output.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { User } from "@octaviaflow/react/icons";
+import React from 'react';
+import { UserAvatar } from '@octaviaflow/ibm-products';
+import { Add } from '@octaviaflow/react/icons';
+
+const ImageUrl =
+  'https://img.freepik.com/free-photo/portrait-man-cartoon-style_23-2151133939.jpg?semt=ais_hybrid';
+
+export const Example = () => (
+  <>
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      name="thomas j. watson" />
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      renderIcon={User} />
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      renderIcon={() => <Add size={20} />} />
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      image={ImageUrl}
+      imageDescription="Avatar of Thomas Watson" />
+  </>
+);

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Add16, Add32 } from '@octaviaflow/icons-react';
+
+const icons = {
+  Add16,
+  // prettier-ignore
+  Add32,
+};
+
+const options = {
+  Add16: 'Add16',
+  Add32: 'Add32',
+};
+
+function TestComponent() {
+  return <div>{icons[options['Add16']]}</div>;
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Add } from '@octaviaflow/icons-react';
+
+const icons = {
+  Add16: Add,
+  // prettier-ignore
+  Add32: props => <Add size={32} {...props} />,
+};
+
+const options = {
+  Add16: 'Add16',
+  Add32: 'Add32',
+};
+
+function TestComponent() {
+  return <div>{icons[options['Add16']]}</div>;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  Add32,
+  Bee24,
+  Caret20,
+  DownArrow16,
+  Search24,
+  Zone24 as CustomZone,
+} from '@octaviaflow/icons-react';
+import { Search } from 'test';
+
+function RendersIconDirectly() {
+  return (
+    <div>
+      <Add32 />
+      <Bee24 />
+      <Caret20 />
+      <DownArrow16 />
+    </div>
+  );
+}
+
+function RendersIconWithProps(props) {
+  return (
+    <div>
+      <Add32 aria-label="test" {...props} />
+      <Bee24 aria-label="test" {...props} />
+      <Caret20 aria-label="test" {...props} />
+      <DownArrow16 aria-label="test" {...props} />
+    </div>
+  );
+}
+
+function AliasedIcon() {
+  return <CustomZone />;
+}
+
+function ExistingScope() {
+  return (
+    <div>
+      <Search />
+      <Search24 />
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  Add,
+  Bee,
+  Caret,
+  DownArrow,
+  Search as SearchIcon,
+  Zone as CustomZone,
+} from '@octaviaflow/icons-react';
+import { Search } from 'test';
+
+function RendersIconDirectly() {
+  return (
+    (<div>
+      <Add size={32} />
+      <Bee size={24} />
+      <Caret size={20} />
+      <DownArrow />
+    </div>)
+  );
+}
+
+function RendersIconWithProps(props) {
+  return (
+    (<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>)
+  );
+}
+
+function AliasedIcon() {
+  return <CustomZone size={24} />;
+}
+
+function ExistingScope() {
+  return (
+    (<div>
+      <Search />
+      <SearchIcon size={24} />
+    </div>)
+  );
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Add16, Bee24, Chevron24 as chevron } from '@octaviaflow/icons-react';
+
+const mapped = {
+  default: Add16,
+  size: Bee24,
+  lowercase: chevron,
+};
+
+function RenderIconProp() {
+  return (
+    <div>
+      <DefaultSize renderIcon={Add16} />
+      <Size renderIcon={Bee24} />
+    </div>
+  );
+}