@licklist/design 0.78.5-dev.33 → 0.78.5-dev.35

package/dist/v2/styles/tokens/_status.scss

@@ -0,0 +1,108 @@
+/* Status/Alert Color tokens derived from Figma Alerts & Errors page
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=167:968
+ */
+
+:root {
+    /* Success/Green Status Colors */
+    --color-success-fill: #2d6b18;
+    --color-success-background: #eef9ea;
+    --color-success-border: #c9ecbd;
+
+    /* Error/Red Status Colors */
+    --color-error-fill: #cc3c35;
+    --color-error-background: #fceceb;
+    --color-error-border: #f5c4c2;
+
+    /* Alert/Warning/Yellow Status Colors */
+    --color-alert-fill: #fd7e14;
+    --color-alert-background: #fcf6e7;
+    --color-alert-border: #f6e3b4;
+
+    /* Info/Blue Status Colors */
+    --color-info-fill: #0e8ce2;
+    --color-info-background: #e7f4fc;
+    --color-info-border: #b4dbf6;
+}
+
+/* Legacy format for compatibility with existing alias system */
+:root {
+    /* Surfaces - Status backgrounds */
+    --surfaces-status-background-success: var(--color-success-background);
+    --surfaces-status-background-error: var(--color-error-background);
+    --surfaces-status-background-alert: var(--color-alert-background);
+    --surfaces-status-background-info: var(--color-info-background);
+
+    /* Borders - Status borders */
+    --borders-status-border-success: var(--color-success-border);
+    --borders-status-border-error: var(--color-error-border);
+    --borders-status-border-alert: var(--color-alert-border);
+    --borders-status-border-info: var(--color-info-border);
+
+    /* Fills - Status icons/text */
+    --fills-status-fill-success: var(--color-success-fill);
+    --fills-status-fill-error: var(--color-error-fill);
+    --fills-status-fill-alert: var(--color-alert-fill);
+    --fills-status-fill-info: var(--color-info-fill);
+}
+
+/* SCSS Map for status colors */
+$status-colors: (
+    success: (
+        fill: var(--color-success-fill),
+        background: var(--color-success-background),
+        border: var(--color-success-border)
+    ),
+    error: (
+        fill: var(--color-error-fill),
+        background: var(--color-error-background),
+        border: var(--color-error-border)
+    ),
+    alert: (
+        fill: var(--color-alert-fill),
+        background: var(--color-alert-background),
+        border: var(--color-alert-border)
+    ),
+    info: (
+        fill: var(--color-info-fill),
+        background: var(--color-info-background),
+        border: var(--color-info-border)
+    )
+);
+
+/* Mixins for status colors */
+@mixin status-success() {
+    background-color: var(--surfaces-status-background-success);
+    border-color: var(--borders-status-border-success);
+    color: var(--fills-status-fill-success);
+}
+
+@mixin status-error() {
+    background-color: var(--surfaces-status-background-error);
+    border-color: var(--borders-status-border-error);
+    color: var(--fills-status-fill-error);
+}
+
+@mixin status-alert() {
+    background-color: var(--surfaces-status-background-alert);
+    border-color: var(--borders-status-border-alert);
+    color: var(--fills-status-fill-alert);
+}
+
+@mixin status-info() {
+    background-color: var(--surfaces-status-background-info);
+    border-color: var(--borders-status-border-info);
+    color: var(--fills-status-fill-info);
+}
+
+/* Helper mixin for getting status colors */
+@function get-status-color($status, $type) {
+    $status-map: map-get($status-colors, $status);
+    @if $status-map {
+        $color: map-get($status-map, $type);
+        @if $color {
+            @return $color;
+        }
+    }
+    @warn "Unknown status color: #{$status}.#{$type}";
+    @return null;
+}

package/dist/v2/styles/tokens/_typography.scss

@@ -0,0 +1,146 @@
+/* Typography tokens and mixins derived from Figma
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
+ */
+
+:root {
+    /* Families */
+    --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+    /* Headings Desktop */
+    --heading-xxl-size: 44px;
+    --heading-xxl-line: 48px;
+    --heading-xxl-weight: 600;
+    --heading-xl-size: 32px;
+    --heading-xl-line: 36px;
+    --heading-xl-weight: 700;
+    --heading-h1-size: 24px;
+    --heading-h1-line: 28px;
+    --heading-h1-weight: 600;
+    --heading-h2-size: 20px;
+    --heading-h2-line: 24px;
+    --heading-h2-weight: 600;
+    --heading-h3-size: 17px;
+    --heading-h3-line: 20px;
+    --heading-h3-weight: 600;
+    --heading-h4-size: 15px;
+    --heading-h4-line: 18px;
+    --heading-h4-weight: 600;
+    --heading-h5-size: 13px;
+    --heading-h5-line: 16px;
+    --heading-h5-weight: 500;
+    --heading-h6-size: 11px;
+    --heading-h6-line: 14px;
+    --heading-h6-weight: 500;
+
+    /* Headings Mobile */
+    --heading-xxl-mobile-size: 32px;
+    --heading-xxl-mobile-line: 36px;
+    --heading-xxl-mobile-weight: 600;
+    --heading-xl-mobile-size: 26px;
+    --heading-xl-mobile-line: 30px;
+    --heading-xl-mobile-weight: 700;
+    --heading-h1-mobile-size: 20px;
+    --heading-h1-mobile-line: 23px;
+    --heading-h1-mobile-weight: 600;
+    --heading-h2-mobile-size: 18px;
+    --heading-h2-mobile-line: 22px;
+    --heading-h2-mobile-weight: 600;
+    --heading-h3-mobile-size: 16px;
+    --heading-h3-mobile-line: 18px;
+    --heading-h3-mobile-weight: 600;
+    --heading-h4-mobile-size: 14px;
+    --heading-h4-mobile-line: 16px;
+    --heading-h4-mobile-weight: 600;
+    --heading-h5-mobile-size: 13px;
+    --heading-h5-mobile-line: 16px;
+    --heading-h5-mobile-weight: 500;
+    --heading-h6-mobile-size: 11px;
+    --heading-h6-mobile-line: 14px;
+    --heading-h6-mobile-weight: 500;
+
+    /* Body Desktop */
+    --text-xl-size: 20px;
+    --text-xl-line: 26px;
+    --text-xl-weight: 400;
+    --text-large-size: 18px;
+    --text-large-line: 24px;
+    --text-large-weight: 400;
+    --text-regular-size: 15px;
+    --text-regular-line: 20px;
+    --text-regular-weight: 400;
+    --text-small-size: 13px;
+    --text-small-line: 16px;
+    --text-small-weight: 400;
+    --text-small-emphasis-weight: 500;
+    --text-small-bold-weight: 600;
+    --text-xs-size: 10px;
+    --text-xs-line: 13px;
+    --text-xs-weight: 500;
+    --text-xs-bold-weight: 600;
+}
+
+/* Breakpoint: adjust if your system uses different breakpoints */
+$bp-mobile-max: 767px;
+
+/* Map of variants to CSS variable tuples: (size, line, weight) */
+$typo-map: (
+    'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
+    'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
+    'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
+    'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
+    'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
+    'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
+    'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
+    'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
+
+    'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
+    'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
+    'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
+    'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
+    'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
+    'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
+    'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
+    'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
+
+    'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
+    'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
+    'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
+    'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
+    'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
+    'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
+    'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
+    'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
+);
+
+@mixin apply-typo($tuple) {
+    $size: nth($tuple, 1);
+    $line: nth($tuple, 2);
+    $weight: nth($tuple, 3);
+    $family: nth($tuple, 4);
+    font-family: $family;
+    font-size: $size;
+    line-height: $line;
+    font-weight: $weight;
+    color: var(--labels-main-label-primary, #121E52);
+}
+
+@mixin typography($variant) {
+    @if map-has-key($typo-map, $variant) {
+        @include apply-typo(map-get($typo-map, $variant));
+    }
+
+    @else {
+        /* Fallback to regular text */
+        @include apply-typo(map-get($typo-map, 'text.regular'));
+    }
+}
+
+/* Convenience mixin that switches to mobile variant under mobile breakpoint */
+@mixin responsive-heading($desktopVariant, $mobileVariant) {
+    @include typography($desktopVariant);
+
+    @media (max-width: $bp-mobile-max) {
+        @include typography($mobileVariant);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.33",
+  "version": "0.78.5-dev.35",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.9",
+    "@licklist/core": "0.36.1-dev.10",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "clsx": "2.1.1",
@@ -64,13 +64,14 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.1-dev.9",
+    "@licklist/core": "0.36.1-dev.10",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-aria/utils": "3.9.0",
     "@svgr/webpack": "^6.5.1",
     "@tanstack/react-table": "8.10.6",
@@ -108,6 +109,7 @@
     "i18next": "25.3.2",
     "konva": "6.0.0",
     "lodash": "4.17.21",
+    "lucide-react": "^0.555.0",
     "luxon": "3.5.0",
     "moment": "2.29.1",
     "react-bootstrap": "1.6.1",

package/rollup.config.js

@@ -40,6 +40,7 @@ export default [
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/v2/styles/*', dest: './dist/v2/styles' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),

package/src/assets/Trend-Down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 23V16H25V19.4375L15.7686 8.35938C15.5453 8.0916 15.1984 7.95968 14.8535 8.01074C14.5086 8.06191 14.215 8.2892 14.0791 8.61035L9.30176 19.9014L5.33203 13.9453L3.66797 15.0547L8.66797 22.5547L8.75098 22.6631C8.96072 22.9001 9.2733 23.0253 9.59375 22.9951C9.95991 22.9606 10.2776 22.7284 10.4209 22.3896L15.2812 10.9014L23.6973 21H19V23H27Z" fill="currentColor"/>
+</svg>

package/src/assets/Trend-Up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 9.99982V16.9998H25V13.5623L15.7686 24.6404C15.5453 24.9082 15.1984 25.0401 14.8535 24.9891C14.5086 24.9379 14.215 24.7106 14.0791 24.3895L9.06934 12.5486L4.58789 15.8084L3.41211 14.1912L8.91211 10.1912L9.00781 10.1297C9.23732 9.99988 9.51055 9.9646 9.76758 10.0359C10.0615 10.1176 10.302 10.3293 10.4209 10.6102L15.2812 22.0984L23.6973 11.9998H19V9.99982H27Z" fill="currentColor"/>
+</svg>

package/src/index.ts

@@ -45,4 +45,6 @@ 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/dashboard-analytics'
+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'