@twintag/twintag-form 1.4.1 → 1.6.0

package/lib/common/calendar.tsx

@@ -1,6 +1,6 @@
+import type * as React from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 import { tv } from 'tailwind-variants';

package/lib/common/form.tsx

@@ -70,7 +70,7 @@ const formItemVariants = tv({
   variants: {
     variant: {
       default: 'space-y-2',
-      beta: 'space-y-1',
+      outline: 'space-y-1',
     },
   },
   defaultVariants: {

package/lib/common/input.tsx

@@ -18,7 +18,7 @@ const inputVariants = tv({
         input:
           'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       },
-      beta: {
+      outline: {
         root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
         input: 'border-b px-1',
       },

package/lib/common/textarea.tsx

@@ -17,7 +17,7 @@ const textareaVariants = tv({
         textarea:
           'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       },
-      beta: {
+      outline: {
         root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
         textarea: 'border-b px-1',
       },

package/lib/components/containers/accordion.tsx

@@ -1,7 +1,7 @@
+import type { FC } from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { type FC } from 'react';
 import { tv } from 'tailwind-variants';
 
 import {
@@ -24,7 +24,7 @@ const accordionRootVariants = tv({
   variants: {
     variant: {
       default: 'rounded-md',
-      beta: 'rounded-none',
+      outline: 'rounded-none',
     },
   },
   defaultVariants: {
@@ -66,7 +66,7 @@ const accordionItemVariants = tv({
       default: {
         trigger: 'font-medium',
       },
-      beta: {
+      outline: {
         trigger: '',
       },
     },

package/lib/components/containers/category.tsx

@@ -16,7 +16,7 @@ const categoryStyle = tv({
       default: {
         heading: 'font-medium',
       },
-      beta: {
+      outline: {
         heading: 'font-normal',
       },
     },

package/lib/components/fields/checkbox.tsx

@@ -29,7 +29,7 @@ export const Checkbox: FC<Props<'input'>> = ({ label, bind, options }) => {
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field }) => (
         <FormItem variant={variant} className='pt-1.5'>

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

@@ -1,6 +1,6 @@
+import type * as React from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 
-import * as React from 'react';
 import { format } from 'date-fns';
 import { AsteriskIcon, Calendar as CalendarIcon } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
@@ -33,7 +33,7 @@ const datePickerTriggerVariants = tv({
       default: {
         button: 'px-3',
       },
-      beta: {
+      outline: {
         button:
           'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-muted-foreground',
       },
@@ -83,7 +83,7 @@ export const DatePicker: React.FC<Props<'input'>> = ({
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field }) => (
         <FormItem
@@ -137,7 +137,7 @@ export const DatePicker: React.FC<Props<'input'>> = ({
                 mode='single'
                 size={size}
                 selected={
-                  !isNaN(new Date(field.value as Date).getTime())
+                  !Number.isNaN(new Date(field.value as Date).getTime())
                     ? new Date(field.value as Date)
                     : undefined
                 }

package/lib/components/fields/file.tsx

@@ -29,7 +29,7 @@ export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field, formState }) => (
         <FormItem variant={variant}>

package/lib/components/fields/input.tsx

@@ -30,7 +30,7 @@ export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field }) => (
         <FormItem variant={variant}>

package/lib/components/fields/radiogroup.tsx

@@ -36,7 +36,7 @@ export const RadioGroup: FC<
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field }) => (
         <FormItem className='space-y-3'>
@@ -82,7 +82,7 @@ export const RadioGroup: FC<
                   );
                 }
 
-                return <></>;
+                return null;
               })}
             </CommonRadioGroup>
           </FormControl>

package/lib/components/fields/textarea.tsx

@@ -29,7 +29,7 @@ export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field }) => (
         <FormItem variant={variant}>

package/lib/components/fields/toggle.tsx

@@ -29,7 +29,7 @@ export const Toggle: FC<Props<'input'>> = ({ label, bind, options }) => {
       control={control}
       name={bind}
       rules={{
-        required: isOptional ? false : options?.error ?? true,
+        required: isOptional ? false : (options?.error ?? true),
       }}
       render={({ field }) => (
         <FormItem variant={variant}>

package/lib/types/index.ts

@@ -73,7 +73,7 @@ export type Props<
 };
 
 export type TwintagFormContext = {
-  variant?: 'default' | 'beta';
+  variant?: 'default' | 'outline';
   size?: 'base' | 'sm';
   inputs: Map<string, InputCompConfig>;
   components: Map<string, ElementType>;

package/lib/utils/data.ts

@@ -6,16 +6,18 @@ type Items = (Props<'input'> & {
 export const getBindSetFromItems = (items: Items): Set<string> => {
   const binds = new Set<string>();
 
-  items.forEach((item) => {
+  for (const item of items) {
     if (item.bind) {
       binds.add(item.bind);
     }
 
     if (item.items) {
       const subBinds = getBindSetFromItems(item.items as unknown as Items);
-      subBinds.forEach((bind) => binds.add(bind));
+      for (const bind of subBinds) {
+        binds.add(bind);
+      }
     }
-  });
+  }
 
   return binds;
 };

package/lib/utils/string.ts

@@ -1,8 +1,8 @@
 export const camelize = (str: string) => {
   return str
-    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
-      return index === 0 ? word.toLowerCase() : word.toUpperCase();
-    })
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) =>
+      index === 0 ? word.toLowerCase() : word.toUpperCase(),
+    )
     .replace(/\s+/g, '');
 };
 

package/lib/webcomponent.ts

@@ -8,7 +8,6 @@ import config from '../twind.config';
 const withTwind = install(config);
 
 const TwintagFormElement = r2wc(Form, {
-  // @ts-expect-error: ts limitation
   props: {
     config: 'json',
     options: 'json',

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/twintag-form.react.js",
-      "types": "./dist/react.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./webcomponent": {
-      "import": "./dist/twintag-form.webcomponent.js",
-      "types": "./dist/webcomponent.d.ts"
+      "types": "./dist/webcomponent.d.ts",
+      "import": "./dist/webcomponent.js",
+      "require": "./dist/webcomponent.cjs"
     }
   },
   "dependencies": {
@@ -22,12 +24,9 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.2",
-    "@storybook/react": "7.0.2",
     "@twind/core": "^1.1.3",
     "@twind/preset-autoprefix": "^1.0.7",
     "@twind/preset-tailwind": "^1.1.4",
@@ -46,12 +45,10 @@
     "@twind/with-react": "^1.1.3",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "tailwindcss": "^3.3.6",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1",
-    "eslint-config-custom": "1.0.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.2.0"
+    "twintag-types": "0.4.0"
   },
   "publishConfig": {
     "access": "public"
@@ -59,7 +56,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext .ts,.tsx",
     "format": "prettier --write \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore",
     "format:check": "prettier --check \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore"
   }

package/tailwind.config.ts

@@ -34,8 +34,8 @@ const config = {
         ring: 'hsl(var(--tf-ring) / <alpha-value>)',
       },
       borderRadius: {
-        lg: `var(--tf-radius)`,
-        md: `calc(var(--tf-radius) - 2px)`,
+        lg: 'var(--tf-radius)',
+        md: 'calc(var(--tf-radius) - 2px)',
         sm: 'calc(var(--tf-radius) - 4px)',
       },
       fontFamily: {

package/tsconfig.json

@@ -1,16 +1,15 @@
 {
   "extends": "tsconfig/vite.json",
   "include": [
-    ".eslintrc.cjs",
-    "prettier.config.mjs",
     "lib",
     "dev",
     "scripts",
     "types.d.ts",
     "tailwind.config.ts",
+    "twind.config.ts",
     "vite.config.ts"
   ],
-  "exclude": ["dist", "build", "node_modules"],
+  "exclude": ["dist", "build", "node_modules", "prettier.config.mjs"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
@@ -19,8 +18,10 @@
 
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "declaration": false,
+    "declaration": true,
     "declarationMap": false,
+    "moduleDetection": "force",
+    "isolatedModules": true,
 
     /* Linting */
     "strict": true,

package/vite.config.ts

@@ -1,8 +1,21 @@
 import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'pathe';
+import { dirname, resolve } from 'pathe';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
+import { dependencies, devDependencies } from './package.json';
+
+export const __dirname = dirname(new URL(import.meta.url).pathname);
+
+const externalPackages = [
+  ...Object.keys(dependencies || {}),
+  ...Object.keys(devDependencies || {}),
+].filter((packageName) => packageName !== 'twintag-types');
+
+const regexesOfPackages = externalPackages.map(
+  (packageName) => new RegExp(`^${packageName}(/.*)?`),
+);
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -14,21 +27,17 @@ export default defineConfig({
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: {
-        react: resolve(__dirname, './lib/index.tsx'),
+        index: resolve(__dirname, './lib/index.tsx'),
         webcomponent: resolve(__dirname, './lib/webcomponent.ts'),
       },
-      name: 'twintag-form',
-      formats: ['es'],
-      // the proper extensions will be added
-      fileName: (_, entryName) => `twintag-form.${entryName}.js`,
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['react', 'react-dom'],
+      external: regexesOfPackages,
+      preserveEntrySignatures: 'strict',
       output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
+        preserveModules: false,
         globals: {
           react: 'React',
         },
@@ -41,7 +50,6 @@ export default defineConfig({
       entryRoot: resolve(__dirname, 'lib'),
       insertTypesEntry: true,
       staticImport: true,
-      exclude: ['**/__tests__/**', '**/__stories__/**'],
     }),
   ],
 });

package/.eslintrc.cjs

@@ -1,9 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['custom'],
-  parserOptions: {
-    project: 'tsconfig.json',
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-  },
-};

package/dist/common/scroll-area.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ScrollArea, ScrollBar };

package/dist/common/select.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-declare const Select: React.FC<SelectPrimitive.SelectProps>;
-declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/react.d.ts

@@ -1 +0,0 @@
-export * from './index'