xertica-ui 2.4.0 → 2.5.0

package/templates/src/features/template/ui/FormTemplate.tsx

@@ -1,117 +1,117 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  Input,
-  Label,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardFooter,
-  Checkbox,
-} from 'xertica-ui/ui';
-import { useTranslation } from 'react-i18next';
-
-interface FormValues {
-  fullName: string;
-  email: string;
-  notify: boolean;
-}
-
-interface FormErrors {
-  fullName?: string;
-  email?: string;
-}
-
-export function FormTemplate() {
-  const { t } = useTranslation();
-  const [values, setValues] = useState<FormValues>({ fullName: '', email: '', notify: false });
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [submitted, setSubmitted] = useState(false);
-
-  const validate = (v: FormValues): FormErrors => {
-    const errs: FormErrors = {};
-    if (v.fullName.trim().length < 3) errs.fullName = t('formTemplate.errors.fullNameRequired');
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email))
-      errs.email = t('formTemplate.errors.emailInvalid');
-    return errs;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const errs = validate(values);
-    setErrors(errs);
-    if (Object.keys(errs).length === 0) {
-      setSubmitted(true);
-      console.log('Form submitted:', values);
-    }
-  };
-
-  const handleReset = () => {
-    setValues({ fullName: '', email: '', notify: false });
-    setErrors({});
-    setSubmitted(false);
-  };
-
-  return (
-    <div className="p-6">
-      <Card className="mx-auto w-full max-w-2xl">
-        <CardHeader>
-          <CardTitle>{t('formTemplate.title')}</CardTitle>
-          <p className="text-sm text-muted-foreground">{t('formTemplate.description')}</p>
-        </CardHeader>
-
-        <form onSubmit={handleSubmit}>
-          <CardContent className="grid gap-6 md:grid-cols-2">
-            <div className="col-span-full space-y-2">
-              <Label htmlFor="fullName">{t('formTemplate.fullNameLabel')}</Label>
-              <Input
-                id="fullName"
-                placeholder={t('formTemplate.fullNamePlaceholder')}
-                value={values.fullName}
-                onChange={e => setValues(v => ({ ...v, fullName: e.target.value }))}
-              />
-              {errors.fullName && <p className="text-sm text-destructive">{errors.fullName}</p>}
-            </div>
-
-            <div className="col-span-full space-y-2">
-              <Label htmlFor="email">{t('formTemplate.emailLabel')}</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder={t('formTemplate.emailPlaceholder')}
-                value={values.email}
-                onChange={e => setValues(v => ({ ...v, email: e.target.value }))}
-              />
-              {errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
-            </div>
-
-            <div className="col-span-full flex items-center space-x-2">
-              <Checkbox
-                id="notify"
-                checked={values.notify}
-                onCheckedChange={checked => setValues(v => ({ ...v, notify: checked === true }))}
-              />
-              <Label htmlFor="notify" className="font-normal cursor-pointer text-sm">
-                {t('formTemplate.notifyLabel')}
-              </Label>
-            </div>
-
-            {submitted && (
-              <div className="col-span-full rounded-[var(--radius)] bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 p-3">
-                <p className="text-sm text-[var(--chart-2)]">{t('formTemplate.successMessage')}</p>
-              </div>
-            )}
-          </CardContent>
-
-          <CardFooter className="flex justify-end gap-2 border-t pt-6 bg-muted/20">
-            <Button type="button" variant="ghost" onClick={handleReset}>
-              {t('formTemplate.cancel')}
-            </Button>
-            <Button type="submit">{t('formTemplate.save')}</Button>
-          </CardFooter>
-        </form>
-      </Card>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+  Checkbox,
+} from 'xertica-ui/ui';
+import { useTranslation } from 'react-i18next';
+
+interface FormValues {
+  fullName: string;
+  email: string;
+  notify: boolean;
+}
+
+interface FormErrors {
+  fullName?: string;
+  email?: string;
+}
+
+export function FormTemplate() {
+  const { t } = useTranslation();
+  const [values, setValues] = useState<FormValues>({ fullName: '', email: '', notify: false });
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [submitted, setSubmitted] = useState(false);
+
+  const validate = (v: FormValues): FormErrors => {
+    const errs: FormErrors = {};
+    if (v.fullName.trim().length < 3) errs.fullName = t('formTemplate.errors.fullNameRequired');
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email))
+      errs.email = t('formTemplate.errors.emailInvalid');
+    return errs;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate(values);
+    setErrors(errs);
+    if (Object.keys(errs).length === 0) {
+      setSubmitted(true);
+      console.log('Form submitted:', values);
+    }
+  };
+
+  const handleReset = () => {
+    setValues({ fullName: '', email: '', notify: false });
+    setErrors({});
+    setSubmitted(false);
+  };
+
+  return (
+    <div className="p-6">
+      <Card className="mx-auto w-full max-w-2xl">
+        <CardHeader>
+          <CardTitle>{t('formTemplate.title')}</CardTitle>
+          <p className="text-sm text-muted-foreground">{t('formTemplate.description')}</p>
+        </CardHeader>
+
+        <form onSubmit={handleSubmit}>
+          <CardContent className="grid gap-6 md:grid-cols-2">
+            <div className="col-span-full space-y-2">
+              <Label htmlFor="fullName">{t('formTemplate.fullNameLabel')}</Label>
+              <Input
+                id="fullName"
+                placeholder={t('formTemplate.fullNamePlaceholder')}
+                value={values.fullName}
+                onChange={e => setValues(v => ({ ...v, fullName: e.target.value }))}
+              />
+              {errors.fullName && <p className="text-sm text-destructive">{errors.fullName}</p>}
+            </div>
+
+            <div className="col-span-full space-y-2">
+              <Label htmlFor="email">{t('formTemplate.emailLabel')}</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder={t('formTemplate.emailPlaceholder')}
+                value={values.email}
+                onChange={e => setValues(v => ({ ...v, email: e.target.value }))}
+              />
+              {errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
+            </div>
+
+            <div className="col-span-full flex items-center space-x-2">
+              <Checkbox
+                id="notify"
+                checked={values.notify}
+                onCheckedChange={checked => setValues(v => ({ ...v, notify: checked === true }))}
+              />
+              <Label htmlFor="notify" className="font-normal cursor-pointer text-sm">
+                {t('formTemplate.notifyLabel')}
+              </Label>
+            </div>
+
+            {submitted && (
+              <div className="col-span-full rounded-[var(--radius)] bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 p-3">
+                <p className="text-sm text-[var(--chart-2)]">{t('formTemplate.successMessage')}</p>
+              </div>
+            )}
+          </CardContent>
+
+          <CardFooter className="flex justify-end gap-2 border-t pt-6 bg-muted/20">
+            <Button type="button" variant="ghost" onClick={handleReset}>
+              {t('formTemplate.cancel')}
+            </Button>
+            <Button type="submit">{t('formTemplate.save')}</Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

package/templates/src/features/template/ui/LoginTemplate.tsx

@@ -1,59 +1,59 @@
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Input,
-  Button,
-  Label,
-} from 'xertica-ui/ui';
-import { LockIcon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-export function LoginTemplate() {
-  const { t } = useTranslation();
-  return (
-    <div className="flex h-full min-h-0 w-full items-center justify-center bg-muted/30 p-4 overflow-y-auto">
-      <Card className="w-full max-w-sm">
-        <CardHeader className="text-center">
-          <div className="flex justify-center mb-4">
-            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
-              <LockIcon className="size-6" />
-            </div>
-          </div>
-          <CardTitle className="text-2xl">{t('loginTemplate.title')}</CardTitle>
-          <CardDescription>{t('loginTemplate.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4">
-          <div className="grid gap-2 text-left">
-            <Label htmlFor="email">{t('loginTemplate.emailLabel')}</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder={t('loginTemplate.emailPlaceholder')}
-              required
-            />
-          </div>
-          <div className="grid gap-2 text-left">
-            <div className="flex items-center">
-              <Label htmlFor="password">{t('loginTemplate.passwordLabel')}</Label>
-              <a
-                href="#"
-                className="ml-auto inline-block text-sm text-muted-foreground underline hover:text-primary"
-              >
-                {t('loginTemplate.forgotPassword')}
-              </a>
-            </div>
-            <Input id="password" type="password" required />
-          </div>
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full">{t('loginTemplate.submit')}</Button>
-        </CardFooter>
-      </Card>
-    </div>
-  );
-}
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Button,
+  Label,
+} from 'xertica-ui/ui';
+import { LockIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export function LoginTemplate() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-full min-h-0 w-full items-center justify-center bg-muted/30 p-4 overflow-y-auto">
+      <Card className="w-full max-w-sm">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <LockIcon className="size-6" />
+            </div>
+          </div>
+          <CardTitle className="text-2xl">{t('loginTemplate.title')}</CardTitle>
+          <CardDescription>{t('loginTemplate.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4">
+          <div className="grid gap-2 text-left">
+            <Label htmlFor="email">{t('loginTemplate.emailLabel')}</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder={t('loginTemplate.emailPlaceholder')}
+              required
+            />
+          </div>
+          <div className="grid gap-2 text-left">
+            <div className="flex items-center">
+              <Label htmlFor="password">{t('loginTemplate.passwordLabel')}</Label>
+              <a
+                href="#"
+                className="ml-auto inline-block text-sm text-muted-foreground underline hover:text-primary"
+              >
+                {t('loginTemplate.forgotPassword')}
+              </a>
+            </div>
+            <Input id="password" type="password" required />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full">{t('loginTemplate.submit')}</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}