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.

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

Jump to bottom

Start building out Storybook for the Penumbra UI library #1452

Merged
merged 21 commits into from
Jul 17, 2024
Merged

Start building out Storybook for the Penumbra UI library #1452

merged 21 commits into from
Jul 17, 2024

Conversation

jessepinho
Copy link
Contributor

@jessepinho jessepinho commented Jul 8, 2024 •
edited
Loading

image

This PR is focused on laying the foundation and setting up Storybook to display our UI components. There are a couple basic implementations included here (using styled-components and creating an Icon component) that may be revised or removed later, but I needed something to put into Storybook :)

In this PR

  • CI pipelines (written by Conor) to autodeploy A) tagged releases to ui.penumbra.zone, B) merges to main to preview.ui.penumbra.zone, and C) PR updates to ephemeral URLs.
  • Mark all old components as "Deprecated" in Storybook
  • Create a Penumbra-branded theme for Storybook
  • For now, start using styled-components, although this isn't yet set in stone.
  • Create an initial (not yet finished) Icon component to test Storybook with.

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 8, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 3882557

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

jessepinho
jessepinho commented Jul 9, 2024
View reviewed changes
packages/ui/.gitignore Outdated
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the directory that Storybook will build to, and will be deployed to ui.penumbra.zone

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 10, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit 3882557):

https://penumbra-ui-preview--pr1452-jessepinho-ui-librar-9680tnck.web.app

(expires Wed, 24 Jul 2024 00:45:27 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 709d729610ef7a6369b23f1cb2b820a60cc685b1

@conorsch
Copy link
Contributor

@jessepinho I pushed a new commit for CI workflows for storybook. You can see the bot is already helpfully adding ephemeral URLs. As the commit text describes, there are workflows for preview & stable channels, as well.

@jessepinho jessepinho force-pushed the jessepinho/ui-library branch 2 times, most recently from b07f937 to 840c973 Compare July 10, 2024 20:21
jessepinho
jessepinho commented Jul 10, 2024
View reviewed changes
packages/ui/src/Icon/index.stories.ts

export default meta;

export const Basic: StoryObj<typeof Icon> = {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

jessepinho
jessepinho commented Jul 10, 2024
View reviewed changes
packages/ui/src/styled-components.d.ts Outdated
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will be built out over time, if we stick with styled-components

jessepinho
jessepinho commented Jul 10, 2024
View reviewed changes
packages/ui/package.json Outdated
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reordering of this file is due to syncpack lint

Copy link
Contributor Author

Choose a reason for hiding this comment

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

only new elements in this file are the dependencies on styled-components, @storybook/manager-api, and @storybook/theming

@jessepinho jessepinho force-pushed the jessepinho/ui-library branch 2 times, most recently from 826b048 to c4b199d Compare July 10, 2024 20:59
@jessepinho jessepinho changed the title WIP: Start building out the UI library Start building out Storybook for the Penumbra UI library Jul 10, 2024
@jessepinho jessepinho marked this pull request as ready for review July 10, 2024 21:10
@jessepinho jessepinho requested a review from a team July 10, 2024 21:11
@TalDerei
Copy link
Contributor

@jessepinho maybe we can get a demo of this during next weekly sync?

turbocrime
turbocrime approved these changes Jul 11, 2024
View reviewed changes
packages/ui/.gitignore Outdated Show resolved Hide resolved
packages/ui/.storybook/main.js Outdated Show resolved Hide resolved
conorsch and others added 7 commits July 16, 2024 17:38
@conorsch @jessepinho
ci: firebase config for storybook ui
a80f177 
Adds a deploy workflow for the new storybook ui static site, deploying
to:

  * preview.ui.penumbra.zone, on merge to main
  * ui.penumbra.zone, on tag push

Additionally, PRs will have an ephemeral URL for preview posted to them
via a bot as a comment, so unmerged work can be viewed in an online
context.
@jessepinho
Swap root order
9ae28ee
@jessepinho
Change default icon color
53e7972
@jessepinho
Start building out theme
9a54ee7
@jessepinho
Remove Normalize component for now
839956a
@jessepinho
Fix formatting
ddfa914
@jessepinho
Ignore storybook-static from Prettier
a3eb636
@jessepinho jessepinho merged commit 877e0b8 into main Jul 17, 2024
8 checks passed
@jessepinho jessepinho deleted the jessepinho/ui-library branch July 17, 2024 00:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@turbocrime turbocrime turbocrime approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@jessepinho @conorsch @TalDerei @turbocrime