create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/charting/src/view/chart.ts

@@ -0,0 +1,129 @@
+import * as echarts from 'echarts/core'
+import { Effect, Option, Schema as S } from 'effect'
+import { Mount } from 'foldkit'
+import type { Html } from 'foldkit/html'
+import { HtmlBuilder } from 'foldkit/html'
+
+import { removeChart, setChart } from '../chartHost'
+import type { Telemetry } from '../domain'
+import { selectedDatumLabel } from '../echarts'
+import { Message } from '../message'
+import type { Model } from '../model'
+import { formatInteger } from './format'
+
+export const CHART_HOST_ID = 'charting-chart'
+
+export const MountChart = Mount.define(
+  'MountChart',
+  { hostId: S.String },
+  Message.SucceededMountChart,
+  Message.FailedMountChart,
+)(
+  ({ hostId }) =>
+    element =>
+      Effect.gen(function* () {
+        if (!(element instanceof HTMLElement)) {
+          return Message.FailedMountChart({
+            reason: 'Chart host is not an HTMLElement.',
+          })
+        }
+
+        return yield* Effect.acquireRelease(
+          Effect.try({
+            try: () => {
+              const chart = echarts.init(element, undefined, {
+                renderer: 'canvas',
+              })
+              const resizeObserver = new ResizeObserver(() => chart.resize())
+              resizeObserver.observe(element)
+              const onWindowResize = () => chart.resize()
+              window.addEventListener('resize', onWindowResize)
+              setChart(hostId, chart)
+              return { resizeObserver, onWindowResize }
+            },
+            catch: error =>
+              error instanceof Error
+                ? error
+                : new Error(`Failed to mount chart: ${error}`),
+          }),
+          ({ resizeObserver, onWindowResize }) =>
+            Effect.sync(() => {
+              resizeObserver.disconnect()
+              window.removeEventListener('resize', onWindowResize)
+              removeChart(hostId)
+            }),
+        ).pipe(
+          Effect.map(() => Message.SucceededMountChart({ hostId })),
+          Effect.catch(error =>
+            Effect.succeed(Message.FailedMountChart({ reason: error.message })),
+          ),
+        )
+      }),
+)
+
+export const chartPanelView = (
+  model: Model,
+  telemetry: Telemetry,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.section(
+    [
+      h.Class(
+        'grid min-h-[32rem] self-start grid-rows-[minmax(0,1fr)_auto] rounded-md border border-zinc-200 bg-white',
+      ),
+    ],
+    [
+      h.div([
+        h.Class('min-h-[26rem] w-full'),
+        h.AriaLabel('Adoption chart'),
+        h.OnMount(MountChart({ hostId: CHART_HOST_ID })),
+      ]),
+      chartFooterView(model, telemetry, h),
+    ],
+  )
+
+export const chartFooterView = (
+  model: Model,
+  telemetry: Telemetry,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [
+      h.Class(
+        'flex flex-col gap-3 border-t border-zinc-200 px-4 py-3 text-sm md:flex-row md:items-center md:justify-between',
+      ),
+    ],
+    [
+      h.div(
+        [],
+        [
+          h.div(
+            [h.Class('font-medium text-zinc-900')],
+            [chartFooterLabel(model, telemetry)],
+          ),
+          h.div(
+            [h.Class('text-xs text-zinc-500')],
+            [`Default branch: ${telemetry.repository.defaultBranch}`],
+          ),
+        ],
+      ),
+      chartStatusView(model, h),
+    ],
+  )
+
+export const chartFooterLabel = (model: Model, telemetry: Telemetry): string =>
+  Option.getOrElse(
+    selectedDatumLabel(telemetry, model.maybeSelectedDatumId),
+    () =>
+      `${formatInteger(telemetry.repository.openIssues)} open issues, ${formatInteger(
+        telemetry.repository.openPullRequests,
+      )} open pull requests`,
+  )
+
+export const chartStatusView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  Option.match(model.maybeChartError, {
+    onNone: () =>
+      h.div([h.Class('text-xs font-medium text-emerald-700')], ['Chart ready']),
+    onSome: error =>
+      h.div([h.Class('max-w-md text-xs font-medium text-rose-700')], [error]),
+  })

package/dist/templates/examples/charting/src/view/format.ts

@@ -0,0 +1,23 @@
+import { DateTime } from 'effect'
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+const integerFormatter = new Intl.NumberFormat('en-US')
+
+export const formatCompact = (value: number): string =>
+  compactFormatter.format(value)
+
+export const formatInteger = (value: number): string =>
+  integerFormatter.format(value)
+
+export const formatFetchedAt = (milliseconds: number): string =>
+  DateTime.formatLocal(DateTime.makeUnsafe(milliseconds), {
+    locale: 'en-US',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })

package/dist/templates/examples/charting/src/view/index.ts

@@ -0,0 +1 @@
+export { view } from './view'

package/dist/templates/examples/charting/src/view/layout.ts

@@ -0,0 +1,175 @@
+import { Array, Option } from 'effect'
+import { AsyncData } from 'foldkit'
+import type { Html } from 'foldkit/html'
+import { HtmlBuilder } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import type { Telemetry } from '../domain'
+import { Message } from '../message'
+import type { Model } from '../model'
+import { chartPanelView } from './chart'
+import { sidebarView } from './sidebar'
+
+export const headerView = (model: Model, h: HtmlBuilder<Message>): Html => {
+  const isRefreshing = AsyncData.isRefreshing(model.telemetry)
+  const isLoading = AsyncData.isLoading(model.telemetry)
+
+  return h.header(
+    [
+      h.Class(
+        'flex flex-col gap-3 border-b border-zinc-200 pb-4 md:flex-row md:items-end md:justify-between',
+      ),
+    ],
+    [
+      h.div(
+        [],
+        [
+          h.p(
+            [
+              h.Class(
+                'text-xs font-semibold uppercase tracking-wider text-emerald-700',
+              ),
+            ],
+            ['Live public telemetry'],
+          ),
+          h.h1(
+            [
+              h.Class(
+                'mt-1 text-2xl font-semibold tracking-tight text-zinc-950',
+              ),
+            ],
+            ['Foldkit Adoption Observatory'],
+          ),
+        ],
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedRefresh(),
+          isDisabled: isRefreshing || isLoading,
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'inline-flex min-h-10 items-center justify-center rounded-md bg-zinc-950 px-4 text-sm font-medium text-white hover:bg-zinc-800 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+                ),
+              ],
+              [isRefreshing ? 'Refreshing' : 'Refresh'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+}
+
+const dashboardBanner = (
+  telemetry: Model['telemetry'],
+): Option.Option<string> =>
+  AsyncData.match(telemetry, {
+    onIdle: () => Option.none(),
+    onLoading: () => Option.none(),
+    onRefreshing: () => Option.some('Refreshing public data'),
+    onFailure: () => Option.none(),
+    onStale: ({ error }) => Option.some(error),
+    onSuccess: ({ warnings }) =>
+      Array.match(warnings, {
+        onEmpty: () => Option.none(),
+        onNonEmpty: warnings => Option.some(Array.join(warnings, ' ')),
+      }),
+  })
+
+export const telemetryStateView = (
+  model: Model,
+  h: HtmlBuilder<Message>,
+): Html =>
+  AsyncData.matchData(model.telemetry, {
+    onEmpty: () => loadingView(h),
+    onFailure: error => failureView(error, h),
+    onData: data =>
+      dashboardShellView(model, data, dashboardBanner(model.telemetry), h),
+  })
+
+export const loadingView = (h: HtmlBuilder<Message>): Html =>
+  h.section(
+    [
+      h.Class(
+        'grid flex-1 place-items-center rounded-md border border-zinc-200 bg-white px-6 py-16',
+      ),
+      h.AriaLabel('Loading telemetry'),
+    ],
+    [
+      h.div(
+        [h.Class('text-center')],
+        [
+          h.div([
+            h.Class(
+              'mx-auto h-8 w-8 rounded-full border-2 border-zinc-200 border-t-emerald-600 motion-safe:animate-spin',
+            ),
+            h.AriaLabel('Loading'),
+          ]),
+          h.p(
+            [h.Class('mt-4 text-sm font-medium text-zinc-700')],
+            ['Fetching public telemetry'],
+          ),
+        ],
+      ),
+    ],
+  )
+
+export const failureView = (error: string, h: HtmlBuilder<Message>): Html =>
+  h.section(
+    [
+      h.Class(
+        'grid flex-1 place-items-center rounded-md border border-rose-200 bg-rose-50 px-6 py-16 text-center',
+      ),
+      h.AriaLabel('Telemetry failed'),
+    ],
+    [
+      h.div(
+        [h.Class('max-w-lg')],
+        [
+          h.h2(
+            [h.Class('text-lg font-semibold text-rose-950')],
+            ['Could not fetch telemetry'],
+          ),
+          h.p([h.Class('mt-2 text-sm text-rose-800')], [error]),
+          Button.view(
+            {
+              onClick: Message.ClickedRetry(),
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'mt-5 inline-flex min-h-10 items-center justify-center rounded-md bg-rose-700 px-4 text-sm font-medium text-white hover:bg-rose-800',
+                    ),
+                  ],
+                  ['Retry'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+
+export const dashboardShellView = (
+  model: Model,
+  telemetry: Telemetry,
+  maybeBanner: Option.Option<string>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.section(
+    [
+      h.Class(
+        'grid flex-1 gap-5 md:grid-cols-[18rem_minmax(0,1fr)] lg:grid-cols-[20rem_minmax(0,1fr)]',
+      ),
+    ],
+    [
+      sidebarView(model, telemetry, maybeBanner, h),
+      chartPanelView(model, telemetry, h),
+    ],
+  )

package/dist/templates/examples/charting/src/view/sidebar.ts

@@ -0,0 +1,309 @@
+import clsx from 'clsx'
+import { Array, Option } from 'effect'
+import type { Html } from 'foldkit/html'
+import { HtmlBuilder } from 'foldkit/html'
+
+import {
+  type Telemetry,
+  chartModes,
+  findPackageSnapshot,
+  packageIdToSpec,
+  packageIds,
+  periodLabels,
+  periods,
+  totalCommits,
+  totalDownloads,
+} from '../domain'
+import { Message } from '../message'
+import { type Model } from '../model'
+import {
+  ChartModeRadioGroup,
+  PackageRadioGroup,
+  PeriodRadioGroup,
+} from '../radioGroups'
+import { formatCompact, formatFetchedAt, formatInteger } from './format'
+
+export const sidebarView = (
+  model: Model,
+  telemetry: Telemetry,
+  maybeBanner: Option.Option<string>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.aside(
+    [h.Class('flex flex-col gap-4')],
+    [
+      Option.match(maybeBanner, {
+        onNone: () => h.empty,
+        onSome: banner =>
+          h.div(
+            [
+              h.Class(
+                'rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-950',
+              ),
+            ],
+            [banner],
+          ),
+      }),
+      summaryGridView(telemetry, h),
+      controlPanelView(model, h),
+      packagePanelView(model, telemetry, h),
+      contributorsView(telemetry, h),
+    ],
+  )
+
+export const summaryGridView = (
+  telemetry: Telemetry,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const summaries = [
+    {
+      id: 'stars',
+      label: 'Stars',
+      value: formatCompact(telemetry.repository.stars),
+    },
+    {
+      id: 'downloads',
+      label: 'Downloads',
+      value: formatCompact(totalDownloads(telemetry)),
+    },
+    {
+      id: 'contributors',
+      label: 'Contributors',
+      value: formatInteger(telemetry.repository.visibleContributors),
+    },
+    {
+      id: 'commits',
+      label: 'Commits',
+      value: formatInteger(totalCommits(telemetry)),
+    },
+  ]
+
+  return h.div(
+    [h.Class('grid grid-cols-2 gap-3')],
+    Array.map(summaries, summary =>
+      h.keyed('div')(
+        summary.id,
+        [h.Class('rounded-md border border-zinc-200 bg-white p-3')],
+        [
+          h.div(
+            [h.Class('text-xs font-medium text-zinc-500')],
+            [summary.label],
+          ),
+          h.div(
+            [h.Class('mt-1 text-xl font-semibold text-zinc-950')],
+            [summary.value],
+          ),
+        ],
+      ),
+    ),
+  )
+}
+
+const radioGroupClassName =
+  'grid grid-cols-3 rounded-md border border-zinc-200 bg-zinc-100 p-1'
+
+const radioOptionClassName = (isSelected: boolean): string =>
+  clsx(
+    'flex min-h-9 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500',
+    isSelected
+      ? 'bg-white text-zinc-950 shadow-sm'
+      : 'text-zinc-600 hover:text-zinc-950',
+  )
+
+export const controlPanelView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.section(
+    [h.Class('rounded-md border border-zinc-200 bg-white p-3')],
+    [
+      h.h2([h.Class('text-sm font-semibold text-zinc-950')], ['View']),
+      h.div(
+        [h.Class('mt-3')],
+        [
+          h.div(
+            [h.Class('mb-1.5 text-xs font-medium text-zinc-500')],
+            ['Chart mode'],
+          ),
+          h.submodel({
+            slotId: model.chartModeRadioGroup.id,
+            model: model.chartModeRadioGroup,
+            view: ChartModeRadioGroup.view,
+            viewInputs: {
+              selectedValue: Option.some(model.chartMode),
+              options: chartModes,
+              ariaLabel: 'Chart mode',
+              orientation: 'Horizontal',
+              toView: ({ group, options }) =>
+                h.div(
+                  [...group, h.Class(radioGroupClassName)],
+                  Array.map(options, option =>
+                    h.div(
+                      [
+                        ...option.option,
+                        h.Key(option.value),
+                        h.Class(radioOptionClassName(option.isSelected)),
+                      ],
+                      [h.span([...option.label], [option.value])],
+                    ),
+                  ),
+                ),
+            },
+            toParentMessage: message =>
+              Message.GotChartModeRadioGroupMessage({ message }),
+          }),
+        ],
+      ),
+      model.chartMode !== 'Ecosystem'
+        ? h.div(
+            [h.Class('mt-3')],
+            [
+              h.div(
+                [h.Class('mb-1.5 text-xs font-medium text-zinc-500')],
+                ['Period'],
+              ),
+              h.submodel({
+                slotId: model.periodRadioGroup.id,
+                model: model.periodRadioGroup,
+                view: PeriodRadioGroup.view,
+                viewInputs: {
+                  selectedValue: Option.some(model.period),
+                  options: periods,
+                  ariaLabel: 'Period',
+                  orientation: 'Horizontal',
+                  toView: ({ group, options }) =>
+                    h.div(
+                      [...group, h.Class(radioGroupClassName)],
+                      Array.map(options, option =>
+                        h.div(
+                          [
+                            ...option.option,
+                            h.Key(option.value),
+                            h.Class(radioOptionClassName(option.isSelected)),
+                          ],
+                          [periodLabels[option.value]],
+                        ),
+                      ),
+                    ),
+                },
+                toParentMessage: message =>
+                  Message.GotPeriodRadioGroupMessage({ message }),
+              }),
+            ],
+          )
+        : h.empty,
+    ],
+  )
+
+export const packagePanelView = (
+  model: Model,
+  telemetry: Telemetry,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.section(
+    [h.Class('rounded-md border border-zinc-200 bg-white p-3')],
+    [
+      h.h2([h.Class('text-sm font-semibold text-zinc-950')], ['Package']),
+      h.div(
+        [h.Class('mt-3')],
+        [
+          h.submodel({
+            slotId: model.packageRadioGroup.id,
+            model: model.packageRadioGroup,
+            view: PackageRadioGroup.view,
+            viewInputs: {
+              selectedValue: Option.some(model.selectedPackageId),
+              options: packageIds,
+              ariaLabel: 'Package',
+              orientation: 'Vertical',
+              toView: ({ group, options }) =>
+                h.div(
+                  [...group, h.Class('grid gap-2')],
+                  Array.map(options, option => {
+                    const spec = packageIdToSpec(option.value)
+                    const maybeSnapshot = findPackageSnapshot(
+                      telemetry,
+                      option.value,
+                    )
+
+                    return h.div(
+                      [
+                        ...option.option,
+                        h.Key(option.value),
+                        h.Class(
+                          clsx(
+                            'cursor-pointer min-h-14 rounded-md border px-3 py-2 text-left',
+                            option.isSelected
+                              ? 'border-emerald-600 bg-emerald-50 text-emerald-950'
+                              : 'border-zinc-200 bg-white text-zinc-800 hover:bg-zinc-50',
+                          ),
+                        ),
+                      ],
+                      [
+                        h.div(
+                          [h.Class('text-sm font-medium')],
+                          [spec.displayName],
+                        ),
+                        h.div(
+                          [h.Class('mt-0.5 text-xs text-zinc-500')],
+                          [
+                            Option.match(maybeSnapshot, {
+                              onNone: () => spec.role,
+                              onSome: snapshot =>
+                                `${formatCompact(snapshot.lastWeekDownloads)} last week, v${snapshot.latestVersion}`,
+                            }),
+                          ],
+                        ),
+                      ],
+                    )
+                  }),
+                ),
+            },
+            toParentMessage: message =>
+              Message.GotPackageRadioGroupMessage({ message }),
+          }),
+        ],
+      ),
+    ],
+  )
+
+export const contributorsView = (
+  telemetry: Telemetry,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.section(
+    [h.Class('rounded-md border border-zinc-200 bg-white p-3')],
+    [
+      h.div(
+        [h.Class('flex items-center justify-between gap-3')],
+        [
+          h.h2(
+            [h.Class('text-sm font-semibold text-zinc-950')],
+            ['Contributors'],
+          ),
+          h.span(
+            [h.Class('text-xs text-zinc-500')],
+            [`Updated ${formatFetchedAt(telemetry.fetchedAt)}`],
+          ),
+        ],
+      ),
+      h.ul(
+        [h.Class('mt-3 grid gap-2')],
+        Array.map(telemetry.topContributors, contributor =>
+          h.li(
+            [
+              h.Key(contributor.login),
+              h.Class('flex items-center justify-between gap-3 text-sm'),
+            ],
+            [
+              h.span(
+                [h.Class('font-medium text-zinc-800')],
+                [contributor.login],
+              ),
+              h.span(
+                [h.Class('text-zinc-500')],
+                [`${formatInteger(contributor.contributions)} commits`],
+              ),
+            ],
+          ),
+        ),
+      ),
+    ],
+  )

package/dist/templates/examples/charting/src/view/view.ts

@@ -0,0 +1,23 @@
+import type { Document } from 'foldkit/html'
+import { HtmlBuilder } from 'foldkit/html'
+
+import type { Message } from '../message'
+import type { Model } from '../model'
+import { headerView, telemetryStateView } from './layout'
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: 'Foldkit Adoption Observatory',
+  body: h.div(
+    [h.Class('min-h-screen bg-zinc-50 text-zinc-950')],
+    [
+      h.main(
+        [
+          h.Class(
+            'mx-auto flex min-h-screen w-full max-w-7xl flex-col gap-5 px-4 py-4 sm:px-6 lg:px-8',
+          ),
+        ],
+        [headerView(model, h), telemetryStateView(model, h)],
+      ),
+    ],
+  ),
+})

package/dist/templates/examples/charting/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()