@licklist/design 0.78.21 → 0.78.26

package/src/auth/Authorizer.tsx

@@ -1,23 +1,31 @@
-import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { matchPath, useLocation } from 'react-router-dom'
+import { ReactNode, useEffect, useState, useCallback, useContext, useRef } from 'react'
+import { matchPath, useLocation, useNavigate } from 'react-router-dom'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import { ROUTES, MATCH_ROUTE_PATTERNS } from '@licklist/core/dist/Config'
 import useAuthApi from '@licklist/plugins/dist/hooks/Api/useAuthApi'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
 import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import StorageContext from '@licklist/plugins/dist/context/app/StorageContext'
+import JsonService from '@licklist/plugins/dist/services/Json/JsonService'
+import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { BlockLoader } from '../static/loader/BlockLoader'
 
 export interface AuthorizerProps {
   children?: ReactNode | ReactNode[]
 }
 
+const AUTH_CONTEXT_KEY = 'auth'
+
 function Authorizer(props: AuthorizerProps) {
   const { children } = props
   const auth = useAuth()
   const user = useUser()
   const { useProfile } = useAuthApi()
+  const storage = useContext(StorageContext)
+  const isLoggingOut = useRef(false)
 
   const { pathname } = useLocation()
+  const navigate = useNavigate()
 
   // This will re-fetch user's profile
   const profile = useProfile()
@@ -40,6 +48,24 @@ function Authorizer(props: AuthorizerProps) {
     [],
   )
 
+  // Check auth on every route change - if storage was cleared, logout immediately
+  useEffect(() => {
+    if (isLoggingOut.current) return
+
+    const storedAuth = storage.get(AUTH_CONTEXT_KEY)
+    const parsedAuth = storedAuth ? JsonService.decode<IAuth>(storedAuth) : null
+
+    // If we have auth in memory but not in storage, session was cleared
+    if (auth.secrets !== null && !parsedAuth) {
+      isLoggingOut.current = true
+      auth.setSecrets(null)
+      user.setProfile(null)
+
+      const route = RouteService.getCurrentRoute()
+      navigate([ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'), { replace: true })
+    }
+  }, [pathname, auth.secrets, storage, navigate, auth, user])
+
   useEffect(() => {
     if (profile.isLoading || profile.isFetching) {
       return
@@ -54,38 +80,41 @@ function Authorizer(props: AuthorizerProps) {
       return
     }
 
-    if (
-      [
-        ROUTES.LOGIN_PAGE,
-        ROUTES.REGISTER_PAGE,
-        ROUTES.PRIVACY_PAGE,
-        ROUTES.TERMS_PAGE,
-        ROUTES.PRIVACY_FACTS_PAGE,
-        ROUTES.CHANGE_PASSWORD,
-        ROUTES.FORGOT_PASSWORD,
-        ROUTES.SSO_LOGIN,
-        ROUTES.MAINTENANCE_PAGE,
-        ...matchedPathPatternUrls(),
-      ].includes(pathname)
-    ) {
-      setIsValidated(() => true)
+    const publicRoutes = [
+      ROUTES.LOGIN_PAGE,
+      ROUTES.REGISTER_PAGE,
+      ROUTES.PRIVACY_PAGE,
+      ROUTES.TERMS_PAGE,
+      ROUTES.PRIVACY_FACTS_PAGE,
+      ROUTES.CHANGE_PASSWORD,
+      ROUTES.FORGOT_PASSWORD,
+      ROUTES.SSO_LOGIN,
+      ROUTES.MAINTENANCE_PAGE,
+      ...matchedPathPatternUrls(),
+    ]
+
+    // If we're on a public route (e.g. /login), mark as validated and never redirect
+    if (publicRoutes.includes(pathname)) {
+      setIsValidated(true)
       return
     }
 
     const route = RouteService.getCurrentRoute()
 
-    RouteService.redirectTo(
-      [ROUTES.MAINTENANCE_PAGE, `returnUrl=${escape(route)}`].join('?'),
+    navigate(
+      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'),
+      { replace: true },
     )
   }, [
     auth.secrets,
     user.profile,
     profile.data,
-    matchedPathPatternUrls,
     profile.isError,
     profile.isLoading,
     profile.isFetching,
     pathname,
+    matchedPathPatternUrls,
+    navigate,
   ])
 
   if (profile.isFetching || profile.isLoading || !isValidated)

package/src/index.ts

@@ -45,4 +45,5 @@ export * from './fullscreen-loader'
 export * from './pages'
 export { default as RadioButton } from './customRadioButton/RadioButton'
 export * from './PageNotFound'
-export * from './UnderMaintenance'
+export * from './UnderMaintenance'
+export * from './v2/navigation/DashboardLayout'

package/src/v2/components/EntityHeader/EntityHeader.scss

@@ -0,0 +1,133 @@
+.entity-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    border-radius: 8px;
+    background: var(--surfaces-main-surface-secondary, #F4F4F7);
+    cursor: pointer;
+    transition: background 0.2s ease;
+    width: 100%;
+    box-sizing: border-box;
+
+    &:hover {
+        background: var(--surfaces-main-surface-secondary-hover, #ECEDF2);
+
+        .entity-header__badge {
+            background: var(--surfaces-main-surface-tertiary-hover, #FFFFFF);
+        }
+    }
+
+    &:active {
+        background: var(--surfaces-main-surface-secondary-pressed, #E4E5EC);
+    }
+
+    &--collapsed {
+        justify-content: center;
+    }
+
+    &__avatar {
+        flex-shrink: 0;
+        border-radius: 50%;
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    &__placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        svg {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        span {
+            font-family: var(--font-family-sans);
+            font-weight: 700;
+            color: var(--labels-main-label-secondary, #626A90);
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 4px;
+        min-width: 0;
+    }
+
+    &__name {
+        margin: 0;
+        font-family: var(--font-family-sans);
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 18px;
+        color: var(--labels-main-label-primary, #121E52);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px 8px;
+        background: var(--surfaces-main-surface-tertiary, #E8E9EF);
+        border-radius: 8px;
+        width: fit-content;
+        transition: background 0.2s ease;
+
+        span {
+            font-family: var(--font-family-mono);
+            font-size: 10px;
+            font-weight: 600;
+            line-height: 12px;
+            color: var(--labels-main-label-secondary, #626A90);
+            white-space: nowrap;
+        }
+    }
+
+    &--sm {
+        gap: 8px;
+
+        .entity-header__name {
+            font-size: 13px;
+            line-height: 16px;
+        }
+
+        .entity-header__badge span {
+            font-size: 9px;
+        }
+    }
+
+    &--lg {
+        gap: 16px;
+
+        .entity-header__name {
+            font-size: 18px;
+            line-height: 24px;
+        }
+
+        .entity-header__badge span {
+            font-size: 11px;
+        }
+    }
+}

package/src/v2/components/EntityHeader/EntityHeader.stories.tsx

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { EntityHeader } from './EntityHeader'
+
+export default {
+    title: 'v2/Components/EntityHeader',
+    component: EntityHeader,
+    argTypes: {
+        name: { control: 'text' },
+        id: { control: 'text' },
+        idLabel: { control: 'text' },
+        imageUrl: { control: 'text' },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        collapsed: { control: 'boolean' },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta<typeof EntityHeader>
+
+type Story = StoryObj<typeof EntityHeader>
+
+export const Default: Story = {
+    args: {
+        name: "Sharky's Soft Play",
+        id: '01',
+        idLabel: 'Venue ID',
+        size: 'md',
+        collapsed: false,
+    },
+}
+
+export const WithImage: Story = {
+    args: {
+        name: "Sharky's Soft Play",
+        id: '01',
+        idLabel: 'Venue ID',
+        imageUrl: 'https://i.pravatar.cc/150?img=12',
+        size: 'md',
+    },
+}
+
+export const Collapsed: Story = {
+    args: {
+        name: "Sharky's Soft Play",
+        id: '01',
+        idLabel: 'Venue ID',
+        size: 'md',
+        collapsed: true,
+    },
+}
+
+export const Small: Story = {
+    args: {
+        name: "Sharky's Soft Play",
+        id: '01',
+        idLabel: 'Venue ID',
+        size: 'sm',
+    },
+}
+
+export const Large: Story = {
+    args: {
+        name: "Sharky's Soft Play",
+        id: '01',
+        idLabel: 'Venue ID',
+        size: 'lg',
+    },
+}
+
+export const ProviderId: Story = {
+    args: {
+        name: 'Entertainment Group',
+        id: 'P-456',
+        idLabel: 'Provider ID',
+        size: 'md',
+    },
+}
+
+export const CompanyId: Story = {
+    args: {
+        name: 'Acme Corporation',
+        id: 'C-789',
+        idLabel: 'Company ID',
+        size: 'md',
+    },
+}
+
+export const NoId: Story = {
+    args: {
+        name: "Sharky's Soft Play",
+        size: 'md',
+    },
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <EntityHeader name="Sharky's Soft Play" id="01" idLabel="Venue ID" size="sm" />
+            <EntityHeader name="Sharky's Soft Play" id="01" idLabel="Venue ID" size="md" />
+            <EntityHeader name="Sharky's Soft Play" id="01" idLabel="Venue ID" size="lg" />
+        </div>
+    ),
+}

package/src/v2/components/EntityHeader/EntityHeader.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import './EntityHeader.scss'
+
+export interface EntityHeaderProps {
+    name: string
+    id?: string
+    idLabel?: string
+    imageUrl?: string
+    size?: 'sm' | 'md' | 'lg'
+    collapsed?: boolean
+    className?: string
+}
+
+export const EntityHeader: React.FC<EntityHeaderProps> = ({
+    name,
+    id,
+    idLabel = 'ID',
+    imageUrl,
+    size = 'md',
+    collapsed = false,
+    className = '',
+}) => {
+    const sizeMap = {
+        sm: 32,
+        md: 47,
+        lg: 64,
+    }
+
+    const fontSizeMap = {
+        sm: 12,
+        md: 18,
+        lg: 24,
+    }
+
+    const dimension = sizeMap[size]
+    const initialFontSize = fontSizeMap[size]
+    const circleRadius = (dimension / 2) - 1 // Account for stroke width
+
+    return (
+        <div className={`entity-header entity-header--${size} ${collapsed ? 'entity-header--collapsed' : ''} ${className}`.trim()}>
+            <div 
+                className="entity-header__avatar"
+                style={{ width: dimension, height: dimension }}
+            >
+                {imageUrl ? (
+                    <img src={imageUrl} alt={name} className="entity-header__image" />
+                ) : (
+                    <div className="entity-header__placeholder">
+                        <svg width={dimension} height={dimension} viewBox={`0 0 ${dimension} ${dimension}`} fill="none">
+                            <circle 
+                                cx={dimension / 2} 
+                                cy={dimension / 2} 
+                                r={circleRadius} 
+                                fill="var(--fills-main-fill-secondary, #626A90)"
+                                fillOpacity="0.2"
+                                stroke="var(--fills-main-fill-secondary, #626A90)"
+                                strokeWidth="2"
+                            />
+                        </svg>
+                        <span style={{ fontSize: initialFontSize }}>{name?.[0]?.toUpperCase() || 'S'}</span>
+                    </div>
+                )}
+            </div>
+            {!collapsed && (
+                <div className="entity-header__text">
+                    <h3 className="entity-header__name">{name}</h3>
+                    {id && (
+                        <div className="entity-header__badge">
+                            <span>{idLabel}: {id}</span>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}

package/src/v2/components/EntityHeader/index.ts

@@ -0,0 +1 @@
+export { EntityHeader, type EntityHeaderProps } from './EntityHeader'