ai-space/workflow-builder
3
0
Fork 0
mirror of https://github.com/Nikhil-Doye/workflow-builder.git synced 2026-07-22 02:01:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update dependencies and enhance Tailwind CSS configuration

Browse Source 
- Added new dependencies: @radix-ui/react-slot, class-variance-authority, tailwind-merge, and tailwindcss-animate to improve UI components and styling.
- Updated Tailwind CSS configuration to include additional content paths for better utility generation.
- Introduced custom CSS variables for theming and improved button component for consistent styling across the application.
This commit is contained in:
Nikhil-Doye
2025-10-19 11:54:08 -04:00
parent aa733a9dea
commit 05f72be20e
7 changed files with 203 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+77
View File
@@ -9,11 +9,13 @@
"version": "1.0.0",
"dependencies": {
"@mendable/firecrawl-js": "^4.4.0",
"@radix-ui/react-slot": "^1.2.3",
"@types/node": "^16.18.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@types/uuid": "^9.0.2",
"autoprefixer": "^10.4.14",
"class-variance-authority": "^0.7.1",
"clsx": "^1.2.1",
"lucide-react": "^0.263.1",
"openai": "^6.3.0",
@@ -23,7 +25,9 @@
"react-hot-toast": "^2.4.1",
"react-scripts": "5.0.1",
"reactflow": "^11.10.1",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^3.3.0",
"tailwindcss-animate": "^1.0.7",
"typescript": "^4.9.0",
"uuid": "^9.0.0",
"zustand": "^4.4.1"
@@ -3092,6 +3096,39 @@
}
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@reactflow/background": {
"version": "11.3.14",
"resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
@@ -5950,6 +5987,27 @@
"integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==",
"license": "MIT"
},
"node_modules/class-variance-authority": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
"license": "Apache-2.0",
"dependencies": {
"clsx": "^2.1.1"
},
"funding": {
"url": "https://polar.sh/cva"
}
},
"node_modules/class-variance-authority/node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/classcat": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
@@ -16318,6 +16376,16 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
"license": "MIT"
},
"node_modules/tailwind-merge": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
"integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwindcss": {
"version": "3.4.18",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
@@ -16355,6 +16423,15 @@
"node": ">=14.0.0"
}
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/tailwindcss/node_modules/lilconfig": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
package.json
+4
View File
@@ -5,11 +5,13 @@
"private": true,
"dependencies": {
"@mendable/firecrawl-js": "^4.4.0",
"@radix-ui/react-slot": "^1.2.3",
"@types/node": "^16.18.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@types/uuid": "^9.0.2",
"autoprefixer": "^10.4.14",
"class-variance-authority": "^0.7.1",
"clsx": "^1.2.1",
"lucide-react": "^0.263.1",
"openai": "^6.3.0",
@@ -19,7 +21,9 @@
"react-hot-toast": "^2.4.1",
"react-scripts": "5.0.1",
"reactflow": "^11.10.1",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^3.3.0",
"tailwindcss-animate": "^1.0.7",
"typescript": "^4.9.0",
"uuid": "^9.0.0",
"zustand": "^4.4.1"
src/components/ApiKeysSettings.tsx
+8 -13
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { X, Key, CheckCircle, AlertCircle, Eye, EyeOff } from "lucide-react";
import toast from "react-hot-toast";
import { Button } from "./ui/button";
interface ApiKeysSettingsProps {
onClose: () => void;
@@ -307,26 +308,20 @@ export const ApiKeysSettings: React.FC<ApiKeysSettingsProps> = ({
</div>
<div className="flex justify-between items-center p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0">
<button
onClick={handleClear}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
>
<Button onClick={handleClear} variant="outline" className="text-sm">
Clear All
</button>
</Button>
<div className="flex space-x-3">
<button
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
>
<Button onClick={onClose} variant="secondary" className="text-sm">
Cancel
</button>
<button
</Button>
<Button
onClick={handleSave}
disabled={isLoading}
className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="text-sm"
>
{isLoading ? "Saving..." : "Save API Keys"}
</button>
</Button>
</div>
</div>
</div>
src/components/ui/button.tsx
+53
View File
@@ -0,0 +1,53 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center 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",
{
variants: {
variant: {
default: "bg-gray-600 text-white hover:bg-gray-700",
destructive: "bg-red-600 text-white hover:bg-red-700",
outline:
"border border-input bg-transparent hover:bg-gray-50 text-gray-700",
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
ghost: "hover:bg-gray-100",
link: "text-blue-600 underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };
src/index.css
+23
View File
@@ -3,6 +3,29 @@
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
}
* {
@apply border-gray-200;
}
src/lib/utils.ts
+6
View File
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
tailwind.config.js
+32 -2
View File
@@ -1,9 +1,39 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
content: ["./src/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-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))",
},
// keep existing custom palettes
primary: {
50: "#eff6ff",
100: "#dbeafe",
@@ -55,5 +85,5 @@ module.exports = {
},
},
},
plugins: [],
plugins: [require("tailwindcss-animate")],
};