Build Out Storybook #230
Build Out Storybook #230
Conversation
…ent, use new statusdot component in gamecard and games page
…e checkbox stories file since only instance of checkbox used is imported from 3rd party lib. delete variant = 'ghost' declaration from navlink in order to render diferent variations in storybook
…d stories for nav menu, popover,progress, scrollarea, sheet, switch, tabs and tooltip
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@4eyes52 is attempting to deploy a commit to the Loot Bibliotheca Team on Vercel. A member of the Team first needs to authorize it. |
…stead. add more stories for tooltip
|
@RedBeardEth Im going to change the status of the PR to draft. I'm almost done just need to add a couple more components to storybook that are new in the dev branch. I'll switch back to ready for review when finished. |
| @@ -122,7 +122,7 @@ export function Carousel({ | |||
| alt={image.alt} | |||
| //fill | |||
| sizes="100vw" | |||
| className={`${cover ? "object-cover" : "object-contain"}`} | |||
| className={`${cover ? "object-cover" : "object-contain"} h-full w-full`} | |||
There was a problem hiding this comment.
I added h-full and w-full classes here so that the images would fit the carousel's container. I noticed that the Image component from next is not being imported anymore and a is being used instead. Next's image has a
fill property that I think can be used in place of h-full w-full if you plan on using next's component instead.
|
|
||
| variant = "ghost"; |
There was a problem hiding this comment.
I removed this variant declaration because it was causing storybook to render all the storieswith the ghost variant instead of the variant name I was trying to pass to args. I don't think this will cause issues in the next app but wanted to note.
| return ( | ||
| <Link | ||
| className={cn( | ||
| buttonVariants({ variant, size, className }), | ||
| "pb-4", |
There was a problem hiding this comment.
this pb-4 class was adding extra padding below the text of links. I removed it because it was messing up the layout of content provided to links in stories.
| <tbody> | ||
| {tableData.map((data, index) => ( | ||
| <tr key={index}> | ||
| <td className="whitespace-nowrap px-2 py-2 font-sans text-bright-yellow/70"> | ||
| {data.key} | ||
| </td> | ||
| <td className="whitespace-nowrap px-2 py-2 text-right"> | ||
| {data.value} | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> |
There was a problem hiding this comment.
visiting a game page locally threw a run time error because tbody wasn't present
"merge with dev"
merge with dev
merge with dev
Whats In this PR: I created stories for components that live in
apps/uibut only for those components that are currently being used in/apps/nextjs/src/app/. I didn't think it was necessary to add stories for the ui components that weren't being used in the nextjs app. But please let me know if you'd like me to do that.Gotchas:
h-fullandw-fullclasses added to carousel img inapps/ui/src/components/ui/carousel.tsxsee comments: https://github.com/BibliothecaDAO/RealmsWorld/pull/230/files#r1640062467
ghostprior to render was removed inapps/ui/src/components/ui/nav-link.tsxsee comments: https://github.com/BibliothecaDAO/RealmsWorld/pull/230/files#r1640066436
pb-4class was removed fromapps/ui/src/components/ui/nav-link.tsxsee comments: https://github.com/BibliothecaDAO/RealmsWorld/pull/230/files#r1640069778
TODOs: I did not attempt to build these changes for production. I figured this PR was already getting pretty big so I thought just making sure storybook was building locally would be enough for now. I am very much willing to try building for production if there is a desire to do so.
Thank you for taking the time if anyone ends up reviewing these changes.