@licklist/design 0.78.5-dev.3 → 0.78.5-dev.31

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

@@ -0,0 +1,266 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { Typography } from './Typography'
+
+export default {
+  title: 'v2/Design System/Typography',
+  component: Typography,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'heading.xxl',
+        'heading.xl',
+        'heading.h1',
+        'heading.h2',
+        'heading.h3',
+        'heading.h4',
+        'heading.h5',
+        'heading.h6',
+        'text.xl',
+        'text.large',
+        'text.regular',
+        'text.small',
+        'text.small.emphasis',
+        'text.small.bold',
+        'text.xs',
+        'text.xs.bold'
+      ],
+      description: 'Typography variant to apply',
+    },
+    as: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'],
+      description: 'HTML element to render as',
+    },
+    color: {
+      control: 'color',
+      description: 'Custom text color',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta
+
+type Story = StoryObj<typeof Typography>
+
+// Headings
+export const HeadingXXL: Story = {
+  args: {
+    variant: 'heading.xxl',
+    children: 'The all-in-one booking platform for Leisure and Hospitality Venues',
+    as: 'h1',
+  },
+}
+
+export const HeadingXL: Story = {
+  args: {
+    variant: 'heading.xl',
+    children: 'Extra Large Heading',
+    as: 'h1',
+  },
+}
+
+export const HeadingH1: Story = {
+  args: {
+    variant: 'heading.h1',
+    children: 'H1 - Large Heading',
+    as: 'h1',
+  },
+}
+
+export const HeadingH2: Story = {
+  args: {
+    variant: 'heading.h2',
+    children: 'H2 - Heading',
+    as: 'h2',
+  },
+}
+
+export const HeadingH3: Story = {
+  args: {
+    variant: 'heading.h3',
+    children: 'H3 - Heading',
+    as: 'h3',
+  },
+}
+
+export const HeadingH4: Story = {
+  args: {
+    variant: 'heading.h4',
+    children: 'H4 - Heading',
+    as: 'h4',
+  },
+}
+
+export const HeadingH5: Story = {
+  args: {
+    variant: 'heading.h5',
+    children: 'H5 - Small Heading',
+    as: 'h5',
+  },
+}
+
+export const HeadingH6: Story = {
+  args: {
+    variant: 'heading.h6',
+    children: 'H6 - XS Heading',
+    as: 'h6',
+  },
+}
+
+// Body Text
+export const BodyTextXL: Story = {
+  args: {
+    variant: 'text.xl',
+    children: 'This is extra large body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.',
+    as: 'p',
+  },
+}
+
+export const BodyTextLarge: Story = {
+  args: {
+    variant: 'text.large',
+    children: 'This is large body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.',
+    as: 'p',
+  },
+}
+
+export const BodyTextRegular: Story = {
+  args: {
+    variant: 'text.regular',
+    children: 'This is regular body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.',
+    as: 'p',
+  },
+}
+
+export const BodyTextSmall: Story = {
+  args: {
+    variant: 'text.small',
+    children: 'This is small body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.',
+    as: 'p',
+  },
+}
+
+export const BodyTextSmallEmphasis: Story = {
+  args: {
+    variant: 'text.small.emphasis',
+    children: 'This is small body copy text with emphasis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
+    as: 'p',
+  },
+}
+
+export const BodyTextSmallBold: Story = {
+  args: {
+    variant: 'text.small.bold',
+    children: 'This is small body copy text in bold. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
+    as: 'p',
+  },
+}
+
+export const BodyTextXS: Story = {
+  args: {
+    variant: 'text.xs',
+    children: 'This is extra small body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
+    as: 'p',
+  },
+}
+
+export const BodyTextXSBold: Story = {
+  args: {
+    variant: 'text.xs.bold',
+    children: 'This is extra small body copy text in bold. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
+    as: 'p',
+  },
+}
+
+// Showcase all variations
+export const AllHeadingVariations: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <Typography variant="heading.xxl" as="h1">
+        XXL Heading
+      </Typography>
+      <Typography variant="heading.xl" as="h1">
+        XL Heading
+      </Typography>
+      <Typography variant="heading.h1" as="h1">
+        H1 - Large Heading
+      </Typography>
+      <Typography variant="heading.h2" as="h2">
+        H2 - Heading
+      </Typography>
+      <Typography variant="heading.h3" as="h3">
+        H3 - Heading
+      </Typography>
+      <Typography variant="heading.h4" as="h4">
+        H4 - Heading
+      </Typography>
+      <Typography variant="heading.h5" as="h5">
+        H5 - Small Heading
+      </Typography>
+      <Typography variant="heading.h6" as="h6">
+        H6 - XS Heading
+      </Typography>
+    </div>
+  ),
+}
+
+export const AllBodyVariations: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Typography variant="text.xl" as="p">
+        Extra large body copy text
+      </Typography>
+      <Typography variant="text.large" as="p">
+        Large body copy text
+      </Typography>
+      <Typography variant="text.regular" as="p">
+        Regular body copy text
+      </Typography>
+      <Typography variant="text.small" as="p">
+        Small body copy text
+      </Typography>
+      <Typography variant="text.small.emphasis" as="p">
+        Small body copy text with emphasis
+      </Typography>
+      <Typography variant="text.small.bold" as="p">
+        Small body copy text in bold
+      </Typography>
+      <Typography variant="text.xs" as="p">
+        Extra small body copy text
+      </Typography>
+      <Typography variant="text.xs.bold" as="p">
+        Extra small body copy text in bold
+      </Typography>
+    </div>
+  ),
+}
+
+// Usage examples
+export const UsageExample: Story = {
+  render: () => (
+    <div style={{ padding: '24px' }}>
+      <Typography variant="heading.h1" as="h1">
+        Page Title
+      </Typography>
+      <Typography variant="text.regular" as="p" className="mt-3">
+        This is regular body text that flows naturally below the heading.
+      </Typography>
+      <Typography variant="heading.h2" as="h2" className="mt-8">
+        Section Heading
+      </Typography>
+      <Typography variant="text.regular" as="p" className="mt-3">
+        This is another paragraph of regular text that provides additional context
+        and details for the section above.
+      </Typography>
+      <Typography variant="heading.h4" as="h4" className="mt-6">
+        Subsection
+      </Typography>
+      <Typography variant="text.small" as="p" className="mt-2">
+        This is small text used for less prominent information.
+      </Typography>
+    </div>
+  ),
+}

package/src/v2/components/Typography/Typography.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+export type TypographyVariant = 
+  | 'heading.xxl'
+  | 'heading.xl'
+  | 'heading.h1'
+  | 'heading.h2'
+  | 'heading.h3'
+  | 'heading.h4'
+  | 'heading.h5'
+  | 'heading.h6'
+  | 'text.xl'
+  | 'text.large'
+  | 'text.regular'
+  | 'text.small'
+  | 'text.small.emphasis'
+  | 'text.small.bold'
+  | 'text.xs'
+  | 'text.xs.bold'
+
+export interface TypographyProps {
+  variant?: TypographyVariant
+  className?: string
+  children: React.ReactNode
+  as?: keyof JSX.IntrinsicElements
+  color?: string
+}
+
+export const Typography: React.FC<TypographyProps> = ({
+  variant = 'text.regular',
+  className = '',
+  children,
+  as = 'p',
+  color
+}) => {
+  const Component = as
+  
+  const getTypographyClass = (variant: TypographyVariant): string => {
+    const baseClass = `typography-${variant.replace(/\./g, '-')}`
+    return baseClass
+  }
+
+  const classes = [
+    'typography',
+    getTypographyClass(variant),
+    className
+  ].filter(Boolean).join(' ')
+
+  const style = color ? { color } : {}
+
+  return (
+    <Component className={classes} style={style}>
+      {children}
+    </Component>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Typography } from './Typography'
+export type { TypographyProps, TypographyVariant } from './Typography'

package/src/v2/hooks/useAuth.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react'
+import type { AuthCredentials, NavigationItem } from '../types/navigation'
+
+export const useAuth = (): AuthCredentials => {
+  // TODO: Replace with your actual auth logic
+  // This is just an example - you'd get this from your auth context/Redux/state management
+  const authState = {
+    roles: ['admin', 'venue_manager'],
+    permissions: ['view_reports', 'manage_bookings', 'send_messages', 'view_customers', 'view_analytics', 'manage_venue_settings'],
+    isAdmin: true,
+    isVenueUser: true,
+    venueId: '123'
+  }
+
+  return useMemo(() => authState, [])
+}
+
+export const useCanAccess = (credentials: AuthCredentials, item: NavigationItem): boolean => {
+  // Check admin only
+  if (item.adminOnly && !credentials.isAdmin) return false
+  
+  // Check venue required
+  if (item.venueRequired && !credentials.isVenueUser) return false
+  
+  // Check roles
+  if (item.requiredRoles && item.requiredRoles.length > 0) {
+    const hasRole = item.requiredRoles.some(role => credentials.roles.includes(role))
+    if (!hasRole) return false
+  }
+  
+  // Check permissions
+  if (item.requiredPermissions && item.requiredPermissions.length > 0) {
+    const hasPermission = item.requiredPermissions.some(perm => 
+      credentials.permissions.includes(perm)
+    )
+    if (!hasPermission) return false
+  }
+  
+  return true
+}

package/src/v2/index.ts

@@ -0,0 +1,105 @@
+/**
+ * V2 Design System - Main Export File
+ *
+ * This file exports all components, hooks, types, and utilities from the V2 design system.
+ * The V2 design system is built from Figma designs and includes:
+ * - Design tokens (colors, typography, spacing, etc.)
+ * - UI components (Alert, Button, etc.)
+ * - Navigation components (TopHat, Sidebar, etc.)
+ * - Hooks and utilities
+ */
+
+// ============================================================================
+// Components
+// ============================================================================
+
+// Alert Component
+export { Alert } from './components/Alert'
+export type { AlertProps, AlertVariant } from './components/Alert'
+
+// Button Component
+export { Button } from './components/Button'
+export type { ButtonProps } from './components/Button'
+
+// Colors Showcase
+export { ColorsShowcase, ColorSwatch } from './components/Colors'
+export type { ColorGroup } from './components/Colors'
+
+// Typography Component
+export { Typography } from './components/Typography'
+export type { TypographyProps, TypographyVariant } from './components/Typography'
+
+// ============================================================================
+// Navigation Components
+// ============================================================================
+
+// Core Navigation
+export { Navigation } from './navigation/Navigation'
+export type { NavigationProps } from './navigation/Navigation'
+
+// Navigation Building Blocks
+export { NavigationItem } from './navigation/NavigationItem'
+export type { NavigationItemProps } from './navigation/NavigationItem'
+
+export { NavigationSection } from './navigation/NavigationSection'
+export type { NavigationSectionProps } from './navigation/NavigationSection'
+
+// Figma-based Navigation Components
+export { FigmasSideBar } from './navigation/FigmasSideBar'
+export type { FigmasSideBarProps } from './navigation/FigmasSideBar'
+
+export { FigmasAdminSideBar } from './navigation/FigmasAdminSideBar'
+export type { FigmasAdminSideBarProps } from './navigation/FigmasAdminSideBar'
+
+export { FigmasTopHat } from './navigation/FigmasTopHat'
+export type { FigmasTopHatProps } from './navigation/FigmasTopHat'
+
+// Navigation Controls
+export { TopHatControlDisc } from './navigation/TopHatControlDisc'
+export type { TopHatControlDiscProps } from './navigation/TopHatControlDisc'
+
+export { SideBarToggleLarge } from './navigation/SideBarToggleLarge'
+export type { SideBarToggleLargeProps } from './navigation/SideBarToggleLarge'
+
+export { SidebarUserElement } from './navigation/SidebarUserElement'
+export type { SidebarUserElementProps } from './navigation/SidebarUserElement'
+
+// Navigation with Auth
+export { SidebarWithAuth } from './navigation/SidebarWithAuth'
+export type { SidebarWithAuthProps } from './navigation/SidebarWithAuth'
+
+// Navigation Configuration
+export { NAVIGATION_ITEMS } from './navigation/config'
+
+// Navigation Icons
+export * from './navigation/icons'
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export { useAuth, useCanAccess } from './hooks/useAuth'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type { NavigationItem, AuthCredentials } from './types/navigation'
+
+// ============================================================================
+// Design Tokens
+// ============================================================================
+
+/**
+ * Design tokens are available as SCSS imports from:
+ * - @/v2/styles/tokens/_colors.scss
+ * - @/v2/styles/tokens/_typography.scss
+ * - @/v2/styles/tokens/_sizes.scss
+ * - @/v2/styles/tokens/_status.scss
+ * - @/v2/styles/tokens/_aliases.scss
+ *
+ * Component styles are available from:
+ * - @/v2/styles/components/Button.scss
+ * - @/v2/styles/form/NewInput.scss
+ * - @/v2/styles/navigation/*.scss
+ */

package/src/v2/navigation/FigmasAdminSideBar/FigmasAdminSideBar.scss

@@ -0,0 +1,148 @@
+@import '../../../styles/overrides/functions';
+
+.figmas-admin-sidebar {
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 8px;
+    height: 100%;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+
+    &--expanded {
+        width: 268px;
+    }
+
+    &--collapsed {
+        width: 72px;
+    }
+
+    &__top {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    &__links {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+        padding: 0 8px;
+        width: 100%;
+    }
+
+    &__section-label {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 8px 8px 0;
+        width: 100%;
+    }
+
+    &__label-text {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 0;
+        text-transform: none !important; // Override any global uppercase rules
+    }
+
+    &__link-item {
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    &__link {
+        box-sizing: border-box;
+        display: flex;
+        flex: 1 0 0;
+        gap: 8px;
+        align-items: center;
+        min-height: 0;
+        min-width: 0;
+        padding: 8px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        text-decoration: none;
+        outline: none;
+
+        &:hover {
+            background: linear-gradient(225deg, var(--gradients-stop1, #6200EE) 0%, var(--gradients-stop2, #5D5BF4) 50%, var(--gradients-stop3, #0E8CE2) 100%);
+
+            .figmas-admin-sidebar__icon svg,
+            .figmas-admin-sidebar__icon path {
+                fill: var(--fills-main-fill-white, white);
+                color: var(--fills-main-fill-white, white);
+            }
+
+            .figmas-admin-sidebar__link-text {
+                color: var(--labels-main-label-white, white);
+            }
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+    }
+
+    &__icon {
+        overflow: hidden;
+        position: relative;
+        border-radius: 6px;
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__link-text {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0;
+        flex-shrink: 0;
+    }
+
+    // Collapsed state adjustments
+    &--collapsed {
+        .figmas-admin-sidebar__link {
+            justify-content: center;
+            gap: 0;
+        }
+
+        .figmas-admin-sidebar__link-text {
+            display: none;
+        }
+
+        .figmas-admin-sidebar__section-label {
+            padding: 10px 0 0;
+            align-items: center;
+        }
+
+        .figmas-admin-sidebar__label-text {
+            font-size: 11px;
+            line-height: 14px;
+        }
+    }
+}