@licklist/design 0.78.21 → 0.78.26

package/src/v2/dashboard-analytics/venue-card/VenueCard.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryFn } from '@storybook/react-vite'
+import { VenueCard, VenueCardProps } from './VenueCard'
+
+export default {
+  title: 'v2/Dashboard Analytics/Venue Card',
+  component: VenueCard,
+  argTypes: {
+    icon: {
+      description: 'Icon URL for the metric',
+      control: 'text',
+    },
+    title: {
+      description: 'Title of the metric',
+      control: 'text',
+    },
+    value: {
+      description: 'Value to display',
+      control: 'text',
+    },
+    shadowColor: {
+      description: 'Shadow animation color (RGB or RGBA)',
+      control: 'color',
+    },
+  },
+} as Meta<VenueCardProps>
+
+const placeholderIcon = 'https://api.builder.io/api/v1/image/assets/TEMP/b44b83b1f30b882d65f942ec883e90ae34fdb2d0?placeholderIfAbsent=true'
+
+export const Default: StoryFn<VenueCardProps> = (args: VenueCardProps) => (
+  <div className="w-10">
+    <VenueCard {...args} />
+  </div>
+)
+
+Default.args = {
+  icon: placeholderIcon,
+  title: 'In venue',
+  value: '0 people',
+  shadowColor: 'rgba(34, 197, 94, 1)',
+}

package/src/v2/dashboard-analytics/venue-card/VenueCard.tsx

@@ -0,0 +1,62 @@
+import React, { ReactSVGElement } from 'react';
+import './VenueCard.scss';
+
+interface VenueCardProps {
+  icon: string | ReactSVGElement;
+  title: string;
+  value: string;
+  className?: string;
+  shadowColor?: string;
+}
+
+export const VenueCard: React.FC<VenueCardProps> = ({
+  icon,
+  title,
+  value,
+  className = '',
+  shadowColor = 'rgba(34, 197, 94, 1)'
+}) => {
+  const cardClasses = [
+    'venue-card',
+    className?.includes('no-border') && 'no-border',
+    className?.includes('inline-metric') && 'inline-metric',
+    className?.includes('h-20') && 'h-20',
+    className?.includes('h-16') && 'h-16',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div 
+      className={cardClasses} 
+      style={{
+        animation: 'shadow-pulse 3s ease-in-out infinite',
+        '--shadow-color': shadowColor
+      } as React.CSSProperties & { '--shadow-color': string }}
+    >
+      <div className="venue-card__icon-wrapper">
+        {typeof icon === 'string' ? (
+          <img
+            src={icon}
+            className="venue-card__icon"
+            alt={title}
+          />
+        ) : (
+          icon
+        )}
+      </div>
+      
+      <div className="venue-card__content">
+        <div className="venue-card__header">
+          <div className="venue-card__title">
+            {title}
+          </div>
+          <div className="venue-card__value">
+            {value}
+          </div>
+        </div> 
+      </div>
+    </div>
+  );
+};
+
+export type { VenueCardProps };

package/src/v2/dashboard-analytics/venue-card/index.ts

@@ -0,0 +1,2 @@
+export { VenueCard } from './VenueCard'
+export type { VenueCardProps } from './VenueCard'

package/src/v2/dashboard-analytics/venue-closed-card/VenueClosedCard.scss

@@ -0,0 +1,129 @@
+
+.venue-closed-card {
+  width: 100%;
+
+  &__container {
+    border: 1px solid var(--border-primary);
+    position: relative;
+    width: 100%;
+    min-height: 80px;
+    background-color: var(--surface-primary);
+    padding: 16px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 2px 12px rgba(82, 194, 43, 0.1);
+    }
+
+    @media (max-width: 1024px) {
+      padding: 12px;
+      gap: 12px;
+      min-height: 72px;
+    }
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    padding: 12px;
+    background-color: var(--surface-secondary);
+    border-radius: 8px;
+    flex-shrink: 0;
+
+    @media (max-width: 1024px) {
+      width: 40px;
+      height: 40px;
+      padding: 8px;
+    }
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+    color: var(--fill-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.2;
+    color: var(--label-secondary);
+    margin: 0;
+
+    @media (max-width: 1024px) {
+      font-size: 12px;
+    }
+  }
+
+  &__status {
+    font-size: 17px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--label-primary);
+    margin: 0;
+
+    @media (max-width: 1024px) {
+      font-size: 15px;
+    }
+  }
+
+  // Additional modifier classes
+  &.compact {
+    .venue-closed-card__container {
+      min-height: 64px;
+      padding: 12px;
+    }
+
+    .venue-closed-card__icon-wrapper {
+      width: 32px;
+      height: 32px;
+      padding: 6px;
+    }
+
+    .venue-closed-card__title {
+      font-size: 11px;
+    }
+
+    .venue-closed-card__status {
+      font-size: 14px;
+    }
+  }
+
+  &.large {
+    .venue-closed-card__container {
+      min-height: 96px;
+      padding: 20px;
+    }
+
+    .venue-closed-card__icon-wrapper {
+      width: 56px;
+      height: 56px;
+      padding: 14px;
+    }
+
+    .venue-closed-card__title {
+      font-size: 15px;
+    }
+
+    .venue-closed-card__status {
+      font-size: 20px;
+    }
+  }
+}

package/src/v2/dashboard-analytics/venue-closed-card/VenueClosedCard.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryFn } from '@storybook/react-vite'
+import { VenueClosedCard, VenueClosedCardProps } from './VenueClosedCard'
+
+export default {
+  title: 'v2/Dashboard Analytics/Venue Closed Card',
+  component: VenueClosedCard,
+  argTypes: {
+    venueInfo: {
+      description: 'Venue information with work hours and status',
+      control: 'object',
+    },
+    className: {
+      description: 'Additional CSS classes for styling',
+      control: 'text',
+    },
+  },
+} as Meta<VenueClosedCardProps>
+
+export const Default: StoryFn<VenueClosedCardProps> = (args: VenueClosedCardProps) => (
+  <div style={{ width: '400px' }}>
+    <VenueClosedCard {...args} />
+  </div>
+)
+
+Default.args = {
+  venueInfo: {
+    company_name: "Sharky's Soft Play",
+    message: 'Closed until 12:00',
+    is_open: false,
+  },
+}

package/src/v2/dashboard-analytics/venue-closed-card/VenueClosedCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import './VenueClosedCard.scss';
+
+interface WorkHour {
+  id: number;
+  venue_id: number;
+  day: number;
+  start: string;
+  end: string;
+  description?: string | null;
+}
+
+interface VenueInfo {
+  is_open?: boolean;
+  status?: string;
+  message?: string;
+  closes_at?: string;
+  opened_at?: string;
+  company_name?: string;
+}
+
+interface VenueClosedCardProps {
+  venueInfo?: VenueInfo;
+  className?: string;
+}
+
+const VenueIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-full h-full">
+    <path d="M22 21H2V19H3V4C3 3.44772 3.44772 3 4 3H18C18.5523 3 19 3.44772 19 4V9H21V19H22V21ZM17 19H19V11H13V19H15V13H17V19ZM17 9V5H5V19H11V9H17ZM7 11H9V13H7V11ZM7 15H9V17H7V15ZM7 7H9V9H7V7Z"/>
+  </svg>
+);
+
+export const VenueClosedCard: React.FC<VenueClosedCardProps> = ({ 
+  venueInfo,
+  className = '' 
+}) => {
+ 
+  return (
+    <div className={`venue-closed-card ${className}`}>
+      {/* Venue Status Card - Full width closed card */}
+      <div className="venue-closed-card__container">
+        <div className="venue-closed-card__icon-wrapper">
+          <div className="venue-closed-card__icon">
+            <VenueIcon />
+          </div>
+        </div>
+        
+        <div className="venue-closed-card__content">
+          <div className="venue-closed-card__title">
+            {venueInfo?.company_name}
+          </div>
+          <div className="venue-closed-card__status">
+            {venueInfo?.message}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type { VenueClosedCardProps, VenueInfo, WorkHour };

package/src/v2/dashboard-analytics/venue-closed-card/index.ts

@@ -0,0 +1,2 @@
+export { VenueClosedCard } from './VenueClosedCard'
+export type { VenueClosedCardProps, VenueInfo, WorkHour } from './VenueClosedCard'