@askrjs/cli 0.0.2

package/dist/templates/startkit/src/pages/workspace/settings.tsx

@@ -0,0 +1,218 @@
+import { state } from '@askrjs/askr';
+import { Button } from '@askrjs/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from '@askrjs/ui/dialog';
+import { Input } from '@askrjs/ui/input';
+import { Field, Inline } from '@askrjs/themes/components';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  SelectValue,
+} from '@askrjs/ui/select';
+import { Switch } from '@askrjs/ui/switch';
+import { SaveIcon } from '@askrjs/lucide';
+import PageHeader from '../../components/page-header';
+import {
+  appearanceMode,
+  setAppearance,
+  type AppearanceMode,
+} from '../../lib/mock-data';
+import { showToast } from '../../toast';
+
+export default function SettingsPage() {
+  const [fullNameState, setFullNameState] = state('Alex Morgan');
+  const [emailState, setEmailState] = state('alex@example.com');
+  const [timezoneState, setTimezoneState] = state('utc');
+  const [marketingEmailsState, setMarketingEmailsState] = state(false);
+  const [incidentAlertsState, setIncidentAlertsState] = state(true);
+  const [validationErrorState, setValidationErrorState] = state('');
+  const [savingState, setSavingState] = state(false);
+
+  const save = async () => {
+    if (!fullNameState().trim()) {
+      setValidationErrorState('Full name is required.');
+      return;
+    }
+
+    if (!emailState().trim().includes('@')) {
+      setValidationErrorState('Email must be valid.');
+      return;
+    }
+
+    setValidationErrorState('');
+    setSavingState(true);
+
+    await new Promise((resolve) => setTimeout(resolve, 260));
+
+    setSavingState(false);
+    showToast({
+      title: 'Settings saved',
+      description:
+        'Profile and preference values were persisted in mock state.',
+    });
+  };
+
+  return (
+    <section class="stack-lg">
+      <PageHeader
+        title="Settings"
+        description="Profile settings, workspace preferences, and production form patterns."
+        actions={
+          <Button onPress={() => void save()} disabled={savingState()}>
+            <SaveIcon size={14} aria-hidden="true" />{' '}
+            {savingState() ? 'Saving...' : 'Save changes'}
+          </Button>
+        }
+      />
+
+      <div class="settings-grid">
+        <section class="panel stack-md">
+          <h2>Profile</h2>
+
+          <Field id="profile-name">
+            <label htmlFor="profile-name">Full name</label>
+            <Input
+              id="profile-name"
+              value={fullNameState()}
+              onInput={(event: Event) =>
+                setFullNameState((event.target as HTMLInputElement).value)
+              }
+            />
+          </Field>
+
+          <Field id="profile-email">
+            <label htmlFor="profile-email">Email</label>
+            <Input
+              id="profile-email"
+              type="email"
+              value={emailState()}
+              onInput={(event: Event) =>
+                setEmailState((event.target as HTMLInputElement).value)
+              }
+            />
+          </Field>
+
+          <Field id="profile-timezone">
+            <label id="profile-timezone-label">Timezone</label>
+            <Select value={timezoneState()} onValueChange={setTimezoneState}>
+              <SelectTrigger aria-labelledby="profile-timezone-label">
+                <SelectValue placeholder="Select timezone" />
+              </SelectTrigger>
+              <SelectPortal>
+                <SelectContent>
+                  <SelectItem value="utc">UTC</SelectItem>
+                  <SelectItem value="pst">Pacific Time</SelectItem>
+                  <SelectItem value="est">Eastern Time</SelectItem>
+                </SelectContent>
+              </SelectPortal>
+            </Select>
+          </Field>
+
+          {validationErrorState() && (
+            <p class="field-error" role="alert">
+              {validationErrorState()}
+            </p>
+          )}
+        </section>
+
+        <section class="panel stack-md">
+          <h2>Preferences</h2>
+
+          <label class="switch-row">
+            <div>
+              <strong>Incident alerts</strong>
+              <p class="muted">
+                Receive critical service incident notifications.
+              </p>
+            </div>
+            <Switch
+              checked={incidentAlertsState()}
+              onCheckedChange={setIncidentAlertsState}
+            />
+          </label>
+
+          <label class="switch-row">
+            <div>
+              <strong>Marketing emails</strong>
+              <p class="muted">Product updates and launch notes.</p>
+            </div>
+            <Switch
+              checked={marketingEmailsState()}
+              onCheckedChange={setMarketingEmailsState}
+            />
+          </label>
+
+          <Field id="appearance-mode">
+            <label id="appearance-mode-label">Appearance mode</label>
+            <Select
+              value={appearanceMode()}
+              onValueChange={(value) => setAppearance(value as AppearanceMode)}
+            >
+              <SelectTrigger aria-labelledby="appearance-mode-label">
+                <SelectValue placeholder="Appearance" />
+              </SelectTrigger>
+              <SelectPortal>
+                <SelectContent>
+                  <SelectItem value="default">Default</SelectItem>
+                  <SelectItem value="harbor">Harbor</SelectItem>
+                  <SelectItem value="ink">Ink</SelectItem>
+                </SelectContent>
+              </SelectPortal>
+            </Select>
+          </Field>
+
+          <Inline align="center" gap="var(--ak-space-sm)" wrap="wrap">
+            <Button class="button-secondary" disabled>
+              Disabled action example
+            </Button>
+
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button class="button-secondary">Open modal example</Button>
+              </DialogTrigger>
+              <DialogPortal>
+                <DialogOverlay />
+                <DialogContent class="panel stack-md">
+                  <DialogTitle>Reset workspace preferences?</DialogTitle>
+                  <DialogDescription>
+                    This is a modal wiring example. Connect this to real
+                    persistence logic.
+                  </DialogDescription>
+                  <div class="inline-end">
+                    <DialogClose asChild>
+                      <Button class="button-secondary">Cancel</Button>
+                    </DialogClose>
+                    <DialogClose asChild>
+                      <Button
+                        onPress={() =>
+                          showToast({
+                            title: 'Preferences reset',
+                            description:
+                              'Demonstration modal action completed.',
+                          })
+                        }
+                      >
+                        Confirm reset
+                      </Button>
+                    </DialogClose>
+                  </div>
+                </DialogContent>
+              </DialogPortal>
+            </Dialog>
+          </Inline>
+        </section>
+      </div>
+    </section>
+  );
+}

package/dist/templates/startkit/src/router.tsx

@@ -0,0 +1,7 @@
+import { createRouteRegistry } from '@askrjs/askr/router';
+import { registerAppRoutes } from './routes';
+import { routeAuth } from './routes/auth-config';
+
+export const pageRegistry = createRouteRegistry(registerAppRoutes, {
+  auth: routeAuth,
+});

package/dist/templates/startkit/src/routes/auth-config.ts

@@ -0,0 +1,38 @@
+import type { RouteAuthOptions } from '@askrjs/askr/router';
+import { getSessionEmail } from '../lib/mock-data';
+import {
+  dashboardRoute,
+  loginRoute,
+  normalizeProtectedRouteTarget,
+} from '../lib/routes';
+
+export const routeAuth: RouteAuthOptions = {
+  resolve: () => {
+    const email = getSessionEmail();
+
+    if (!email) {
+      return {
+        authenticated: false,
+        principal: null,
+        session: null,
+        tenant: null,
+      };
+    }
+
+    const principal = { id: email, subject: email, email };
+    const session = { id: `browser:${email}`, subject: email };
+
+    return {
+      authenticated: true,
+      principal,
+      session,
+      tenant: null,
+    };
+  },
+  loginPath: loginRoute.href,
+  authenticatedRedirectTo: ({ search }) => {
+    const nextTarget = new URLSearchParams(search).get('next');
+    const resolvedTarget = normalizeProtectedRouteTarget(nextTarget);
+    return resolvedTarget || dashboardRoute.href;
+  },
+};

package/dist/templates/startkit/src/routes/auth.ts

@@ -0,0 +1,8 @@
+import { lazy, route } from '@askrjs/askr/router';
+
+export function registerAuthRoutes(): void {
+  route(
+    '/login',
+    lazy(() => import('../pages/auth/login'))
+  );
+}

package/dist/templates/startkit/src/routes/index.ts

@@ -0,0 +1,28 @@
+import { fallback, group, lazy } from '@askrjs/askr/router';
+import { requireAnonymous, requireUser } from '@askrjs/auth';
+import App from '../pages/_layout';
+import AuthLayout from '../pages/auth/_layout';
+import AppLayout from '../pages/workspace/_layout';
+import { registerAuthRoutes } from './auth';
+import { registerPublicRoutes } from './public';
+import { registerWorkspaceRoutes } from './workspace';
+
+export function registerAppRoutes(): void {
+  group({ layout: App }, () => {
+    registerPublicRoutes();
+
+    group({ layout: AuthLayout, auth: requireAnonymous() }, () => {
+      registerAuthRoutes();
+    });
+
+    group({ layout: AppLayout, auth: requireUser() }, () => {
+      registerWorkspaceRoutes();
+    });
+
+    fallback(lazy(() => import('../pages/not-found')));
+  });
+}
+
+export { registerAuthRoutes } from './auth';
+export { registerPublicRoutes } from './public';
+export { registerWorkspaceRoutes } from './workspace';

package/dist/templates/startkit/src/routes/public.ts

@@ -0,0 +1,8 @@
+import { lazy, route } from '@askrjs/askr/router';
+
+export function registerPublicRoutes(): void {
+  route(
+    '/',
+    lazy(() => import('../pages/home'))
+  );
+}

package/dist/templates/startkit/src/routes/workspace/accounts.ts

@@ -0,0 +1,8 @@
+import { lazy, route } from '@askrjs/askr/router';
+
+export function registerAccountRoutes(): void {
+  route(
+    '/accounts',
+    lazy(() => import('../../pages/workspace/accounts'))
+  );
+}

package/dist/templates/startkit/src/routes/workspace/index.ts

@@ -0,0 +1,14 @@
+import { lazy, route } from '@askrjs/askr/router';
+import { registerAccountRoutes } from './accounts';
+
+export function registerWorkspaceRoutes(): void {
+  route(
+    '/dashboard',
+    lazy(() => import('../../pages/workspace/dashboard'))
+  );
+  registerAccountRoutes();
+  route(
+    '/settings',
+    lazy(() => import('../../pages/workspace/settings'))
+  );
+}