@twintag/twintag-form 0.6.0 → 1.0.0-beta.0

package/lib/components/Form/index.tsx

@@ -1,86 +0,0 @@
-import type { Ref } from 'react';
-import type { FieldValues } from 'react-hook-form';
-import type { WithChildren } from 'twintag-types/dom';
-
-import { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
-
-type FormRef = Ref<{
-  validate?: () => void;
-} | null>;
-
-type Props = {
-  options?: {
-    resetOnSubmit?: boolean;
-  };
-} & WithChildren;
-
-const Form = forwardRef(({ options, children }: Props, ref: FormRef) => {
-  const { formState, reset, ...methods } = useForm();
-
-  const formRef = useRef<HTMLFormElement>(null);
-
-  useImperativeHandle(ref, () => ({
-    validate: () => onValidate(),
-  }));
-
-  useEffect(() => {
-    if (formState.isSubmitSuccessful && options?.resetOnSubmit) {
-      reset();
-    }
-  }, [formState, reset]);
-
-  const onValid = (data: FieldValues) => {
-    const customSubmit = new CustomEvent('twintag-form-valid', {
-      detail: data,
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    });
-
-    formRef.current?.dispatchEvent(customSubmit);
-  };
-
-  const onInvalid = (__errors: FieldValues) => {
-    const customSubmit = new CustomEvent('twintag-form-invalid', {
-      detail: __errors,
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    });
-
-    formRef.current?.dispatchEvent(customSubmit);
-  };
-
-  const onValidate = () => {
-    methods.handleSubmit(onValid, onInvalid)();
-  };
-
-  useEffect(() => {
-    const form = formRef.current;
-
-    if (form) {
-      form.addEventListener('twintag-form-validate', onValidate);
-    }
-
-    return () => {
-      if (form) {
-        form.removeEventListener('twintag-form-validate', onValidate);
-      }
-    };
-  }, []);
-
-  return (
-    <FormProvider {...{ formState, reset, ...methods }}>
-      <form
-        ref={formRef}
-        className='font-ff-text relative'
-        onSubmit={methods.handleSubmit(onValid, onInvalid)}
-      >
-        <div className='w-full space-y-4'>{children}</div>
-      </form>
-    </FormProvider>
-  );
-});
-
-export default Form;

package/lib/components/Input/__props.ts

@@ -1,10 +0,0 @@
-export type CommonProps<TVariant> = {
-  label: string;
-  bind: string;
-  checked?: boolean;
-  options?: {
-    variant?: TVariant;
-    placeholder?: string;
-    optionalField?: boolean;
-  };
-};

package/lib/components/Input/__styles.ts

@@ -1,132 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const labelStyle = tv({
-  base: 'text-label',
-});
-
-export const containerStyle = tv({
-  base: '',
-});
-
-export const checkboxStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'flex w-full items-center gap-4',
-    }),
-    checkbox:
-      'border-primary focus:border-accent flex appearance-none items-center justify-center border-2 bg-white outline-none ring-0 focus:ring-0',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        checkbox: 'h-5 w-5 rounded',
-      },
-      beta: {
-        checkbox: 'h-5 w-5',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const fileStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'block w-full',
-    }),
-    span: '',
-    input:
-      'w-full cursor-pointer border-2 border-transparent ring-0 focus:ring-0',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        container: 'grid gap-1.5',
-        input:
-          'peer-focus:border-accent flex items-center justify-between gap-4 rounded-md border-slate-700/10 px-3 py-2',
-      },
-      beta: {
-        container: 'grid gap-0',
-        input:
-          'peer-focus:border-b-accent flex items-center justify-between gap-4 border-b-slate-700/10 py-2',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const simpleStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'w-full',
-    }),
-    span: '',
-    input:
-      'placeholder:text-placeholder text-input w-full border-2 border-transparent ring-0 focus:ring-0',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        container: 'grid gap-1.5',
-        input: 'focus:border-accent rounded-md border-slate-700/10',
-      },
-      beta: {
-        container: 'grid gap-0',
-        input:
-          'focus:border-b-accent border-b-slate-700/10 px-0 focus:border-transparent',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const toggleStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'w-full cursor-pointer',
-    }),
-    span: '',
-    input: 'relative outline-none ring-2 ring-transparent',
-    thumb: 'block transition-transform duration-100 will-change-transform',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        container: 'flex justify-between',
-        input:
-          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
-        thumb:
-          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
-      },
-      beta: {
-        container: 'flex justify-between',
-        input:
-          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
-        thumb:
-          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const submitStyle = tv({
-  base: 'mt-2 w-max max-w-full',
-  variants: {
-    variant: {
-      alpha: 'bg-primary rounded-md px-4 py-2 text-white',
-      beta: 'bg-primary px-4 py-2 text-white',
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});

package/lib/components/Label/index.tsx

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

package/lib/styles.ts

@@ -1,143 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const labelStyle = tv({
-  base: 'text-label',
-});
-
-export const containerStyle = tv({
-  base: 'my-2',
-});
-
-export const categoryStyle = tv({
-  slots: {
-    container: 'mt-4 grid w-full first:mt-0',
-    span: 'text-category-label',
-    items: 'mb-4 mt-2 grid empty:mb-0',
-  },
-  variants: {
-    variant: {},
-  },
-});
-
-export const checkboxStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'flex w-full items-center gap-4',
-    }),
-    checkbox:
-      'border-primary focus:border-accent flex appearance-none items-center justify-center border-2 bg-white outline-none ring-0 focus:ring-0',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        checkbox: 'h-5 w-5 rounded',
-      },
-      beta: {
-        checkbox: 'h-5 w-5',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const fileStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'block w-full',
-    }),
-    span: '',
-    input:
-      'w-full cursor-pointer border-2 border-transparent ring-0 focus:ring-0',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        container: 'grid gap-1.5',
-        input:
-          'peer-focus:border-accent flex items-center justify-between gap-4 rounded-md border-slate-700/10 px-3 py-2',
-      },
-      beta: {
-        container: 'grid gap-0',
-        input:
-          'peer-focus:border-b-accent flex items-center justify-between gap-4 border-b-slate-700/10 py-2',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const simpleStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'w-full',
-    }),
-    span: '',
-    input:
-      'placeholder:text-placeholder text-input w-full border-2 border-transparent ring-0 focus:ring-0',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        container: 'grid gap-1.5',
-        input: 'focus:border-accent rounded-md border-slate-700/10',
-      },
-      beta: {
-        container: 'grid gap-0',
-        input:
-          'focus:border-b-accent border-b-slate-700/10 px-0 focus:border-transparent',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const toggleStyle = tv({
-  slots: {
-    container: containerStyle({
-      className: 'w-full cursor-pointer',
-    }),
-    span: '',
-    input: 'relative outline-none ring-2 ring-transparent',
-    thumb: 'block transition-transform duration-100 will-change-transform',
-  },
-  variants: {
-    variant: {
-      alpha: {
-        container: 'flex justify-between',
-        input:
-          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
-        thumb:
-          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
-      },
-      beta: {
-        container: 'flex justify-between',
-        input:
-          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
-        thumb:
-          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});
-
-export const submitStyle = tv({
-  base: 'mt-2 w-max max-w-full',
-  variants: {
-    variant: {
-      alpha: 'bg-primary rounded-md px-4 py-2 text-white',
-      beta: 'bg-primary px-4 py-2 text-white',
-    },
-  },
-  defaultVariants: {
-    variant: 'alpha',
-  },
-});

package/tailwind.config.cjs

@@ -1,8 +0,0 @@
-// Added to get Tailwind CSS IntelliSense working
-const sharedConfig = require('tailwind-config/tailwind.config.js');
-
-module.exports = {
-  ...sharedConfig,
-  content: ['./lib/**/*.{ts,tsx}', './index.html'],
-  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
-};