feat(ui): add ui-components package
#7223
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RedYetiDev
force-pushed
the
basic-ui-package
branch
from
b7a1cae
to
8ec0d3f
Compare
|
Any idea why Vercel is failing? |
|
Maybe create a package stories ? |
cc @ovflowd and @bmuenzenmeyer |
|
FYI I'm drafting until the Next.js update is done. Feel free to review, this just can't land until that does (given that it modifies the |
RedYetiDev
force-pushed
the
basic-ui-package
branch
from
8ec0d3f
to
84b26ff
Compare
RedYetiDev
force-pushed
the
basic-ui-package
branch
from
84b26ff
to
2e3dc50
Compare
|
Hey, can someone let me know why Vercel is failing? |
| import { | ||
| STORYBOOK_MODES, | ||
| STORYBOOK_SIZES, | ||
| } from '../../../.storybook/constants'; |
There was a problem hiding this comment.
FYI Storybook should exist only within the UI components package :) -- not within the root of the repository.
There was a problem hiding this comment.
Storybook is in use in both the UI components, and the app/site. To prevent duplicate code, I moved it to the repo root (like Tailwind), what do you have in mind?
There was a problem hiding this comment.
Which components are on app/site that use Storybook? IMO, Storybook should ONLY exist for the UI components package.
Because semantically, that's what it is supposed to be used for. For describing components. I think we use it on apps/site only for visual regression, for whose I don't think they should be storybooks but just snapshots. We should probably make that change before we make this package then.
There was a problem hiding this comment.
We can still use Chromatic for that: https://www.chromatic.com/features/visual-test.
IMO you can do that on this PR, decoupling stories from website-only components (which actually are combination of the base components) and simply use Cypress or Node.js or whatever for the visual regression tests with Chromatic.
There was a problem hiding this comment.
I agree with this overall, I just don't think that this should be done now. Currently, while only a subset of features are available in the UI package, I think it's okay to share a storybook config, as both the UI package and the apps/site package ned it. Later on, once more stuff is moved into the package, the storybook should only exist there, just not yet. Not while only the icons have been transferred.
But, in the future, this is probably the best direction to go in.
There was a problem hiding this comment.
I get it, I just believe this gives an excellent opportunity for so; This PR is already going to be huge, and I would say that ensuring that Storybooks only exist for actual UI components (instead of composite components/fragments/sections of a page) and that we still ensure visual regression on everything is definitely part of the goal of this package IMO.
We don't need to rush here, so if the issue is time, take your time :)
There was a problem hiding this comment.
The current Storybook configuration in /apps/site differs from the one in packages/ui-components because the ui-components package doesn't rely on Next.js internally. If we were to move the Storybook setup into ui-components now, we'd have to introduce Next.js dependencies, as the configuration in apps/site depends on Next.js internals. The goal of this package is to not have Next.js dependencies.
A more effective approach IMO would be to gradually migrate components to the packages/ui-components package while removing Next.js-related elements from their Storybook configurations. Once all configurations are free of Next.js and consolidated in packages/ui-components, transferring the entire Storybook setup to this package will be much smoother.
By "Next.js-free," I mean the removal of dependencies like next-intl, Link, and similar Next.js-specific elements.
|
Hey @ovflowd. I've responded to some of your concerns, but I still have my reservations about the storybook / tailwind concerns, PTAL when you get a chance, thanks! |
|
Thanks @RedYetiDev I've replied to your points ;) |
RedYetiDev
force-pushed
the
basic-ui-package
branch
from
d9b73e3
to
54bd537
Compare
|
The deployment was successful!! |
This PR moves the first few components into the
ui-componentspackage.For now, only the
Icons/folder has been moved, as it's quite simple to move (unlike some other components), and it gives a good basis of what this package will look like.Over coming PRs, I'll slowly move more pieces into this package.