feat: adiciona parametros tags padrao

bearkfear · Dec 9, 2024 · 693ff7f · 693ff7f
1 parent fd6f0df
commit 693ff7f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/packages/formbuilder/lib/model/field-settings-by-type.ts b/packages/formbuilder/lib/model/field-settings-by-type.ts
@@ -60,6 +60,7 @@ export type FieldSettingsByType =
 				| "success"
 				| "disabled";
 			delimiter?: Delimiter;
+			defaultTags?: string[];
 	  }
 	| {
 			type: "select";

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@4bits/ui",
-	"version": "1.14.55",
+	"version": "1.14.56",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/esm/index.js",

diff --git a/packages/ui/src/components/ui/form/builder/form-control.tsx b/packages/ui/src/components/ui/form/builder/form-control.tsx
@@ -62,6 +62,7 @@ export function FormControl<
         delimiter={props.fieldConfig.delimiter}
         variant={props.fieldConfig.variant}
         disabledTags={props.fieldConfig.disabledTags}
+        defaultTags={props.fieldConfig.defaultTags}
       />
     );
   }

diff --git a/packages/ui/src/components/ui/form/input-tag.tsx b/packages/ui/src/components/ui/form/input-tag.tsx
@@ -24,8 +24,8 @@ export const tagsVariants = cva("bg-red-10 dark:bg-red", {
     body: {
       default:
         "bg-gray-3 dark:bg-graydark-5 text-gray-12 dark:text-graydark-12",
-      error: "bg-red-10 dark:bg-reddark-10 text-gray-2 dark:text-graydark-12",
-      info: "bg-blue-10 dark:bg-bluedark-10 text-gray-2 dark:text-graydark-12",
+      error: "bg-red-8 dark:bg-reddark-8 text-gray-2 dark:text-graydark-12",
+      info: "bg-blue-8 dark:bg-bluedark-8 text-gray-2 dark:text-graydark-12",
       warning:
         "bg-yellow-10 dark:bg-yellowdark-10 text-gray-12 dark:text-graydark-2",
       success:
@@ -37,8 +37,8 @@ export const tagsVariants = cva("bg-red-10 dark:bg-red", {
       default:
         "bg-gray-5 dark:bg-graydark-8 text-gray-12 dark:text-graydark-12",
       error:
-        "bg-red-8 dark:bg-reddark-8 text-gray-2 dark:text-graydark-12 hover:bg-red-7 dark:hover:bg-reddark-7",
-      info: "bg-blue-8 dark:bg-bluedark-8 text-gray-2 dark:text-graydark-12 hover:bg-blue-7 dark:hover:bg-bluedark-7",
+        "bg-red-10 dark:bg-reddark-10 text-gray-2 dark:text-graydark-12 hover:bg-red-7 dark:hover:bg-reddark-9",
+      info: "bg-blue-10 dark:bg-bluedark-10 text-gray-2 dark:text-graydark-12 hover:bg-blue-7 dark:hover:bg-bluedark-9",
       warning:
         "bg-yellow-8 text-gray-12 dark:text-graydark-2 hover:bg-yellow-7",
       success:
@@ -61,6 +61,7 @@ export interface InputProps
   disabledTags?: string[];
   variant?: tagVariant;
   delimiter?: Delimiter;
+  defaultTags?: string[];
 }
 
 const InputTag = React.forwardRef<HTMLInputElement, InputProps>(
@@ -73,6 +74,7 @@ const InputTag = React.forwardRef<HTMLInputElement, InputProps>(
       disabledTags = [],
       variant = "default",
       delimiter,
+      defaultTags,
       ...props
     },
     ref
@@ -130,6 +132,16 @@ const InputTag = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div className="flex w-full min-h-8 items-center p-1 flex-wrap gap-1 rounded border border-gray-6 dark:border-graydark-6 bg-gray-1 dark:bg-graydark-1 text-xs ring-offset-transparent file:border-0 file:bg-transparent file:text-xs file:font-medium placeholder:text-gray-11 dark:placeholder:text-graydark-11 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-7 dark:focus-visible:ring-bluedark-7 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-black dark:text-white">
+        {defaultTags?.map((tag, index) => (
+          <Tag
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            key={tag + index}
+            value={tag}
+            disabled={true}
+            variant={variant}
+            onRemove={() => {}}
+          />
+        ))}
         {value?.map((tag, index) => (
           <Tag
             // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>

diff --git a/packages/ui/src/stories/form/form-item.stories.tsx b/packages/ui/src/stories/form/form-item.stories.tsx
@@ -912,6 +912,8 @@ export const Tag = () => {
             size: 12,
             placeholder: "Crie uma nova tag",
             helperText: "Digite um nome para a tag e pressione enter",
+            variant: "info",
+            defaultTags: ["/", "tag", "/", "padrão", "/"],
           },
         ]}
       />