Skip to content

chore(components): Add additional Page visual tests before refactor. #2866

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nad182 merged 6 commits into from
Feb 12, 2026
Merged

chore(components): Add additional Page visual tests before refactor. #2866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a118c3
adding new tests
scotttjob Jan 6, 2026
8ecc938
Merge branch 'master' into CLEANUP/page-refactor-visual
scotttjob Jan 7, 2026
083eb32
fixing the height of the small tests
scotttjob Jan 7, 2026
4654cee
Merge remote-tracking branch 'origin/master' into CLEANUP/page-refact…
nad182 Feb 12, 2026
00fd0aa
Return VisualTestPagePage route
nad182 Feb 12, 2026
f250a74
Update screenshots after running bootstrap
nad182 Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 80 additions & 57 deletions .claude/skills/migrate-stories/SKILL.md
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@nad182 nad182 Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this file might have been auto-formatted. I can revert this change, but my preference would be to keep it, since it will inevitably appear again later.

Original file line number Diff line number Diff line change
Expand Up @@ -15,49 +15,65 @@ disable-model-invocation: true

## Important Context

Throughout this document, "SomeComponentName" is used as a placeholder. Always replace it with $ARGUMENTS which is the component we're focused on migrating today.

Throughout this document, "SomeComponentName" is used as a placeholder. Always
replace it with $ARGUMENTS which is the component we're focused on migrating
today.

## Background

We currently have 3 instances of storybook:

* Storybook v7 (old)
* These live under `docs/components/SomeComponentName`
* Storybook v9 web
* These live under `packages/components/src/SomeComponentName`
* Storybook v9 mobile
* These live under `packages/components-native/src/SomeComponentName`

- Storybook v7 (old)
- These live under `docs/components/SomeComponentName`
- Storybook v9 web
- These live under `packages/components/src/SomeComponentName`
- Storybook v9 mobile
- These live under `packages/components-native/src/SomeComponentName`

## The Goal

We're in the process of migrating old v7 stories to the new web/mobile v9 storybook instances.
We're in the process of migrating old v7 stories to the new web/mobile v9
storybook instances.

Your job today is to follow the instructions below and migrate stories from v7 to their respective web and/or mobile v9 instances. Do the tasks in the order they are defined in.

Do NOT run test suites or execute npm commands. Just do the changes and I'll QA after that.
Your job today is to follow the instructions below and migrate stories from v7
to their respective web and/or mobile v9 instances. Do the tasks in the order
they are defined in.

Do NOT run test suites or execute npm commands. Just do the changes and I'll QA
after that.

## Tasks

### Move stories

Each component has web and/or mobile stories. They live under `docs/components/SomeComponentName`. Web stories are named `Web.stories.tsx` and mobile stories are named `Mobile.stories.tsx`. Sometimes you may come across files like `WebV2`, those are also web stories.
Each component has web and/or mobile stories. They live under
`docs/components/SomeComponentName`. Web stories are named `Web.stories.tsx` and
mobile stories are named `Mobile.stories.tsx`. Sometimes you may come across
files like `WebV2`, those are also web stories.

For web stories: move the component's `Web.stories.tsx` file to its v9 directory.
For web stories: move the component's `Web.stories.tsx` file to its v9
directory.

For mobile stories: move the component's `Mobile.stories.tsx` file to its v9 directory.
For mobile stories: move the component's `Mobile.stories.tsx` file to its v9
directory.

**IMPORTANT:** In both cases, you must rename the file to follow this format: `SomeComponentName.stories.tsx`. You also may come across files that are imported by the stories, and in that case you should move those files to their respective v9 directories as well.
**IMPORTANT:** In both cases, you must rename the file to follow this format:
`SomeComponentName.stories.tsx`. You also may come across files that are
imported by the stories, and in that case you should move those files to their
respective v9 directories as well.

**IMPORTANT:** Only move the files, DO NOT make any modifications at this stage. After moving the files, make a git commit to the current branch for that.
**IMPORTANT:** Only move the files, DO NOT make any modifications at this stage.
After moving the files, make a git commit to the current branch for that.

### Modernizing stories

After moving the stories, you'll need to modernize them. Here's a couple things below you'll need to change. If you get stuck or confused, refer to @packages/components/src/Autocomplete/Autocomplete.stories.tsx which is a v9 example that works.
After moving the stories, you'll need to modernize them. Here's a couple things
below you'll need to change. If you get stuck or confused, refer to
@packages/components/src/Autocomplete/Autocomplete.stories.tsx which is a v9
example that works.

After you make these changes, commit them with details about what you had to change and why if necessary.
After you make these changes, commit them with details about what you had to
change and why if necessary.

1. Update imports for v9

Expand All @@ -79,74 +95,72 @@ Before:

```tsx
export default {
title: "Components/Actions/SomeComponentName/Web",
component: SomeComponentName,
parameters: {
viewMode: "story",
previewTabs: { code: { hidden: false } },
},
decorators: [
// Workaround Storybook's wrapping flex parent that make everything full width
story => <div>{story()}</div>,
],
title: "Components/Actions/SomeComponentName/Web",
component: SomeComponentName,
parameters: {
viewMode: "story",
previewTabs: { code: { hidden: false } },
},
decorators: [
// Workaround Storybook's wrapping flex parent that make everything full width
story => <div>{story()}</div>,
],
} as ComponentMeta<typeof SomeComponentName>;
```

After:


```tsx
// NOTE: the comments are for context, do not add these.
const meta = {
// Removed the /Web or /Mobile path part
title: "Components/Actions/SomeComponentName",
component: SomeComponentName,
// Removed parameters that were unnecessary in this case. Always remove previewTabs.
// Removed decorators that were unnecessary in this case.
// Removed the /Web or /Mobile path part
title: "Components/Actions/SomeComponentName",
component: SomeComponentName,
// Removed parameters that were unnecessary in this case. Always remove previewTabs.
// Removed decorators that were unnecessary in this case.
} satisfies Meta<typeof SomeComponentName>;
export default meta;
type Story = StoryObj<typeof meta>;
```

3. Update story definition

Only update the way the story is defined. DO NOT update the contents of any story.
Only update the way the story is defined. DO NOT update the contents of any
story.

Before:

```tsx
export const SomeExample = SomeExampleTemplate.bind({});

const SomeExampleTemplate: ComponentStory<typeof SomeComponentName> = (args) => (
<div>
Example...
</div>
const SomeExampleTemplate: ComponentStory<typeof SomeComponentName> = args => (
<div>Example...</div>
);
```

After:

```tsx
export const SomeExample: Story = {
render: SomeExampleTemplate,
render: SomeExampleTemplate,
};

// NOTE: make sure to remove any references to ComponentStory or ComponentMeta
const SomeExampleTemplate = (args: Story["args"]) => (
<div>
Example...
</div>
);
const SomeExampleTemplate = (args: Story["args"]) => <div>Example...</div>;
```


### Update new docs site links

Our new docs site has a config file for each component. The config locations follow this format: `packages/site/src/content/SomeComponentName/index.tsx`.
Our new docs site has a config file for each component. The config locations
follow this format: `packages/site/src/content/SomeComponentName/index.tsx`.

You need to update the `links` section for this component with the new storybook link(s) for web and/or mobile. See @packages/site/src/content/Button/index.tsx for an example of what this should look like.
You need to update the `links` section for this component with the new storybook
link(s) for web and/or mobile. See @packages/site/src/content/Button/index.tsx
for an example of what this should look like.

**IMPORTANT:** Only link to Web if you migrated web stories, and only link to Mobile if you migrated mobile stories. Some components only have one or the other.
**IMPORTANT:** Only link to Web if you migrated web stories, and only link to
Mobile if you migrated mobile stories. Some components only have one or the
other.

Before:

Expand Down Expand Up @@ -182,19 +196,28 @@ links: [
],
```


### Update old docs page

Each component has a docs page that our v7 storybook uses.

The filename is in this format: `docs/components/SomeComponentName/SomeComponentName.stories.mdx`
The filename is in this format:
`docs/components/SomeComponentName/SomeComponentName.stories.mdx`

You need to update this file to point to the new v9 storybook locations. See the snippet below, you need to replace `NEW-V9-WEB-PATH` and/or `NEW-V9-MOBILE-PATH` with the actual storybook paths that are expected.
You need to update this file to point to the new v9 storybook locations. See the
snippet below, you need to replace `NEW-V9-WEB-PATH` and/or `NEW-V9-MOBILE-PATH`
with the actual storybook paths that are expected.

**IMPORTANT:** Only link to Web if you migrated web stories, and only link to Mobile if you migrated mobile stories. Some components only have one or the other.
**IMPORTANT:** Only link to Web if you migrated web stories, and only link to
Mobile if you migrated mobile stories. Some components only have one or the
other.

```md
[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/NEW-V9-WEB-PATH) and [Mobile](https://atlantis.getjobber.com/storybook/mobile/?path=/story/NEW-V9-MOBILE-PATH) stories have moved to Storybook v9.
[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/NEW-V9-WEB-PATH)
and
[Mobile](https://atlantis.getjobber.com/storybook/mobile/?path=/story/NEW-V9-MOBILE-PATH)
stories have moved to Storybook v9.
```

See @docs/components/Button/Button.stories.mdx for an example of what this looks like. Note the paths are determined by the `title` field exported from the stories, using lowercase letters and dashes instead of slashes.
See @docs/components/Button/Button.stories.mdx for an example of what this looks
like. Note the paths are determined by the `title` field exported from the
stories, using lowercase letters and dashes instead of slashes.
6 changes: 4 additions & 2 deletions docs/components/Autocomplete/Autocomplete.stories.mdx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@nad182 nad182 Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same auto-formatting happened as above. My preference is to keep it, since it's a very small change.

Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { Meta } from "@storybook/addon-docs";

# Autocomplete

[Autocomplete docs](https://atlantis.getjobber.com/components/Autocomplete) have moved to the new site.
[Autocomplete docs](https://atlantis.getjobber.com/components/Autocomplete) have
moved to the new site.

[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/components-forms-and-inputs-autocomplete--basic) stories have moved to Storybook v9.
[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/components-forms-and-inputs-autocomplete--basic)
stories have moved to Storybook v9.
6 changes: 4 additions & 2 deletions docs/components/Switch/Switch.stories.mdx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@nad182 nad182 Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same auto-formatting happened as above. My preference is to keep it, since it's a very small change.

Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { Meta } from "@storybook/addon-docs";

# Switch

[Switch docs](https://atlantis.getjobber.com/components/Switch) have moved to the new site.
[Switch docs](https://atlantis.getjobber.com/components/Switch) have moved to
the new site.

[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/components-selections-switch--basic) stories have moved to Storybook v9.
[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/components-selections-switch--basic)
stories have moved to Storybook v9.
Loading
Loading