{
const { animation = 200, moveThreshold = 0, indentThreshold = 5, linedRegionThreshold = 3 } = props
const ghostRef = useRef
(null)
- const { origin } = getDragState('origin')
- const { target } = getDragState('target')
+ const { origin } = useDragState('origin')
+ const { target } = useDragState('target')
const isDragging = !!origin.areaId
const { endDrag, getCache, indent, outdent, clearGhostElement } = useDrag()
const cache = getCache()
diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts
index 2c9a8281..eaa0b686 100644
--- a/packages/core/src/drag/drag.hook.ts
+++ b/packages/core/src/drag/drag.hook.ts
@@ -6,6 +6,7 @@ import {
F_DRAG_LOCK,
F_DRAG_STATE,
F_RESTRICT_DUAL_MOVEMENT,
+ getAreaTargetVariant,
getBoundingClientRect,
getPreviousNextElements,
globalCursor,
@@ -15,6 +16,7 @@ import {
setTarget,
} from '../'
import { getButton, waitForRender, windowObject } from '../helpers'
+import { EMPTY_ORIGIN, EMPTY_TARGET } from './drag.types'
export const F_CUSTOM_GHOST_ELEMENT = 'F_CUSTOM_GHOST_ELEMENT'
export const F_GHOST_ELEMENT_ROTATION = 'F_GHOST_ELEMENT_ROTATION'
@@ -68,8 +70,8 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
clearGhostElement()
globalCursor.remove('grabbing')
dispatchDragEvent('onend', null)
- setTarget({})
- setOrigin({ targetVariant: {} })
+ setTarget(EMPTY_TARGET)
+ setOrigin(EMPTY_ORIGIN)
cache.mouseDown = false
cache.init = {}
}
@@ -136,7 +138,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
const areaId = parent.getAttribute('id')
const group = parent.dataset.group
const direction = parent.dataset.direction
- const finalTargetVariant = parent.dataset.targetvariant ? JSON.parse(parent.dataset.targetvariant) : {}
+ const finalTargetVariant = getAreaTargetVariant(parent)
const isHorizontal = direction == 'horizontal'
const isVertical = direction == 'vertical'
const moveDirection = isVertical ? 'up' : 'left'
@@ -278,7 +280,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
const areaId = parent.getAttribute('id')
const group = parent.dataset.group
const direction = parent.dataset.direction
- const finalTargetVariant = parent.dataset.targetvariant ? JSON.parse(parent.dataset.targetvariant) : {}
+ const finalTargetVariant = getAreaTargetVariant(parent)
const isHorizontal = direction == 'horizontal'
const isVertical = direction == 'vertical'
const moveDirection = isVertical ? 'up' : 'left'
diff --git a/packages/core/src/drag/drag.state.ts b/packages/core/src/drag/drag.state.ts
index 9352176e..cb78fe5d 100644
--- a/packages/core/src/drag/drag.state.ts
+++ b/packages/core/src/drag/drag.state.ts
@@ -16,33 +16,11 @@ export const setOrigin = (origin: Partial) => {
setDragState({ namespace: 'origin', origin })
}
-export const getDragState = (namespace: string): any => {
+// React hook — subscribes the caller to drag-state changes for the given
+// namespace ('origin' | 'target') and re-renders on every dispatch.
+// No slice-level filtering; not profiled as an issue in practice.
+export const useDragState = (namespace: string): any => {
const [_, render] = useState(new Date())
usePubsub('state-' + namespace, (data: any) => render(new Date()))
return windowObject[F_DRAG_STATE]
}
-
-/*
-
-export const setDragState = (data) => {
- const { namespace, ...rest } = data
- windowObject[F_DRAG_STATE] = { ...windowObject[F_DRAG_STATE], ...rest }
- windowObject.dispatchEvent(new CustomEvent(namespace, { detail: data }))
-}
-
-export const setTarget = (target: Partial) => {
- setDragState({ namespace: 'target', target })
-}
-
-export const setOrigin = (origin: Partial) => {
- setDragState({ namespace: 'origin', origin })
-}
-
-export const getDragState = (namespace: string): any => {
- const [_, render] = useState(new Date())
- const handler = (data) => render(new Date())
- useWindowEvent(namespace, handler)
- return { ...windowObject[F_DRAG_STATE], _ }
-}
-
-*/
diff --git a/packages/core/src/drag/drag.types.ts b/packages/core/src/drag/drag.types.ts
index 76b822b4..a9d60488 100644
--- a/packages/core/src/drag/drag.types.ts
+++ b/packages/core/src/drag/drag.types.ts
@@ -25,3 +25,28 @@ export type DragTarget = {
elementId: string
group: string
}
+
+// Safe defaults so .height/.width arithmetic after endDrag returns 0, not NaN.
+export const EMPTY_ORIGIN: DragOrigin = {
+ elementId: '',
+ targetVariant: {},
+ height: 0,
+ width: 0,
+ areaId: '',
+ index: -1,
+ group: '',
+}
+
+export const EMPTY_TARGET: DragTarget = {
+ focus: false,
+ moveDirection: null,
+ index: -1,
+ indent: 0,
+ left: 0,
+ top: 0,
+ height: 0,
+ width: 0,
+ areaId: '',
+ elementId: '',
+ group: '',
+}
diff --git a/packages/core/src/drag/drag.util.ts b/packages/core/src/drag/drag.util.ts
index 455d8cf8..7196fcea 100644
--- a/packages/core/src/drag/drag.util.ts
+++ b/packages/core/src/drag/drag.util.ts
@@ -2,6 +2,22 @@ import { windowObject } from '../helpers'
import { F_DRAG_STATE } from './drag-manager'
import { F_GHOST_ELEMENT_ROTATION } from './drag.hook'
+// Per-DragElementArea targetVariant lookup. Replaces stringifying the variant
+// into data-targetvariant on every render + parsing on every drag start.
+// Only DragElementArea writes here — DragArea (the older sibling) handles its
+// variant cascade inline, so a DragElement nested inside a DragArea would read
+// {} here (same fallback as the old JSON.parse path — no regression, but a
+// quiet constraint worth knowing).
+const targetVariantStore = new WeakMap()
+
+export const setAreaTargetVariant = (el: Element, variant: any) => {
+ targetVariantStore.set(el, variant)
+}
+
+export const getAreaTargetVariant = (el: Element): any => {
+ return targetVariantStore.get(el) || {}
+}
+
export const getPreviousNextElements = (targetIndex, targetElement, moveDirection) => {
const parent = targetElement.parentNode
@@ -13,7 +29,7 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio
next = parent.children[targetIndex + 1]
}
- if (next.dataset.placeholder) {
+ if (next?.dataset.placeholder || next?.dataset.buffer) {
next = undefined
}
} else {
@@ -42,6 +58,8 @@ export const positionDOMElementExplicit = (x, y, el, callback) => {
callback()
}
+// Module-level singleton — safe only because there's one ghost element app-wide.
+// If we ever introduce per-element ghost rendering, this needs to be per-element.
let rafId = null
export const positionDOMElement = (x, y, el, callback) => {
diff --git a/packages/core/src/helpers/chart.ts b/packages/core/src/helpers/chart.ts
new file mode 100644
index 00000000..76fb5276
--- /dev/null
+++ b/packages/core/src/helpers/chart.ts
@@ -0,0 +1,31 @@
+/**
+ * Compact number formatting shared by the chart components (e.g. 1500 -> "1.5k").
+ * Kept dependency-free to match the rest of core.
+ */
+export const formatChartNumber = (value: number): string => {
+ if (value == null || isNaN(value)) return ''
+
+ const abs = Math.abs(value)
+ const round = (n: number) => {
+ const fixed = n.toFixed(1)
+ return fixed.endsWith('.0') ? fixed.slice(0, -2) : fixed
+ }
+
+ if (abs >= 1e9) return `${round(value / 1e9)}b`
+ if (abs >= 1e6) return `${round(value / 1e6)}m`
+ if (abs >= 1e3) return `${round(value / 1e3)}k`
+ if (Number.isInteger(value)) return String(value)
+
+ return String(Math.round(value * 100) / 100)
+}
+
+/**
+ * Convert a polar coordinate (angle in radians, measured clockwise from 12 o'clock)
+ * into a cartesian point relative to a center. Used by the pie/donut chart.
+ */
+export const polarToCartesian = (cx: number, cy: number, radius: number, angle: number) => {
+ return {
+ x: cx + radius * Math.cos(angle - Math.PI / 2),
+ y: cy + radius * Math.sin(angle - Math.PI / 2),
+ }
+}
diff --git a/packages/core/src/helpers/color.ts b/packages/core/src/helpers/color.ts
index 5bc776cd..7b7eb8b8 100644
--- a/packages/core/src/helpers/color.ts
+++ b/packages/core/src/helpers/color.ts
@@ -129,11 +129,15 @@ export const lightenedHex = (hex, percent) => {
let g = parseInt(hex.substring(2, 4), 16)
let b = parseInt(hex.substring(4, 6), 16)
- r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100)))
- g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100)))
- b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100)))
+ if (isNaN(r) || isNaN(g) || isNaN(b)) return `#${hex}`
- let lightenedHex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()
+ r = Math.max(0, Math.min(255, Math.floor(r + (255 - r) * (percent / 100))))
+ g = Math.max(0, Math.min(255, Math.floor(g + (255 - g) * (percent / 100))))
+ b = Math.max(0, Math.min(255, Math.floor(b + (255 - b) * (percent / 100))))
- return lightenedHex
+ const rr = r.toString(16).padStart(2, '0')
+ const gg = g.toString(16).padStart(2, '0')
+ const bb = b.toString(16).padStart(2, '0')
+
+ return `#${rr}${gg}${bb}`.toUpperCase()
}
diff --git a/packages/core/src/helpers/index.ts b/packages/core/src/helpers/index.ts
index dcf84d40..0ac4afc8 100644
--- a/packages/core/src/helpers/index.ts
+++ b/packages/core/src/helpers/index.ts
@@ -1,4 +1,5 @@
export * from './array'
+export * from './chart'
export * from './color'
export * from './date'
export * from './state'
diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts
index 332257a4..867b7155 100644
--- a/packages/core/src/helpers/util.ts
+++ b/packages/core/src/helpers/util.ts
@@ -253,6 +253,7 @@ export const getKey = (e) => {
const { shiftKey, ctrlKey, altKey, metaKey } = e
return {
+ isFind: e.key == 'f' && (metaKey || ctrlKey),
isBackspace: key == 'Backspace',
isEscape: key == 'Escape',
isSpace: key == ' ',
diff --git a/packages/core/src/hooks/local-storage.hook.ts b/packages/core/src/hooks/local-storage.hook.ts
index e334ee29..b85e88de 100644
--- a/packages/core/src/hooks/local-storage.hook.ts
+++ b/packages/core/src/hooks/local-storage.hook.ts
@@ -1,15 +1,59 @@
import { useEffect, useRef, useState } from 'react'
-export function useLocalStorage(key: string, initialValue: T) {
- const keyCache = useRef(null)
- const [value, setValue] = useState(() => {
- try {
- const stored = localStorage.getItem(key)
- return stored ? JSON.parse(stored) : initialValue
- } catch {
- return initialValue
+// Read a value from localStorage. When `storageKey` is provided the value is
+// read from a namespaced object stored under `storageKey` (using `key` as the
+// property name). Otherwise it falls back to a straight read at `key`.
+export function getStorageItem(key: string, initialValue: T, storageKey?: string): T {
+ try {
+ if (storageKey) {
+ const raw = localStorage.getItem(storageKey)
+ const obj = raw ? JSON.parse(raw) : {}
+ return key in obj ? obj[key] : initialValue
}
- })
+ const stored = localStorage.getItem(key)
+ return stored ? JSON.parse(stored) : initialValue
+ } catch {
+ return initialValue
+ }
+}
+
+// Write a value to localStorage. When `storageKey` is provided the value is
+// stored as a property on the namespaced object at `storageKey`. Otherwise it
+// is written straight to `key`.
+export function setStorageItem(key: string, value: T, storageKey?: string): void {
+ try {
+ if (storageKey) {
+ const raw = localStorage.getItem(storageKey)
+ const obj = raw ? JSON.parse(raw) : {}
+ obj[key] = value
+ localStorage.setItem(storageKey, JSON.stringify(obj))
+ } else {
+ localStorage.setItem(key, JSON.stringify(value))
+ }
+ } catch {}
+}
+
+// Remove a value from localStorage. When `storageKey` is provided the property
+// `key` is removed from the namespaced object (and the object itself is removed
+// when it becomes empty). Otherwise the straight `key` is removed.
+export function removeStorageItem(key: string, storageKey?: string): void {
+ try {
+ if (storageKey) {
+ const raw = localStorage.getItem(storageKey)
+ if (!raw) return
+ const obj = JSON.parse(raw)
+ delete obj[key]
+ if (Object.keys(obj).length) localStorage.setItem(storageKey, JSON.stringify(obj))
+ else localStorage.removeItem(storageKey)
+ } else {
+ localStorage.removeItem(key)
+ }
+ } catch {}
+}
+
+export function useLocalStorage(key: string, initialValue: T, storageKey?: string) {
+ const keyCache = useRef(null)
+ const [value, setValue] = useState(() => getStorageItem(key, initialValue, storageKey))
// when key changes, reset value (don’t carry over old one)
useEffect(() => {
@@ -17,21 +61,14 @@ export function useLocalStorage(key: string, initialValue: T) {
// if key is not different return
if (!keyIsDifferent) return
- try {
- const stored = localStorage.getItem(key)
- setValue(stored ? JSON.parse(stored) : initialValue)
- keyCache.current = key
- } catch {
- setValue(initialValue)
- }
- }, [key, initialValue])
+ setValue(getStorageItem(key, initialValue, storageKey))
+ keyCache.current = key
+ }, [key, initialValue, storageKey])
// persist whenever *value* changes
useEffect(() => {
- try {
- localStorage.setItem(key, JSON.stringify(value))
- } catch {}
- }, [key, value])
+ setStorageItem(key, value, storageKey)
+ }, [key, value, storageKey])
return [value, setValue] as const
}
diff --git a/packages/core/src/hooks/theme.hook.ts b/packages/core/src/hooks/theme.hook.ts
index 997d9003..e79b7b73 100644
--- a/packages/core/src/hooks/theme.hook.ts
+++ b/packages/core/src/hooks/theme.hook.ts
@@ -3,13 +3,13 @@ import { documentObject, windowObject } from '../helpers'
import { useObserver } from './observer.hook'
import { useStorage } from './storage.hook'
-export const __F_THEME_STORAGE = '__F_THEME_STORAGE'
+export const THEME_STORAGE = 'THEME_STORAGE'
export type AppSystemMode = 'light' | 'dark'
export function useTheme() {
const getRootElement = () => {
return documentObject.documentElement
- return documentObject.getElementsByTagName('html')[0]
+ //return documentObject.getElementsByTagName('html')[0]
}
const mutationRecord = useObserver(getRootElement())
@@ -24,16 +24,16 @@ export function useTheme() {
const setTheme = (theme: string) => {
getRootElement().setAttribute('data-theme', theme)
- setStorage(__F_THEME_STORAGE, theme)
+ setStorage(THEME_STORAGE, theme)
}
const removeTheme = (theme: string) => {
getRootElement().removeAttribute('data-theme')
- deleteStorage(__F_THEME_STORAGE)
+ deleteStorage(THEME_STORAGE)
}
const getStoredTheme = () => {
- return getStorage(__F_THEME_STORAGE)
+ return getStorage(THEME_STORAGE)
}
const getSystemTheme = (): 'light' | 'dark' => {
diff --git a/packages/core/src/icon/icon.css b/packages/core/src/icon/icon.css
index e2d7fb07..369af252 100644
--- a/packages/core/src/icon/icon.css
+++ b/packages/core/src/icon/icon.css
@@ -5,10 +5,10 @@
--f-icon-sizing-lg: var(--f-icon-size-lg);
--f-icon-sizing-xl: var(--f-icon-size-xl);
--f-icon-stroke-width-xs: 2.4;
- --f-icon-stroke-width-sm: 2.2;
+ --f-icon-stroke-width-sm: 2.15;
--f-icon-stroke-width-md: 1.9;
- --f-icon-stroke-width-lg: 1.7;
- --f-icon-stroke-width-xl: 1.5;
+ --f-icon-stroke-width-lg: 1.5;
+ --f-icon-stroke-width-xl: 1.25;
}
.f-icon {
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 40287a84..5137536e 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -6,6 +6,7 @@ export * from './attachment'
export * from './audio'
export * from './avatar'
export * from './badge'
+export * from './bar-chart'
export * from './breadcrumb'
export * from './button'
export * from './card'
@@ -37,6 +38,7 @@ export * from './image'
export * from './input'
export * from './kbd'
export * from './layout'
+export * from './line-chart'
export * from './list'
export * from './logo'
export * from './menu'
@@ -45,6 +47,7 @@ export * from './navigation'
export * from './notification'
export * from './option'
export * from './pagination'
+export * from './pie-chart'
export * from './pill'
export * from './popover'
export * from './portal'
diff --git a/packages/core/src/input/input.css b/packages/core/src/input/input.css
index 946b847c..fe370824 100644
--- a/packages/core/src/input/input.css
+++ b/packages/core/src/input/input.css
@@ -11,7 +11,7 @@
--f-input-base-padding: var(--f-space-3);
--f-input-padding: 0 var(--f-input-base-padding);
--f-input-padding-tag: 0.2rem var(--f-space-2);
- --f-input-shadow: none;
+ --f-input-shadow: var(--f-shadow-sm);
--f-tag-input-min-width: 50px;
--f-tag-input-spacing: var(--f-space-1);
--f-input-prefix-padding: 0 0 0 var(--f-input-base-padding);
@@ -196,11 +196,13 @@ input.f-input[type='search']:not(.show-indicator)::-ms-clear {
width: 0;
height: 0;
}
+
input.f-input[type='search']:not(.show-indicator)::-ms-reveal {
display: none;
width: 0;
height: 0;
}
+
input.f-input[type='search']:not(.show-indicator)::-webkit-search-decoration,
input.f-input[type='search']:not(.show-indicator)::-webkit-search-cancel-button,
input.f-input[type='search']:not(.show-indicator)::-webkit-search-results-button,
diff --git a/packages/core/src/layouts/dashboard.stories.tsx b/packages/core/src/layouts/dashboard.stories.tsx
new file mode 100644
index 00000000..f852810b
--- /dev/null
+++ b/packages/core/src/layouts/dashboard.stories.tsx
@@ -0,0 +1,878 @@
+import {
+ App,
+ Avatar,
+ AvatarGroup,
+ Badge,
+ BarChart,
+ Button,
+ ButtonGroup,
+ Card,
+ Content,
+ Divider,
+ Flexer,
+ Footer,
+ Header,
+ Heading,
+ IconButton,
+ IconLib,
+ Input,
+ InputControl,
+ InputPrefix,
+ LineChart,
+ Main,
+ Menu,
+ MenuDivider,
+ MenuHeading,
+ MenuItem,
+ Navigation,
+ NavigationDivider,
+ NavigationHeading,
+ NavigationItem,
+ Notification,
+ NotificationContent,
+ NotificationIcon,
+ PieChart,
+ Pill,
+ Popover,
+ Progress,
+ ProgressCircle,
+ Select,
+ Sidebar,
+ Skeleton,
+ SkeletonCircle,
+ Sparkline,
+ Stat,
+ Stack,
+ Tab,
+ TabList,
+ TabPanel,
+ TabPanels,
+ Table,
+ Tabs,
+ TBody,
+ Td,
+ Text,
+ Textarea,
+ Th,
+ THead,
+ Toggle,
+ Tooltip,
+ Tr,
+ useVisibility,
+ View,
+} from '@fold-ui/core'
+import * as Token from '@fold-ui/design/tokens'
+import React, { useMemo, useState } from 'react'
+
+export default {
+ title: 'Layouts/Dashboard',
+ component: App,
+ excludeStories: 'docs',
+ parameters: {
+ layout: 'fullscreen',
+ },
+}
+
+export const docs = {
+ title: 'Dashboard',
+ subtitle: 'A complete application shell that stitches the core components together into a working dashboard.',
+ description:
+ 'This layout is a reference "app" built entirely from core components — navigation, headers, stats, charts, tables, cards, forms and overlays — so you can see how the pieces compose into a real product surface. Use the sidebar to move between pages.',
+}
+
+/* -------------------------------------------------------------------------- */
+/* Tokens & mock data */
+/* -------------------------------------------------------------------------- */
+
+// Pill takes a raw colour value (not a variant), so map our tones to tokens.
+const TONE: Record = {
+ accent: Token.ColorAccent500,
+ success: Token.ColorGreen500,
+ danger: Token.ColorRed500,
+ warning: Token.ColorOrange500,
+ highlight: Token.ColorPurple500,
+ neutral: Token.ColorGray500,
+ default: Token.ColorGray500,
+}
+
+const spark = (n: number, seed = 1) =>
+ new Array(n).fill(null).map((_, i) => Math.abs(Math.sin(i * 0.6 + seed) * 0.6 + Math.random() * 0.4))
+
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
+
+const trafficSeries = [
+ {
+ legend: 'Visitors',
+ color: Token.ColorAccent500,
+ points: months.map((m, i) => [m, 12 + Math.round(Math.sin(i) * 6 + i * 3)]) as [string, number][],
+ },
+ {
+ legend: 'Signups',
+ color: Token.ColorPurple500,
+ points: months.map((m, i) => [m, 4 + Math.round(Math.cos(i) * 3 + i * 1.5)]) as [string, number][],
+ },
+]
+
+const deviceBars = [
+ {
+ legend: 'Desktop',
+ color: Token.ColorAccent500,
+ values: months.map((m, i) => ({ label: m, count: 40 + Math.round(Math.sin(i) * 12 + i * 4) })),
+ },
+ {
+ legend: 'Mobile',
+ color: Token.ColorPurple500,
+ values: months.map((m, i) => ({ label: m, count: 25 + Math.round(Math.cos(i) * 10 + i * 3) })),
+ },
+]
+
+const sources = [
+ { legend: 'Direct', color: Token.ColorAccent500, value: 42 },
+ { legend: 'Referral', color: Token.ColorBlue500, value: 26 },
+ { legend: 'Organic', color: Token.ColorGreen500, value: 20 },
+ { legend: 'Social', color: Token.ColorPurple500, value: 12 },
+]
+
+const team = [
+ { name: 'Charlene Singh', role: 'Product Lead', src: '/women/01.jpg', presence: 'online', tag: 'Owner', tone: 'accent' },
+ { name: 'Craig Pather', role: 'Frontend Engineer', src: '/men/01.jpg', presence: 'online', tag: 'Admin', tone: 'highlight' },
+ { name: 'Etienne Dreyer', role: 'Designer', src: '/men/09.jpg', presence: 'away', tag: 'Member', tone: 'default' },
+ { name: 'Aubrey Moagi', role: 'Backend Engineer', src: '/men/02.jpg', presence: 'busy', tag: 'Member', tone: 'default' },
+ { name: 'Patrick Anthony', role: 'QA Engineer', src: '/men/03.jpg', presence: 'online', tag: 'Member', tone: 'default' },
+ { name: 'Lerato Khumalo', role: 'Data Analyst', src: '/women/04.jpg', presence: 'away', tag: 'Member', tone: 'default' },
+]
+
+const activity = [
+ { who: 'Charlene Singh', src: '/women/01.jpg', action: 'merged', target: 'feat/billing-v2', when: '2m ago', tone: 'success' },
+ { who: 'Craig Pather', src: '/men/01.jpg', action: 'opened', target: 'fix/login-redirect', when: '24m ago', tone: 'accent' },
+ { who: 'Aubrey Moagi', src: '/men/02.jpg', action: 'commented on', target: 'API rate limits', when: '1h ago', tone: 'default' },
+ { who: 'Etienne Dreyer', src: '/men/09.jpg', action: 'closed', target: 'design/tokens', when: '3h ago', tone: 'danger' },
+ { who: 'Patrick Anthony', src: '/men/03.jpg', action: 'deployed', target: 'production', when: '5h ago', tone: 'warning' },
+]
+
+const projects = [
+ { name: 'Atlas Platform', desc: 'Core billing & subscriptions service.', progress: 82, tag: 'Engineering', tone: 'accent', members: ['/men/01.jpg', '/women/01.jpg', '/men/09.jpg'] },
+ { name: 'Northwind App', desc: 'Customer-facing mobile experience.', progress: 47, tag: 'Product', tone: 'success', members: ['/men/02.jpg', '/women/04.jpg'] },
+ { name: 'Design System', desc: 'Shared component & token library.', progress: 95, tag: 'Design', tone: 'highlight', members: ['/men/09.jpg', '/women/01.jpg', '/men/03.jpg'] },
+ { name: 'Data Pipeline', desc: 'Event ingestion and warehousing.', progress: 31, tag: 'Data', tone: 'warning', members: ['/men/02.jpg', '/women/04.jpg', '/men/01.jpg'] },
+]
+
+/* -------------------------------------------------------------------------- */
+/* Shared chrome */
+/* -------------------------------------------------------------------------- */
+
+const PageHeader = ({ title, subtitle, children }: any) => (
+
+
+
+ {title}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+
+ {children}
+
+)
+
+const SectionTitle = ({ children, tool }: any) => (
+
+
+ {children}
+
+
+ {tool}
+
+)
+
+const Panel = ({ children, ...rest }: any) => (
+
+ {children}
+
+)
+
+const TonePill = ({ tone = 'default', children, ...rest }: any) => (
+
+ {children}
+
+)
+
+const ProfileMenu = () => {
+ const { visible, show, hide } = useVisibility(false)
+
+ return (
+
+ jo@joduplessis.com
+ }>Profile
+ }>Preferences
+ }>Upgrade plan
+
+ }>Sign out
+
+ }>
+
+
+
+
+
+ )
+}
+
+const NotificationsMenu = () => {
+ const { visible, show, hide } = useVisibility(false)
+
+ return (
+
+ Notifications
+ }>Build #1423 passed
+ }>Lerato joined the team
+ }>Usage at 80% of quota
+
+ }>
+
+
+
+
+
+ )
+}
+
+const RowMenu = () => {
+ const { visible, show, hide } = useVisibility(false)
+
+ return (
+
+ }>Edit role
+ }>Copy invite
+
+ }>Remove
+
+ }>
+
+
+ )
+}
+
+const TopBarTools = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
+
+/* -------------------------------------------------------------------------- */
+/* Pages */
+/* -------------------------------------------------------------------------- */
+
+const OverviewPage = () => {
+ const visitors = useMemo(() => spark(24, 1), [])
+ const revenue = useMemo(() => spark(24, 4), [])
+ const churn = useMemo(() => spark(24, 9), [])
+
+ const kpis = [
+ { icon: 'user', label: 'Active users', number: '41,841', data: visitors, delta: '+12.4%', tone: 'success' },
+ { icon: 'star', label: 'Revenue', number: '$ 89,210', data: revenue, delta: '+4.1%', tone: 'success' },
+ { icon: 'arrow-down', label: 'Churn', number: '1,291', data: churn, delta: '-0.8%', tone: 'danger' },
+ ]
+
+ return (
+
+
+
+
+
+
+
+ You're on the Pro trial. 9 days remaining — upgrade any time to keep your team's
+ seats.
+
+
+
+
+
+
+
+
+ {/* KPI row */}
+
+ {kpis.map((s) => (
+
+
+
+
+
+ {s.delta}
+
+
+
+
+
+
+ ))}
+
+
+ {/* Charts + goals */}
+
+
+
+
+
+
+
+ }>
+ Traffic overview
+
+
+
+
+
+ Quarterly goal
+
+
+ 68%
+
+
+
+
+
+ New signups
+
+
+ 820 / 1,000
+
+
+
+
+
+
+ Expansion MRR
+
+
+ $ 21k / $ 50k
+
+
+
+
+
+
+
+
+ {/* Activity feed */}
+
+ }>
+ View all
+
+ }>
+ Recent activity
+
+
+
+ {activity.map((a, i) => (
+
+ |
+
+ |
+
+
+ {a.who} {a.action}{' '}
+
+
+ {a.target}
+
+ |
+
+
+ {a.when}
+
+ |
+
+ ))}
+
+
+
+
+ )
+}
+
+const AnalyticsPage = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Sessions by device
+
+
+
+ Traffic sources
+
+
+
+
+
+
+
+ Revenue trend
+
+
+
+
+ Top pages
+
+
+
+ | Path |
+ Views |
+ Unique |
+ Bounce |
+
+
+
+ {[
+ ['/', '482,193', '301,442', '32%'],
+ ['/pricing', '210,938', '188,201', '41%'],
+ ['/blog/launch', '98,442', '90,118', '58%'],
+ ['/docs/getting-started', '76,201', '61,883', '22%'],
+ ['/changelog', '41,002', '38,772', '47%'],
+ ].map((r) => (
+
+ |
+ {r[0]}
+ |
+ {r[1]} |
+ {r[2]} |
+ {r[3]} |
+
+ ))}
+
+
+
+
+ )
+}
+
+const ProjectsPage = () => (
+
+
+ {projects.map((p) => (
+
+
+ {p.members.map((m, i) => (
+
+ ))}
+
+
+
+
+ }>
+
+
+
+ {p.tag}
+
+
+ {p.progress >= 90 && (
+ }>
+ Ready
+
+ )}
+
+ {p.name}
+
+ {p.desc}
+
+
+
+ Progress
+
+
+ {p.progress}%
+
+
+
+
+
+
+ ))}
+
+
+)
+
+const TeamPage = () => (
+
+
+ }>
+ Invite
+
+ }>
+ Members
+
+
+
+
+ | Member |
+ Role |
+ Access |
+ Actions |
+
+
+
+ {team.map((m) => (
+
+ |
+
+
+ {m.name}
+
+ |
+
+ {m.role}
+ |
+
+
+ {m.tag}
+
+ |
+
+
+ |
+
+ ))}
+
+
+
+
+
+ Pending invites
+
+ {[1, 2].map((i) => (
+
+
+
+
+
+
+
+ Pending
+
+
+ ))}
+
+
+
+)
+
+const SettingsPage = () => {
+ const [selected, setSelected] = useState(0)
+ const [emailNotif, setEmailNotif] = useState(true)
+ const [weekly, setWeekly] = useState(false)
+ const [plan, setPlan] = useState(['pro'])
+ const [bio, setBio] = useState('Building design systems and developer tools.')
+
+ return (
+
+
+
+
+ }>Profile
+ }>Notifications
+ }>Billing
+
+
+
+
+
+
+
+ }>
+ Upload photo
+
+
+ JPG or PNG, up to 2MB.
+
+
+
+
+
+ Display name
+
+
+
+
+
+ Email
+
+
+
+
+
+
+
+
+
+
+ Bio
+
+