@licklist/design 0.78.5-dev.59 → 0.78.5-dev.60

package/src/v2/components/ZoneCard/ZoneCard.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { ActionMenuItem } from '../ActionMenu'
+import { ZoneContainer } from './ZoneContainer'
+import { ZoneHeader } from './ZoneHeader'
+import { ResourceRow } from './ResourceRow'
+import { AddResourceButton } from './AddResourceButton'
+import { DragHandleProps } from './ZoneContainer'
+
+export interface ZoneResource {
+  id: string
+  name: string
+  quantity: number
+  capacity: number
+  menuItems?: ActionMenuItem[]
+  dragHandleProps?: DragHandleProps
+}
+
+export interface ZoneCardProps {
+  name: string
+  status?: 'active' | 'disabled'
+  totalCapacity: number
+  resources?: ZoneResource[]
+  menuItems?: ActionMenuItem[]
+  onAddResource?: () => void
+  className?: string
+  draggable?: boolean
+  onResourceClick?: (resource: ZoneResource) => void
+  dragHandleProps?: DragHandleProps
+  style?: React.CSSProperties
+}
+
+export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
+  name,
+  status = 'active',
+  totalCapacity,
+  resources = [],
+  menuItems = [],
+  onAddResource,
+  className = '',
+  draggable = true,
+  onResourceClick,
+  dragHandleProps,
+  style,
+}, ref) => {
+  return (
+    <ZoneContainer ref={ref} className={className} style={style}>
+      <ZoneHeader
+        name={name}
+        status={status}
+        totalCapacity={totalCapacity}
+        menuItems={menuItems}
+        draggable={draggable}
+        dragHandleProps={dragHandleProps}
+      />
+      {resources.map((resource) => (
+        <ResourceRow
+          key={resource.id}
+          name={resource.name}
+          quantity={resource.quantity}
+          capacity={resource.capacity}
+          menuItems={resource.menuItems}
+          draggable={draggable}
+          dragHandleProps={resource.dragHandleProps}
+          onClick={onResourceClick ? () => onResourceClick(resource) : undefined}
+        />
+      ))}
+      {onAddResource && <AddResourceButton onClick={onAddResource} />}
+    </ZoneContainer>
+  )
+})
+
+ZoneCard.displayName = 'ZoneCard'

package/src/v2/components/ZoneCard/ZoneContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import './ZoneCard.scss'
+
+export interface DragHandleProps {
+  [key: string]: unknown
+}
+
+export interface ZoneContainerProps {
+  children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const ZoneContainer = React.forwardRef<HTMLDivElement, ZoneContainerProps>(({
+  children,
+  className = '',
+  style,
+}, ref) => {
+  return (
+    <div ref={ref} className={`zone-card ${className}`} style={style}>
+      {children}
+    </div>
+  )
+})
+
+ZoneContainer.displayName = 'ZoneContainer'

package/src/v2/components/ZoneCard/ZoneHeader.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Badge } from '../Badge'
+import { ActionMenu, ActionMenuItem } from '../ActionMenu'
+import { GripVerticalIcon } from '../../icons'
+import { DragHandleProps } from './ZoneContainer'
+import './ZoneCard.scss'
+
+export interface ZoneHeaderProps {
+  name: string
+  status?: 'active' | 'disabled'
+  totalCapacity: number
+  menuItems?: ActionMenuItem[]
+  draggable?: boolean
+  dragHandleProps?: DragHandleProps
+  className?: string
+}
+
+export const ZoneHeader: React.FC<ZoneHeaderProps> = ({
+  name,
+  status = 'active',
+  totalCapacity,
+  menuItems = [],
+  draggable = true,
+  dragHandleProps,
+  className = '',
+}) => {
+  const statusVariant = status === 'active' ? 'success' : 'neutral'
+  const statusLabel = status.charAt(0).toUpperCase() + status.slice(1)
+
+  return (
+    <div className={`zone-card__header ${className}`}>
+      {draggable && (
+        <div className="zone-card__drag-handle" {...dragHandleProps}>
+          {GripVerticalIcon({ width: 16, height: 16 })}
+        </div>
+      )}
+      <span className="zone-card__name">{name}</span>
+      <div className="zone-card__header-right">
+        <Badge variant={statusVariant}>{statusLabel}</Badge>
+        <span className="zone-card__total">Total: {totalCapacity}</span>
+        {menuItems.length > 0 && <ActionMenu items={menuItems} />}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+export { ZoneCard } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource } from './ZoneCard'
+
+export { ZoneContainer } from './ZoneContainer'
+export type { ZoneContainerProps, DragHandleProps } from './ZoneContainer'
+
+export { ZoneHeader } from './ZoneHeader'
+export type { ZoneHeaderProps } from './ZoneHeader'
+
+export { ResourceRow } from './ResourceRow'
+export type { ResourceRowProps } from './ResourceRow'
+
+export { AddResourceButton } from './AddResourceButton'
+export type { AddResourceButtonProps } from './AddResourceButton'

package/src/v2/components/index.ts

@@ -1,3 +1,6 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'
+
 export { Badge } from './Badge'
 export type { BadgeProps } from './Badge'
 
@@ -58,6 +61,9 @@ export { NPSScore } from './NPSScore'
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
+
 // Icons
 export {
   InfoIcon,
@@ -74,6 +80,10 @@ export {
   ClearIcon,
   CloseIcon,
   EllipsisIcon,
-  CircleIcon
+  CircleIcon,
+  GripVerticalIcon,
+  PlusIcon,
+  DeleteIcon,
+  ClockIcon
 } from '../icons'
 

package/src/v2/icons/index.tsx

@@ -193,6 +193,18 @@ export const ArrowDownIcon = () => (
     </svg>
 )
 
+export const GripVerticalIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16ZM14 22C14 23.1046 13.1046 24 12 24C10.8954 24 10 23.1046 10 22C10 20.8954 10.8954 20 12 20C13.1046 20 14 20.8954 14 22ZM22 10C22 11.1046 21.1046 12 20 12C18.8954 12 18 11.1046 18 10C18 8.89543 18.8954 8 20 8C21.1046 8 22 8.89543 22 10ZM22 16C22 17.1046 21.1046 18 20 18C18.8954 18 18 17.1046 18 16C18 14.8954 18.8954 14 20 14C21.1046 14 22 14.8954 22 16ZM22 22C22 23.1046 21.1046 24 20 24C18.8954 24 18 23.1046 18 22C18 20.8954 18.8954 20 20 20C21.1046 20 22 20.8954 22 22Z" fill="currentColor"/>
+    </svg>
+)
+
+export const PlusIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17 14.5H24.5V17.5H17V25H14V17.5H6.5V14.5H14V7H17V14.5Z" fill="currentColor"/>
+    </svg>
+)
+
 export const CloseIcon = ({width = 24, height = 24, ...props
 }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number }) => (
   <svg
@@ -221,5 +233,17 @@ export const CircleIcon = ({ width = 32, height = 32, fill = 'var(--surface-acti
   </svg>
 )
 
+export const DeleteIcon = ({ width = 24, height = 24 }: { width?: number; height?: number } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 10H26V12H24V25C24 25.5523 23.5523 26 23 26H9C8.44772 26 8 25.5523 8 25V12H6V10H11V7C11 6.44772 11.4477 6 12 6H20C20.5523 6 21 6.44772 21 7V10ZM22 12H10V24H22V12ZM13 15H15V21H13V15ZM17 15H19V21H17V15ZM13 8V10H19V8H13Z" fill="currentColor" />
+  </svg>
+)
+
+export const ClockIcon = ({ width = 20, height = 20 }: { width?: number; height?: number } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16C28 22.6274 22.6274 28 16 28ZM16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26ZM17 9V15.5858L21.2426 19.8284L19.8284 21.2426L15 16.4142V9H17Z" fill="currentColor" />
+  </svg>
+)
+
 
 

package/src/v2/index.ts

@@ -21,6 +21,19 @@ export type { AlertProps, AlertVariant } from './components/Alert'
 export { Button } from './components/Button'
 export type { ButtonProps } from './components/Button'
 
+// NewInput Component
+export { NewInput } from './components/NewInput'
+export type { NewInputProps } from './components/NewInput'
+
+// Checkbox Component
+export { Checkbox } from './components/Checkbox'
+export type { CheckboxProps } from './components/Checkbox'
+
+// NewPageHeader Component
+export { NewPageHeader } from './components/NewPageHeader'
+export type { NewPageHeaderProps } from './components/NewPageHeader'
+
+
 // EntityHeader Component
 export { EntityHeader } from './components/EntityHeader'
 export type { EntityHeaderProps } from './components/EntityHeader'
@@ -36,6 +49,14 @@ export type { NPSScoreProps, NPSSubmitData } from './components/NPSScore'
 export { UserPanel } from './components/UserPanel'
 export type { UserPanelProps } from './components/UserPanel'
 
+// ZoneCard Components
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './components/ZoneCard'
+
+// ZonesResources Page
+export { ZonesResourcesPage } from './pages/ZonesResources'
+export type { ZonesResourcesPageProps } from './pages/ZonesResources'
+
 // ============================================================================
 // Navigation Components
 // ============================================================================

package/src/v2/pages/ZonesResources/ZonesResourcesPage.scss

@@ -0,0 +1,22 @@
+.zones-resources-page {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  &__back {
+    padding: 24px 32px 0 32px;
+    align-self: flex-start;
+
+    @media (max-width: 768px) {
+      padding: 16px 16px 0 16px;
+    }
+  }
+
+  &__content {
+    padding: 24px 32px;
+
+    @media (max-width: 768px) {
+      padding: 16px;
+    }
+  }
+}

package/src/v2/pages/ZonesResources/ZonesResourcesPage.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ZonesResourcesPage } from './ZonesResourcesPage'
+
+export default {
+  title: 'v2/Pages/ZonesResourcesPage',
+  component: ZonesResourcesPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta<typeof ZonesResourcesPage>
+
+type Story = StoryObj<typeof ZonesResourcesPage>
+
+export const Default: Story = {
+  args: {
+    onBack: () => alert('Back to Settings'),
+    onAction: () => alert('Add Zone clicked'),
+  },
+}
+
+export const WithContent: Story = {
+  args: {
+    onBack: () => alert('Back to Settings'),
+    onAction: () => alert('Add Zone clicked'),
+    children: (
+      <div style={{ padding: '16px', border: '1px solid var(--border-primary)', borderRadius: '8px' }}>
+        <p style={{ color: 'var(--label-secondary)', fontFamily: 'var(--font-family-sans)' }}>
+          Zone and resource content goes here
+        </p>
+      </div>
+    ),
+  },
+}
+
+export const WithoutBackButton: Story = {
+  args: {
+    onAction: () => alert('Add Zone clicked'),
+  },
+}
+
+export const WithoutAction: Story = {
+  args: {
+    onBack: () => alert('Back to Settings'),
+  },
+}

package/src/v2/pages/ZonesResources/ZonesResourcesPage.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { IconButton } from '../../components/IconButton'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { Button, ButtonText } from '../../components/Button'
+import './ZonesResourcesPage.scss'
+
+export interface ZonesResourcesPageProps {
+  title?: string
+  backLabel?: string
+  onBack?: () => void
+  actionLabel?: string
+  onAction?: () => void
+  children?: React.ReactNode
+}
+
+export const ZonesResourcesPage: React.FC<ZonesResourcesPageProps> = ({
+  title = 'Zones & Resources',
+  backLabel = 'Back to Settings',
+  onBack,
+  actionLabel = '+ Add Zone',
+  onAction,
+  children,
+}) => {
+  return (
+    <div className="zones-resources-page">
+      {onBack && (
+        <div className="zones-resources-page__back">
+          <IconButton label={backLabel} onClick={onBack} />
+        </div>
+      )}
+      <NewPageHeader
+        title={title}
+        showDivider
+        renderRight={onAction ? () => (
+          <Button variant="primary" onClick={onAction}>
+            <ButtonText color="white">{actionLabel}</ButtonText>
+          </Button>
+        ) : undefined}
+      />
+      <div className="zones-resources-page__content">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/v2/pages/ZonesResources/index.ts

@@ -0,0 +1,2 @@
+export { ZonesResourcesPage } from './ZonesResourcesPage'
+export type { ZonesResourcesPageProps } from './ZonesResourcesPage'

package/src/v2/styles/components/Button.scss

@@ -105,6 +105,7 @@
   &--destructive-soft {
     border-radius: var(--radius-reg, 8px);
     background: var(--surface-danger-soft, #fceceb);
+    color: var(--label-danger);
 
     &:hover {
       background-color: var(--surface-danger-soft-hover, #f5c4c2);

package/src/v2/styles/form/NewInput.scss

@@ -15,16 +15,20 @@
       font-style: normal;
       font-weight: 600;
       line-height: 20px;
-      color: var(--label-primary, #121E52);
-      display: block;
+      color: var(--label-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
     }
 
     &__label-optional {
       font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: 15px;
-        font-weight: 600;
-        line-height: 20px;
-        color: var(--label-primary, #121E52);
+      font-size: 13px;
+      font-weight: 400;
+      font-style: normal;
+      line-height: 16px;
+      color: var(--label-secondary);
     }