@sybilion/uilib 1.2.8 → 1.2.10

package/src/components/ui/NavUserHeader/NavUserHeader.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import {
   MoonIcon,
   SignOutIcon,
@@ -33,8 +33,16 @@ export function NavUserHeader({
   onLogout,
   signInSlot,
   onSignInClick,
+  theme: themeFromHost,
+  onThemeToggle: onThemeToggleFromHost,
 }: NavUserHeaderProps) {
-  const { toggleTheme, theme } = useTheme();
+  const docsTheme = useTheme();
+  const hostControlsTheme =
+    themeFromHost !== undefined && onThemeToggleFromHost !== undefined;
+  const theme = hostControlsTheme ? themeFromHost : docsTheme.theme;
+  const toggleTheme = hostControlsTheme
+    ? onThemeToggleFromHost
+    : docsTheme.toggleTheme;
   const authenticated = isAuthenticated ?? true;
 
   const avatarUrl = user?.avatar ?? '';

package/src/components/ui/NavUserHeader/NavUserHeader.types.ts

@@ -20,4 +20,7 @@ export type NavUserHeaderProps = {
   /** Replaces default “Log in” control when signed out. */
   signInSlot?: ReactNode;
   onSignInClick?: () => void;
+  /** When both are set, theme row uses these instead of uilib `ThemeProvider` context. */
+  theme?: 'light' | 'dark';
+  onThemeToggle?: () => void;
 };

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/SybilionAppHeader/SybilionAppHeader.tsx

@@ -20,6 +20,10 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps &
     pageHeaderId?: string;
     actionsAnchorId?: string;
     actionsAnchorClassName?: string;
+    /** Renders before `NavUserHeader` inside the page actions anchor (e.g. impersonation). */
+    actionsStart?: ReactNode;
+    /** Renders after `NavUserHeader` inside the page actions anchor (e.g. notifications). */
+    actionsEnd?: ReactNode;
     /** Branded markup; omit for default lucide tile + «Sybilion». */
     logo?: ReactNode;
     logoAreaClassName?: string;
@@ -31,6 +35,8 @@ export function SybilionAppHeader({
   pageHeaderId,
   actionsAnchorId = PAGE_HEADER_ACTIONS_ID,
   actionsAnchorClassName,
+  actionsStart,
+  actionsEnd,
   pathname,
   onNavigate,
   authenticated,
@@ -67,7 +73,9 @@ export function SybilionAppHeader({
         id={actionsAnchorId}
         className={cn(S.actionsAnchor, actionsAnchorClassName)}
       >
+        {actionsStart}
         <NavUserHeader {...navUserHeaderProps} />
+        {actionsEnd}
       </div>
     </AppHeaderPortal>
   );

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,51 @@
+.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
+  position absolute
+  bottom 0
+  right 0
+  display block
+  margin-top var(--p-8)
+  padding-bottom var(--p-2)
+  width 50%
+  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/contexts/theme-context.tsx

@@ -0,0 +1,106 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { Theme as ThemeRoot } from '@homecode/ui';
+
+import {
+  getThemeConfig as defaultGetThemeConfig,
+  type GetThemeConfigOptions,
+} from '#uilib/docs/lib/theme';
+
+export type ThemeMode = 'light' | 'dark';
+
+export type GetThemeConfigFn = (
+  isDarkTheme: boolean,
+  options?: GetThemeConfigOptions,
+) => ReturnType<typeof defaultGetThemeConfig>;
+
+export type { GetThemeConfigOptions };
+
+const ThemeContext = createContext<{
+  theme: ThemeMode;
+  isDarkMode: boolean;
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
+}>({
+  theme: 'light',
+  isDarkMode: false,
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+  /** When false, DOM classes still update but theme is not persisted to `localStorage`. */
+  allowLocalStorage?: boolean;
+  /** Override docs default active/accent token (`DEFAULT_THEME_ACTIVE_COLOR`). Passed into `getThemeConfig`. */
+  activeColor?: string;
+  /** Homecode theme config; defaults to uilib docs palette. */
+  getThemeConfig?: GetThemeConfigFn;
+};
+
+export function ThemeProvider({
+  children,
+  allowLocalStorage = true,
+  activeColor,
+  getThemeConfig: getThemeConfigProp,
+}: ThemeProviderProps) {
+  const getThemeConfig = getThemeConfigProp ?? defaultGetThemeConfig;
+
+  const themeConfigOptions = useMemo<GetThemeConfigOptions>(
+    () => ({ activeColor }),
+    [activeColor],
+  );
+
+  const [theme, setTheme] = useState<ThemeMode>(() => {
+    return (localStorage.getItem('theme') as ThemeMode) || 'light';
+  });
+
+  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
+    getThemeConfig(theme === 'dark', themeConfigOptions),
+  );
+
+  const toggleTheme = useCallback(() => {
+    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  useEffect(() => {
+    setCurrThemeConfig(getThemeConfig(theme === 'dark', themeConfigOptions));
+  }, [theme, getThemeConfig, themeConfigOptions]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const effectiveTheme = theme;
+
+    root.classList.remove('light', 'dark');
+    root.classList.add(effectiveTheme);
+    if (allowLocalStorage) {
+      localStorage.setItem('theme', theme);
+    }
+  }, [theme, allowLocalStorage]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      isDarkMode: theme === 'dark',
+      setTheme,
+      toggleTheme,
+    }),
+    [theme, toggleTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <ThemeRoot config={currThemeConfig} />
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

package/src/docs/App/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import { Button } from '#uilib/components/ui/Button';
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import { MoonIcon, SunIcon } from '@phosphor-icons/react';
 
 export function ThemeToggle() {

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

@@ -1,68 +1,8 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-
-import { Theme as ThemeRoot } from '@homecode/ui';
-
-import { getThemeConfig } from '../lib/theme';
-
-export type ThemeMode = 'light' | 'dark';
-
-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 }) {
-  const [theme, setTheme] = useState<ThemeMode>(() => {
-    return (localStorage.getItem('theme') as ThemeMode) || 'light';
-  });
-
-  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
-    getThemeConfig(theme === 'dark'),
-  );
-
-  const toggleTheme = useCallback(() => {
-    setTheme(theme === 'dark' ? 'light' : 'dark');
-  }, [theme, setTheme]);
-
-  useEffect(() => {
-    setCurrThemeConfig(getThemeConfig(theme === 'dark'));
-  }, [theme]);
-
-  useEffect(() => {
-    const root = document.documentElement;
-    const effectiveTheme = theme;
-
-    root.classList.remove('light', 'dark');
-    root.classList.add(effectiveTheme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        theme,
-        isDarkMode: theme === 'dark',
-        setTheme,
-        toggleTheme,
-      }}
-    >
-      <ThemeRoot config={currThemeConfig} />
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => useContext(ThemeContext);
+export {
+  ThemeProvider,
+  useTheme,
+  type GetThemeConfigFn,
+  type GetThemeConfigOptions,
+  type ThemeMode,
+  type ThemeProviderProps,
+} from '#uilib/contexts/theme-context';

package/src/docs/index.tsx

@@ -9,7 +9,7 @@ const root = createRoot(elem);
 
 root.render(
   <BrowserRouter>
-    <ThemeProvider>
+    <ThemeProvider activeColor="#">
       <App />
     </ThemeProvider>
   </BrowserRouter>,