improve: kit update and shadcn #148
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @jasonkuhrt, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request introduces a fundamental change in the project's frontend architecture by migrating its styling system to Tailwind CSS and Radix UI Primitives, aligning with the shadcn/ui methodology. This strategic move aims to significantly optimize CSS bundle sizes, streamline the developer experience, and provide enhanced customization options for users. Complementing this, the codebase has undergone extensive refactoring to embrace Effect-based programming, leading to more robust error handling and a more consistent, predictable application flow.
Highlights
- Major Styling Overhaul: The project has undergone a significant architectural shift in styling, moving from a fragmented, custom 4-system CSS setup (including Radix Themes and Swiss Grid) to a unified Tailwind CSS approach. This change is extensively documented, detailing problems with the old system, benefits of the new, and a phased migration strategy.
- Shadcn/UI Integration: The project now adopts the
shadcn/uiphilosophy, leveraging Radix UI Primitives combined with Tailwind CSS for its UI components. Numerous new UI components have been added undersrc/template/components/ui/to reflect this new standard. - Effect-Based Programming Paradigm Shift: A substantial refactoring effort has been undertaken to integrate and utilize Effect-based programming patterns (
Effect,A,E,O,Sfrom theeffectlibrary) across the codebase. This enhances error handling, code robustness, and consistency, particularly within API, CLI, and server-side rendering logic. - Removal of Swiss Grid System: The custom Swiss Grid system and its associated CSS files have been completely removed from the codebase, replaced by the new Tailwind-based layout and UI components.
- New Theme Configuration and Automated Migration: A dedicated theme configuration (
src/api/config/theme.ts) has been introduced for portal customization. An automated migration script (scripts/migrate-components.ts) has also been added to facilitate the transition of existing components to the new styling system. - Dependency Updates: Key dependencies such as
@wollybeard/kitandgraphql-kithave been updated. New dependencies likeautoprefixer,clsx,postcss,tailwind-merge,tailwindcss,lucide-react, and various@radix-ui/react-*primitives have been added, while@radix-ui/themeshas been removed.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in pull request comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request is a significant and impressive undertaking, migrating the entire styling system from a combination of Radix Themes and a custom Swiss Grid to a unified Tailwind CSS and shadcn/ui-inspired component library. It also includes a substantial refactoring to adopt more idiomatic effect-ts patterns across the codebase. The changes are extensive and touch almost every part of the application.
My review focuses on the correctness of these large-scale refactorings. I've identified a few critical issues related to the new layout system and a component rendering bug that will need to be addressed. I've also pointed out some minor areas for improvement, such as removing leftover inline styles and cleaning up some type assertions. Overall, this is a fantastic step forward for the project's architecture, maintainability, and performance.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request is a significant and impressive refactoring effort, primarily focused on migrating the styling system from a mix of Radix Themes and custom solutions to a unified Tailwind CSS approach inspired by shadcn/ui. This is a fantastic move for maintainability, performance, and developer experience. The PR also includes a substantial effort to make more of the codebase Effect-native, which improves type safety and error handling. I've identified a few critical issues related to dependency management and some medium-severity suggestions to further improve consistency and type safety. Overall, this is a high-quality contribution that modernizes the project's frontend architecture.
src/template/components/Changelog/groups/FieldArgumentOperation.tsx
Outdated
Show resolved
Hide resolved
|
/gemini review |
There was a problem hiding this comment.
Code Review
This is an impressive and extensive pull request that successfully migrates the styling system to Tailwind CSS and refactors a large part of the codebase to be more idiomatic with effect-ts. The introduction of a shadcn/ui-like component library with a Radix compatibility layer is a great approach for this migration. The move from promises to Effect and the use of Option and tagged errors significantly improve the code's robustness and maintainability. I've found one issue regarding the merging of the new theme configuration.
- Convert PostCSS config to ESM export syntax - Remove autoprefixer (handled automatically in v4) - Update CSS to use @import 'tailwindcss' syntax - Add @theme directive for custom design tokens - Fix CSS layer styles to avoid unknown utility class errors - Remove JavaScript-based tailwind.config.js (v4 uses CSS config)
No description provided.