diff --git a/.eslintrc.js b/.eslintrc.js index 0ece494..38a7545 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,9 @@ module.exports = { root: true, + ignorePatterns: [ + 'tailwind.config.js', + 'src/ui/components/ui/', + ], env: { browser: true, node: true, diff --git a/components.json b/components.json new file mode 100644 index 0000000..4d8dac1 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/ui/style.css", + "baseColor": "zinc", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/ui/components", + "utils": "@/ui/lib/utils" + } +} diff --git a/package.json b/package.json index 15e2a30..f979784 100644 --- a/package.json +++ b/package.json @@ -91,15 +91,21 @@ "dependencies": { "@fluentui/react-components": "^9.30.1", "@fluentui/react-icons": "^2.0.218", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", "electron-squirrel-startup": "^1.0.0", "lodash.get": "^4.4.2", "lodash.set": "^4.3.2", + "lucide-react": "^0.368.0", "mobx": "^6.10.2", "mobx-react-lite": "^4.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-intl-universal": "^2.6.21", + "react-resizable-panels": "^2.0.16", "sqlite3": "^5.1.6", + "tailwind-merge": "^2.2.2", + "tailwindcss-animate": "^1.0.7", "winston": "^3.11.0", "xml2js": "^0.6.2" }, diff --git a/scripts/prepackage.js b/scripts/prepackage.js index 5bc4038..1363725 100644 --- a/scripts/prepackage.js +++ b/scripts/prepackage.js @@ -11,6 +11,8 @@ const excludeDeps = [ 'react', 'react-dom', 'react-intl-universal', + 'lucide-react', + 'react-resizable-panels', ] fs.writeFileSync(path.join(__dirname, '../package.json'), JSON.stringify({ diff --git a/src/ui/components/ui/resizable.tsx b/src/ui/components/ui/resizable.tsx new file mode 100644 index 0000000..7dbe572 --- /dev/null +++ b/src/ui/components/ui/resizable.tsx @@ -0,0 +1,43 @@ +import { GripVertical } from "lucide-react" +import * as ResizablePrimitive from "react-resizable-panels" + +import { cn } from "@/ui/lib/utils" + +const ResizablePanelGroup = ({ + className, + ...props +}: React.ComponentProps) => ( + +) + +const ResizablePanel = ResizablePrimitive.Panel + +const ResizableHandle = ({ + withHandle, + className, + ...props +}: React.ComponentProps & { + withHandle?: boolean +}) => ( + div]:rotate-90", + className + )} + {...props} + > + {withHandle && ( +
+ +
+ )} + +) + +export { ResizablePanelGroup, ResizablePanel, ResizableHandle } diff --git a/src/ui/lib/utils.ts b/src/ui/lib/utils.ts new file mode 100644 index 0000000..d32b0fe --- /dev/null +++ b/src/ui/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from 'clsx' +import { twMerge } from 'tailwind-merge' + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/src/ui/style.css b/src/ui/style.css index 2201705..068c051 100644 --- a/src/ui/style.css +++ b/src/ui/style.css @@ -1,6 +1,80 @@ @tailwind base; +@tailwind components; @tailwind utilities; +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 10% 3.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + .draggle { -webkit-app-region: drag; -webkit-user-select: none; @@ -8,8 +82,3 @@ .undraggle { -webkit-app-region: none; } - -:root { - color-scheme: light dark; -} - diff --git a/tailwind.config.js b/tailwind.config.js index 22810ea..3cf03ec 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,74 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: ["class"], content: [ - './src/**/*.{tsx, html}', + './src/**/*.{ts,tsx,html}', ], + prefix: "", theme: { - extend: {}, + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, }, - plugins: [], + plugins: [require("tailwindcss-animate")], }