@twintag/twintag-form 0.5.0 → 0.6.0

package/lib/components/Input/file.tsx

@@ -4,7 +4,7 @@ import type { VariantProps } from 'tailwind-variants';
 import { useController, useFormContext } from 'react-hook-form';
 import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
 
-import { Label } from '@twintag-form/components';
+import { Label } from '@twintag/twintag-form/components';
 import { type CommonProps } from './__props';
 import { fileStyle } from './__styles';
 

package/lib/components/Input/simple.tsx

@@ -3,7 +3,7 @@ import type { VariantProps } from 'tailwind-variants';
 
 import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag-form/components';
+import { Label } from '@twintag/twintag-form/components';
 import { type CommonProps } from './__props';
 import { simpleStyle } from './__styles';
 

package/lib/components/Input/textarea.tsx

@@ -3,7 +3,7 @@ import type { VariantProps } from 'tailwind-variants';
 
 import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag-form/components';
+import { Label } from '@twintag/twintag-form/components';
 import { type CommonProps } from './__props';
 import { simpleStyle } from './__styles';
 

package/lib/components/Input/toggle.tsx

@@ -4,7 +4,7 @@ import type { VariantProps } from 'tailwind-variants';
 import { useController, useFormContext } from 'react-hook-form';
 import * as Switch from '@radix-ui/react-switch';
 
-import { Label } from '@twintag-form/components';
+import { Label } from '@twintag/twintag-form/components';
 import { type CommonProps } from './__props';
 import { toggleStyle } from './__styles';
 

package/lib/components/Label/index.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { labelStyle } from '@twintag-form/styles';
+import { labelStyle } from '@twintag/twintag-form/styles';
 
 type Props = {
   required?: boolean;

package/lib/index.tsx

@@ -3,9 +3,9 @@ import type { RawJsonComponent } from '@twintag/twintag-json-renderer/types';
 
 import { forwardRef } from 'react';
 
-import Form from '@twintag-form/components/Form';
-import Input from '@twintag-form/components/Input';
-import Category from '@twintag-form/components/Category';
+import Form from '@twintag/twintag-form//components/Form';
+import Input from '@twintag/twintag-form//components/Input';
+import Category from '@twintag/twintag-form//components/Category';
 
 import {
   TwintagJsonRenderer,
@@ -52,5 +52,5 @@ export const TwintagForm = forwardRef(
         </Form>
       </TwintagJsonRegisterProvider>
     );
-  }
+  },
 );

package/lib/styles.ts

@@ -10,9 +10,9 @@ export const containerStyle = tv({
 
 export const categoryStyle = tv({
   slots: {
-    container: 'w-full grid mt-4 first:mt-0',
+    container: 'mt-4 grid w-full first:mt-0',
     span: 'text-category-label',
-    items: 'grid mt-2 mb-4 empty:mb-0',
+    items: 'mb-4 mt-2 grid empty:mb-0',
   },
   variants: {
     variant: {},
@@ -22,10 +22,10 @@ export const categoryStyle = tv({
 export const checkboxStyle = tv({
   slots: {
     container: containerStyle({
-      className: 'flex gap-4 items-center w-full',
+      className: 'flex w-full items-center gap-4',
     }),
     checkbox:
-      'flex appearance-none items-center justify-center bg-white outline-none ring-0 border-2 border-primary focus:ring-0 focus:border-accent',
+      '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: {
@@ -45,23 +45,23 @@ export const checkboxStyle = tv({
 export const fileStyle = tv({
   slots: {
     container: containerStyle({
-      className: 'w-full block',
+      className: 'block w-full',
     }),
     span: '',
     input:
-      'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
+      'w-full cursor-pointer border-2 border-transparent ring-0 focus:ring-0',
   },
   variants: {
     variant: {
       alpha: {
         container: 'grid gap-1.5',
         input:
-          'flex items-center justify-between gap-4 rounded-md px-3 py-2 border-slate-700/10 peer-focus:border-accent',
+          '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:
-          'flex items-center justify-between gap-4 py-2 border-b-slate-700/10 peer-focus:border-b-accent',
+          'peer-focus:border-b-accent flex items-center justify-between gap-4 border-b-slate-700/10 py-2',
       },
     },
   },
@@ -77,18 +77,18 @@ export const simpleStyle = tv({
     }),
     span: '',
     input:
-      'w-full ring-0 placeholder:text-placeholder focus:ring-0 border-2 border-transparent text-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: 'rounded-md border-slate-700/10 focus:border-accent',
+        input: 'focus:border-accent rounded-md border-slate-700/10',
       },
       beta: {
         container: 'grid gap-0',
         input:
-          'px-0 focus:border-transparent focus:border-b-accent border-b-slate-700/10',
+          'focus:border-b-accent border-b-slate-700/10 px-0 focus:border-transparent',
       },
     },
   },
@@ -111,16 +111,16 @@ export const toggleStyle = tv({
       alpha: {
         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',
+          '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:
-          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+          '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:
-          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+          '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:
-          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
       },
     },
   },
@@ -130,11 +130,11 @@ export const toggleStyle = tv({
 });
 
 export const submitStyle = tv({
-  base: 'w-max max-w-full mt-2',
+  base: 'mt-2 w-max max-w-full',
   variants: {
     variant: {
-      alpha: 'bg-primary text-white px-4 py-2 rounded-md',
-      beta: 'bg-primary text-white px-4 py-2',
+      alpha: 'bg-primary rounded-md px-4 py-2 text-white',
+      beta: 'bg-primary px-4 py-2 text-white',
     },
   },
   defaultVariants: {

package/lib/webcomponent.ts

@@ -3,15 +3,15 @@ import r2wc from '@r2wc/react-to-web-component';
 
 import config from '../twind.config';
 
-import { TwintagForm } from '@twintag-form/index';
+import { TwintagForm } from '@twintag/twintag-form/index';
 
 const withTwind = install(config);
 
 const TwintagFormElement = r2wc(TwintagForm, {
-  props: {
+  props: Object.create({
     config: 'json',
     options: 'json',
-  },
+  }),
   shadow: 'open',
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",
-    "@r2wc/react-to-web-component": "^2.0.2",
+    "@r2wc/react-to-web-component": "^2.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-switch": "^1.0.2",
     "@storybook/react": "7.0.2",
@@ -28,19 +28,19 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.1",
-    "@twintag/twintag-json-renderer": "0.1.0"
+    "@twintag/twintag-json-renderer": "0.2.0"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.1",
     "@storybook/addon-actions": "^7.0.20",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react-swc": "^3.4.0",
     "eslint": "^8.38.0",
     "rollup": "^3.18.0",
     "vite-plugin-dts": "^3.0.3",
-    "tailwind-config": "0.1.0",
+    "vite": "^4.4.9",
+    "tailwind-config": "0.2.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.1.0"
+    "twintag-types": "0.2.0"
   },
   "publishConfig": {
     "access": "public"

package/tsconfig.json

@@ -3,12 +3,20 @@
   "include": ["lib", "types.d.ts", "scripts"],
   "exclude": ["dist"],
   "compilerOptions": {
-    "moduleResolution": "Bundler",
-    "declaration": true,
-    "declarationMap": false,
     "baseUrl": ".",
     "paths": {
-      "@twintag-form/*": ["./lib/*"]
+      "@twintag/twintag-form/*": ["./lib/*"]
     },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "declaration": false,
+    "declarationMap": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   }
 }

package/twind.config.ts

@@ -8,15 +8,15 @@ export default defineConfig({
   theme: {
     extend: {
       colors: {
-        primary: 'var(--clr-primary,black)',
-        accent: 'var(--clr-accent,blue)',
-        label: 'var(--clr-label,black)',
-        input: 'var(--clr-input,black)',
-        placeholder: 'var(--clr-placeholder,#94a3b8)',
-        'category-label': 'var(--clr-category-label,black)',
+        primary: 'var(--tt-clr-primary,black)',
+        accent: 'var(--tt-clr-accent,blue)',
+        label: 'var(--tt-clr-label,black)',
+        input: 'var(--tt-clr-input,black)',
+        placeholder: 'var(--tt-clr-placeholder,#94a3b8)',
+        'category-label': 'var(--tt-clr-category-label,black)',
       },
       fontFamily: {
-        'ff-text': ['var(--ff-text)', 'Helvetica', 'Arial', 'sans-serif'],
+        'ff-text': ['var(--tt-ff-text)', 'Helvetica', 'Arial', 'sans-serif'],
       },
     },
   },

package/vite.config.ts

@@ -7,7 +7,7 @@ import dts from 'vite-plugin-dts';
 export default defineConfig({
   resolve: {
     alias: {
-      '@twintag-form': resolve(__dirname, './lib'),
+      '@twintag/twintag-form': resolve(__dirname, './lib'),
     },
   },
   build: {