[WIP] UI Revamp Phase 1

packages/ui/package.json

@@ -15,17 +15,19 @@
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",
         "@microsoft/fetch-event-source": "^2.0.1",
-        "@mui/base": "5.0.0-beta.40",
+        "@mui/base": "5.0.0-beta.68",
         "@mui/icons-material": "5.0.3",
         "@mui/lab": "5.0.0-alpha.156",
         "@mui/material": "5.15.0",
         "@mui/x-data-grid": "6.8.0",
+        "@radix-ui/react-slot": "^1.1.1",
         "@tabler/icons-react": "^3.3.0",
         "@uiw/codemirror-theme-sublime": "^4.21.21",
         "@uiw/codemirror-theme-vscode": "^4.21.21",
         "@uiw/react-codemirror": "^4.21.21",
         "axios": "1.6.2",
-        "clsx": "^1.1.1",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^1.2.1",
         "dotenv": "^16.0.0",
         "flowise-embed": "latest",
         "flowise-embed-react": "latest",
@@ -57,6 +59,8 @@
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
         "socket.io-client": "^4.6.1",
+        "tailwind-merge": "^2.6.0",
+        "tailwindcss-animate": "^1.0.7",
         "uuid": "^9.0.1",
         "yup": "^0.32.9"
     },
@@ -91,10 +95,13 @@
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^12.8.3",
         "@vitejs/plugin-react": "^4.2.0",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
         "pretty-quick": "^3.1.3",
         "react-scripts": "^5.0.1",
         "rimraf": "^5.0.5",
         "sass": "^1.42.1",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5.4.5",
         "vite": "^5.0.2",
         "vite-plugin-pwa": "^0.17.0",

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/ui/src/components/ui/badge.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import { cva } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+    'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    {
+        variants: {
+            variant: {
+                default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+                secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+                outline: 'text-foreground'
+            }
+        },
+        defaultVariants: {
+            variant: 'default'
+        }
+    }
+)
+
+const Badge = ({ className, variant, ...props }) => {
+    return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+Badge.propTypes = {
+    className: PropTypes.string,
+    variant: PropTypes.oneOf(['default', 'secondary', 'destructive', 'outline'])
+}
+
+export { Badge, badgeVariants }

packages/ui/src/components/ui/button.jsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { Button as BaseButton } from '@mui/base'
+import { cva } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+                destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+                outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+                secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline'
+            },
+            size: {
+                default: 'h-10 px-4 py-2',
+                sm: 'h-9 rounded-md px-3',
+                lg: 'h-11 rounded-md px-8',
+                icon: 'h-10 w-10'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+)
+
+const Button = React.forwardRef(({ className, variant, size, ...props }, ref) => {
+    return <BaseButton className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+})
+Button.displayName = 'Button'
+Button.propTypes = {
+    ...BaseButton.propTypes,
+    size: PropTypes.oneOf(['default', 'sm', 'lg', 'icon']),
+    variant: PropTypes.oneOf(['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'])
+}
+
+export { Button, buttonVariants }

packages/ui/src/components/ui/card.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('rounded-lg border border-border bg-card text-card-foreground shadow-sm', className)} {...props} />
+))
+Card.displayName = 'Card'
+Card.propTypes = {
+    className: PropTypes.string
+}
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+))
+CardHeader.displayName = 'CardHeader'
+CardHeader.propTypes = {
+    className: PropTypes.string
+}
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+))
+CardTitle.displayName = 'CardTitle'
+CardTitle.propTypes = {
+    className: PropTypes.string
+}
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+CardDescription.displayName = 'CardDescription'
+CardDescription.propTypes = {
+    className: PropTypes.string
+}
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />)
+CardContent.displayName = 'CardContent'
+CardContent.propTypes = {
+    className: PropTypes.string
+}
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+))
+CardFooter.displayName = 'CardFooter'
+CardFooter.propTypes = {
+    className: PropTypes.string
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

packages/ui/src/components/ui/checkbox.jsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { Checkbox as MUICheckbox } from '@mui/material'
+import { IconCheck } from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => {
+    return (
+        <MUICheckbox
+            ref={ref}
+            icon={<span className='h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background' />}
+            checkedIcon={
+                <span className='h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background bg-primary text-primary-foreground flex items-center justify-center'>
+                    <IconCheck className='h-4 w-4' />
+                </span>
+            }
+            className={cn(
+                'p-0 hover:bg-transparent data-[state=checked]:bg-primary',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                'disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            {...props}
+        />
+    )
+})
+
+Checkbox.propTypes = {
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    id: PropTypes.string,
+    required: PropTypes.bool,
+    name: PropTypes.string,
+    value: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    indeterminate: PropTypes.bool,
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    labelPlacement: PropTypes.oneOf(['end', 'start', 'top', 'bottom'])
+}
+
+Checkbox.displayName = 'Checkbox'
+
+export { Checkbox }

packages/ui/src/components/ui/dialog.jsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { Modal } from '@mui/base/Modal'
+import { IconX } from '@tabler/icons-react'
+
+import { cn } from '@/lib/utils'
+
+const Backdrop = React.forwardRef((props, ref) => {
+    const { className, ...other } = props
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+                className
+            )}
+            {...other}
+        />
+    )
+})
+Backdrop.displayName = 'Backdrop'
+Backdrop.propTypes = {
+    className: PropTypes.string
+}
+
+const Dialog = React.forwardRef((props, ref) => {
+    const { open, onClose, children, ...other } = props
+    const customization = useSelector((state) => state.customization)
+    return (
+        <Modal
+            ref={ref}
+            open={open}
+            onClose={onClose}
+            {...other}
+            className={`fixed inset-0 z-50 flex items-center justify-center ${customization.isDarkMode ? 'dark' : ''}`}
+            slots={{
+                backdrop: Backdrop
+            }}
+        >
+            {children}
+        </Modal>
+    )
+})
+Dialog.displayName = 'Dialog'
+Dialog.propTypes = {
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    children: PropTypes.node
+}
+
+const DialogContent = React.forwardRef(({ className, children, onClose, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-card-foreground p-6 shadow-lg duration-200 sm:rounded-lg',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+            className
+        )}
+        {...props}
+    >
+        {children}
+        {onClose && (
+            <button
+                onClick={onClose}
+                className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'
+            >
+                <IconX size={16} />
+                <span className='sr-only'>Close</span>
+            </button>
+        )}
+    </div>
+))
+DialogContent.displayName = 'DialogContent'
+DialogContent.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    onClose: PropTypes.func
+}
+
+const DialogHeader = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+))
+DialogHeader.displayName = 'DialogHeader'
+DialogHeader.propTypes = {
+    className: PropTypes.string
+}
+
+const DialogFooter = React.forwardRef(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+))
+DialogFooter.displayName = 'DialogFooter'
+DialogFooter.propTypes = {
+    className: PropTypes.string
+}
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props}>
+        {props.children}
+    </h2>
+))
+DialogTitle.displayName = 'DialogTitle'
+DialogTitle.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+DialogDescription.displayName = 'DialogDescription'
+DialogDescription.propTypes = {
+    className: PropTypes.string
+}
+
+export { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription }