Feature/ds 349 hopper chromatic test

[victortrinh2]

Issue: Add hopper chromatic test

Summary

Adding hopper chromatic tests - preparing the repo for the migration. Duplicating all chromatic tests files by appending -hopper to all files and test names

What I did

Ran 2 commands:

find . -type d -name "chromatic" -exec sh -c 'for file in "$1"/*; do
    dir=$(dirname "$file");
    base=$(basename "$file");
    name="${base%%.*}";
    ext="${base#*.}";
    cp "$file" "$dir/${name}-hopper.${ext}";
done' _ {} \;

Explanation:

• find . -type d -name "chromatic": Finds all "chromatic" directories.
• The script loops through each file and:
  • dir=$(dirname "$file"): Gets the directory path.
  • base=$(basename "$file"): Extracts the file name.
  • name="${base%%.*}": Captures the part of the name before the first dot.
  • ext="${base#*.}": Captures the part after the first dot (file extension).
  • cp "$file" "$dir/${name}-hopper.${ext}": Duplicates the file and appends -hopper before the first dot in the file name.

This will create a copy of each file in the "chromatic" folders with -hopper added to the first part of the filename while keeping the original files intact.

find . -type f -path '*/chromatic/*' -name '*-hopper*' -exec sed -i '' 's|\(Chromatic/[A-Za-z0-9_-]*\)|\1-hopper|g' {} \;

Explanation:

• find . -type f: Finds all files (-type f) starting from the current directory.
• -path '*/chromatic/*': Ensures the files are within "chromatic" directories.
• -name '*-hopper*': Targets only files with -hopper in their filenames.
• -exec sed -i '' 's|\(Chromatic/[A-Za-z0-9_-]*\)|\1-hopper|g' {} \;: Modifies the content inside those files, appending -hopper after the string that starts with "Chromatic/".

This will append -hopper after the story name.

How to test

• Is this testable with Jest or Chromatic screenshots? yes

• Does this need an update to the documentation? no

If your answer is yes to any of these, please make sure to include it in your PR.

[netlify[bot]]

✅ Deploy Preview for wl-orbiter-storybook ready!

Name	Link
🔨 Latest commit	df36016f01d6b1a2478bfa76d4ac7065bb360935
🔍 Latest deploy log	https://app.netlify.com/sites/wl-orbiter-storybook/deploys/66f2c52fd9aaac0007b73f49
😎 Deploy Preview	https://deploy-preview-148--wl-orbiter-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for wl-orbiter-website ready!

Name	Link
🔨 Latest commit	df36016f01d6b1a2478bfa76d4ac7065bb360935
🔍 Latest deploy log	https://app.netlify.com/sites/wl-orbiter-website/deploys/66f2c52ff6f32b0008683d28
😎 Deploy Preview	https://deploy-preview-148--wl-orbiter-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.