Skip to content
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.

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

Storybook #6

Merged
merged 4 commits into from
Apr 26, 2024
Merged

Storybook #6

merged 4 commits into from
Apr 26, 2024

Conversation

paola4
Copy link
Collaborator

@paola4 paola4 commented Apr 26, 2024

Description

This PR:

  1. Integrates Tailwind with Storybook
  2. Publishes storybook (https://662b31961b954f0f663b71e1-zxyuxxdhlp.chromatic.com/).
  3. Sets up auto deployment of the published site when future changes are pushed (added chromatic.yml)
  4. Updates the README to include a link to our published Storybook

Related Issue

N/A

Related Story Card

N/A

Type of Changes

Dependency update

Acceptance Criteria

N/A

Testing Instructions

  1. Run npm run storybook, and check the button component: it should be blue (via the Tailwind CSS class)
  2. Check https://662b31961b954f0f663b71e1-zxyuxxdhlp.chromatic.com/. There should be a published version of the Storybook.

In order for Tailwind CSS to show up in Storybook, a few changes needed to be made:
- postcss.config.mjs needed to be renamed to postcss.config.js so that Storybook could find it
- tailwind.config.ts needed to be updated to include the path to Storybook's stories folder
- I tested the changes by updating the Button component with a Tailwind color and running `npm run storybook` to check that the component was styled correctly
Copy link

netlify bot commented Apr 26, 2024

Deploy Preview for uncloud ready!

Name Link
🔨 Latest commit 874596a
🔍 Latest deploy log https://app.netlify.com/sites/uncloud/deploys/662bd550f9004000089cd297
😎 Deploy Preview https://deploy-preview-6--uncloud.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@paola4
Copy link
Collaborator Author

paola4 commented Apr 26, 2024

Will check the "Chromatic Publish / test (push)" in the morning.

@paola4
Copy link
Collaborator Author

paola4 commented Apr 26, 2024

Ok! Looks like deployment is all good now. I had followed the instructions in Storybook's documentation, but it appears they're outdated. The instructions on Chromatic (where the Storybook will be deployed) worked. Note, that I've also added our chromatic project token as a Github repository token.

Add link to published Storybook.
Copy link
Collaborator

@GinaCastromonte GinaCastromonte left a comment

Choose a reason for hiding this comment

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

Testing it out, worked well for me

@GinaCastromonte GinaCastromonte merged commit a47130b into main Apr 26, 2024
7 checks passed
@paola4 paola4 deleted the storybook branch April 26, 2024 17:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants