docs: update frontend contributing guide for shadcn/ui and TailwindCSS migration #18702
Conversation
…S migration Update the frontend contributing guide to reflect the current architecture and ongoing migration from MUI to shadcn/ui and from Emotion to TailwindCSS. Key changes: - Updated tech stack to include TailwindCSS, shadcn/ui, Lucide React, and Biome - Added migration status section with current progress (~210 MUI files, ~41 migrated) - Added development commands section with pnpm commands and pre-PR checklist - Rewrote UI components section to prioritize shadcn/ui over MUI - Completely updated styling section to focus on TailwindCSS - Enhanced accessibility section with TailwindCSS examples - Added comprehensive migration guide with practical examples and checklists - Documented semantic color system and best practices Co-authored-by: BrunoQuaresma <3165839+BrunoQuaresma@users.noreply.github.com>
Ran make fmt and frontend linting to ensure code quality: - Go formatting: passed - Terraform formatting: passed - Frontend formatting (Biome): passed (1124 files, no fixes needed) - Frontend linting (Biome): passed (1124 files, no issues) No changes were required as the code already meets all formatting standards. Co-authored-by: BrunoQuaresma <3165839+BrunoQuaresma@users.noreply.github.com>
Fixed 11 markdown linting errors found by markdownlint-cli2: - MD022: Added blank lines around headings - MD032: Added blank lines around lists (9 instances) - MD031: Added blank lines around fenced code blocks - MD040: Added language specification to fenced code block All markdown linting rules now pass with 0 errors. Co-authored-by: BrunoQuaresma <3165839+BrunoQuaresma@users.noreply.github.com>
|
@BrunoQuaresma Forgot to message you about this earlier, but I added myself as a reviewer for this PR. I figured that I might be a good guinea pig, since I've been away from |
|
@Parkreiner sure thing! Welcome back my friend. |
| ```bash | ||
| # Development | ||
| pnpm dev # Start Vite development server | ||
| pnpm storybook --no-open # Run Storybook for component development |
There was a problem hiding this comment.
I think we should remove the --no-open part. I'd imagine that most people running Storybook locally would want it to open in the browser
| pnpm lint # Run complete linting suite (Biome + TypeScript + circular deps + knip) | ||
| pnpm lint:fix # Auto-fix linting issues where possible | ||
| pnpm format # Format code with Biome (always run before PR) | ||
| pnpm check # Type-check with TypeScript |
There was a problem hiding this comment.
I think this is wrong, and we need to swap it out for pnpm lint:types
| ### Current State | ||
|
|
||
| - **~210 files** still use MUI components (`@mui/material`) | ||
| - **~41 components** have been migrated to use TailwindCSS classes | ||
| - **shadcn/ui components** are being added incrementally to `src/components/` | ||
| - **Emotion CSS** is deprecated but still present in legacy components |
There was a problem hiding this comment.
I think we should delete this section entirely, because it will quickly get out of date
| // ❌ Before: MUI Button | ||
| import { Button } from "@mui/material"; | ||
|
|
||
| <Button | ||
| variant="contained" | ||
| color="primary" | ||
| sx={{ margin: 2 }} | ||
| onClick={handleClick} | ||
| > | ||
| Click me | ||
| </Button> |
There was a problem hiding this comment.
This shows an example of not using tree-shaking, right? Wouldn't this need to be:
import Button from "@mui/material/Button";?
| import { Button } from "components/Button"; | ||
|
|
||
| <Button | ||
| variant="primary" |
There was a problem hiding this comment.
Our buttons don't have a primary variant, right?
| <Label htmlFor="email">Email</Label> | ||
| <Input | ||
| id="email" | ||
| className={errors.email ? "border-border-destructive" : ""} |
There was a problem hiding this comment.
We don't have the border-border-destructive class, right? It's just border-destructive?
|
|
||
| 1. **Check existing implementations** in `src/components/` for patterns | ||
| 2. **Refer to shadcn/ui documentation** at [ui.shadcn.com](https://ui.shadcn.com/) | ||
| 3. **Ask in Discord** - the team is happy to help with migration questions |
There was a problem hiding this comment.
Do we want to add a link to the Discord here?
| When a shadcn/ui equivalent doesn't exist: | ||
|
|
||
| 1. **Check the shadcn/ui registry** for the component | ||
| 2. **Copy the component code** (don't use the CLI) | ||
| 3. **Adapt to our theme** using semantic color tokens | ||
| 4. **Add to `src/components/`** with proper folder structure | ||
| 5. **Create Storybook stories** for documentation | ||
| 6. **Add TypeScript types** for props | ||
| 7. **Include accessibility features** (ARIA attributes, keyboard support) |
There was a problem hiding this comment.
I don't now if this section should even be here
|
@Parkreiner would you be able to commit the suggested changes? 🙏 |
Co-authored-by: Michael Smith <throwawayclover@gmail.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🚫 [linkspector] reported by reviewdog 🐶
Cannot reach https://stackoverflow.com/questions/69711888/react-testing-library-getbyrole-is-performing-extremely-slowly Status: 403
coder/docs/about/contributing/frontend.md
Line 536 in 62acdf3
Update the frontend contributing guide to reflect the current architecture and ongoing migration from MUI to shadcn/ui and from Emotion to TailwindCSS.
Key changes: