-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Add shadcn/ui + Storybook #664
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
Conversation
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the default button generated by the shadcn cli. We'll need to make it look more like the native VSCode UI (similar to https://github.com/estruyf/vscrui).
|
|
||
| const config: StorybookConfig = { | ||
| stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], | ||
| addons: [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure which of these are actually needed; this was auto-generated by Storybook.
Enable HMR for the webview, complements of vite
| @layer theme, base, components, utilities; | ||
|
|
||
| @import "tailwindcss/theme.css" layer(theme); | ||
| /* https://tailwindcss.com/docs/preflight */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CC @samhvw8 - When we added Tailwind some of the webview UI looked strange b/c Tailwind removes a lot of default styling via their preflight mechanism. I disabled it for now per https://tailwindcss.com/docs/preflight#disabling-preflight.
Description
Now that we have Tailwind, let's add
shadcn/uias our component library and set up Storybook so we can start building out re-usable components for our webview. Using shadcn will allow us to utilize v0.dev.Demo
Type of change
How Has This Been Tested?
Checklist:
Additional context
Related Issues
Reviewers
Important
Integrate
shadcn/uiand set up Storybook for component development in thewebview-uiproject.shadcn/uicomponent library for reusable UI components.webview-ui/.storybookfor component development and testing.main.ts,preview.ts, andvscode.css.package.jsonscripts to include Storybook commands.vite.config.tsfor Vite server settings and build output.button.tsxinsrc/components/uifor button component with variants.ChatRow.tsxto use new UI components and styles.cninsrc/lib/utils.tsfor class name merging..gitignoreto exclude Storybook logs.publicdirectory.README.mdwith new development instructions.This description was created by
for eefb721. It will automatically update as commits are pushed.