@twintag/twintag-form 0.2.0 → 0.3.0

package/lib/__stories__/Form.stories.tsx

@@ -0,0 +1,38 @@
+import TwintagForm from '../index';
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof TwintagForm> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Form',
+  component: TwintagForm,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TwintagForm>;
+
+export const Example: Story = {
+  args: {
+    config: [
+      {
+        type: 'input:toggle',
+        label: 'Email',
+        bind: 'email',
+        options: { optionalField: true },
+      },
+      { type: 'input', label: 'Test', bind: 'test' },
+      { type: 'input:file', label: 'Image', bind: 'image' },
+      { type: 'input:checkbox', label: 'Checkbox', bind: 'checkbox' },
+      { type: 'input:submit', label: 'Submit' },
+    ],
+    options: {
+      variant: 'beta',
+      resetOnSubmit: true,
+    },
+  },
+};

package/lib/components/Form/index.tsx

@@ -71,7 +71,7 @@ const Form = ({ children, options }: Props) => {
   return (
     <form
       ref={formRef}
-      className='relative font-sans'
+      className='relative font-fftext'
       onSubmit={handleSubmit(onValid, onInvalid)}
     >
       <div className='grid w-auto gap-4'>

package/lib/components/Input/checkbox.tsx

@@ -5,9 +5,10 @@ import { useController } from 'react-hook-form';
 import { CheckIcon } from '@heroicons/react/24/outline';
 import * as RdxCheckbox from '@radix-ui/react-checkbox';
 
-import type { CommonProps } from '@/types';
+import type { CommonProps } from '@twintag-form/types';
 
-import { checkboxStyle } from '@/styles';
+import { Label } from '@twintag-form/components';
+import { checkboxStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof checkboxStyle>['variant']>;
 
@@ -37,12 +38,14 @@ const Checkbox = ({ useForm, label, bind, options }: Props) => {
           onChange(state);
         }}
       >
-        <RdxCheckbox.Indicator className='text-black'>
+        <RdxCheckbox.Indicator className='text-input'>
           <CheckIcon className='w-4' />
         </RdxCheckbox.Indicator>
       </RdxCheckbox.Root>
 
-      <span className='leading-none text-black'>{label as string}</span>
+      <Label className='text-label' required={!options?.optionalField}>
+        {label as string}
+      </Label>
     </label>
   );
 };

package/lib/components/Input/file.tsx

@@ -4,9 +4,10 @@ import { useMemo } from 'react';
 import { useController } from 'react-hook-form';
 import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
 
-import type { CommonProps } from '@/types';
+import type { CommonProps } from '@twintag-form/types';
 
-import { fileStyle } from '@/styles';
+import { Label } from '@twintag-form/components';
+import { fileStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof fileStyle>['variant']>;
 
@@ -29,7 +30,13 @@ const File = ({ useForm, label, bind, options }: Props) => {
 
   return (
     <label className={container()}>
-      {label ? <span className={span()}>{label as string}</span> : <></>}
+      {label ? (
+        <Label className={span()} required={!options?.optionalField}>
+          {label as string}
+        </Label>
+      ) : (
+        <></>
+      )}
 
       <input
         type='file'
@@ -40,13 +47,13 @@ const File = ({ useForm, label, bind, options }: Props) => {
             onChange(e.target.files);
           }
         }}
-        className='sr-only peer'
+        className='peer sr-only'
       />
 
       <span
         className={`${input()} ${
           value && value.length > 0
-            ? 'border-primary text-primary'
+            ? 'border-primary text-input'
             : 'border-slate-700/10 text-slate-400'
         }`}
       >

package/lib/components/Input/index.tsx

@@ -1,5 +1,3 @@
-import type { CommonProps } from '@/types';
-
 import Simple from './simple';
 import Textarea from './textarea';
 import Toggle from './toggle';
@@ -17,6 +15,8 @@ export const Inputs = new Map()
 
 type Props = {
   subtype?: string;
+  label?: string;
+  bind?: string;
 };
 
 const Input = ({ subtype = 'simple', ...rest }: Props) => {

package/lib/components/Input/simple.tsx

@@ -1,32 +1,31 @@
 import type { VariantProps } from 'tailwind-variants';
 
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import type { CommonProps } from '@/types';
+import type { CommonProps } from '@twintag-form/types';
 
-import { simpleStyle } from '@/styles';
+import { Label } from '@twintag-form/components';
+import { simpleStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
 
 const Simple = ({ useForm, label, bind, options }: Props) => {
-  const id = useId();
-
   const { container, span, input } = useMemo(() => {
     if (options?.variant) return simpleStyle({ variant: options.variant });
     return simpleStyle();
   }, []);
 
   return (
-    <div className={container()}>
+    <label className={container()}>
       {label ? (
-        <label htmlFor={id}>
-          <span className={span()}>{label as string}</span>
-        </label>
+        <Label className={span()} required={!options?.optionalField}>
+          {label as string}
+        </Label>
       ) : (
         <></>
       )}
+
       <input
-        id={id}
         type='text'
         placeholder={options?.placeholder || 'Write here...'}
         className={input()}
@@ -34,7 +33,7 @@ const Simple = ({ useForm, label, bind, options }: Props) => {
           required: options?.optionalField ? false : `${label} is required`,
         })}
       />
-    </div>
+    </label>
   );
 };
 

package/lib/components/Input/submit.tsx

@@ -2,9 +2,9 @@ import type { VariantProps } from 'tailwind-variants';
 
 import { useMemo } from 'react';
 
-import type { CommonProps } from '@/types';
+import type { CommonProps } from '@twintag-form/types';
 
-import { submitStyle } from '@/styles';
+import { submitStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof submitStyle>['variant']>;
 
@@ -15,9 +15,11 @@ const Submit = ({ label, options }: Props) => {
   }, []);
 
   return (
-    <button type='submit' className={style}>
-      {label as string}
-    </button>
+    <div className='w-full flex justify-center'>
+      <button type='submit' className={style}>
+        {label as string}
+      </button>
+    </div>
   );
 };
 

package/lib/components/Input/textarea.tsx

@@ -1,35 +1,38 @@
 import type { VariantProps } from 'tailwind-variants';
 
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import type { CommonProps } from '@/types';
+import type { CommonProps } from '@twintag-form/types';
 
-import { simpleStyle } from '@/styles';
+import { Label } from '@twintag-form/components';
+import { simpleStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
 
 const Textarea = ({ useForm, label, bind, options }: Props) => {
-  const id = useId();
-
   const { container, span, input } = useMemo(() => {
     if (options?.variant) return simpleStyle({ variant: options.variant });
     return simpleStyle();
   }, []);
 
   return (
-    <div className={container()}>
-      <label htmlFor={id}>
-        <span className={span()}>{label as string}</span>
-      </label>
+    <label className={container()}>
+      {label ? (
+        <Label className={span()} required={!options?.optionalField}>
+          {label as string}
+        </Label>
+      ) : (
+        <></>
+      )}
+
       <textarea
-        id={id}
         className={input()}
         placeholder={options?.placeholder || 'Write here...'}
         {...useForm!.register(bind as string, {
           required: options?.optionalField ? false : `${label} is required`,
         })}
       />
-    </div>
+    </label>
   );
 };
 

package/lib/components/Input/toggle.tsx

@@ -4,9 +4,10 @@ import { useMemo } from 'react';
 import { useController } from 'react-hook-form';
 import * as Switch from '@radix-ui/react-switch';
 
-import type { CommonProps } from '@/types';
+import type { CommonProps } from '@twintag-form/types';
 
-import { toggleStyle } from '@/styles';
+import { Label } from '@twintag-form/components';
+import { toggleStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof toggleStyle>['variant']>;
 
@@ -28,22 +29,26 @@ const Toggle = ({ useForm, label, bind, options }: Props) => {
   });
 
   return (
-    <div className='w-full'>
-      <label className={container()}>
-        {label ? <span className={span()}>{label as string}</span> : <></>}
-
-        <Switch.Root
-          id={bind as string}
-          checked={value}
-          className={input()}
-          onCheckedChange={(state) => {
-            onChange(state);
-          }}
-        >
-          <Switch.Thumb className={thumb()} />
-        </Switch.Root>
-      </label>
-    </div>
+    <label className={container()}>
+      {label ? (
+        <Label className={span()} required={!options?.optionalField}>
+          {label as string}
+        </Label>
+      ) : (
+        <></>
+      )}
+
+      <Switch.Root
+        id={bind as string}
+        checked={value}
+        className={input()}
+        onCheckedChange={(state) => {
+          onChange(state);
+        }}
+      >
+        <Switch.Thumb className={thumb()} />
+      </Switch.Root>
+    </label>
   );
 };
 

package/lib/components/Label/index.tsx

@@ -0,0 +1,22 @@
+import type { WithChildren } from 'twintag-types/dom';
+
+import { labelStyle } from '@twintag-form/styles';
+
+type Props = {
+  required?: boolean;
+  className?: string;
+} & WithChildren;
+
+const Label = ({ className, required, children }: Props) => {
+  const style = labelStyle({
+    className,
+  })
+
+  return (
+    <span className={style}>
+      {children} {required ? '*' : ''}
+    </span>
+  );
+};
+
+export default Label;

package/lib/components/index.tsx

@@ -0,0 +1,5 @@
+import Form from './Form';
+import Input from './Input';
+import Label from './Label';
+
+export { Form, Input, Label };

package/lib/index.tsx

@@ -2,8 +2,8 @@ import type { FC, ReactNode } from 'react';
 
 import { LabelToString } from 'twintag-types/dom';
 
-import Input from './components/Input';
-import Form from './components/Form';
+import Input from '@twintag-form/components/Input';
+import Form from '@twintag-form/components/Form';
 
 type Config = {
   key?: number;
@@ -149,7 +149,7 @@ const FormRenderer = ({ config }: RendererProps) => {
 };
 
 type Props = {
-  config: Component[];
+  config: Config[];
   options?: {
     variant?: string;
     resetOnSubmit?: boolean;

package/lib/styles.ts

@@ -1,5 +1,9 @@
 import { tv } from 'tailwind-variants';
 
+export const labelStyle = tv({
+  base: 'font-fftext text-label',
+})
+
 export const checkboxStyle = tv({
   slots: {
     container: 'flex gap-4 items-center w-full',
@@ -24,7 +28,7 @@ export const checkboxStyle = tv({
 export const fileStyle = tv({
   slots: {
     container: 'w-full block',
-    span: 'font-semibold',
+    span: '',
     input:
       'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
   },
@@ -36,7 +40,7 @@ export const fileStyle = tv({
           'flex items-center justify-between gap-4 rounded-md px-3 py-2 border-slate-700/10 peer-focus:border-accent',
       },
       beta: {
-        container: 'grid gap-1.5',
+        container: 'grid gap-0',
         input:
           'flex items-center justify-between gap-4 py-2 border-b-slate-700/10 peer-focus:border-b-accent',
       },
@@ -50,9 +54,9 @@ export const fileStyle = tv({
 export const simpleStyle = tv({
   slots: {
     container: 'w-full',
-    span: 'font-semibold',
+    span: '',
     input:
-      'w-full ring-0 placeholder:text-slate-400 focus:ring-0 border-2 border-transparent',
+      'w-full ring-0 placeholder:text-slate-400 focus:ring-0 border-2 border-transparent text-input',
   },
   variants: {
     variant: {
@@ -61,7 +65,7 @@ export const simpleStyle = tv({
         input: 'rounded-md border-slate-700/10 focus:border-accent',
       },
       beta: {
-        container: 'grid gap-1.5',
+        container: 'grid gap-0',
         input:
           'px-0 focus:border-transparent focus:border-b-accent border-b-slate-700/10',
       },
@@ -88,7 +92,7 @@ export const submitStyle = tv({
 export const toggleStyle = tv({
   slots: {
     container: 'w-full cursor-pointer',
-    span: 'font-semibold',
+    span: '',
     input: 'relative outline-none ring-2 ring-transparent',
     thumb: 'block transition-transform duration-100 will-change-transform',
   },
@@ -97,14 +101,14 @@ export const toggleStyle = tv({
       alpha: {
         container: 'flex justify-between',
         input:
-          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:ring-accent data-[state=checked]:bg-white',
+          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
         thumb:
           'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
       },
       beta: {
         container: 'flex justify-between',
         input:
-        'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
         thumb:
           'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -20,6 +20,7 @@
     "@r2wc/react-to-web-component": "^2.0.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@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",
@@ -34,11 +35,8 @@
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react-swc": "^3.0.0",
     "eslint": "^8.38.0",
     "rollup": "^3.18.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.1.0",
     "vite-plugin-dts": "^2.1.0",
     "tailwind-config": "0.0.0",
     "tsconfig": "0.0.0",

package/scripts/build.js

@@ -22,6 +22,11 @@ const webcomponentsLibrary = {
 
 const getSharedConfiguration = ({ plugins, ...library }) => {
   return defineConfig({
+    resolve: {
+      alias: {
+        '@twintag-form': resolve(__dirname, '../lib'),
+      }
+    },
     plugins: [react(), typescript(), ...plugins],
     build: {
       lib: {

package/tsconfig.json

@@ -5,7 +5,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./lib/*"]
+      "@twintag-form/*": ["./lib/*"]
     },
     "outDir": "./dist",
     "declaration": true

package/twind.config.ts

@@ -10,7 +10,12 @@ export default defineConfig({
       colors: {
         primary: 'var(--clr-primary,black)',
         accent: 'var(--clr-accent,blue)',
+        label: 'var(--clr-label,black)',
+        input: 'var(--clr-input,black)',
       },
+      fontFamily: {
+        fftext: ['var(--ff-text)', 'Helvetica', 'Arial', 'sans-serif'],
+      }
     },
   },
   presets: [