@sproutsocial/racine 26.14.9 → 27.0.1

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # Change Log
 
+## 27.0.1
+
+### Patch Changes
+
+- Updated dependencies [5e20b0b]
+- Updated dependencies [8f6ba8d]
+  - @sproutsocial/seeds-react-tooltip@1.0.9
+  - @sproutsocial/seeds-networkcolor@2.21.0
+  - @sproutsocial/seeds-react-theme@3.2.0
+  - @sproutsocial/seeds-react-numeral@1.0.9
+  - @sproutsocial/seeds-react-avatar@1.0.5
+  - @sproutsocial/seeds-react-banner@1.0.10
+  - @sproutsocial/seeds-react-box@1.1.6
+  - @sproutsocial/seeds-react-card@1.1.7
+  - @sproutsocial/seeds-react-chart-legend@1.0.7
+  - @sproutsocial/seeds-react-data-table@2.0.1
+  - @sproutsocial/seeds-react-datepicker@1.0.7
+  - @sproutsocial/seeds-react-drawer@1.1.5
+  - @sproutsocial/seeds-react-duration@1.0.5
+  - @sproutsocial/seeds-react-empty-state@1.0.5
+  - @sproutsocial/seeds-react-fieldset@1.0.5
+  - @sproutsocial/seeds-react-form-field@1.0.5
+  - @sproutsocial/seeds-react-hooks@3.0.6
+  - @sproutsocial/seeds-react-icon@1.1.8
+  - @sproutsocial/seeds-react-image@1.0.5
+  - @sproutsocial/seeds-react-indicator@1.0.7
+  - @sproutsocial/seeds-react-keyboard-key@1.0.5
+  - @sproutsocial/seeds-react-label@1.0.5
+  - @sproutsocial/seeds-react-link@1.0.5
+  - @sproutsocial/seeds-react-loader@1.0.5
+  - @sproutsocial/seeds-react-loader-button@1.0.8
+  - @sproutsocial/seeds-react-message@1.0.8
+  - @sproutsocial/seeds-react-mixins@4.1.5
+  - @sproutsocial/seeds-react-modal@2.1.1
+  - @sproutsocial/seeds-react-partner-logo@1.3.7
+  - @sproutsocial/seeds-react-rating@1.0.7
+  - @sproutsocial/seeds-react-segmented-control@1.0.5
+  - @sproutsocial/seeds-react-select@1.1.7
+  - @sproutsocial/seeds-react-skeleton@1.1.5
+  - @sproutsocial/seeds-react-stack@1.0.5
+  - @sproutsocial/seeds-react-table@1.0.8
+  - @sproutsocial/seeds-react-tabs@1.1.8
+  - @sproutsocial/seeds-react-textarea@1.0.5
+  - @sproutsocial/seeds-react-theme-provider@1.1.6
+  - @sproutsocial/seeds-react-toast@1.0.7
+  - @sproutsocial/seeds-react-token@1.4.4
+  - @sproutsocial/seeds-react-token-input@1.4.10
+  - @sproutsocial/seeds-react-visually-hidden@1.0.6
+  - @sproutsocial/seeds-react-badge@2.0.1
+  - @sproutsocial/seeds-react-checkbox@1.3.7
+  - @sproutsocial/seeds-react-collapsible@1.0.6
+  - @sproutsocial/seeds-react-input@1.4.10
+  - @sproutsocial/seeds-react-popout@2.4.10
+  - @sproutsocial/seeds-react-button@1.3.4
+  - @sproutsocial/seeds-react-switch@1.2.7
+  - @sproutsocial/seeds-react-radio@1.3.4
+
+## 27.0.0
+
+### Major Changes
+
+- Updated dependencies [1814969]
+- Updated dependencies [38d9e82]
+  - @sproutsocial/seeds-react-modal@2.1.0
+  - @sproutsocial/seeds-react-badge@2.0.0
+  - @sproutsocial/seeds-react-rating@1.0.6
+
 ## 26.14.9
 
 ### Patch Changes

package/README.md

@@ -83,7 +83,7 @@ There are a few ways to get involved:
 
 Racine's file structure is set up like this:
 
-- `codemods` - For major updates to Racine that have breaking changes, codemods are included for automatically handling component API updates.
+- `codemods` - For major updates to Racine that have breaking changes, codemods are included for automatically handling component API updates. Codemods are also discovered from other `@sproutsocial/seeds-react-*` packages automatically.
 - `src`
   - `ComponentName` - Deprecated components that won't get added to the monorepo have a folder within the `src` directory.
 
@@ -103,6 +103,37 @@ And you can interact with Racine via the command line with these commands:
 - `yarn clean` - Delete all generated files and directories.
 - `yarn release` - This will trigger the release process for creating a new version of the Racine package on npm. **Only Racine administrators can perform the release process.**
 
+### **🔄 Running Codemods**
+
+Codemods are automated scripts that help migrate code when component APIs change. They're available via the `racine-codemod` CLI tool and are automatically discovered from both racine and other `@sproutsocial/seeds-react-*` packages.
+
+**List available codemods:**
+```bash
+racine-codemod
+```
+
+**View codemod documentation:**
+```bash
+racine-codemod <codemod-name>
+```
+
+**Run a codemod:**
+```bash
+racine-codemod <codemod-name> <path-to-files>
+```
+
+**Example:**
+```bash
+racine-codemod badge-1.x-to-2.x src --parser=tsx --quote=double
+```
+
+After running a codemod, you should run Prettier to fix any formatting issues:
+```bash
+yarn format
+```
+
+For more information on codemods, see the [migration documentation](https://sproutsocial.com/seeds/components/migration) on the Seeds reference site.
+
 ### **✅ Step 3: Make your changes**
 
 Cut a feature branch off `main` and start coding! As updates are merged into `main` by other developers over time you'll want to pull those updates into your branch, ideally via rebase, to avoid any conflicts when you open a pull request.
@@ -145,3 +176,70 @@ When the PR is merged, [GitHub will kick off a publish of the new version](https
 ### **✍ Step 6: Document your changes**
 
 Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [reference site app](https://github.com/sproutsocial/seeds/tree/main/apps/reference-site) to add or edit component documentation. It's a good idea to have documentation changes ready to go at the same time your Racine contributions are deployed, so start early! Reach out to the Design Systems team if you need help getting started.
+
+### **🔧 Adding Codemods**
+
+When making breaking changes to a component API, you should create a codemod to help users migrate their code. Codemods should be added to the package that needs migration (not racine), and will be automatically discovered by the `racine-codemod` CLI.
+
+**When to create a codemod:**
+- Removing or renaming props
+- Changing prop types or values
+- Breaking API changes that affect multiple files
+
+**Initial Setup** (for packages adding their first codemod):
+
+1. **Update `tsup.config.ts`**:
+   - Add a separate config entry for codemods:
+   ```typescript
+   export default defineConfig([
+     // Main package build
+     { entry: ["src/index.ts"], format: ["cjs", "esm"], /* ... */ },
+     // Codemods build (CJS only)
+     { entry: ["codemods/**/*.ts"], format: ["cjs"], dts: false, /* ... */ },
+   ]);
+   ```
+
+2. **Update `package.json`**:
+   - Add `exports` field for codemods:
+   ```json
+   {
+     "exports": {
+       ".": { /* existing exports */ },
+       "./codemods/*": {
+         "require": "./dist/codemods/*.js"
+       }
+     },
+     "files": ["dist", "codemods"]
+   }
+   ```
+   - Add `@types/jscodeshift` and `jscodeshift` to devDependencies (if not already present)
+
+3. **Update `tsconfig.json`**:
+   - Add `codemods/**/*` to the `include` array
+
+**Creating a New Codemod:**
+
+1. Create codemod file in `codemods/` directory (e.g., `codemods/my-codemod.ts`)
+2. Write in TypeScript - use proper types from `jscodeshift` (avoid `any` types)
+3. Export as CommonJS: `module.exports = transformer;`
+4. Add tests in `codemods/__tests__/my-codemod.test.ts`
+5. Add documentation entry to `racine/codemods/codemod-docs.js`
+6. Build process handles compilation automatically (`yarn build` or `turbo build`)
+7. Codemod will be discoverable via `racine-codemod` CLI after package is built
+
+**Testing codemods locally:**
+- Run `yarn build` to compile codemod to JavaScript
+- Run `yarn test` to run codemod tests
+- Test codemod execution: `racine-codemod my-codemod path/to/test/files`
+
+**Example structure:**
+```
+my-package/
+  codemods/
+    my-codemod.ts
+    __tests__/
+      my-codemod.test.ts
+  dist/
+    codemods/
+      my-codemod.js  (built automatically)
+```

package/bin/racine-codemod.js

@@ -11,20 +11,109 @@ const docs = require("../codemods/codemod-docs");
 const currentDir = process.cwd();
 process.chdir(__dirname);
 
-const codemods = fs
-  .readdirSync("../codemods")
-  .filter((x) => x.slice(-3) === ".js")
-  .map((x) => x.slice(0, -3))
-  .filter((x) => x !== "codemod-docs");
+// Discover codemods from local racine and dependencies
+function discoverCodemods() {
+  const localCodemods = [];
+  const dependencyCodemods = [];
+  const codemodPaths = new Map(); // Map codemod name to file path
+
+  // Get local racine codemods
+  try {
+    const localDir = path.join(__dirname, "../codemods");
+    if (fs.existsSync(localDir)) {
+      const localFiles = fs.readdirSync(localDir);
+      localFiles
+        .filter((x) => x.endsWith(".js") && x !== "codemod-docs.js")
+        .forEach((file) => {
+          const name = file.slice(0, -3);
+          localCodemods.push(name);
+          codemodPaths.set(name, path.join(localDir, file));
+        });
+    }
+  } catch (err) {
+    // Silently skip if directory doesn't exist
+  }
+
+  // Discover codemods from dependencies
+  try {
+    const nodeModulesPath = path.join(currentDir, "node_modules");
+    if (fs.existsSync(nodeModulesPath)) {
+      const packages = fs.readdirSync(nodeModulesPath);
+      packages.forEach((pkg) => {
+        // Handle scoped packages (e.g., @sproutsocial)
+        try {
+          const scopedDir = path.join(nodeModulesPath, pkg);
+          const scopedPackages = fs.readdirSync(scopedDir);
+          scopedPackages.forEach((scopedPkg) => {
+            const fullPackageName = `${pkg}/${scopedPkg}`;
+            if (fullPackageName.startsWith("@sproutsocial/seeds-react-")) {
+              const codemodsDir = path.join(
+                nodeModulesPath,
+                pkg,
+                scopedPkg,
+                "dist",
+                "codemods"
+              );
+              if (fs.existsSync(codemodsDir)) {
+                try {
+                  const codemodFiles = fs.readdirSync(codemodsDir);
+                  codemodFiles
+                    .filter((file) => file.endsWith(".js"))
+                    .forEach((file) => {
+                      const name = file.slice(0, -3);
+                      // Only add if not already in local codemods (local takes precedence)
+                      if (!localCodemods.includes(name)) {
+                        if (!dependencyCodemods.includes(name)) {
+                          dependencyCodemods.push(name);
+                        }
+                        // Store path, but local takes precedence if exists
+                        if (!codemodPaths.has(name)) {
+                          codemodPaths.set(name, path.join(codemodsDir, file));
+                        }
+                      } else {
+                        // Warn if duplicate found
+                        console.warn(
+                          `Warning: Codemod '${name}' found in both racine and ${fullPackageName}. Using racine version.`
+                        );
+                      }
+                    });
+                } catch (err) {
+                  // Silently skip if directory can't be read
+                }
+              }
+            }
+          });
+        } catch (err) {
+          // Silently skip if scoped directory can't be read
+        }
+      });
+    }
+  } catch (err) {
+    // Silently skip if node_modules doesn't exist or can't be read
+  }
+
+  return {
+    local: localCodemods,
+    dependencies: dependencyCodemods,
+    paths: codemodPaths,
+  };
+}
+
+const {
+  local: localCodemods,
+  dependencies: dependencyCodemods,
+  paths: codemodPaths,
+} = discoverCodemods();
+const allCodemods = [...localCodemods, ...dependencyCodemods];
 
 const transform = process.argv[2];
 const dest = process.argv[3];
 const usage = `racine-codemod <transformName> <path> <...otherArgs>\n`;
-if (!transform || codemods.indexOf(transform) === -1) {
+if (!transform || allCodemods.indexOf(transform) === -1) {
   console.log(usage);
   console.error(
     "Missing/invalid transform name. Pick one of:\n" +
-      codemods.map((x) => "- " + x).join("\n")
+      allCodemods.map((x) => "- " + x).join("\n")
   );
   process.exit(1);
 }
@@ -57,17 +146,26 @@ if (!dest) {
   process.exit(1);
 }
 
-const filePath = path.join("../codemods", transform + ".js");
+// Resolve codemod path (local takes precedence, then dependencies)
+const codemodPath = codemodPaths.get(transform);
+if (!codemodPath || !fs.existsSync(codemodPath)) {
+  console.error(
+    `Error: Codemod '${transform}' not found. Built file may be missing. Run 'yarn build' in the package that provides this codemod.`
+  );
+  process.exit(1);
+}
+
 const relativePath = path.join(currentDir, dest);
 const userArgs = [...process.argv]
   .slice(4)
   .map((arg) => arg.replace(/\s/g, ""));
 
+// Run codemod with jscodeshift (all codemods are now compiled JS)
 const args = [
   "jscodeshift",
   "--",
   "-t",
-  filePath,
+  codemodPath,
   relativePath,
   "--ignore-pattern=**/node_modules/**",
   ...userArgs,

package/codemods/codemod-docs.js

@@ -57,4 +57,13 @@ module.exports = {
       "racine-codemod icon-name-substitution src/constants.js --quote=double --parser=tsx",
     arguments: { quote, parser },
   },
+  "badge-1.x-to-2.x": {
+    description:
+      "Migrates Badge component usage from v1.x (with deprecated props) to v2.x (without them). Removes deprecated props: 'size' (default), 'type', 'text', and 'tip'. Replaces 'size=\"default\"' with 'size=\"large\"', maps 'type' values to 'badgeColor', converts 'text' prop to children, and removes 'tip' prop. Adds TODO comments for dynamic type values and data attribute references that need manual updates.",
+    example: "racine-codemod badge-1.x-to-2.x src --parser=tsx --quote=double",
+    arguments: {
+      quote,
+      parser,
+    },
+  },
 };