mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2026-02-05 10:26:48 +00:00
feat: migrate from chakra 2 to chakra 3 (#500)
* feat: separate page into different component, greatly improving the loading and reactivity
* fix: various fixes
* feat: migrate to Chakra UI v3 - update theme, fix deprecated props
- Add whiteAlpha color palette with semantic tokens
- Update button recipe with fontWeight 600 and hover states
- Move Poppins font from theme to HTML tag className
- Fix deprecated props: isDisabled→disabled, align→alignItems/textAlign
- Remove button.css as styles are now handled by Chakra v3
* fix: complete Chakra UI v3 deprecated prop migrations
- Replace all isDisabled with disabled
- Replace all isChecked with checked
- Replace all isLoading with loading
- Replace all isOpen with open
- Replace all noOfLines with lineClamp
- Replace all align with alignItems on Flex/Stack components
- Replace all justify with justifyContent on Flex/Stack components
- Update temporary Select components to use new prop names
- Update REFACTOR2.md with completion status
* fix: add value prop to Menu.Item for proper hover states in Chakra v3
* fix: update browse page components for Chakra UI v3 compatibility
- Fix FilterSidebar status filter styling and prop usage
- Update Pagination component to use new Chakra v3 props and structure
- Refactor TranscriptTable to use modern Chakra patterns
- Clean up browse page layout and props
- Remove unused import from transcripts API view
- Enhance theme with additional semantic color tokens
* fix: polish browse page UI for Chakra v3
- Add rounded corners to FilterSidebar
- Adjust responsive breakpoints from md to lg for table/card view
- Add consistent font weights to table headers
- Improve card view typography and spacing
- Fix padding and margins for better mobile experience
- Remove unused table recipe from theme
* fix: padding
* fix: rework transcript page
* fix: more tidy layout for topic
* fix: share and privacy using chakra3 select
* fix: fix share and privacy select, now working, with closing dialog
* fix: complete Chakra UI v3 migration for share components and fix all TypeScript errors
- Refactor shareZulip.tsx to integrate modal content directly
- Replace react-select-search with Chakra UI v3 Select components using collection pattern
- Convert all Checkbox components to use v3 composable structure (Checkbox.Root, etc.)
- Fix Card components to use Card.Root and Card.Body
- Replace deprecated textColor prop with color prop
- Update Menu components to use v3 namespace pattern (Menu.Root, Menu.Trigger, etc.)
- Remove unused AlertDialog imports
- Fix useDisclosure hook changes (isOpen -> open)
- Replace UnorderedList with List.Root and ListItem with List.Item
- Fix Skeleton components by removing isLoaded prop and using conditional rendering
- Update Button variants to valid v3 options
- Fix Spinner props (remove thickness, speed, emptyColor)
- Update toast API to use custom toaster component
- Fix Progress components and FormControl to Field.Root
- Update Alert to use compound component pattern
- Remove shareModal.tsx file after integration
* fix: bring back topic list
* fix: normalize menu item
* fix: migrate rooms page to Chakra UI v3 pattern
- Updated layout to match browse page with Flex container and proper spacing
- Migrated add/edit room modal from custom HTML to Chakra UI v3 Dialog component
- Replaced all Select components with Chakra UI v3 Select using createListCollection
- Replaced FormControl/FormLabel/FormHelperText with Field.Root/Field.Label/Field.HelperText
- Removed inline styles and used Chakra props (mr={2} instead of style={{ marginRight: "8px" }})
- Fixed TypeScript interfaces removing OptionBase extension
- Fixed theme.ts accordion anatomy import issue
* refactor: convert rooms list to table view with responsive design
- Create RoomTable component for desktop view showing room details in columns
- Create RoomCards component for mobile/tablet responsive view
- Refactor RoomList to use table/card components based on screen size
- Display Zulip configuration, room size, and recording settings in table
- Remove unused RoomItem component
- Import Room type from API for proper typing
* refactor: extract RoomActionsMenu component to eliminate duplication
- Create RoomActionsMenu component for consistent room action menus
- Update RoomCards and RoomTable to use the new shared component
- Remove duplicated menu code from both components
* feat: add icons to TranscriptActionsMenu for consistency
- Add FaTrash icon for Delete action with red color
- Add FaArrowsRotate icon for Reprocess action
- Matches the pattern established in RoomActionsMenu
* refactor: update icons from Font Awesome to Lucide React
- Replace FaEllipsisVertical with LuMenu in menu triggers
- Replace FaLink with LuLink for copy URL buttons
- Replace FaPencil with LuPen for edit actions
- Replace FaTrash with LuTrash for delete actions
- Replace FaArrowsRotate with LuRotateCw for reprocess action
- Consistent icon library usage across all components
* refactor: little pass on the icons
* fix: lu icon
* fix: primary for button
* fix: recording page with mic selection
* fix: also fix duration
* fix: use combobox for share zulip
* fix: use proper theming for button, variant was not recognized
* fix: room actions menu
* fix: remove other variant primary left.
This commit is contained in:
GitHub
@@ -1,83 +1,182 @@
|
||||
import { extendTheme } from "@chakra-ui/react";
|
||||
import { Poppins } from "next/font/google";
|
||||
import { accordionAnatomy } from "@chakra-ui/anatomy";
|
||||
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
|
||||
import {
|
||||
createSystem,
|
||||
defaultConfig,
|
||||
defineConfig,
|
||||
defineRecipe,
|
||||
defineSlotRecipe,
|
||||
defaultSystem,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const { definePartsStyle, defineMultiStyleConfig } =
|
||||
createMultiStyleConfigHelpers(accordionAnatomy.keys);
|
||||
|
||||
const poppins = Poppins({
|
||||
subsets: ["latin"],
|
||||
weight: ["200", "400", "600"],
|
||||
display: "swap",
|
||||
});
|
||||
const custom = definePartsStyle({
|
||||
container: {
|
||||
border: "0",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "white",
|
||||
mb: 2,
|
||||
mr: 2,
|
||||
},
|
||||
panel: {
|
||||
pl: 8,
|
||||
pb: 0,
|
||||
},
|
||||
button: {
|
||||
justifyContent: "flex-start",
|
||||
pl: 2,
|
||||
const accordionSlotRecipe = defineSlotRecipe({
|
||||
slots: [
|
||||
"root",
|
||||
"container",
|
||||
"item",
|
||||
"itemTrigger",
|
||||
"itemContent",
|
||||
"itemIndicator",
|
||||
],
|
||||
base: {
|
||||
item: {
|
||||
bg: "white",
|
||||
borderRadius: "xl",
|
||||
border: "0",
|
||||
mb: "2",
|
||||
width: "full",
|
||||
},
|
||||
itemTrigger: {
|
||||
p: "2",
|
||||
cursor: "pointer",
|
||||
_hover: {
|
||||
bg: "gray.200",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const accordionTheme = defineMultiStyleConfig({
|
||||
variants: { custom },
|
||||
});
|
||||
|
||||
const linkTheme = defineStyle({
|
||||
baseStyle: {
|
||||
const linkRecipe = defineRecipe({
|
||||
className: "link",
|
||||
base: {
|
||||
textDecoration: "none",
|
||||
_hover: {
|
||||
color: "blue.500",
|
||||
textDecoration: "none",
|
||||
},
|
||||
_focus: {
|
||||
outline: "none",
|
||||
boxShadow: "none",
|
||||
},
|
||||
_focusVisible: {
|
||||
outline: "none",
|
||||
boxShadow: "none",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
plain: {
|
||||
_hover: {
|
||||
textDecoration: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const buttonRecipe = defineRecipe({
|
||||
base: {
|
||||
fontWeight: "600",
|
||||
_hover: {
|
||||
bg: "gray.200",
|
||||
},
|
||||
_focus: {
|
||||
outline: "none",
|
||||
boxShadow: "none",
|
||||
},
|
||||
_focusVisible: {
|
||||
outline: "none",
|
||||
boxShadow: "none",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
solid: {
|
||||
colorPalette: "blue",
|
||||
},
|
||||
outline: {
|
||||
_hover: {
|
||||
bg: "gray.200",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
colorPalette: "whiteAlpha",
|
||||
css: {
|
||||
bg: "whiteAlpha.500",
|
||||
color: "white",
|
||||
_hover: {
|
||||
bg: "whiteAlpha.600",
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export const colors = {
|
||||
blue: {
|
||||
primary: "#3158E2",
|
||||
500: "#3158E2",
|
||||
light: "#B1CBFF",
|
||||
200: "#B1CBFF",
|
||||
dark: "#0E1B48",
|
||||
900: "#0E1B48",
|
||||
primary: { value: "#3158E2" },
|
||||
500: { value: "#3158E2" },
|
||||
light: { value: "#B1CBFF" },
|
||||
200: { value: "#B1CBFF" },
|
||||
dark: { value: "#0E1B48" },
|
||||
900: { value: "#0E1B48" },
|
||||
},
|
||||
red: {
|
||||
primary: "#DF7070",
|
||||
500: "#DF7070",
|
||||
light: "#FBD5D5",
|
||||
200: "#FBD5D5",
|
||||
primary: { value: "#DF7070" },
|
||||
500: { value: "#DF7070" },
|
||||
light: { value: "#FBD5D5" },
|
||||
200: { value: "#FBD5D5" },
|
||||
},
|
||||
gray: {
|
||||
bg: "#F4F4F4",
|
||||
100: "#F4F4F4",
|
||||
light: "#D5D5D5",
|
||||
200: "#D5D5D5",
|
||||
primary: "#838383",
|
||||
500: "#838383",
|
||||
solid: { value: "#F4F4F4" },
|
||||
bg: { value: "#F4F4F4" },
|
||||
100: { value: "#F4F4F4" },
|
||||
light: { value: "#D5D5D5" },
|
||||
200: { value: "#D5D5D5" },
|
||||
primary: { value: "#838383" },
|
||||
500: { value: "#838383" },
|
||||
800: { value: "#1A202C" },
|
||||
},
|
||||
light: "#FFFFFF",
|
||||
dark: "#0C0D0E",
|
||||
whiteAlpha: {
|
||||
50: { value: "rgba(255, 255, 255, 0.04)" },
|
||||
100: { value: "rgba(255, 255, 255, 0.06)" },
|
||||
200: { value: "rgba(255, 255, 255, 0.08)" },
|
||||
300: { value: "rgba(255, 255, 255, 0.16)" },
|
||||
400: { value: "rgba(255, 255, 255, 0.24)" },
|
||||
500: { value: "rgba(255, 255, 255, 0.36)" },
|
||||
600: { value: "rgba(255, 255, 255, 0.48)" },
|
||||
700: { value: "rgba(255, 255, 255, 0.64)" },
|
||||
800: { value: "rgba(255, 255, 255, 0.80)" },
|
||||
900: { value: "rgba(255, 255, 255, 0.92)" },
|
||||
},
|
||||
light: { value: "#FFFFFF" },
|
||||
dark: { value: "#0C0D0E" },
|
||||
};
|
||||
|
||||
const theme = extendTheme({
|
||||
colors,
|
||||
components: {
|
||||
Accordion: accordionTheme,
|
||||
Link: linkTheme,
|
||||
},
|
||||
fonts: {
|
||||
body: poppins.style.fontFamily,
|
||||
heading: poppins.style.fontFamily,
|
||||
const config = defineConfig({
|
||||
theme: {
|
||||
tokens: {
|
||||
colors,
|
||||
fonts: {
|
||||
heading: { value: "Poppins, sans-serif" },
|
||||
body: { value: "Poppins, sans-serif" },
|
||||
},
|
||||
},
|
||||
semanticTokens: {
|
||||
colors: {
|
||||
whiteAlpha: {
|
||||
solid: { value: "{colors.whiteAlpha.500}" },
|
||||
contrast: { value: "{colors.white}" },
|
||||
fg: { value: "{colors.white}" },
|
||||
muted: { value: "{colors.whiteAlpha.100}" },
|
||||
subtle: { value: "{colors.whiteAlpha.50}" },
|
||||
emphasized: { value: "{colors.whiteAlpha.600}" },
|
||||
focusRing: { value: "{colors.whiteAlpha.500}" },
|
||||
},
|
||||
},
|
||||
},
|
||||
slotRecipes: {
|
||||
accordion: accordionSlotRecipe,
|
||||
},
|
||||
recipes: {
|
||||
link: linkRecipe,
|
||||
button: buttonRecipe,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
export const system = createSystem(defaultConfig, config);
|
||||
|
||||
export default system;
|
||||
|
||||
Reference in New Issue
Block a user