@twintag/twintag-form 1.6.1 → 1.6.2-beta.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @twintag/twintag-form
 
+## 1.6.2-beta.0
+
+### Patch Changes
+
+- fix(twintag-form): filter file types using the `accept` attribute
+
 ## 1.6.1
 
 ### Patch Changes

package/README.md

@@ -76,12 +76,13 @@ The `config` object contains the form structure. It is organized by the index of
 
 Twintag Form provides some options to customize the form:
 
-| Option          | Type              | Description                                                               |
-| --------------- | ----------------- | ------------------------------------------------------------------------- |
-| `variant`       | `default  / beta` | Variant of the form.                                                      |
-| `size`          | `base     / sm`   | Default: `base` (font-size set to 16px).                                  |
-| `resetOnSubmit` | `boolean`         | If `true`, the form will be reset after submitting. (`false` per default) |
-| `defaultValues` | `object`          | The properties are the same as the bind values in your config.            |
+| Option           | Type                 | Description                                                                                                       |
+| ---------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `variant`        | `default  / outline` | Variant of the form.                                                                                              |
+| `size`           | `base     / sm`      | Default: `base` (font-size set to 16px).                                                                          |
+| `resetOnSubmit`  | `boolean`            | If `true`, the form will be reset after submitting. (`false` per default)                                         |
+| `defaultValues`  | `object`             | The properties are the same as the bind values in your config.                                                    |
+| `acceptFileType` | `string`             | Accept file type. ([ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#accept)) |
 
 ### **Inputs**
 
@@ -89,12 +90,13 @@ Twintag Form provides some options to customize the form:
 
 Each input can be customized with the following optional options:
 
-| Option          | Type      | Description                                                  |
-| --------------- | --------- | ------------------------------------------------------------ |
-| `description`   | `string`  | Description of the input.                                    |
-| `error`         | `string`  | Error message.                                               |
-| `placeholder`   | `string`  | Placeholder of the input.                                    |
-| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default) |
+| Option          | Type      | Description                                                                                                       |
+| --------------- | --------- | ----------------------------------------------------------------------------------------------------------------- |
+| `description`   | `string`  | Description of the input.                                                                                         |
+| `error`         | `string`  | Error message.                                                                                                    |
+| `placeholder`   | `string`  | Placeholder of the input.                                                                                         |
+| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default)                                                      |
+| `accept`        | `string`  | Accept file type. ([ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#accept)) |
 
 ```json
 {
@@ -104,10 +106,7 @@ Each input can be customized with the following optional options:
     "label": "Email",
     "bind": "email",
     "options": {
-      "description": "Please enter you email",
-      "error": "The field is empty."
-      "placeholder": "Write here...",
-      "optionalField": true
+      ...
     }
   }
 }
@@ -123,7 +122,13 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "simple",
     "label": "Email",
-    "bind": "email"
+    "bind": "email",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "placeholder": "Write here...",
+      "optionalField": false
+    }
   }
 }
 ```
@@ -136,7 +141,13 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "textarea",
     "label": "Message",
-    "bind": "message"
+    "bind": "message",
+    "options": {
+      "description": "Please enter you message",
+      "error": "The field is empty."
+      "placeholder": "Write here...",
+      "optionalField": false
+    }
   }
 }
 ```
@@ -149,7 +160,13 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "file",
     "label": "File",
-    "bind": "file"
+    "bind": "file",
+    "options": {
+      "description": "Please upload an image",
+      "error": "The field is empty.",
+      "accept": "image/*",
+      "optionalField": true
+    }
   }
 }
 ```
@@ -162,7 +179,12 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "checkbox",
     "label": "Checkbox",
-    "bind": "checkbox"
+    "bind": "checkbox",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   }
 }
 ```
@@ -175,7 +197,12 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "toggle",
     "label": "Toggle",
-    "bind": "toggle"
+    "bind": "toggle",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   }
 }
 ```
@@ -188,7 +215,12 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "tri-toggle",
     "label": "Toggle with 3 states",
-    "bind": "tri-states"
+    "bind": "tri-states",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   }
 }
 ```
@@ -202,6 +234,11 @@ Each input can be customized with the following optional options:
     "subtype": "radiogroup",
     "label": "Radio Group",
     "bind": "radiogroup",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   },
   "children": [
     {

package/dev/index.css

@@ -1,32 +1,32 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --tf-label: 222.2 47.4% 11.2%;
-  --tf-category: 222.2 47.4% 11.2%;
-
-  --tf-background: 0 0% 100%;
-  --tf-foreground: 0 0% 0%;
-
-  --tf-muted: 210 40% 96.1%;
-  --tf-muted-foreground: 215.4 16.3% 46.9%;
-
-  --tf-primary:  210 40% 98%;
-  --tf-primary-foreground:  222.2 47.4% 11.2%;
-
-  --tf-accent: 222.2 47.4% 11.2%;
-  --tf-accent-foreground: 210 40% 96.1%;
-
-  --tf-destructive: 0 100% 50%;
-  --tf-destructive-foreground: 210 40% 98%;
-
-  --tf-input: 214.3 31.8% 91.4%;
-  --tf-ring: 215 20.2% 65.1%;
-
-  --tf-radius: 0.5rem;
-
-  --tf-font: 'Roboto', sans-serif;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --tf-label: 222.2 47.4% 11.2%;
+  --tf-category: 222.2 47.4% 11.2%;
+
+  --tf-background: 0 0% 100%;
+  --tf-foreground: 0 0% 0%;
+
+  --tf-muted: 210 40% 96.1%;
+  --tf-muted-foreground: 215.4 16.3% 46.9%;
+
+  --tf-primary:  210 40% 98%;
+  --tf-primary-foreground:  222.2 47.4% 11.2%;
+
+  --tf-accent: 222.2 47.4% 11.2%;
+  --tf-accent-foreground: 210 40% 96.1%;
+
+  --tf-destructive: 0 100% 50%;
+  --tf-destructive-foreground: 210 40% 98%;
+
+  --tf-input: 214.3 31.8% 91.4%;
+  --tf-ring: 215 20.2% 65.1%;
+
+  --tf-radius: 0.5rem;
+
+  --tf-font: 'Roboto', sans-serif;
+}

package/dev/main.tsx

@@ -175,6 +175,7 @@ const config = [
           options: {
             error: 'This field is required',
             description: 'This field is required',
+            accept: 'image/*',
           },
         },
       },

package/lib/components/fields/date-picker.tsx

@@ -65,7 +65,7 @@ const datePickerTriggerVariants = tv({
 
 export const DEFAULT_DATE_PICKER_VALUE = null;
 
-export const DatePicker: React.FC<Props<'input'>> = ({
+export const DatePicker: React.FC<Props<'input', 'datepicker'>> = ({
   label,
   bind,
   options,

package/lib/components/fields/file.tsx

@@ -17,9 +17,9 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_FILE_VALUE = '';
 
-export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
+export const File: FC<Props<'input', 'file'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
-  const { variant, size } = useTwintagForm();
+  const { variant, size, acceptFileType } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -63,6 +63,7 @@ export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
               }}
               id={bind}
               type='file'
+              accept={options?.accept ?? acceptFileType}
               name={field.name}
               size={size}
               variant={variant}

package/lib/components/fields/input.tsx

@@ -17,7 +17,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_INPUT_VALUE = '';
 
-export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
+export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
   const { variant, size } = useTwintagForm();

package/lib/components/fields/textarea.tsx

@@ -17,7 +17,11 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_TEXTAREA_VALUE = '';
 
-export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
+export const Textarea: FC<Props<'input', 'text'>> = ({
+  label,
+  bind,
+  options,
+}) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 

package/lib/components/provider.tsx

@@ -16,6 +16,7 @@ export const twintagFormContext = createContext<TwintagFormContext>({
   components: new Map(),
   config: [],
   resetValues: {},
+  acceptFileType: undefined,
 });
 
 export const useTwintagForm = () => {
@@ -126,13 +127,10 @@ export const TwintagFormProvider = ({
   inputs,
   components,
   config,
+  acceptFileType,
   children,
-}: {
+}: Omit<TwintagFormContext, 'config' | 'resetValues'> & {
   config: RawJsonComponent | RawJsonComponent[];
-  variant: TwintagFormContext['variant'];
-  size: TwintagFormContext['size'];
-  inputs: Inputs;
-  components: Components;
 } & WithChildren) => {
   const __config = useMemo(() => {
     if (Array.isArray(config)) {
@@ -155,6 +153,7 @@ export const TwintagFormProvider = ({
         inputs,
         components,
         resetValues,
+        acceptFileType,
       }}
     >
       {children}

package/lib/index.tsx

@@ -11,10 +11,13 @@ import { JsonRenderer } from '@twintag/twintag-form/components/renderer';
 type Props = {
   config: RawJsonComponent[];
   options?: Partial<{
-    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
-    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
-    size?: ComponentProps<typeof TwintagFormProvider>['size'];
+    defaultValues: ComponentProps<typeof TwintagForm>['defaultValues'];
+    variant: ComponentProps<typeof TwintagFormProvider>['variant'];
+    size: ComponentProps<typeof TwintagFormProvider>['size'];
     resetOnSubmit?: boolean;
+    acceptFileType?: ComponentProps<
+      typeof TwintagFormProvider
+    >['acceptFileType'];
   }>;
 };
 
@@ -27,6 +30,7 @@ export const Form = forwardRef<HTMLFormElement, Props>(
         variant={options?.variant}
         size={options?.size}
         config={config}
+        acceptFileType={options?.acceptFileType}
       >
         <TwintagForm
           ref={ref}

package/lib/types/index.ts

@@ -5,6 +5,24 @@ export type InputCompConfig = {
   component: ElementType;
 };
 
+type BaseInputOptions = Partial<{
+  description: string;
+  error: string;
+  optionalField: boolean;
+}>;
+
+type TextInputOptions = BaseInputOptions & {
+  placeholder?: string;
+};
+
+type DatePickerInputOptions = BaseInputOptions & {
+  placeholder?: string;
+};
+
+type FileInputOptions = BaseInputOptions & {
+  accept?: string;
+};
+
 type CompType = 'input' | 'item' | 'accordion' | 'category';
 type StringLiteral<T> = T extends string
   ? string extends T
@@ -21,12 +39,13 @@ type RawProps<
       bind: string;
       label?: string;
       subtype?: string;
-      options?: Partial<{
-        description: string;
-        placeholder: string;
-        error: string;
-        optionalField: boolean;
-      }>;
+      options?: TSubtype extends 'text' | 'textarea'
+        ? TextInputOptions
+        : TSubtype extends 'datepicker'
+          ? DatePickerInputOptions
+          : TSubtype extends 'file'
+            ? FileInputOptions
+            : BaseInputOptions;
     }
   : TType extends 'accordion'
     ? TSubtype extends 'item'
@@ -79,4 +98,5 @@ export type TwintagFormContext = {
   components: Map<string, ElementType>;
   config: ParsedJsonComponent[] | ParsedJsonComponent;
   resetValues: Record<string, unknown>;
+  acceptFileType?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.6.1",
+  "version": "1.6.2-beta.0",
   "author": "Twintag",
   "type": "module",
   "exports": {

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @twintag/twintag-form@1.6.1 build /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form
-> tsc && vite build
-
-vite v5.4.8 building for production...
-transforming...
-✓ 49 modules transformed.
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-computing gzip size...
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/twind.config.d.ts
-dist/webcomponent.js   27.74 kB │ gzip:  5.50 kB
-dist/index.js         135.84 kB │ gzip: 28.69 kB
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/tailwind.config.d.ts
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/dev/main.d.ts
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/vite.config.d.ts
-[vite:dts] Declaration files built in 9851ms.
-
-dist/webcomponent.cjs  18.72 kB │ gzip:  5.01 kB
-dist/index.cjs         94.92 kB │ gzip: 24.25 kB
-✓ built in 10.80s

package/dist/common/accordion.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/common/button.d.ts

@@ -1,71 +0,0 @@
-import { VariantProps, TVReturnType } from 'tailwind-variants';
-
-import * as React from 'react';
-declare const buttonVariants: TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], {
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-};
-declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps< TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], {
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>> & {
-    asChild?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };

package/dist/common/calendar.d.ts

@@ -1,139 +0,0 @@
-import { VariantProps, TVReturnType } from 'tailwind-variants';
-import { DayPicker } from 'react-day-picker';
-import type * as React from 'react';
-declare const calendarVariants: TVReturnType<{
-    variant: {
-        dropdown: {
-            caption_label: string;
-            caption_dropdowns: string[];
-        };
-    };
-    size: {
-        sm: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-        base: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-    };
-}, {
-    picker: string;
-    months: string;
-    month: string;
-    caption: string;
-    caption_dropdowns: string;
-    caption_label: string;
-    nav: string;
-    nav_button: string;
-    nav_button_previous: string;
-    nav_button_next: string;
-    table: string;
-    head_row: string;
-    head_cell: string;
-    row: string;
-    cell: string;
-    day: string;
-    day_range_end: string;
-    day_selected: string;
-    day_today: string;
-    day_outside: string;
-    day_disabled: string;
-    day_range_middle: string;
-    day_hidden: string;
-}, undefined, {
-    variant: {
-        dropdown: {
-            caption_label: string;
-            caption_dropdowns: string[];
-        };
-    };
-    size: {
-        sm: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-        base: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-    };
-}, {
-    picker: string;
-    months: string;
-    month: string;
-    caption: string;
-    caption_dropdowns: string;
-    caption_label: string;
-    nav: string;
-    nav_button: string;
-    nav_button_previous: string;
-    nav_button_next: string;
-    table: string;
-    head_row: string;
-    head_cell: string;
-    row: string;
-    cell: string;
-    day: string;
-    day_range_end: string;
-    day_selected: string;
-    day_today: string;
-    day_outside: string;
-    day_disabled: string;
-    day_range_middle: string;
-    day_hidden: string;
-}, TVReturnType<{
-    variant: {
-        dropdown: {
-            caption_label: string;
-            caption_dropdowns: string[];
-        };
-    };
-    size: {
-        sm: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-        base: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-    };
-}, {
-    picker: string;
-    months: string;
-    month: string;
-    caption: string;
-    caption_dropdowns: string;
-    caption_label: string;
-    nav: string;
-    nav_button: string;
-    nav_button_previous: string;
-    nav_button_next: string;
-    table: string;
-    head_row: string;
-    head_cell: string;
-    row: string;
-    cell: string;
-    day: string;
-    day_range_end: string;
-    day_selected: string;
-    day_today: string;
-    day_outside: string;
-    day_disabled: string;
-    day_range_middle: string;
-    day_hidden: string;
-}, undefined, unknown, unknown, undefined>>;
-export type CalendarProps = React.ComponentProps<typeof DayPicker> & VariantProps<typeof calendarVariants>;
-declare function Calendar({ size, className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Calendar {
-    var displayName: string;
-}
-export { Calendar };

package/dist/common/checkbox.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Checkbox };