@wangs-ui/create-react-app 1.0.49 → 1.0.51

package/template/src/pages/Login.tsx

@@ -0,0 +1,151 @@
+import { useFormControl } from '@wangs-ui/form/react';
+import { Link, Text } from '@wangs-ui/foundation/theme';
+import Button from '@wangs-ui/react-core/primitive/button';
+import Divider from '@wangs-ui/react-core/primitive/divider';
+import Field from '@wangs-ui/react-core/primitive/field';
+import Form from '@wangs-ui/react-core/primitive/form';
+import Input from '@wangs-ui/react-core/primitive/input';
+import PasswordInput from '@wangs-ui/react-core/primitive/passwordinput';
+import { useI18n } from '@wangs-ui/react-i18n';
+import { ArrowRightLine, LockLine, MailLine } from '@wangs-ui/react-icons';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import AuthLayout from '../components/AuthLayout';
+
+export default function Login(): React.JSX.Element {
+  const navigate = useNavigate();
+  const { t } = useI18n();
+  const formControl = useFormControl();
+
+  const handleSubmit = (values: any) => {
+    // oxlint-disable-next-line no-console
+    console.log('Login values:', values);
+    // In a real app, you would authenticate here.
+  };
+
+  return (
+    <AuthLayout>
+      {/* Logo Section */}
+      <div className="mb-10 flex flex-col items-center text-center">
+        <div className="bg-surface-container-low border-outline-variant/30 shadow-level-1 mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg border">
+          <img src="/wangs_ui_logo.png" alt="Wangs UI Logo" className="h-7 w-7 opacity-80" />
+        </div>
+        <Text as="h1" variant="headlineLarge" color="on-surface" weight="semibold">
+          {t('Welcome back')}
+        </Text>
+        <Text variant="bodyMedium" color="secondary" className="mt-2">
+          {t('Sign in to your Wangs UI account')}
+        </Text>
+      </div>
+
+      {/* Login Card */}
+      <div className="bg-surface-container-lowest border-outline-variant/30 shadow-level-1 rounded-xl border p-10">
+        <Form control={formControl} className="space-y-6" onSubmit={handleSubmit}>
+          {/* Email Field */}
+          <Field label={t('Email Address')} name="email" required>
+            <Input
+              name="email"
+              type="email"
+              placeholder="name@company.com"
+              startElement={<MailLine className="text-on-surface-variant ml-2 size-5" />}
+              className="w-full"
+              size="md"
+            />
+          </Field>
+
+          {/* Password Field */}
+          <Field
+            label={
+              <div className="flex w-full items-center justify-between">
+                <span>{t('Password')}</span>
+                <Link href="#">{t('Forgot Password?')}</Link>
+              </div>
+            }
+            name="password"
+            required
+          >
+            <PasswordInput
+              name="password"
+              placeholder="••••••••"
+              startElement={<LockLine className="text-on-surface-variant ml-2 size-5" />}
+              className="w-full"
+              size="md"
+            />
+          </Field>
+
+          {/* Sign In Button */}
+          <Button
+            type="submit"
+            className="group mt-10 flex w-full items-center justify-center gap-2"
+            variant="filled"
+            severity="primary"
+            size="lg"
+            label={t('Sign In')}
+            rightIcon={
+              <ArrowRightLine className="size-5 transition-transform group-hover:translate-x-1" />
+            }
+          />
+        </Form>
+
+        {/* Divider */}
+        <Divider className="my-10" label={t('Or continue with')} />
+
+        {/* Social Logins */}
+        <div className="grid grid-cols-2 gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            severity="secondary"
+            size="md"
+            label={t('GitHub')}
+            leftIcon={
+              <svg className="h-5 w-5 fill-current" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+            }
+            className="w-full"
+          />
+          <Button
+            type="button"
+            variant="outline"
+            severity="secondary"
+            size="md"
+            label={t('Google')}
+            leftIcon={
+              <svg className="h-5 w-5" viewBox="0 0 24 24">
+                <path
+                  fill="#4285F4"
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                />
+                <path
+                  fill="#34A853"
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                />
+                <path
+                  fill="#FBBC05"
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                />
+                <path
+                  fill="#EA4335"
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                />
+              </svg>
+            }
+            className="w-full"
+          />
+        </div>
+
+        {/* Register Link */}
+        <div className="mt-8 text-center">
+          <Text variant="bodyMedium" color="secondary">
+            {t("Don't have an account?")}{' '}
+            <Link onClick={() => navigate('/register')} className="font-semibold" color="primary">
+              {t('Sign up')}
+            </Link>
+          </Text>
+        </div>
+      </div>
+    </AuthLayout>
+  );
+}

package/template/src/pages/Register.tsx

@@ -0,0 +1,165 @@
+import { useFormControl } from '@wangs-ui/form/react';
+import { Link, Text } from '@wangs-ui/foundation/theme';
+import Button from '@wangs-ui/react-core/primitive/button';
+import Checkbox from '@wangs-ui/react-core/primitive/checkbox';
+import Divider from '@wangs-ui/react-core/primitive/divider';
+import Field from '@wangs-ui/react-core/primitive/field';
+import Form from '@wangs-ui/react-core/primitive/form';
+import Input from '@wangs-ui/react-core/primitive/input';
+import PasswordInput from '@wangs-ui/react-core/primitive/passwordinput';
+import { useI18n } from '@wangs-ui/react-i18n';
+import { ArrowRightLine, LockLine, MailLine, UserLine } from '@wangs-ui/react-icons';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import AuthLayout from '../components/AuthLayout';
+
+export default function Register(): React.JSX.Element {
+  const navigate = useNavigate();
+  const { t } = useI18n();
+  const formControl = useFormControl();
+  const [agreeTerms, setAgreeTerms] = useState(false);
+
+  const handleSubmit = (values: any) => {
+    // oxlint-disable-next-line no-console
+    console.log('Register values:', values, 'agreeTerms:', agreeTerms);
+  };
+
+  return (
+    <AuthLayout>
+      <div className="bg-surface border-outline-variant/30 shadow-level-1 rounded-xl border p-10">
+        {/* Logo Section */}
+        <div className="mb-10 flex flex-col items-center text-center">
+          <div className="bg-surface-container-low border-outline-variant/30 shadow-level-1 mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg border">
+            <img src="/wangs_ui_logo.png" alt="Wangs UI Logo" className="h-7 w-7 opacity-80" />
+          </div>
+          <Text as="h1" variant="headlineLarge" color="on-surface" weight="semibold">
+            {t('Create an account')}
+          </Text>
+          <Text variant="bodyMedium" color="secondary" className="mt-2">
+            {t('Join Wangs UI to get started')}
+          </Text>
+        </div>{' '}
+        <Form control={formControl} className="space-y-6" onSubmit={handleSubmit}>
+          {/* Full Name Field */}
+          <Field label={t('Full Name')} name="fullName" required>
+            <Input
+              name="fullName"
+              type="text"
+              placeholder="Jane Doe"
+              startElement={<UserLine className="text-on-surface-variant ml-2 size-5" />}
+              className="w-full"
+              size="md"
+            />
+          </Field>
+
+          {/* Email Field */}
+          <Field label={t('Email Address')} name="email" required>
+            <Input
+              name="email"
+              type="email"
+              placeholder="jane@example.com"
+              startElement={<MailLine className="text-on-surface-variant ml-2 size-5" />}
+              className="w-full"
+              size="md"
+            />
+          </Field>
+
+          {/* Password Field */}
+          <Field label={t('Password')} name="password" required>
+            <PasswordInput
+              name="password"
+              placeholder="••••••••"
+              startElement={<LockLine className="text-on-surface-variant ml-2 size-5" />}
+              className="w-full"
+              size="md"
+            />
+          </Field>
+
+          {/* Terms and Conditions */}
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="terms"
+              name="terms"
+              checked={agreeTerms}
+              onChange={setAgreeTerms}
+              className="mt-1"
+            />
+            <Text as="label" htmlFor="terms" variant="bodyMedium" color="secondary">
+              {t('I agree to the')} <Link href="#">{t('Terms of Service')}</Link> {t('and')}{' '}
+              <Link href="#">{t('Privacy Policy')}</Link>.
+            </Text>
+          </div>
+
+          {/* Create Account Button */}
+          <Button
+            type="submit"
+            className="group flex w-full items-center justify-center gap-2"
+            variant="filled"
+            severity="primary"
+            size="lg"
+            label={t('Create Account')}
+            rightIcon={
+              <ArrowRightLine className="size-5 transition-transform group-hover:translate-x-1" />
+            }
+          />
+        </Form>
+        {/* Divider */}
+        <Divider className="mt-8" label={t('Or continue with')} />
+        {/* Social Logins */}
+        <div className="mt-8 grid grid-cols-2 gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            severity="secondary"
+            size="md"
+            label={t('Google')}
+            leftIcon={
+              <svg className="h-5 w-5" viewBox="0 0 24 24">
+                <path
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  fill="#4285F4"
+                />
+                <path
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  fill="#34A853"
+                />
+                <path
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  fill="#FBBC05"
+                />
+                <path
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  fill="#EA4335"
+                />
+              </svg>
+            }
+            className="w-full"
+          />
+          <Button
+            type="button"
+            variant="outline"
+            severity="secondary"
+            size="md"
+            label={t('GitHub')}
+            leftIcon={
+              <svg className="h-5 w-5 fill-current" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+            }
+            className="w-full"
+          />
+        </div>
+        {/* Login Link */}
+        <div className="mt-8 text-center">
+          <Text variant="bodyMedium" color="secondary">
+            {t('Already have an account?')}{' '}
+            <Link onClick={() => navigate('/login')} className="font-semibold" color="primary">
+              {t('Log in')}
+            </Link>
+          </Text>
+        </div>
+      </div>
+    </AuthLayout>
+  );
+}

package/template/tsconfig.app.json

@@ -1,14 +1,15 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
+    "target": "ES2023",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
+    "customConditions": ["wangs-ui-dev"],
     "allowImportingTsExtensions": false,
     "isolatedModules": true,
     "moduleDetection": "force",

package/template/vite.config.ts

@@ -1,8 +1,21 @@
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
+import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    visualizer({
+      filename: 'dist/stats.html',
+      gzipSize: true,
+      brotliSize: true,
+      open: process.env.ANALYZE === 'true',
+    }),
+  ],
+  resolve: {
+    conditions: ['wangs-ui-dev'],
+  },
 });

package/template/agents/CLAUDE.md

@@ -1,22 +0,0 @@
-# Claude Code Project Guidelines
-
-This project uses **Wangs UI**, React 19, and Vite 8.
-
-## MCP Tools
-
-The `@wangs-ui/mcp` server is configured in `.mcp.json`. Use it to inspect Wangs UI component documentation and story specifications before implementing new views.
-
-## Development Commands
-
-- `pnpm dev`: Start local development server
-- `pnpm build`: Type check and build production bundle
-- `pnpm lint`: Run Oxlint linter
-- `pnpm format`: Run Oxfmt formatter
-
-## Key Coding Rules
-
-- Use `@wangs-ui/react-core` for all UI elements (do not use unstyled raw HTML inputs/buttons).
-- Use `@wangs-ui/react-icons` for iconography.
-- Wrap all UI strings in `t('...')` from `useI18n()`.
-- Use `useLocaleFormatter()` for date, number, and currency formatting.
-- See `AGENTS.md` and `.agents/skills/` for in-depth design system standards.