chore: update admin configurations (#1171)

* chore: update prettier config in admin ui - adds tailwindcss prettier plugin to sort tailwind attributes in an opinionated fashion - switches from spaces to tabs - reduces tab width to 2 - reduces print width to 80 Signed-off-by: Ryan Hopper-Lowe <[email protected]> * chore: add tailwind vscode settings to project --------- Signed-off-by: Ryan Hopper-Lowe <[email protected]>
obot-platform · Jan 9, 2025 · 1fbcf3f · 1fbcf3f
1 parent 88d7c84
commit 1fbcf3f
Show file tree

Hide file tree

Showing 307 changed files with 20,592 additions and 21,337 deletions.
diff --git a/ui/admin/.eslintrc.cjs b/ui/admin/.eslintrc.cjs
@@ -6,107 +6,107 @@
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-    root: true,
-    parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        ecmaFeatures: {
-            jsx: true,
-        },
-    },
-    env: {
-        browser: true,
-        commonjs: true,
-        es6: true,
-    },
-    ignorePatterns: ["!**/.server", "!**/.client"],
+	root: true,
+	parserOptions: {
+		ecmaVersion: "latest",
+		sourceType: "module",
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	env: {
+		browser: true,
+		commonjs: true,
+		es6: true,
+	},
+	ignorePatterns: ["!**/.server", "!**/.client"],
 
-    // Base config
-    extends: ["eslint:recommended"],
+	// Base config
+	extends: ["eslint:recommended"],
 
-    overrides: [
-        // React
-        {
-            files: ["**/*.{js,jsx,ts,tsx}"],
-            plugins: ["react", "jsx-a11y", "react-compiler"],
-            extends: [
-                "plugin:react/recommended",
-                "plugin:react/jsx-runtime",
-                "plugin:react-hooks/recommended",
-                "plugin:jsx-a11y/recommended",
-            ],
-            settings: {
-                react: {
-                    version: "detect",
-                },
-                formComponents: ["Form"],
-                linkComponents: [
-                    { name: "Link", linkAttribute: "to" },
-                    { name: "NavLink", linkAttribute: "to" },
-                ],
-                "import/resolver": {
-                    typescript: {},
-                },
-            },
-            rules: {
-                "react/prop-types": "off",
-                "react-compiler/react-compiler": "error",
-                "no-restricted-imports": [
-                    "error",
-                    {
-                        patterns: [
-                            {
-                                group: [".*"],
-                                message:
-                                    "Please use absolute imports (~/component) instead of relative imports (../../component).",
-                            },
-                        ],
-                    },
-                ],
-            },
-        },
+	overrides: [
+		// React
+		{
+			files: ["**/*.{js,jsx,ts,tsx}"],
+			plugins: ["react", "jsx-a11y", "react-compiler"],
+			extends: [
+				"plugin:react/recommended",
+				"plugin:react/jsx-runtime",
+				"plugin:react-hooks/recommended",
+				"plugin:jsx-a11y/recommended",
+			],
+			settings: {
+				react: {
+					version: "detect",
+				},
+				formComponents: ["Form"],
+				linkComponents: [
+					{ name: "Link", linkAttribute: "to" },
+					{ name: "NavLink", linkAttribute: "to" },
+				],
+				"import/resolver": {
+					typescript: {},
+				},
+			},
+			rules: {
+				"react/prop-types": "off",
+				"react-compiler/react-compiler": "error",
+				"no-restricted-imports": [
+					"error",
+					{
+						patterns: [
+							{
+								group: [".*"],
+								message:
+									"Please use absolute imports (~/component) instead of relative imports (../../component).",
+							},
+						],
+					},
+				],
+			},
+		},
 
-        // Typescript
-        {
-            files: ["**/*.{ts,tsx}"],
-            plugins: ["@typescript-eslint", "import", "prettier"],
-            parser: "@typescript-eslint/parser",
-            settings: {
-                "import/internal-regex": "^~/",
-                "import/resolver": {
-                    node: {
-                        extensions: [".ts", ".tsx"],
-                    },
-                    typescript: {
-                        alwaysTryTypes: true,
-                    },
-                },
-            },
-            extends: [
-                "plugin:@typescript-eslint/recommended",
-                "plugin:import/recommended",
-                "plugin:import/typescript",
-                "plugin:prettier/recommended",
-            ],
-            rules: {
-                "import/no-cycle": ["error"],
-                "@typescript-eslint/no-unused-vars": [
-                    "error",
-                    {
-                        argsIgnorePattern: "^_",
-                        varsIgnorePattern: "^_",
-                        caughtErrorsIgnorePattern: "^_",
-                    },
-                ],
-            },
-        },
+		// Typescript
+		{
+			files: ["**/*.{ts,tsx}"],
+			plugins: ["@typescript-eslint", "import", "prettier"],
+			parser: "@typescript-eslint/parser",
+			settings: {
+				"import/internal-regex": "^~/",
+				"import/resolver": {
+					node: {
+						extensions: [".ts", ".tsx"],
+					},
+					typescript: {
+						alwaysTryTypes: true,
+					},
+				},
+			},
+			extends: [
+				"plugin:@typescript-eslint/recommended",
+				"plugin:import/recommended",
+				"plugin:import/typescript",
+				"plugin:prettier/recommended",
+			],
+			rules: {
+				"import/no-cycle": ["error"],
+				"@typescript-eslint/no-unused-vars": [
+					"error",
+					{
+						argsIgnorePattern: "^_",
+						varsIgnorePattern: "^_",
+						caughtErrorsIgnorePattern: "^_",
+					},
+				],
+			},
+		},
 
-        // Node
-        {
-            files: [".eslintrc.cjs"],
-            env: {
-                node: true,
-            },
-        },
-    ],
+		// Node
+		{
+			files: [".eslintrc.cjs"],
+			env: {
+				node: true,
+			},
+		},
+	],
 };
diff --git a/ui/admin/.gitignore b/ui/admin/.gitignore
@@ -8,4 +8,9 @@ node_modules
 
 .react-router/
 
-coverage-ts/
+coverage-ts/
+
+# Ignore all files in .vscode except settings.json
+!.vscode
+.vscode/*
+!.vscode/settings.json
diff --git a/ui/admin/.prettierrc b/ui/admin/.prettierrc
@@ -1,13 +1,19 @@
 {
-    "plugins": ["@trivago/prettier-plugin-sort-imports"],
-    "tabWidth": 4,
-    "useTabs": false,
-    "semi": true,
-    "singleQuote": false,
-    "trailingComma": "es5",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "importOrder": ["<THIRD_PARTY_MODULES>", "^~/lib", "^~/(.*)$", "^[./]"],
-    "importOrderSeparation": true,
-    "importOrderSortSpecifiers": true
+	"plugins": [
+		"@trivago/prettier-plugin-sort-imports",
+		"prettier-plugin-tailwindcss"
+	],
+	"useTabs": true,
+	"tabWidth": 2,
+	"printWidth": 80,
+	"semi": true,
+	"singleQuote": false,
+	"trailingComma": "es5",
+	"bracketSpacing": true,
+	"jsxBracketSameLine": false,
+	"importOrder": ["<THIRD_PARTY_MODULES>", "^~/lib", "^~/(.*)$", "^[./]"],
+	"importOrderSeparation": true,
+	"importOrderSortSpecifiers": true,
+	"tailwindAttributes": ["className", "classNames"],
+	"tailwindFunctions": ["cn", "cva"]
 }
diff --git a/ui/admin/.vscode/settings.json b/ui/admin/.vscode/settings.json
@@ -0,0 +1,16 @@
+{
+	"tailwindCSS.classAttributes": [
+		"class",
+		".*Class",
+		"className",
+		".*ClassName",
+		"classNames",
+		".*ClassNames",
+		"classes",
+		".*Classes"
+	],
+	"tailwindCSS.experimental.classRegex": [
+		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+		["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+	]
+}
diff --git a/ui/admin/app/components/DarkModeToggle.tsx b/ui/admin/app/components/DarkModeToggle.tsx
@@ -6,52 +6,52 @@ import { cn } from "~/lib/utils";
 
 import { useTheme } from "~/components/theme";
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
 } from "~/components/ui/select";
 
 export function DarkModeToggle({ className = "" }: { className?: string }) {
-    const { theme, updateTheme } = useTheme();
+	const { theme, updateTheme } = useTheme();
 
-    const getIcon = (currentTheme: AppTheme) => {
-        switch (currentTheme) {
-            case AppTheme.Light:
-                return <Sun className="w-6 h-6" />;
-            case AppTheme.Dark:
-                return <Moon className="w-6 h-6" />;
-            case AppTheme.System:
-                return <Monitor className="w-6 h-6" />;
-        }
-    };
+	const getIcon = (currentTheme: AppTheme) => {
+		switch (currentTheme) {
+			case AppTheme.Light:
+				return <Sun className="h-6 w-6" />;
+			case AppTheme.Dark:
+				return <Moon className="h-6 w-6" />;
+			case AppTheme.System:
+				return <Monitor className="h-6 w-6" />;
+		}
+	};
 
-    return (
-        <Select
-            value={theme}
-            onValueChange={(value: AppTheme) => {
-                updateTheme(value);
-            }}
-        >
-            <SelectTrigger
-                className={cn(
-                    className,
-                    "w-10 h-10 p-0 justify-center ring-0 focus:ring-0 border-0 shadow-none"
-                )}
-            >
-                <SelectValue aria-label={theme}>{getIcon(theme)}</SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-                <SelectItem value={AppTheme.System}>
-                    <Monitor className="w-4 h-4 mr-2 inline-block" /> System
-                </SelectItem>
-                <SelectItem value={AppTheme.Dark}>
-                    <Moon className="w-4 h-4 mr-2 inline-block" /> Dark
-                </SelectItem>
-                <SelectItem value={AppTheme.Light}>
-                    <Sun className="w-4 h-4 mr-2 inline-block" /> Light
-                </SelectItem>
-            </SelectContent>
-        </Select>
-    );
+	return (
+		<Select
+			value={theme}
+			onValueChange={(value: AppTheme) => {
+				updateTheme(value);
+			}}
+		>
+			<SelectTrigger
+				className={cn(
+					className,
+					"h-10 w-10 justify-center border-0 p-0 shadow-none ring-0 focus:ring-0"
+				)}
+			>
+				<SelectValue aria-label={theme}>{getIcon(theme)}</SelectValue>
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value={AppTheme.System}>
+					<Monitor className="mr-2 inline-block h-4 w-4" /> System
+				</SelectItem>
+				<SelectItem value={AppTheme.Dark}>
+					<Moon className="mr-2 inline-block h-4 w-4" /> Dark
+				</SelectItem>
+				<SelectItem value={AppTheme.Light}>
+					<Sun className="mr-2 inline-block h-4 w-4" /> Light
+				</SelectItem>
+			</SelectContent>
+		</Select>
+	);
 }