@heliosgraphics/fx 0.0.1-alpha.0

package/pages/ComponentPage/ComponentPage.tsx

@@ -0,0 +1,26 @@
+import { Breadcrumb, type BreadcrumbItem } from "@heliosgraphics/ui"
+import { notFound } from "next/navigation"
+import { Page } from "../../components/Page"
+import { PropsTable } from "../../components/PropsTable"
+import { LiveComponents } from "../../components/LiveComponents"
+import type { FC } from "react"
+import type { ComponentPageProps } from "./ComponentPage.types"
+
+export const ComponentPage: FC<ComponentPageProps> = async ({ params, components, knobs, demoComponents }) => {
+	const { component } = await params
+	const demoMeta = components[component]
+
+	if (!component || !demoMeta) notFound()
+
+	const BREADCRUMB_ITEMS: Array<BreadcrumbItem> = [
+		{ name: "Components", href: "/" },
+		{ name: component, href: `/components/${component}`, isActive: true },
+	]
+
+	return (
+		<Page title={component} breadcrumb={<Breadcrumb items={BREADCRUMB_ITEMS} />} disabledPadding={true}>
+			<LiveComponents demoComponent={demoComponents?.[component] ?? null} demoMeta={demoMeta} knobs={knobs} />
+			<PropsTable meta={demoMeta} knobs={knobs} />
+		</Page>
+	)
+}

package/pages/ComponentPage/ComponentPage.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react"
+import type { WorkshopComponentRegistry } from "../../types/meta"
+import type { KnobRegistry } from "../../types/knobs"
+
+export interface ComponentPageProps {
+	params: Promise<{ component: string }>
+	components: WorkshopComponentRegistry
+	knobs: KnobRegistry
+	demoComponents?: Record<string, ReactNode>
+}

package/pages/ComponentPage/index.ts

@@ -0,0 +1,2 @@
+export { ComponentPage } from "./ComponentPage"
+export type { ComponentPageProps } from "./ComponentPage.types"

package/pages/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { Flex, Heading, Text, Separator, Pill } from "@heliosgraphics/ui"
+import { getComponentStats } from "./DashboardPage.utils"
+import type { FC } from "react"
+import type { DashboardPageProps } from "./DashboardPage.types"
+import type { WorkshopComponentStatus } from "../../types/meta"
+import type { HeliosColorType } from "@heliosgraphics/ui"
+
+const STATUS_INTENT_MAP: Record<WorkshopComponentStatus, HeliosColorType> = {
+	stable: "green",
+	nominal: "blue",
+	experimental: "orange",
+	internal: "gray",
+}
+
+export const DashboardPage: FC<DashboardPageProps> = ({ name, description, components, children }) => {
+	const stats = getComponentStats(components)
+
+	return (
+		<Flex isColumn={true} gap={16} padding={[8, 16, 24]}>
+			<Flex isColumn={true} gap={4}>
+				<Heading level={1} fontWeight="semibold">
+					{name}
+				</Heading>
+				{description && (
+					<Text type="paragraph" emphasis="secondary">
+						{description}
+					</Text>
+				)}
+			</Flex>
+			<Separator emphasis="secondary" />
+			<Flex gap={16}>
+				<Flex isColumn={true} gap={2}>
+					<Text type="small" emphasis="secondary">
+						Components
+					</Text>
+					<Heading level={3}>{stats.total}</Heading>
+				</Flex>
+				<Flex isColumn={true} gap={2}>
+					<Text type="small" emphasis="secondary">
+						Categories
+					</Text>
+					<Heading level={3}>{stats.categoryCount}</Heading>
+				</Flex>
+			</Flex>
+			<Separator emphasis="secondary" />
+			<Flex gap={32}>
+				<Flex isColumn={true} gap={8}>
+					<Text type="small" emphasis="secondary">
+						By Category
+					</Text>
+					<Flex isColumn={true} gap={4}>
+						{stats.categories.map(({ name: categoryName, count }) => (
+							<Flex key={categoryName} isBetween={true} isYCentered={true} gap={12}>
+								<Text type="paragraph">{categoryName}</Text>
+								<Text type="small" emphasis="secondary">
+									{count}
+								</Text>
+							</Flex>
+						))}
+					</Flex>
+				</Flex>
+				<Flex isColumn={true} gap={8}>
+					<Text type="small" emphasis="secondary">
+						By Status
+					</Text>
+					<Flex isColumn={true} gap={4}>
+						{stats.statuses.map(({ name: statusName, count }) => (
+							<Flex key={statusName} isYCentered={true} gap={8}>
+								<Pill label={statusName} color={STATUS_INTENT_MAP[statusName]} size="small" />
+								<Text type="small" emphasis="secondary">
+									{count}
+								</Text>
+							</Flex>
+						))}
+					</Flex>
+				</Flex>
+			</Flex>
+			{children && (
+				<>
+					<Separator emphasis="secondary" />
+					{children}
+				</>
+			)}
+		</Flex>
+	)
+}

package/pages/DashboardPage/DashboardPage.types.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react"
+import type { WorkshopComponentRegistry } from "../../types/meta"
+
+export interface DashboardPageProps {
+	name: string
+	description?: string
+	components: WorkshopComponentRegistry
+	children?: ReactNode
+}

package/pages/DashboardPage/DashboardPage.utils.ts

@@ -0,0 +1,33 @@
+import type { WorkshopComponentRegistry, WorkshopComponentStatus } from "../../types/meta"
+
+interface ComponentStats {
+	total: number
+	categoryCount: number
+	categories: Array<{ name: string; count: number }>
+	statuses: Array<{ name: WorkshopComponentStatus; count: number }>
+}
+
+const STATUS_ORDER: Array<WorkshopComponentStatus> = ["stable", "nominal", "experimental", "internal"]
+
+export const getComponentStats = (components: WorkshopComponentRegistry): ComponentStats => {
+	const entries = Object.values(components)
+	const total: number = entries.length
+
+	const categoryMap = new Map<string, number>()
+	const statusMap = new Map<WorkshopComponentStatus, number>()
+
+	for (const entry of entries) {
+		const category: string = entry._category ?? "uncategorized"
+		const status: WorkshopComponentStatus = entry._status ?? "experimental"
+		categoryMap.set(category, (categoryMap.get(category) ?? 0) + 1)
+		statusMap.set(status, (statusMap.get(status) ?? 0) + 1)
+	}
+
+	const categories = Array.from(categoryMap.entries())
+		.map(([name, count]) => ({ name, count }))
+		.sort((a, b) => b.count - a.count)
+
+	const statuses = STATUS_ORDER.filter((s) => statusMap.has(s)).map((name) => ({ name, count: statusMap.get(name)! }))
+
+	return { total, categoryCount: categoryMap.size, categories, statuses }
+}

package/pages/DashboardPage/index.ts

@@ -0,0 +1,2 @@
+export { DashboardPage } from "./DashboardPage"
+export type { DashboardPageProps } from "./DashboardPage.types"

package/pages/index.ts

@@ -0,0 +1,5 @@
+export { ComponentPage } from "./ComponentPage"
+export type { ComponentPageProps } from "./ComponentPage"
+
+export { DashboardPage } from "./DashboardPage"
+export type { DashboardPageProps } from "./DashboardPage"

package/types/config.ts

@@ -0,0 +1,18 @@
+import type { KnobRegistry } from "./knobs"
+import type { WorkshopComponentStatus } from "./meta"
+import type { HeliosIconType } from "@heliosgraphics/ui"
+
+export interface WorkshopPageConfig {
+	title: string
+	href: string
+	icon?: HeliosIconType
+}
+
+export interface WorkshopConfig {
+	name: string
+	transpilePackages?: Array<string>
+	baseUrl?: string
+	knobs: KnobRegistry
+	visibleStatuses?: Array<WorkshopComponentStatus>
+	pages?: Array<WorkshopPageConfig>
+}

package/types/knobs.ts

@@ -0,0 +1,13 @@
+export interface KnobDefinition {
+	label: string
+	values: Array<string | number | boolean>
+	defaultValue: string | number | boolean
+	isInternal?: boolean
+	editor?: string
+}
+
+export type KnobRegistry = Record<string, KnobDefinition>
+
+export type KnobValues = Record<string, string | number | boolean>
+
+export type KnobSetters = Record<string, (value: string | number | boolean) => void>

package/types/meta.ts

@@ -0,0 +1,28 @@
+export interface WorkshopAttributeItem<T> {
+	alias?: keyof T
+	default?: number | string
+	description?: string
+	isOptional?: boolean
+	type: string
+	knob?: string
+}
+
+export interface WorkshopPattern {
+	id: string
+	description: string
+	content: string
+}
+
+export type WorkshopComponentStatus = "stable" | "nominal" | "internal" | "experimental"
+
+export type WorkshopComponentCategory = string
+
+export type WorkshopAttributeMeta<T> = Record<keyof T, WorkshopAttributeItem<T>> & {
+	_category: WorkshopComponentCategory
+	_extends?: Array<string>
+	_patterns: Array<WorkshopPattern>
+	_status: WorkshopComponentStatus
+	_type?: "composite" | "hoc"
+}
+
+export type WorkshopComponentRegistry = Record<string, WorkshopAttributeMeta<unknown>>