@llmnative/react 2.0.1 → 2.2.0

package/templates/_shared/conf/access.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { MenuConfig } from '@llmnative/react';
+import SignUpPage from '../pages/access/SignUpPage';
+import ForgotPasswordPage from '../pages/access/ForgotPasswordPage';
+import ResetPasswordPage from '../pages/access/ResetPasswordPage';
+import VerifyEmailPage from '../pages/access/VerifyEmailPage';
+import { ACCESS_PATHS } from '../pages/access/paths';
+
+/** The pages of access take the whole screen: no header, no menu. */
+const Bare = ({ children }: { children?: React.ReactNode }) => <>{children}</>;
+
+/**
+ * The pages open without a session (`public`): the sign-in itself has no page, the gate of
+ * `index.tsx` shows it in place of any other page. No title: they are never entries of a menu.
+ */
+export const accessMenu: MenuConfig = {
+    access: [
+        { path: ACCESS_PATHS.signUp, page: SignUpPage, layout: Bare, public: true },
+        { path: ACCESS_PATHS.forgotPassword, page: ForgotPasswordPage, layout: Bare, public: true },
+        { path: ACCESS_PATHS.resetPassword, page: ResetPasswordPage, layout: Bare, public: true },
+        { path: ACCESS_PATHS.verifyEmail, page: VerifyEmailPage, layout: Bare, public: true },
+    ],
+};

package/templates/_shared/pages/access/ForgotPasswordPage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Brand, ForgotPassword, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS } from './paths';
+
+/** Sends the link to choose a new password; the link opens `/reset-password`. */
+export default function ForgotPasswordPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+
+    if (!flows.forgotPassword) return <Navigate to="/" replace />;
+
+    return <ForgotPassword {...flows.forgotPassword} brand={<Brand label="[projectname]" />} signInLink="/" />;
+}

package/templates/_shared/pages/access/ResetPasswordPage.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Brand, ResetPassword, linkCode, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS, ACCESS_PATHS } from './paths';
+
+/** Opened by the link of the email: the code of the link sets the new password. */
+export default function ResetPasswordPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+    const code = linkCode(useLocation().search);
+
+    return (
+        <ResetPassword
+            {...flows.resetPassword(code)}
+            brand={<Brand label="[projectname]" />}
+            signInLink="/"
+            requestNewLink={ACCESS_PATHS.forgotPassword}
+        />
+    );
+}

package/templates/_shared/pages/access/SignInPage.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Brand, SignIn, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS, ACCESS_PATHS } from './paths';
+
+/**
+ * The sign-in, shown by the gate of `index.tsx` in place of any page opened without a session:
+ * the address does not change, and once signed in the page appears.
+ */
+export default function SignInPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+
+    return (
+        <SignIn
+            {...flows.signIn}
+            appName="[projectname]"
+            brand={<Brand label="[projectname]" />}
+            signUpLink={flows.signUp ? ACCESS_PATHS.signUp : undefined}
+            forgotPasswordLink={flows.forgotPassword ? ACCESS_PATHS.forgotPassword : undefined}
+        />
+    );
+}

package/templates/_shared/pages/access/SignUpPage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { Brand, SignUp, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS } from './paths';
+
+/** Creates an account; the confirmation link of the email opens `/verify-email`. */
+export default function SignUpPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+    const navigate = useNavigate();
+
+    // A provider without accounts of its own (Google, GitHub): its sign-in creates them.
+    if (!flows.signUp) return <Navigate to="/" replace />;
+
+    return (
+        <SignUp
+            {...flows.signUp}
+            terms
+            brand={<Brand label="[projectname]" />}
+            signInLink="/"
+            onSignedUp={() => navigate('/')}
+        />
+    );
+}

package/templates/_shared/pages/access/VerifyEmailPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Brand, VerifyEmail, linkCode, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS } from './paths';
+
+/** Opened by the confirmation link of a new account: it activates the account at once. */
+export default function VerifyEmailPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+    const code = linkCode(useLocation().search);
+
+    return (
+        <VerifyEmail
+            {...flows.verifyEmail}
+            code={code}
+            brand={<Brand label="[projectname]" />}
+            continueLink="/"
+            signInLink="/"
+        />
+    );
+}

package/templates/_shared/pages/access/paths.ts

@@ -0,0 +1,12 @@
+// The pages the links of the access emails open: the provider puts them in the emails it sends.
+export const ACCESS_PATHS = {
+    signUp: '/sign-up',
+    forgotPassword: '/forgot-password',
+    resetPassword: '/reset-password',
+    verifyEmail: '/verify-email',
+};
+
+export const ACCESS_FLOWS = {
+    verifyEmailPath: ACCESS_PATHS.verifyEmail,
+    resetPasswordPath: ACCESS_PATHS.resetPassword,
+};

package/templates/_shared/sections/Footer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Footer() {
     return (
-        <footer className="shrink-0 border-t bg-background px-4 py-2 text-end text-sm text-muted-foreground">
+        <footer className="shrink-0 border-t border-footer-border bg-footer px-4 py-1.5 text-end text-xs text-footer-foreground">
             Powered by [projectname]
         </footer>
     );

package/templates/_shared/sections/Header.tsx

@@ -7,7 +7,7 @@ type HeaderProps = {
 
 export default function Header({ onMenuToggle }: HeaderProps) {
     return (
-        <header className="flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4">
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-header-border bg-header px-4 text-header-foreground">
             <ActionButton
                 icon="menu"
                 ariaLabel="Toggle navigation"
@@ -17,7 +17,7 @@ export default function Header({ onMenuToggle }: HeaderProps) {
             />
             <Brand url="/" label="[projectname]" />
             <div className="ms-auto">
-                <AuthButton />
+                <AuthButton aspect="avatar" />
             </div>
         </header>
     );

package/themes/default.ts

@@ -367,27 +367,28 @@ export const components: Theme = {
     },
     SideNav: {
         wrapperClassName: '',
-        shellClassName: 'border-r border-border bg-card/80 text-foreground backdrop-blur supports-[backdrop-filter]:bg-card/70',
+        // The side bar of the theme (CR-126): `sidebar*` tokens, the base ones when the theme has none.
+        shellClassName: 'border-r border-sidebar-border bg-sidebar text-sidebar-foreground',
         overlayClassName: 'shadow-xl',
-        headerClassName: 'border-b border-border/60 px-1.5 py-2',
+        headerClassName: 'border-b border-sidebar-border px-1.5 py-2',
         navClassName: 'px-1.5 py-2',
-        bottomNavClassName: 'border-t border-border/60 px-1.5 py-2',
-        footerClassName: 'border-t border-border/60 px-1.5 py-2',
-        groupLabelClassName: 'text-[10.5px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none',
-        groupDividerClassName: 'bg-border/50',
+        bottomNavClassName: 'border-t border-sidebar-border px-1.5 py-2',
+        footerClassName: 'border-t border-sidebar-border px-1.5 py-2',
+        groupLabelClassName: 'text-[10.5px] font-semibold uppercase tracking-widest text-sidebar-foreground/60 select-none',
+        groupDividerClassName: 'bg-sidebar-border',
         itemClassName: 'rounded-lg',
-        itemActiveClassName: 'bg-primary/10 text-primary font-medium shadow-sm',
-        itemChildActiveClassName: 'bg-accent/80 text-foreground font-medium',
-        itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
+        itemActiveClassName: 'bg-sidebar-accent text-sidebar-accent-foreground font-medium',
+        itemChildActiveClassName: 'bg-sidebar-accent/60 text-sidebar-accent-foreground font-medium',
+        itemInactiveClassName: 'text-sidebar-foreground/80 hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/70',
         itemIconClassName: '',
         itemTextClassName: '',
         itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-full bg-primary/15 text-primary',
         itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-full bg-primary ring-1 ring-card',
         itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded-md transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/70',
         subItemClassName: 'rounded-md',
-        subItemActiveClassName: 'bg-primary/10 text-primary font-medium',
-        subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
-        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/70',
+        subItemActiveClassName: 'bg-sidebar-accent text-sidebar-accent-foreground font-medium',
+        subItemInactiveClassName: 'text-sidebar-foreground/80 hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/70',
+        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-sidebar-foreground/70 hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/70',
     },
     Toolbar: {
         wrapperClassName: 'z-20 w-full',

package/themes/tokyo-night-light.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '224.3 17.6% 25.7%',
                 border: '230 5.1% 76.9%',
                 input: '230 5.1% 76.9%',
-                ring: '226.7 10.1% 82.5%'
+                ring: '226.7 10.1% 82.5%',
+                header: '226.7 12.3% 85.7%',
+                headerForeground: '224.3 17.6% 25.7%',
+                headerBorder: '230 5.1% 76.9%',
+                sidebar: '226.7 12.3% 85.7%',
+                sidebarForeground: '224.3 17.6% 25.7%',
+                sidebarBorder: '230 5.1% 76.9%',
+                sidebarAccent: '231.4 16.3% 91.6%',
+                sidebarAccentForeground: '224.3 17.6% 25.7%',
+                footer: '226.7 12.3% 85.7%',
+                footerForeground: '224.3 17.6% 25.7%',
+                footerBorder: '230 5.1% 76.9%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '229.3 35.4% 75.1%',
                 border: '240 11.1% 7.1%',
                 input: '240 14.3% 6.9%',
-                ring: '233.3 19.1% 18.4%'
+                ring: '233.3 19.1% 18.4%',
+                header: '240 15.4% 10.2%',
+                headerForeground: '232.7 13.9% 53.5%',
+                headerBorder: '240 11.1% 7.1%',
+                sidebar: '240 15.4% 10.2%',
+                sidebarForeground: '232.7 13.9% 53.5%',
+                sidebarBorder: '240 11.1% 7.1%',
+                sidebarAccent: '235.4 18.8% 13.5%',
+                sidebarAccentForeground: '229.3 35.4% 75.1%',
+                footer: '240 15.4% 10.2%',
+                footerForeground: '232.7 13.9% 53.5%',
+                footerBorder: '240 11.1% 7.1%'
             },
         },
     },

package/themes/tokyo-night.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '224.3 17.6% 25.7%',
                 border: '230 5.1% 76.9%',
                 input: '230 5.1% 76.9%',
-                ring: '226.7 10.1% 82.5%'
+                ring: '226.7 10.1% 82.5%',
+                header: '226.7 12.3% 85.7%',
+                headerForeground: '224.3 17.6% 25.7%',
+                headerBorder: '230 5.1% 76.9%',
+                sidebar: '226.7 12.3% 85.7%',
+                sidebarForeground: '224.3 17.6% 25.7%',
+                sidebarBorder: '230 5.1% 76.9%',
+                sidebarAccent: '231.4 16.3% 91.6%',
+                sidebarAccentForeground: '224.3 17.6% 25.7%',
+                footer: '226.7 12.3% 85.7%',
+                footerForeground: '224.3 17.6% 25.7%',
+                footerBorder: '230 5.1% 76.9%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '229.3 35.4% 75.1%',
                 border: '240 11.1% 7.1%',
                 input: '240 14.3% 6.9%',
-                ring: '233.3 19.1% 18.4%'
+                ring: '233.3 19.1% 18.4%',
+                header: '240 15.4% 10.2%',
+                headerForeground: '232.7 13.9% 53.5%',
+                headerBorder: '240 11.1% 7.1%',
+                sidebar: '240 15.4% 10.2%',
+                sidebarForeground: '232.7 13.9% 53.5%',
+                sidebarBorder: '240 11.1% 7.1%',
+                sidebarAccent: '235.4 18.8% 13.5%',
+                sidebarAccentForeground: '229.3 35.4% 75.1%',
+                footer: '240 15.4% 10.2%',
+                footerForeground: '232.7 13.9% 53.5%',
+                footerBorder: '240 11.1% 7.1%'
             },
         },
     },

package/themes/vscode-dark-modern.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 23.1%',
                 border: '0 0% 89.8%',
                 input: '0 0% 80.8%',
-                ring: '209 100% 36.1%'
+                ring: '209 100% 36.1%',
+                header: '0 0% 97.3%',
+                headerForeground: '0 0% 11.8%',
+                headerBorder: '0 0% 89.8%',
+                sidebar: '0 0% 97.3%',
+                sidebarForeground: '0 0% 23.1%',
+                sidebarBorder: '0 0% 89.8%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 23.1%',
+                footer: '0 0% 97.3%',
+                footerForeground: '0 0% 23.1%',
+                footerBorder: '0 0% 89.8%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 16.9%',
                 input: '0 0% 23.5%',
-                ring: '206 100% 41.6%'
+                ring: '206 100% 41.6%',
+                header: '0 0% 9.4%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 16.9%',
+                sidebar: '0 0% 9.4%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '0 0% 16.9%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '0 0% 9.4%',
+                footerForeground: '0 0% 80%',
+                footerBorder: '0 0% 16.9%'
             },
         },
     },

package/themes/vscode-dark-plus.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 38%',
                 border: '0 0% 82.7%',
                 input: '0 0% 80.8%',
-                ring: '204.1 100% 47.3%'
+                ring: '204.1 100% 47.3%',
+                header: '0 0% 86.7%',
+                headerForeground: '0 0% 20%',
+                headerBorder: '0 0% 86.7%',
+                sidebar: '0 0% 95.3%',
+                sidebarForeground: '0 0% 38%',
+                sidebarBorder: '0 0% 95.3%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 38%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 27.1%',
                 input: '0 0% 23.5%',
-                ring: '204.1 100% 41.6%'
+                ring: '204.1 100% 41.6%',
+                header: '0 0% 23.5%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 23.5%',
+                sidebar: '240 1.3% 14.7%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '240 1.3% 14.7%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
     },

package/themes/vscode-light-modern.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 23.1%',
                 border: '0 0% 89.8%',
                 input: '0 0% 80.8%',
-                ring: '209 100% 36.1%'
+                ring: '209 100% 36.1%',
+                header: '0 0% 97.3%',
+                headerForeground: '0 0% 11.8%',
+                headerBorder: '0 0% 89.8%',
+                sidebar: '0 0% 97.3%',
+                sidebarForeground: '0 0% 23.1%',
+                sidebarBorder: '0 0% 89.8%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 23.1%',
+                footer: '0 0% 97.3%',
+                footerForeground: '0 0% 23.1%',
+                footerBorder: '0 0% 89.8%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 16.9%',
                 input: '0 0% 23.5%',
-                ring: '206 100% 41.6%'
+                ring: '206 100% 41.6%',
+                header: '0 0% 9.4%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 16.9%',
+                sidebar: '0 0% 9.4%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '0 0% 16.9%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '0 0% 9.4%',
+                footerForeground: '0 0% 80%',
+                footerBorder: '0 0% 16.9%'
             },
         },
     },

package/themes/vscode-light-plus.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 38%',
                 border: '0 0% 82.7%',
                 input: '0 0% 80.8%',
-                ring: '204.1 100% 47.3%'
+                ring: '204.1 100% 47.3%',
+                header: '0 0% 86.7%',
+                headerForeground: '0 0% 20%',
+                headerBorder: '0 0% 86.7%',
+                sidebar: '0 0% 95.3%',
+                sidebarForeground: '0 0% 38%',
+                sidebarBorder: '0 0% 95.3%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 38%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 27.1%',
                 input: '0 0% 23.5%',
-                ring: '204.1 100% 41.6%'
+                ring: '204.1 100% 41.6%',
+                header: '0 0% 23.5%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 23.5%',
+                sidebar: '240 1.3% 14.7%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '240 1.3% 14.7%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
     },