= ({
handleInputChange,
errors,
className,
- displayName,
}) => {
object ||= ("default" in schema ? schema.default : null) ?? {};
return (
@@ -126,12 +125,10 @@ const NodeDateTimeInput: FC<{
hideTime?: boolean;
}> = ({
selfKey,
- schema,
value = "",
error,
handleInputChange,
className,
- displayName,
hideDate = false,
hideTime = false,
}) => {
@@ -219,7 +216,6 @@ const NodeFileInput: FC<{
displayName: string;
}> = ({
selfKey,
- schema,
value = "",
error,
handleInputChange,
@@ -279,7 +275,7 @@ const NodeFileInput: FC<{
variant="ghost"
className="text-red-500 hover:text-red-700"
onClick={() => {
- inputRef.current && (inputRef.current!.value = "");
+ if (inputRef.current) inputRef.current.value = "";
handleInputChange(selfKey, "");
}}
>
@@ -884,13 +880,6 @@ const NodeKeyValueInput: FC<{
);
};
-// Checking if schema is type of string
-function isStringSubSchema(
- schema: BlockIOSimpleTypeSubSchema,
-): schema is BlockIOStringSubSchema {
- return "type" in schema && schema.type === "string";
-}
-
const NodeArrayInput: FC<{
nodeId: string;
selfKey: string;
@@ -1229,15 +1218,7 @@ const NodeBooleanInput: FC<{
handleInputChange: NodeObjectInputTreeProps["handleInputChange"];
className?: string;
displayName: string;
-}> = ({
- selfKey,
- schema,
- value,
- error,
- handleInputChange,
- className,
- displayName,
-}) => {
+}> = ({ selfKey, schema, value, error, handleInputChange, className }) => {
value ||= schema.default ?? false;
return (
diff --git a/autogpt_platform/frontend/src/components/onboarding/onboarding-provider.tsx b/autogpt_platform/frontend/src/components/onboarding/onboarding-provider.tsx
index 72589bc8d0..0f49bbdc75 100644
--- a/autogpt_platform/frontend/src/components/onboarding/onboarding-provider.tsx
+++ b/autogpt_platform/frontend/src/components/onboarding/onboarding-provider.tsx
@@ -21,7 +21,6 @@ import {
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import Link from "next/link";
-import { set } from "lodash";
const OnboardingContext = createContext<
| {
diff --git a/autogpt_platform/frontend/src/stories/Overview.stories.tsx b/autogpt_platform/frontend/src/components/overview.stories.tsx
similarity index 99%
rename from autogpt_platform/frontend/src/stories/Overview.stories.tsx
rename to autogpt_platform/frontend/src/components/overview.stories.tsx
index d6c70ce41d..b842b043dc 100644
--- a/autogpt_platform/frontend/src/stories/Overview.stories.tsx
+++ b/autogpt_platform/frontend/src/components/overview.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
import Image from "next/image";
function RightArrow() {
@@ -456,7 +456,6 @@ const meta: Meta = {
component: OverviewComponent,
parameters: {
layout: "fullscreen",
- controls: { disable: true },
},
};
diff --git a/autogpt_platform/frontend/src/components/profile/settings/SettingsForm.tsx b/autogpt_platform/frontend/src/components/profile/settings/SettingsForm.tsx
index fbd1202f5a..8b8ca6449a 100644
--- a/autogpt_platform/frontend/src/components/profile/settings/SettingsForm.tsx
+++ b/autogpt_platform/frontend/src/components/profile/settings/SettingsForm.tsx
@@ -20,10 +20,7 @@ import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import { updateSettings } from "@/app/(platform)/profile/(user)/settings/actions";
import { toast } from "@/components/ui/use-toast";
-import {
- NotificationPreference,
- NotificationPreferenceDTO,
-} from "@/lib/autogpt-server-api";
+import { NotificationPreferenceDTO } from "@/lib/autogpt-server-api";
const formSchema = z
.object({
diff --git a/autogpt_platform/frontend/src/components/runner-ui/RunnerOutputUI.tsx b/autogpt_platform/frontend/src/components/runner-ui/RunnerOutputUI.tsx
index e62f9e499d..755df754c2 100644
--- a/autogpt_platform/frontend/src/components/runner-ui/RunnerOutputUI.tsx
+++ b/autogpt_platform/frontend/src/components/runner-ui/RunnerOutputUI.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
import {
Sheet,
SheetContent,
diff --git a/autogpt_platform/frontend/src/components/styles/colors.ts b/autogpt_platform/frontend/src/components/styles/colors.ts
new file mode 100644
index 0000000000..1a6616e3fd
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/styles/colors.ts
@@ -0,0 +1,79 @@
+export const colors = {
+ slate: {
+ 50: "#f0f1f3",
+ 100: "#cfd4db",
+ 200: "#b8bfca",
+ 300: "#97a2b1",
+ 400: "#8390a2",
+ 500: "#64748b",
+ 600: "#5b6a7e",
+ 700: "#475263",
+ 800: "#37404c",
+ 900: "#2a313a",
+ },
+ zinc: {
+ 50: "#f4f4f5",
+ 100: "#e5e5e6",
+ 200: "#cacace",
+ 300: "#adadb3",
+ 400: "#8d8d95",
+ 500: "#71717a",
+ 600: "#65656c",
+ 700: "#505057",
+ 800: "#3e3e43",
+ 900: "#2C2C30",
+ },
+ red: {
+ 50: "#fdecec",
+ 100: "#fac5c5",
+ 200: "#f8a9a9",
+ 300: "#f48282",
+ 400: "#f26969",
+ 500: "#ef4444",
+ 600: "#d93e3e",
+ 700: "#aa3030",
+ 800: "#832525",
+ 900: "#641d1d",
+ },
+ orange: {
+ 50: "#fff3e6",
+ 100: "#ffdab0",
+ 200: "#ffc88a",
+ 300: "#feaf54",
+ 400: "#fe9f33",
+ 500: "#fe8700",
+ 600: "#e77b00",
+ 700: "#b46000",
+ 800: "#8c4a00",
+ 900: "#6b3900",
+ },
+ yellow: {
+ 50: "#fef9e6",
+ 100: "#fcebb0",
+ 200: "#fae28a",
+ 300: "#f8d554",
+ 400: "#f7cd33",
+ 500: "#f5c000",
+ 600: "#dfaf00",
+ 700: "#ae8800",
+ 800: "#876a00",
+ 900: "#675100",
+ },
+ green: {
+ 50: "#e8f6ed",
+ 100: "#b7e2c7",
+ 200: "#94d5ac",
+ 300: "#63c186",
+ 400: "#45b56e",
+ 500: "#16a34a",
+ 600: "#149443",
+ 700: "#107435",
+ 800: "#0c5a29",
+ 900: "#09441f",
+ },
+
+ // Special semantic colors
+ white: "#fefefe",
+ black: "#141414",
+ lightGrey: "#F3F4F6",
+};
diff --git a/autogpt_platform/frontend/src/stories/border-radius.stories.tsx b/autogpt_platform/frontend/src/components/tokens/border-radius.stories.tsx
similarity index 97%
rename from autogpt_platform/frontend/src/stories/border-radius.stories.tsx
rename to autogpt_platform/frontend/src/components/tokens/border-radius.stories.tsx
index 8b9620c896..213d09f246 100644
--- a/autogpt_platform/frontend/src/stories/border-radius.stories.tsx
+++ b/autogpt_platform/frontend/src/components/tokens/border-radius.stories.tsx
@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Text } from "@/components/_new/Text/Text";
-import { StoryCode } from "@/stories/helpers/StoryCode";
+import { Text } from "@/components/atoms/Text/Text";
+import type { Meta } from "@storybook/nextjs";
import { SquareArrowOutUpRight } from "lucide-react";
+import { StoryCode } from "./helpers/StoryCode";
const meta: Meta = {
- title: "Design System/ Tokens /Border Radius",
+ title: "Tokens /Border Radius",
parameters: {
layout: "fullscreen",
controls: { disable: true },
@@ -248,5 +248,3 @@ export function AllVariants() {
);
}
-
-type Story = StoryObj;
diff --git a/autogpt_platform/frontend/src/components/tokens/colors.stories.tsx b/autogpt_platform/frontend/src/components/tokens/colors.stories.tsx
new file mode 100644
index 0000000000..3b60d23b16
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/tokens/colors.stories.tsx
@@ -0,0 +1,323 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { colors } from "@/components/styles/colors";
+import type { Meta } from "@storybook/nextjs";
+import { StoryCode } from "./helpers/StoryCode";
+
+const meta: Meta = {
+ title: "Tokens /Colors",
+ parameters: {
+ layout: "fullscreen",
+ controls: { disable: true },
+ },
+};
+
+export default meta;
+
+// Helper function to convert hex to RGB
+function hexToRgb(hex: string): string {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ if (!result) return hex;
+
+ const r = parseInt(result[1], 16);
+ const g = parseInt(result[2], 16);
+ const b = parseInt(result[3], 16);
+
+ return `rgb(${r}, ${g}, ${b})`;
+}
+
+// Generate color categories from colors.ts
+const colorCategories = Object.entries(colors)
+ .filter(([key]) => !["white", "black"].includes(key))
+ .map(([colorName, colorShades]) => {
+ const descriptions: Record = {
+ slate: "Cool gray tones for modern, professional interfaces",
+ zinc: "Neutral gray scale for backgrounds and subtle elements",
+ red: "Error states, warnings, and destructive actions",
+ orange: "Warnings, notifications, and secondary call-to-actions",
+ yellow: "Highlights, cautions, and attention-grabbing elements",
+ green: "Success states, confirmations, and positive actions",
+ };
+
+ return {
+ name: colorName.charAt(0).toUpperCase() + colorName.slice(1),
+ description: descriptions[colorName] || `${colorName} color variations`,
+ colors: Object.entries(colorShades as Record).map(
+ ([shade, hex]) => ({
+ name: `${colorName}-${shade}`,
+ hex,
+ rgb: hexToRgb(hex),
+ class: `bg-${colorName}-${shade}`,
+ textClass: `text-${colorName}-${shade}`,
+ }),
+ ),
+ };
+ });
+
+// Special colors from colors.ts
+const specialColors = [
+ {
+ name: "Text",
+ description: "Primary text colors for content and typography",
+ colors: [
+ {
+ name: "text-white",
+ hex: colors.white,
+ rgb: hexToRgb(colors.white),
+ class: "text-white",
+ bgClass: "bg-white",
+ },
+ {
+ name: "text-black",
+ hex: colors.black,
+ rgb: hexToRgb(colors.black),
+ class: "text-black",
+ bgClass: "bg-black",
+ },
+ ],
+ },
+ {
+ name: "Background",
+ description: "Standard background colors for layouts and surfaces",
+ colors: [
+ {
+ name: "bg-white",
+ hex: colors.white,
+ rgb: hexToRgb(colors.white),
+ class: "bg-white",
+ textClass: "text-white",
+ },
+ {
+ name: "bg-light-grey",
+ hex: colors.lightGrey,
+ rgb: hexToRgb(colors.lightGrey),
+ class: "bg-light-grey",
+ textClass: "text-light-grey",
+ },
+ ],
+ },
+];
+
+export function AllVariants() {
+ return (
+
+ {/* Color System Documentation */}
+
+
+
+ Color Palette
+
+
+ Use only these approved colors in your components. Many are named
+ like Tailwind's default theme but override those values with
+ our custom palette.
+
+
+
+
+
+
+ How to Use
+
+
+
+
+ Use any of the approved colors combined with{" "}
+
+ tailwind classes
+
+
+
+ bg-slate-500 → background-color: {colors.slate[500]}
+
+
+
+
+
+ ⚠️ Only Use These Colors
+
+
+ These are the ONLY approved colors. Don't use other
+ Tailwind colors or arbitrary values.
+
+
+
+
+
+
+
+ Color Selection Guide
+
+
+
+ • 50-200: Light backgrounds, subtle borders
+
+
+ • 300-500: Interactive elements, primary colors
+
+
+ • 600-900: Text colors, dark backgrounds
+
+
+ • Semantic: Red for errors, green for success
+
+
+
+
+
+
+ {/* Special Colors */}
+
+
+ {specialColors.map((category) => (
+
+
+
+ {category.name}
+
+
+ {category.description}
+
+
+
+ {category.colors.map((color) => (
+
+
+
+
+ {color.name}
+
+
+ {color.class}
+
+
+
+ {color.hex}
+
+
+ {color.rgb}
+
+
+
+
+ ))}
+
+
+ ))}
+
+
+
+ {/* Color Categories */}
+
+ {colorCategories.map((category) => (
+
+
+
+ {category.name}
+
+
+ {category.description}
+
+
+
+ {category.colors.map((color) => (
+
+
+
+
+ {color.name}
+
+
+ {color.class}
+
+
+
+ {color.hex}
+
+
+ {color.rgb}
+
+
+
+
+ ))}
+
+
+ ))}
+
+
+ {/* Usage Examples */}
+
+
+
+ Usage Examples
+
+
+
+
+ Content with approved colors
+
+
+
+
+// Text colors
+
Primary heading
+
Secondary text
+
+// Semantic usage
+
Success
+
Error
+
Warning
+
+// ❌ INCORRECT - Don't use these
+
❌ Not approved
+
❌ Arbitrary values
`}
+ />
+