@twintag/twintag-form 0.1.0

package/lib/styles.ts

@@ -0,0 +1,116 @@
+import { tv } from 'tailwind-variants';
+
+export const checkboxStyle = tv({
+  slots: {
+    container: 'flex gap-4 items-center w-full',
+    checkbox:
+      'flex appearance-none items-center justify-center bg-white outline-none ring-0 border-2 border-primary focus:ring-0 focus:border-accent',
+  },
+  variants: {
+    variant: {
+      alpha: {
+        checkbox: 'h-5 w-5 rounded',
+      },
+      beta: {
+        checkbox: 'h-5 w-5',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const fileStyle = tv({
+  slots: {
+    container: 'w-full block',
+    span: 'font-semibold',
+    input:
+      'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
+  },
+  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',
+      },
+      beta: {
+        container: 'grid gap-1.5',
+        input:
+          'flex items-center justify-between gap-4 py-2 border-b-slate-700/10 peer-focus:border-b-accent',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const simpleStyle = tv({
+  slots: {
+    container: 'w-full',
+    span: 'font-semibold',
+    input:
+      'w-full ring-0 placeholder:text-slate-400 focus:ring-0 border-2 border-transparent',
+  },
+  variants: {
+    variant: {
+      alpha: {
+        container: 'grid gap-1.5',
+        input: 'rounded-md border-slate-700/10 focus:border-accent',
+      },
+      beta: {
+        container: 'grid gap-1.5',
+        input:
+          'px-0 focus:border-transparent focus:border-b-accent border-b-slate-700/10',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const submitStyle = tv({
+  base: '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',
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const toggleStyle = tv({
+  slots: {
+    container: 'w-full cursor-pointer',
+    span: 'font-semibold',
+    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:
+          'h-6 w-9 rounded-full bg-primary border border-black ring-2 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',
+        thumb:
+          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});

package/lib/types/index.ts

@@ -0,0 +1,16 @@
+import type { UseFormRegister, Control } from 'react-hook-form';
+import type { Label } from 'twintag-types/dom';
+
+export type CommonProps<TVariant> = {
+  label: Label;
+  bind?: Label;
+  useForm?: {
+    register: UseFormRegister<any>;
+    control: Control;
+  };
+  checked?: boolean;
+  options?: {
+    variant?: TVariant;
+    optionalField?: boolean;
+  };
+};

package/lib/webcomponent.ts

@@ -0,0 +1,20 @@
+import install from '@twind/with-web-components';
+import r2wc from '@r2wc/react-to-web-component';
+
+import config from '../twind.config';
+
+import TwintagForm from './index';
+
+const withTwind = install(config);
+
+const TwintagFormElement = r2wc(TwintagForm, {
+  props: {
+    config: 'json',
+    options: 'json',
+  },
+  shadow: 'open',
+});
+
+class TwindElement extends withTwind(TwintagFormElement) {}
+
+customElements.define('twintag-form', TwindElement);

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@twintag/twintag-form",
+  "version": "0.1.0",
+  "author": "Twintag",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./webcomponent": {
+      "import": "./dist/webcomponent.es.js",
+      "require": "./dist/webcomponent.umd.js",
+      "types": "./dist/webcomponent.d.ts"
+    }
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.16",
+    "@r2wc/react-to-web-component": "^2.0.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-switch": "^1.0.2",
+    "@twind/core": "^1.1.3",
+    "@twind/preset-autoprefix": "^1.0.7",
+    "@twind/preset-tailwind": "^1.1.4",
+    "@twind/preset-tailwind-forms": "^1.1.2",
+    "@twind/preset-typography": "^1.0.7",
+    "@twind/with-web-components": "^1.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.1"
+  },
+  "devDependencies": {
+    "@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",
+    "tsconfig": "0.0.0",
+    "tailwind-config": "0.0.0",
+    "twintag-types": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && node ./scripts/build.js",
+    "lint": "eslint lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  }
+}

package/scripts/build.js

@@ -0,0 +1,55 @@
+import { resolve, dirname } from "pathe";
+import { fileURLToPath } from 'url';
+import { build, defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import typescript from "@rollup/plugin-typescript";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const reactComponentLibrary = {
+  plugins: [],
+  entry: resolve(__dirname, "../lib/index.tsx"),
+  fileName: (format) => `index.${format}.js`,
+  name: "index",
+};
+
+const webcomponentsLibrary = {
+  plugins: [],
+  entry: resolve(__dirname, "../lib/webcomponent.ts"),
+  fileName: (format) => `webcomponent.${format}.js`,
+  name: "webcomponent",
+};
+
+const getSharedConfiguration = ({ plugins, ...library }) => {
+  return defineConfig({
+    plugins: [react(), typescript(), ...plugins],
+    build: {
+      lib: {
+        formats: ["es", "umd"],
+        ...library,
+      },
+      rollupOptions: {
+        external: ["react"],
+        output: {
+            globals: {
+            react: "react",
+            },
+        },
+      },
+    },
+  });
+};
+
+const viteBuild = (configFactory) => {
+  return build(configFactory);
+};
+
+const buildLibraries = async () => {
+  await Promise.all(
+    [webcomponentsLibrary, reactComponentLibrary]
+      .map(getSharedConfiguration)
+      .map(viteBuild)
+  );
+};
+  
+buildLibraries()

package/tailwind.config.cjs

@@ -0,0 +1,8 @@
+// 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')],
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "tsconfig/vite.json",
+  "include": ["lib", "types.d.ts", "scripts"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./lib/*"]
+    },
+    "outDir": "./dist",
+    "declaration": true
+  }
+}

package/twind.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from '@twind/core';
+import presetAutoprefix from '@twind/preset-autoprefix';
+import presetTailwind from '@twind/preset-tailwind';
+import presetTypography from '@twind/preset-typography';
+import presetTailwindForms from '@twind/preset-tailwind-forms';
+
+export default defineConfig({
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--clr-primary,black)',
+        accent: 'var(--clr-accent,blue)',
+      },
+    },
+  },
+  presets: [
+    presetAutoprefix(),
+    presetTailwind(),
+    presetTypography(),
+    presetTailwindForms(),
+  ],
+});