Skip to content

Conversation

@jdeichert
Copy link
Contributor

@jdeichert jdeichert commented Jan 22, 2026

Motivations

We need to migrate stories from v7 to v9 web/mobile storybooks.

This PR migrates Autocomplete stories and also adds a Claude Skill which can be used to do ~90% of the migration.

Before

Screenshot 2026-01-22 at 10 16 31 AM

After

Screenshot 2026-01-22 at 10 15 07 AM

Changes

Changed

  • Moved Autocomplete stories from v7 to v9 web storybook

Testing

  1. Pull this branch and bootstrap
  2. Run the old storybook npm run storybook
  3. Run the new web storybook: cd packages/components && npm run storybook
  4. Run the docs site cd packages/site && npm run dev
  5. Open the Autocomplete docs http://localhost:5173/components/Autocomplete
    • Verify the storybook link in the sidebar links to v9
    • Switch the version dropdown to legacy, confirm the storybook link also goes to v9
  6. Compare the new v9 stories against the v7 stories
    • Verify nothing is broken
  7. Go to the old storybook http://localhost:6005/?path=/docs/components-forms-and-inputs-autocomplete--docs
    • Verify the new Web link goes to v9

Changes can be
tested via Pre-release


In Atlantis we use Github's built in pull request reviews.

Moved and renamed the following files from docs/components/Autocomplete to packages/components/src/Autocomplete:
- Web.stories.tsx → Autocomplete.stories.tsx
- WebV2.stories.tsx → AutocompleteV2.stories.tsx
- V1.docgen.tsx → V1.docgen.tsx (no rename needed)
- V2.docgen.tsx → V2.docgen.tsx (no rename needed)

These files will be modernized in a subsequent commit.
Updated both Autocomplete.stories.tsx and AutocompleteV2.stories.tsx to use v9 patterns:

   1. Updated meta export format:
      - Changed from `as ComponentMeta<T>` to `satisfies ComponentMeta<T>`
      - Added `type Story = ComponentStory<typeof meta>`
      - Removed unnecessary parameters (previewTabs)
      - Updated title paths (removed /Web suffix)

   2. Updated story definitions:
      - Changed from `.bind({})` pattern to object format with `render` property
      - Used `Story` type for all exported stories
      - Preserved all existing args and functionality

   Files modified:
   - Autocomplete.stories.tsx (v1 stories)
   - AutocompleteV2.stories.tsx (v2 stories)

[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.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Matches what we did for Button.

Image

@@ -0,0 +1,200 @@
---
Copy link
Contributor Author

@jdeichert jdeichert Jan 22, 2026

Choose a reason for hiding this comment

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

Should work in Cursor, though I haven't tested that.

Image

<Autocomplete
{...args}
value={value}
placeholder={args?.placeholder ?? ""}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

TS was complaining about args.placeholder being undefined possibly 🤷‍♂️

@jdeichert jdeichert marked this pull request as ready for review January 22, 2026 19:52
@jdeichert jdeichert requested a review from a team as a code owner January 22, 2026 19:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants