@staffbase/design 20.4.0 → 21.2.0

package/codemods/v21-migrate-toggle/README.md

@@ -0,0 +1,52 @@
+# v21 — Breaking-change migrations
+
+This codemod handles the breaking change to `Toggle` introduced in v21 of `@staffbase/design`.
+
+## What it transforms
+
+### Toggle → SwitchDeprecated
+
+`Toggle` is now a new button-style toggle component. The old switch-style Toggle has been renamed to `SwitchDeprecated`.
+
+| Before (v20)                                      | After (v21)                                                 |
+| ------------------------------------------------- | ----------------------------------------------------------- |
+| `import { Toggle } from '@staffbase/design'`      | `import { SwitchDeprecated } from '@staffbase/design'`      |
+| `import { ToggleProps } from '@staffbase/design'` | `import { SwitchDeprecatedProps } from '@staffbase/design'` |
+| `<Toggle … />`                                    | `<SwitchDeprecated … />`                                    |
+| `const props: ToggleProps`                        | `const props: SwitchDeprecatedProps`                        |
+
+Aliased imports are handled — only the imported binding is renamed, the local alias is preserved:
+
+```tsx
+// Before
+import { Toggle as MyToggle } from '@staffbase/design';
+<MyToggle … />
+
+// After (local alias unchanged)
+import { SwitchDeprecated as MyToggle } from '@staffbase/design';
+<MyToggle … />
+```
+
+## Usage
+
+### Step 1 — Install jscodeshift
+
+```bash
+npm install --save-dev jscodeshift
+# or
+pnpm add -D jscodeshift
+```
+
+### Step 2 — Run the codemod
+
+```bash
+npx jscodeshift@latest \
+  --transform node_modules/@staffbase/design/codemods/v21-migrate-toggle/transform.js \
+  --extensions tsx,ts \
+  --parser tsx \
+  src/
+```
+
+### Step 3 — Migrate to the new Toggle (optional but recommended)
+
+After running this codemod your code compiles again, but `SwitchDeprecated` will be removed in a future release. Consider migrating to the new [`Switch`](https://design.staffbase.com/components/switch) component combined with [`Field`](https://design.staffbase.com/components/field) when you're ready.

package/codemods/v21-migrate-toggle/transform.js

@@ -0,0 +1,99 @@
+/**
+ * Jscodeshift codemod: v21 breaking-change migrations.
+ *
+ * 1. Rename old Toggle to SwitchDeprecated:
+ *   import { Toggle } from '@staffbase/design'
+ *   → import { SwitchDeprecated } from '@staffbase/design'
+ *
+ *   import { ToggleProps } from '@staffbase/design'
+ *   → import { SwitchDeprecatedProps } from '@staffbase/design'
+ *
+ *   <Toggle ... />  →  <SwitchDeprecated ... />
+ *
+ *   const props: ToggleProps  →  const props: SwitchDeprecatedProps
+ *
+ * If Toggle/ToggleProps was aliased locally the local name is preserved:
+ *   import { Toggle as MyToggle } → import { SwitchDeprecated as MyToggle }
+ *
+ * Usage:
+ *   npx jscodeshift@latest \
+ *     --transform node_modules/@staffbase/design/codemods/v21-migrate-toggle/transform.js \
+ *     --extensions tsx,ts \
+ *     --parser tsx \
+ *     src/
+ */
+
+const DESIGN_PKG = '@staffbase/design';
+
+export default function transform(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let dirty = false;
+
+  // Bail early if there are no @staffbase/design imports.
+  const designImports = root.find(j.ImportDeclaration, {source: {value: DESIGN_PKG}});
+  if (!designImports.length) return undefined;
+
+  // 1. Find the `Toggle` and `ToggleProps` import specifiers.
+  let localName = null;
+  let localPropsName = null;
+
+  designImports.find(j.ImportSpecifier).forEach((spec) => {
+    const importedName = spec.node.imported.name;
+
+    if (importedName === 'Toggle') {
+      localName = spec.node.local ? spec.node.local.name : 'Toggle';
+      const hasAlias = localName !== 'Toggle';
+
+      spec.node.imported.name = 'SwitchDeprecated';
+
+      if (!hasAlias) {
+        spec.node.local = j.identifier('SwitchDeprecated');
+        localName = 'SwitchDeprecated';
+      }
+
+      dirty = true;
+    } else if (importedName === 'ToggleProps') {
+      localPropsName = spec.node.local ? spec.node.local.name : 'ToggleProps';
+      const hasAlias = localPropsName !== 'ToggleProps';
+
+      spec.node.imported.name = 'SwitchDeprecatedProps';
+
+      if (!hasAlias) {
+        spec.node.local = j.identifier('SwitchDeprecatedProps');
+        localPropsName = 'SwitchDeprecatedProps';
+      }
+
+      dirty = true;
+    }
+  });
+
+  // 2. Rename all JSX usages only when there was no alias (alias keeps its
+  //    local name unchanged, so no JSX rename is needed).
+  if (localName === 'SwitchDeprecated') {
+    root
+      .find(j.JSXIdentifier, {name: 'Toggle'})
+      .filter((path) => {
+        return path.parent.node.type === 'JSXOpeningElement' || path.parent.node.type === 'JSXClosingElement';
+      })
+      .forEach((path) => {
+        path.node.name = 'SwitchDeprecated';
+      });
+  }
+
+  // 3. Rename ToggleProps type references when there was no alias.
+  if (localPropsName === 'SwitchDeprecatedProps') {
+    root.find(j.Identifier, {name: 'ToggleProps'}).forEach((path) => {
+      const parentType = path.parent.node.type;
+      if (
+        parentType === 'TSTypeReference' ||
+        parentType === 'TSTypeAliasDeclaration' ||
+        parentType === 'TSInterfaceHeritage'
+      ) {
+        path.node.name = 'SwitchDeprecatedProps';
+      }
+    });
+  }
+
+  return dirty ? root.toSource() : undefined;
+}