create-ncblock 0.0.1

package/templates/table-view/src/table-model.ts

@@ -0,0 +1,663 @@
+import type {
+	NotionDataSourcePage,
+	NotionDateReminder,
+	NotionDateTimeReminder,
+	NotionDateValue,
+	NotionNoReminder,
+	NotionPageId,
+	NotionPropertySchema,
+	NotionRecordPointer,
+} from "ncblock"
+
+export type TableRow = NotionDataSourcePage
+
+export type ColumnKind =
+	| "id"
+	| "text"
+	| "number"
+	| "boolean"
+	| "date"
+	| "list"
+	| "relation"
+	| "empty"
+
+export type ColumnConfig = {
+	key: string
+	label: string
+	kind: ColumnKind
+}
+
+export type ColumnKindSummary = {
+	kind: SupportedColumnKind
+	count: number
+}
+
+type LoadedRelationEntry = NotionRecordPointer & {
+	title?: string | string[]
+	name?: string | string[]
+	label?: string | string[]
+	pointer?: unknown
+	page?: unknown
+	record?: unknown
+}
+
+const DATE_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+	timeZone: "UTC",
+})
+
+const NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
+	maximumFractionDigits: 2,
+})
+
+const PREFERRED_PRIMARY_KEYS = ["title", "name", "task", "label"]
+const UUID_LIKE_PATTERN = /^[0-9a-f-]{8,}$/i
+
+export const SUPPORTED_COLUMN_KINDS = [
+	"text",
+	"number",
+	"boolean",
+	"date",
+	"list",
+	"relation",
+] as const
+
+export type SupportedColumnKind = (typeof SUPPORTED_COLUMN_KINDS)[number]
+
+function relationEntries(
+	...entries: LoadedRelationEntry[]
+): NotionRecordPointer[] {
+	return entries
+}
+
+function makeSampleRow(
+	id: string,
+	properties: TableRow["propertiesByKey"],
+): TableRow {
+	return {
+		id: id as NotionPageId,
+		propertiesById: properties,
+		propertiesByKey: properties,
+		update: async () => ({
+			status: "error",
+			error: "Sample rows are read-only",
+		}),
+	}
+}
+
+export const SAMPLE_ITEMS: TableRow[] = [
+	makeSampleRow("task-001", {
+		title: "Project kickoff",
+		status: "In progress",
+		priority: "High",
+		progress: 32,
+		done: false,
+		timeline: {
+			type: "datetime",
+			start_date: "2026-04-14",
+			start_time: "09:00",
+			time_zone: "America/Los_Angeles",
+		},
+		tags: ["Planning", "Launch"],
+		url: "https://www.notion.so",
+		email: "ops@example.com",
+		phone: "+1 555 0100",
+		owner: relationEntries({
+			id: "person-ava-chen",
+			table: "collection",
+			title: "Ava Chen",
+		}),
+		relatedTasks: relationEntries(
+			{
+				id: "task-002",
+				table: "collection",
+				title: "Design sprint",
+			},
+			{
+				id: "7787acb2-4c73-4c3f-9e84-6f7c9784f093",
+				table: "collection",
+			},
+		),
+	}),
+	makeSampleRow("task-002", {
+		title: "Design sprint",
+		status: "Review",
+		priority: "Medium",
+		progress: 78,
+		done: false,
+		timeline: {
+			type: "daterange",
+			start_date: "2026-04-15",
+			end_date: "2026-04-18",
+		},
+		tags: ["Design", "Stakeholder"],
+		url: "https://figma.com/file/example",
+		email: "design@example.com",
+		phone: "+1 555 0101",
+		owner: relationEntries({
+			id: "person-nina-patel",
+			table: "collection",
+			name: "Nina Patel",
+		}),
+		relatedTasks: relationEntries({
+			id: "task-003",
+			table: "collection",
+			title: "Build handoff",
+		}),
+	}),
+	makeSampleRow("task-003", {
+		title: "Build handoff",
+		status: "Done",
+		priority: "Low",
+		progress: 100,
+		done: true,
+		timeline: {
+			type: "datetimerange",
+			start_date: "2026-04-18",
+			start_time: "13:00",
+			end_date: "2026-04-22",
+			end_time: "15:00",
+			time_zone: "America/New_York",
+		},
+		tags: ["Engineering", "Release"],
+		url: "https://github.com/makenotion/custom-sdk",
+		email: "eng@example.com",
+		phone: "+1 555 0102",
+		owner: relationEntries({
+			id: "person-marcus-lee",
+			table: "collection",
+			title: "Marcus Lee",
+		}),
+		relatedTasks: relationEntries({
+			id: "task-001",
+			table: "collection",
+		}),
+	}),
+	makeSampleRow("task-004", {
+		title: "Launch day",
+		status: "Scheduled",
+		priority: "High",
+		progress: 0,
+		done: false,
+		timeline: {
+			type: "date",
+			start_date: "2026-04-24",
+		},
+		tags: ["Launch"],
+		url: "https://status.example.com",
+		email: "support@example.com",
+		phone: "+1 555 0103",
+		owner: relationEntries({
+			id: "person-river-wu",
+			table: "collection",
+			title: "River Wu",
+		}),
+		relatedTasks: relationEntries({
+			id: "0d27b3b7-d111-4f2c-88b5-7cc6a7fd4f68",
+			table: "collection",
+		}),
+	}),
+]
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return value !== null && typeof value === "object" && !Array.isArray(value)
+}
+
+export function isDateValue(value: unknown): value is NotionDateValue {
+	if (!isRecord(value) || typeof value.type !== "string") {
+		return false
+	}
+
+	switch (value.type) {
+		case "date":
+			return typeof value.start_date === "string"
+		case "daterange":
+			return (
+				typeof value.start_date === "string" &&
+				typeof value.end_date === "string"
+			)
+		case "datetime":
+			return (
+				typeof value.start_date === "string" &&
+				typeof value.start_time === "string" &&
+				typeof value.time_zone === "string"
+			)
+		case "datetimerange":
+			return (
+				typeof value.start_date === "string" &&
+				typeof value.start_time === "string" &&
+				typeof value.end_date === "string" &&
+				typeof value.end_time === "string" &&
+				typeof value.time_zone === "string"
+			)
+		default:
+			return false
+	}
+}
+
+export function isStringArray(value: unknown): value is string[] {
+	return Array.isArray(value) && value.every(entry => typeof entry === "string")
+}
+
+export function extractRecordId(value: unknown): string | undefined {
+	if (typeof value === "string" && value.length > 0) {
+		return value
+	}
+	if (!isRecord(value)) {
+		return undefined
+	}
+	if (typeof value.id === "string" && value.id.length > 0) {
+		return value.id
+	}
+	if (typeof value.row_id === "string" && value.row_id.length > 0) {
+		return value.row_id
+	}
+	if (typeof value.page_id === "string" && value.page_id.length > 0) {
+		return value.page_id
+	}
+	if (isRecord(value.pointer)) {
+		return extractRecordId(value.pointer)
+	}
+	return undefined
+}
+
+function coerceInlineText(value: unknown): string | undefined {
+	if (typeof value === "string") {
+		return value.trim().length > 0 ? value : undefined
+	}
+	if (isStringArray(value)) {
+		const joined = value
+			.map(part => part.trim())
+			.filter(Boolean)
+			.join("")
+		return joined.length > 0 ? joined : undefined
+	}
+	return undefined
+}
+
+function extractRelationTitle(value: unknown, depth = 0): string | undefined {
+	if (!isRecord(value) || depth > 2) {
+		return undefined
+	}
+
+	for (const key of ["title", "name", "label"]) {
+		const title = coerceInlineText(value[key])
+		if (title) {
+			return title
+		}
+	}
+
+	for (const key of ["pointer", "page", "record"]) {
+		const nested = extractRelationTitle(value[key], depth + 1)
+		if (nested) {
+			return nested
+		}
+	}
+
+	return undefined
+}
+
+export function isRelationArray(value: unknown): value is Array<unknown> {
+	if (!Array.isArray(value) || value.length === 0) {
+		return false
+	}
+	return value.every(entry => {
+		if (typeof entry === "string") {
+			return UUID_LIKE_PATTERN.test(entry)
+		}
+		return extractRecordId(entry) !== undefined
+	})
+}
+
+function parseIsoDateToDayStartMs(value: string): number {
+	const [year, month, day] = value.split("-").map(Number)
+	return Date.UTC(year, month - 1, day)
+}
+
+function parseTimeToMinutes(value: string): number {
+	const [hours, minutes] = value.split(":").map(Number)
+	return hours * 60 + minutes
+}
+
+function formatIsoDate(value: string): string {
+	return DATE_LABEL_FORMATTER.format(new Date(parseIsoDateToDayStartMs(value)))
+}
+
+function formatReminder(
+	reminder:
+		| NotionDateReminder
+		| NotionDateTimeReminder
+		| NotionNoReminder
+		| undefined,
+): string | undefined {
+	if (!reminder) {
+		return undefined
+	}
+	if (reminder.unit === "none") {
+		return "No reminder"
+	}
+	if ("time" in reminder) {
+		const unitLabel = reminder.value === 1 ? reminder.unit : `${reminder.unit}s`
+		return `${reminder.value} ${unitLabel} before at ${reminder.time}`
+	}
+	const unitLabel = reminder.value === 1 ? reminder.unit : `${reminder.unit}s`
+	return `${reminder.value} ${unitLabel} before`
+}
+
+function getDateSortValue(value: NotionDateValue): number {
+	switch (value.type) {
+		case "date":
+			return parseIsoDateToDayStartMs(value.start_date)
+		case "daterange":
+			return parseIsoDateToDayStartMs(value.start_date)
+		case "datetime":
+			return (
+				parseIsoDateToDayStartMs(value.start_date) +
+				parseTimeToMinutes(value.start_time) * 60 * 1000
+			)
+		case "datetimerange":
+			return (
+				parseIsoDateToDayStartMs(value.start_date) +
+				parseTimeToMinutes(value.start_time) * 60 * 1000
+			)
+	}
+}
+
+export function formatNumberValue(value: number): string {
+	return NUMBER_FORMATTER.format(value)
+}
+
+export function formatDateValue(value: NotionDateValue): {
+	primary: string
+	secondary?: string
+} {
+	const reminder = formatReminder(value.reminder)
+	switch (value.type) {
+		case "date":
+			return {
+				primary: formatIsoDate(value.start_date),
+				secondary: reminder,
+			}
+		case "daterange":
+			return {
+				primary: `${formatIsoDate(value.start_date)} -> ${formatIsoDate(value.end_date)}`,
+				secondary: reminder,
+			}
+		case "datetime":
+			return {
+				primary: `${formatIsoDate(value.start_date)} ${value.start_time}`,
+				secondary: [value.time_zone, reminder].filter(Boolean).join(" · "),
+			}
+		case "datetimerange":
+			return {
+				primary: `${formatIsoDate(value.start_date)} ${value.start_time} -> ${formatIsoDate(value.end_date)} ${value.end_time}`,
+				secondary: [value.time_zone, reminder].filter(Boolean).join(" · "),
+			}
+	}
+}
+
+export function getRelationDisplay(entry: unknown): {
+	id?: string
+	label: string
+} {
+	const id = extractRecordId(entry)
+	const label = extractRelationTitle(entry) ?? id ?? "Unknown relation"
+	return { id, label }
+}
+
+export function getSearchText(value: unknown): string {
+	if (value === undefined || value === null) {
+		return ""
+	}
+	if (typeof value === "string" || typeof value === "number") {
+		return String(value)
+	}
+	if (typeof value === "boolean") {
+		return value ? "true checked yes" : "false unchecked no"
+	}
+	if (isDateValue(value)) {
+		const formatted = formatDateValue(value)
+		return [formatted.primary, formatted.secondary].filter(Boolean).join(" ")
+	}
+	if (isStringArray(value)) {
+		return value.join(" ")
+	}
+	if (isRelationArray(value)) {
+		return value
+			.map(entry => {
+				const relation = getRelationDisplay(entry)
+				return [relation.label, relation.id].filter(Boolean).join(" ")
+			})
+			.join(" ")
+	}
+	if (Array.isArray(value)) {
+		return value.map(entry => getSearchText(entry)).join(" ")
+	}
+	if (isRecord(value)) {
+		return Object.values(value)
+			.map(entry => getSearchText(entry))
+			.join(" ")
+	}
+	return String(value)
+}
+
+function getSortValue(value: unknown): number | string {
+	if (value === undefined || value === null) {
+		return ""
+	}
+	if (typeof value === "number") {
+		return value
+	}
+	if (typeof value === "boolean") {
+		return value ? 1 : 0
+	}
+	if (typeof value === "string") {
+		return value.toLowerCase()
+	}
+	if (isDateValue(value)) {
+		return getDateSortValue(value)
+	}
+	if (isStringArray(value)) {
+		return value.join(" ").toLowerCase()
+	}
+	if (isRelationArray(value)) {
+		return value
+			.map(entry => getRelationDisplay(entry).label.toLowerCase())
+			.join(" ")
+	}
+	return JSON.stringify(value)
+}
+
+export function compareValues(left: unknown, right: unknown): number {
+	const leftValue = getSortValue(left)
+	const rightValue = getSortValue(right)
+	if (typeof leftValue === "number" && typeof rightValue === "number") {
+		return leftValue - rightValue
+	}
+	return String(leftValue).localeCompare(String(rightValue), undefined, {
+		numeric: true,
+		sensitivity: "base",
+	})
+}
+
+export function humanizeKey(key: string): string {
+	return key
+		.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+		.replace(/[_-]+/g, " ")
+		.replace(/\s+/g, " ")
+		.trim()
+		.replace(/^./, first => first.toUpperCase())
+}
+
+export function collectColumnKeys(
+	items: TableRow[],
+	propertySchemasById: Record<string, NotionPropertySchema | undefined> = {},
+): string[] {
+	const seen = new Set<string>()
+	const ordered: string[] = []
+
+	const register = (key: string) => {
+		if (key === "id" || seen.has(key)) {
+			return
+		}
+		seen.add(key)
+		ordered.push(key)
+	}
+
+	for (const key of Object.keys(propertySchemasById)) {
+		if (propertySchemasById[key] !== undefined) {
+			register(key)
+		}
+	}
+
+	for (const item of items) {
+		for (const key of Object.keys(item.propertiesById)) {
+			register(key)
+		}
+	}
+
+	const preferred = PREFERRED_PRIMARY_KEYS.filter(key => seen.has(key))
+	const remainder = ordered.filter(key => !preferred.includes(key))
+	return ["id", ...preferred, ...remainder]
+}
+
+export function getRowProperty(item: TableRow, key: string): unknown {
+	return item.propertiesById[key]
+}
+
+function columnKindFromPropertySchema(
+	schema: NotionPropertySchema | undefined,
+): ColumnKind | undefined {
+	switch (schema?.type) {
+		case "title":
+		case "rich_text":
+		case "url":
+		case "email":
+		case "phone_number":
+		case "select":
+		case "status":
+			return "text"
+		case "number":
+			return "number"
+		case "checkbox":
+			return "boolean"
+		case "date":
+			return "date"
+		case "multi_select":
+			return "list"
+		case "people":
+		case "relation":
+			return "relation"
+		default:
+			return undefined
+	}
+}
+
+export function inferColumnKind(
+	key: string,
+	items: TableRow[],
+	propertySchemasById: Record<string, NotionPropertySchema | undefined> = {},
+): ColumnKind {
+	if (key === "id") {
+		return "id"
+	}
+
+	const schemaKind = columnKindFromPropertySchema(propertySchemasById[key])
+	if (schemaKind !== undefined) {
+		return schemaKind
+	}
+
+	for (const item of items) {
+		const value = getRowProperty(item, key)
+		if (value === undefined) {
+			continue
+		}
+		if (isDateValue(value)) {
+			return "date"
+		}
+		if (isRelationArray(value)) {
+			return "relation"
+		}
+		if (isStringArray(value)) {
+			return "list"
+		}
+		if (typeof value === "boolean") {
+			return "boolean"
+		}
+		if (typeof value === "number") {
+			return "number"
+		}
+		if (typeof value === "string") {
+			return "text"
+		}
+	}
+
+	return "empty"
+}
+
+export function getColumnWidth(kind: ColumnKind): number {
+	switch (kind) {
+		case "id":
+			return 180
+		case "number":
+			return 132
+		case "boolean":
+			return 148
+		case "date":
+			return 260
+		case "list":
+			return 280
+		case "relation":
+			return 320
+		case "empty":
+			return 180
+		case "text":
+		default:
+			return 240
+	}
+}
+
+export function getColumnConfigs(
+	items: TableRow[],
+	propertySchemasById: Record<string, NotionPropertySchema | undefined> = {},
+): ColumnConfig[] {
+	return collectColumnKeys(items, propertySchemasById).map(key => ({
+		key,
+		label: key === "id" ? "ID" : (propertySchemasById[key]?.name ?? key),
+		kind: inferColumnKind(key, items, propertySchemasById),
+	}))
+}
+
+export function getPrimaryColumnId(columnConfigs: ColumnConfig[]): string {
+	return (
+		columnConfigs.find(config => PREFERRED_PRIMARY_KEYS.includes(config.key))
+			?.key ??
+		columnConfigs[0]?.key ??
+		"id"
+	)
+}
+
+export function summarizeColumnKinds(
+	columnConfigs: ColumnConfig[],
+): ColumnKindSummary[] {
+	const counts = new Map<SupportedColumnKind, number>()
+
+	for (const config of columnConfigs) {
+		if (
+			config.kind === "id" ||
+			config.kind === "empty" ||
+			!SUPPORTED_COLUMN_KINDS.includes(config.kind as SupportedColumnKind)
+		) {
+			continue
+		}
+		const kind = config.kind as SupportedColumnKind
+		counts.set(kind, (counts.get(kind) ?? 0) + 1)
+	}
+
+	return SUPPORTED_COLUMN_KINDS.map(kind => ({
+		kind,
+		count: counts.get(kind) ?? 0,
+	})).filter(entry => entry.count > 0)
+}

package/templates/table-view/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"types": ["vite/client"],
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src", "vite.config.ts"]
+}

package/templates/table-view/vite.config.ts

@@ -0,0 +1,8 @@
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { notionCustomBlock } from "ncblock/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+	plugins: [react(), tailwindcss(), notionCustomBlock()],
+})

package/templates/us-heatmap/node_modules/.bin/tsc

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/nsarkar/work/custom/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/bin/node_modules:/Users/nsarkar/work/custom/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/Users/nsarkar/work/custom/node_modules/.pnpm/typescript@6.0.3/node_modules:/Users/nsarkar/work/custom/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/nsarkar/work/custom/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/bin/node_modules:/Users/nsarkar/work/custom/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/Users/nsarkar/work/custom/node_modules/.pnpm/typescript@6.0.3/node_modules:/Users/nsarkar/work/custom/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi