@sybilion/uilib 1.2.6 → 1.2.9

package/src/components/widgets/SignInPage/SignInPage.tsx

@@ -0,0 +1,84 @@
+import type { RedirectLoginOptions } from '@auth0/auth0-react';
+
+import {
+  SybilionAuthLayout,
+  type SybilionAuthLayoutProps,
+} from '#uilib/components/widgets/SybilionAuthLayout';
+import { useSybilionAuth } from '#uilib/sybilion-auth/SybilionAuthProvider';
+
+import {
+  SybilionSignInPanel,
+  type SybilionSignInPanelProps,
+} from '../SybilionSignInPanel';
+
+export type SignInPageProps = Pick<
+  SybilionAuthLayoutProps,
+  'heroBackgroundUrl' | 'logoSize' | 'containerClassName'
+> &
+  Pick<
+    SybilionSignInPanelProps,
+    | 'forgotPasswordTo'
+    | 'releasesTo'
+    | 'versionLabel'
+    | 'primaryButtonLabel'
+    | 'connectingLabel'
+  > & {
+    title?: string;
+    subtitle?: string;
+    /** Extra Auth0 `loginWithRedirect` options; merged with default sign-in params. */
+    loginRedirectOptions?: RedirectLoginOptions;
+  };
+
+const DEFAULT_TITLE = 'Sign In';
+const DEFAULT_SUBTITLE =
+  'To get access authenticate through google or your email.';
+
+export function SignInPage({
+  title = DEFAULT_TITLE,
+  subtitle = DEFAULT_SUBTITLE,
+  forgotPasswordTo = '/forgot-password',
+  releasesTo = '/releases',
+  versionLabel,
+  primaryButtonLabel,
+  connectingLabel,
+  loginRedirectOptions,
+  heroBackgroundUrl,
+  logoSize,
+  containerClassName,
+}: SignInPageProps) {
+  const { error, loginWithRedirect, isLoading } = useSybilionAuth();
+
+  const handleSignIn = () =>
+    loginWithRedirect({
+      ...loginRedirectOptions,
+      authorizationParams: {
+        prompt: 'login',
+        screen_hint: 'login',
+        ...(typeof window !== 'undefined'
+          ? { origin: window.location.origin }
+          : {}),
+        ...loginRedirectOptions?.authorizationParams,
+      },
+    });
+
+  return (
+    <SybilionAuthLayout
+      title={title}
+      subtitle={subtitle}
+      heroBackgroundUrl={heroBackgroundUrl}
+      logoSize={logoSize}
+      containerClassName={containerClassName}
+    >
+      <SybilionSignInPanel
+        onSignIn={handleSignIn}
+        isSigningIn={isLoading}
+        error={error}
+        forgotPasswordTo={forgotPasswordTo}
+        releasesTo={releasesTo}
+        versionLabel={versionLabel}
+        primaryButtonLabel={primaryButtonLabel}
+        connectingLabel={connectingLabel}
+      />
+    </SybilionAuthLayout>
+  );
+}

package/src/components/widgets/SignInPage/index.ts

@@ -0,0 +1 @@
+export { SignInPage, type SignInPageProps } from './SignInPage';

package/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.styl

@@ -0,0 +1,26 @@
+.root
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  width 100%
+  padding 64px 48px
+  position relative
+  z-index 10
+  height 100%
+  font-family var(--font-family-heading)
+  font-weight 300
+  text-shadow 0 0 2px var(--background)
+
+.headline
+  font-size 40px
+  line-height 48px
+  text-align left
+  width 100%
+  max-width 480px
+
+.headlineParagraph
+  margin 0
+
+.headlineCyan
+  color #27d1ef

package/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string };
+export default mod;

package/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.tsx

@@ -0,0 +1,18 @@
+import S from './SybilionAuthHeadline.styl';
+
+export function SybilionAuthHeadline() {
+  return (
+    <div className={S.root}>
+      <div className={S.headline}>
+        <p className={S.headlineParagraph}>
+          <span>External volatility</span>
+          <span></span>
+        </p>
+        <p className={S.headlineParagraph}>turned into</p>
+        <p className={S.headlineParagraph}>
+          <span className={S.headlineCyan}>confident decisions</span>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/widgets/SybilionAuthLayout/SybilionAuthLayout.styl

@@ -0,0 +1,79 @@
+.root
+  height 100vh
+  display flex
+  width 100%
+
+.leftPanel
+  display none
+
+  @media (min-width: 768px)
+    display flex
+    width 50%
+    position relative
+    overflow hidden
+    background-color var(--secondary)
+    border-top-left-radius var(--p-6)
+    border-bottom-left-radius var(--p-6)
+    border-top-right-radius var(--p-1)
+    border-bottom-right-radius var(--p-1)
+
+    :global(.dark) &
+      background-color var(--page-color-alpha-800)
+
+.bgImage
+  position absolute
+  bottom 0
+  left 0
+  width 300px
+  height 300px
+  background-size contain
+  background-repeat no-repeat
+  background-position left bottom
+
+.logoContainer
+  z-index 10
+  position absolute
+  top 0
+  left 0
+  display flex
+  align-items center
+  min-height 94px
+  padding 16px 48px
+
+.logo
+  width 24px
+  height 24px
+
+.rightPanel
+  flex 1
+  background-color var(--background)
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  padding 48px 64px
+
+.formContainer
+  // position relative
+  max-width 480px
+  width 100%
+
+.header
+  margin-bottom 36px
+
+.title
+  font-family var(--font-family-heading)
+  font-weight normal
+  font-size 30px
+  line-height 42px
+  margin 0
+  margin-bottom 6px
+  color var(--foreground)
+
+.subtitle
+  font-size 14px
+  color var(--muted-foreground)
+  line-height 16px
+  margin 0
+  font-family 'Manrope', sans-serif
+  font-weight 500

package/src/components/widgets/SybilionAuthLayout/SybilionAuthLayout.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string };
+export default mod;

package/src/components/widgets/SybilionAuthLayout/SybilionAuthLayout.tsx

@@ -0,0 +1,64 @@
+import cn from 'classnames';
+import type { ReactNode } from 'react';
+
+import { Logo } from '#uilib/components/ui/Logo/Logo';
+import type { LogoSize } from '#uilib/components/ui/Logo/Logo.types';
+
+import { SybilionAuthHeadline } from './SybilionAuthHeadline';
+import S from './SybilionAuthLayout.styl';
+
+/** Same convention as {@link SYBILION_STANDALONE_LOGO_PUBLIC_URL}: copy `sybilion-bg.svg` from the package into `public/`. */
+export const SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL =
+  '/sybilion_bg.svg' as const;
+
+export type SybilionAuthLayoutProps = {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  logoSize?: LogoSize;
+  containerClassName?: string;
+  /** Public URL for the hero watermark SVG (default {@link SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL}). */
+  heroBackgroundUrl?: string;
+};
+
+export function SybilionAuthLayout({
+  title,
+  subtitle,
+  children,
+  logoSize,
+  containerClassName,
+  heroBackgroundUrl = SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL,
+}: SybilionAuthLayoutProps) {
+  const bg = heroBackgroundUrl
+    ? `url(${JSON.stringify(heroBackgroundUrl)})`
+    : 'none';
+
+  return (
+    <div className={S.root}>
+      <div className={S.leftPanel}>
+        <div
+          className={S.bgImage}
+          style={{ backgroundImage: bg }}
+          aria-hidden
+        />
+
+        <div className={S.logoContainer}>
+          <Logo className={S.logo} size={logoSize} />
+        </div>
+
+        <SybilionAuthHeadline />
+      </div>
+
+      <div className={S.rightPanel}>
+        <div className={cn(S.formContainer, containerClassName)}>
+          <div className={S.header}>
+            <h1 className={S.title}>{title}</h1>
+            {subtitle && <p className={S.subtitle}>{subtitle}</p>}
+          </div>
+
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/widgets/SybilionAuthLayout/index.ts

@@ -0,0 +1,6 @@
+export {
+  SybilionAuthLayout,
+  SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL,
+  type SybilionAuthLayoutProps,
+} from './SybilionAuthLayout';
+export { SybilionAuthHeadline } from './SybilionAuthHeadline';

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.styl

@@ -0,0 +1,48 @@
+.socialButtonContainer
+  display flex
+  width 100%
+  gap 10px
+  margin-bottom 10px
+
+.socialButton
+  flex 1
+  height 48px
+  padding 14px 16px
+  font-size 14px
+  font-weight 600
+  border-radius 14px
+  border 1px solid var(--border)
+
+.errorMessage
+  color red
+  padding 10px
+  font-size 14px
+  margin-bottom 10px
+
+.forgotPassword
+  text-align right
+  margin-bottom 24px
+
+.forgotPasswordLink
+  color var(--primary)
+  text-decoration none
+  font-size 14px
+  font-family 'Manrope', sans-serif
+  font-weight 500
+  transition opacity 0.2s
+
+  &:hover
+    opacity 0.8
+
+.version
+  display block
+  margin-top var(--p-8)
+  padding-bottom var(--p-2)
+  width 100%
+  box-sizing border-box
+  text-align center
+  font-size 14px
+  color var(--muted-foreground)
+  opacity 0.5
+  transition opacity 0.3s ease-out
+  white-space nowrap

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string };
+export default mod;

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.tsx

@@ -0,0 +1,59 @@
+import { Link } from 'react-router-dom';
+
+import { Button } from '#uilib/components/ui/Button';
+
+import S from './SybilionSignInPanel.styl';
+
+export type SybilionSignInPanelProps = {
+  onSignIn: () => void | Promise<void>;
+  isSigningIn?: boolean;
+  error?: string | null;
+  forgotPasswordTo: string;
+  releasesTo?: string;
+  versionLabel?: string;
+  primaryButtonLabel?: string;
+  connectingLabel?: string;
+};
+
+export function SybilionSignInPanel({
+  onSignIn,
+  isSigningIn = false,
+  error,
+  forgotPasswordTo,
+  releasesTo,
+  versionLabel,
+  primaryButtonLabel = 'Sign-in',
+  connectingLabel = 'Connecting...',
+}: SybilionSignInPanelProps) {
+  const signingIn = Boolean(isSigningIn);
+
+  return (
+    <>
+      <div className={S.socialButtonContainer}>
+        <Button
+          variant="outline"
+          type="button"
+          className={S.socialButton}
+          onClick={() => void onSignIn()}
+          disabled={signingIn}
+        >
+          {signingIn ? connectingLabel : primaryButtonLabel}
+        </Button>
+      </div>
+
+      {error ? <div className={S.errorMessage}>{error}</div> : null}
+
+      <div className={S.forgotPassword}>
+        <Link to={forgotPasswordTo} className={S.forgotPasswordLink}>
+          Forgot password?
+        </Link>
+      </div>
+
+      {releasesTo && versionLabel ? (
+        <Link className={S.version} to={releasesTo}>
+          v{versionLabel}
+        </Link>
+      ) : null}
+    </>
+  );
+}

package/src/components/widgets/SybilionSignInPanel/index.ts

@@ -0,0 +1,4 @@
+export {
+  SybilionSignInPanel,
+  type SybilionSignInPanelProps,
+} from './SybilionSignInPanel';

package/src/docs/config/webpack.config.js

@@ -20,6 +20,7 @@ const FaviconWebpackPlugin = require('favicons-webpack-plugin');
 const pkg = require('../../../package.json');
 
 const themeStyl = pathResolve(paths.src, 'theme.styl');
+const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
 
 export default (env, argv) => {
   const isDev = argv.mode === 'development';
@@ -148,7 +149,7 @@ export default (env, argv) => {
             noErrorOnMissing: true,
           },
           {
-            from: `${paths.assets}/logo.svg`,
+            from: logoSvgPath,
             to: paths.build,
             noErrorOnMissing: true,
           },
@@ -175,9 +176,9 @@ export default (env, argv) => {
               minifyURLs: true,
             },
       }),
-      existsSync(`${paths.assets}/logo.svg`) &&
+      existsSync(logoSvgPath) &&
         new FaviconWebpackPlugin({
-          logo: `${paths.assets}/logo.svg`,
+          logo: logoSvgPath,
           mode: 'webapp',
           devMode: 'webapp',
           favicons: {

package/src/docs/contexts/theme-context.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 import { Theme as ThemeRoot } from '@homecode/ui';
 
@@ -10,10 +16,12 @@ const ThemeContext = createContext<{
   theme: ThemeMode;
   isDarkMode: boolean;
   setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
 }>({
   theme: 'light',
   isDarkMode: false,
   setTheme: () => {},
+  toggleTheme: () => {},
 });
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -25,6 +33,10 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     getThemeConfig(theme === 'dark'),
   );
 
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
   useEffect(() => {
     setCurrThemeConfig(getThemeConfig(theme === 'dark'));
   }, [theme]);
@@ -44,6 +56,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
         theme,
         isDarkMode: theme === 'dark',
         setTheme,
+        toggleTheme,
       }}
     >
       <ThemeRoot config={currThemeConfig} />

package/src/docs/pages/NavUserHeaderPage.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useState } from 'react';
-
 import { DropdownMenuItem } from '#uilib/components/ui/DropdownMenu';
 import { NavUserHeader } from '#uilib/components/ui/NavUserHeader';
 import { PageContentSection } from '#uilib/components/ui/Page';
@@ -9,19 +7,6 @@ import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
 export default function NavUserHeaderPage() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-    return () => {
-      delete document.documentElement.dataset.theme;
-    };
-  }, [theme]);
-
-  const onThemeToggle = useCallback(() => {
-    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
-  }, []);
-
   const customMenuItems = (
     <>
       <DropdownMenuItem>
@@ -40,7 +25,7 @@ export default function NavUserHeaderPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'NavUserHeader' }]}
         title="NavUserHeader"
-        subheader="User menu with label, custom rows, theme toggle, and logout."
+        subheader="User menu with label, custom rows, theme toggle (docs ThemeProvider), and logout."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection
@@ -56,8 +41,6 @@ export default function NavUserHeaderPage() {
               email: 'demo@sybilion.io',
               avatar: '',
             }}
-            theme={theme}
-            onThemeToggle={onThemeToggle}
             onLogout={() => {
               console.info('[docs] logout');
             }}
@@ -75,8 +58,6 @@ export default function NavUserHeaderPage() {
               email: 'compact@sybilion.io',
               avatar: '',
             }}
-            theme={theme}
-            onThemeToggle={onThemeToggle}
             onLogout={() => {
               console.info('[docs] logout compact');
             }}