create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/charting/src/scene.test.ts

@@ -0,0 +1,103 @@
+import {
+  Command,
+  Mount,
+  click,
+  expect,
+  given,
+  label,
+  role,
+  scene,
+  text,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { RadioGroup } from '@foldkit/ui'
+import { Message as RadioGroupMessage } from '@foldkit/ui/radioGroup'
+
+import { SyncChart } from './command'
+import { loadingModel, readyModel, sampleTelemetry } from './main.fixtures'
+import { Message } from './message'
+import { TelemetryAsyncData } from './model'
+import { update } from './update'
+import { CHART_HOST_ID, MountChart } from './view/chart'
+import { view } from './view/index'
+
+const acknowledgeChartMount = Mount.resolve(
+  MountChart,
+  Message.SucceededMountChart({ hostId: CHART_HOST_ID }),
+)
+
+const acknowledgeChartSync = Command.resolve(
+  SyncChart,
+  Message.SucceededSyncChart(),
+)
+
+const resolveFocusOption = Command.resolve(
+  RadioGroup.FocusOption,
+  RadioGroupMessage.CompletedFocusOption(),
+)
+
+describe('view', () => {
+  test('loading view shows a telemetry progress state', () => {
+    scene(
+      { update, view },
+      given(loadingModel),
+      expect(label('Loading telemetry')).toExist(),
+    )
+  })
+
+  test('ready view shows summaries and chart controls', () => {
+    scene(
+      { update, view },
+      given(readyModel),
+      acknowledgeChartMount,
+      acknowledgeChartSync,
+      expect(text('Foldkit Adoption Observatory')).toExist(),
+      expect(text('Downloads')).toExist(),
+      expect(role('radio', { name: 'Velocity' })).toExist(),
+      expect(role('radio', { name: /@foldkit\/ui/ })).toExist(),
+    )
+  })
+
+  test('clicking a chart mode updates the visible selected control', () => {
+    scene(
+      { update, view },
+      given(readyModel),
+      acknowledgeChartMount,
+      acknowledgeChartSync,
+      click(role('radio', { name: 'Velocity' })),
+      resolveFocusOption,
+      Command.resolve(SyncChart, Message.SucceededSyncChart()),
+      expect(role('radio', { name: 'Velocity' })).toHaveAttr(
+        'aria-checked',
+        'true',
+      ),
+    )
+  })
+
+  test('refreshing state keeps the dashboard visible', () => {
+    scene(
+      { update, view },
+      given({
+        ...readyModel,
+        telemetry: TelemetryAsyncData.Refreshing({ data: sampleTelemetry }),
+      }),
+      acknowledgeChartMount,
+      acknowledgeChartSync,
+      expect(text('Refreshing public data')).toExist(),
+      expect(text('Contributors')).toExist(),
+    )
+  })
+
+  test('failure without stale data shows retry', () => {
+    scene(
+      { update, view },
+      given({
+        ...loadingModel,
+        telemetry: TelemetryAsyncData.Failure({ error: 'offline' }),
+      }),
+      expect(label('Telemetry failed')).toExist(),
+      expect(role('button', { name: 'Retry' })).toExist(),
+    )
+  })
+})

package/dist/templates/examples/charting/src/story.test.ts

@@ -0,0 +1,145 @@
+import { Command, given, message, model, story } from 'foldkit/story'
+import { expect, test } from 'vitest'
+
+import { RadioGroup } from '@foldkit/ui'
+import { Message as RadioGroupMessage } from '@foldkit/ui/radioGroup'
+
+import { FetchTelemetry, SyncChart } from './command'
+import {
+  type ChartMode,
+  type PackageId,
+  chartModes,
+  packageIds,
+} from './domain'
+import { loadingModel, readyModel, sampleTelemetry } from './main.fixtures'
+import { Message } from './message'
+import { TelemetryAsyncData } from './model'
+import { update } from './update'
+
+const selectedChartMode = (chartMode: ChartMode) =>
+  Message.GotChartModeRadioGroupMessage({
+    message: RadioGroupMessage.SelectedOption({
+      index: chartModes.indexOf(chartMode),
+      value: chartMode,
+    }),
+  })
+
+const selectedPackage = (packageId: PackageId) =>
+  Message.GotPackageRadioGroupMessage({
+    message: RadioGroupMessage.SelectedOption({
+      index: packageIds.indexOf(packageId),
+      value: packageId,
+    }),
+  })
+
+const resolveChartModeFocus = Command.resolve(
+  RadioGroup.FocusOption,
+  RadioGroupMessage.CompletedFocusOption(),
+)
+
+test('mounting the chart syncs current telemetry into ECharts', () => {
+  story(
+    update,
+    given(readyModel),
+    message(Message.SucceededMountChart({ hostId: 'chart-host' })),
+    Command.expectHas(SyncChart),
+    Command.resolve(SyncChart, Message.SucceededSyncChart()),
+  )
+})
+
+test('selecting a chart mode clears selected datum and syncs the chart', () => {
+  story(
+    update,
+    given(readyModel),
+    message(
+      Message.ClickedChartDatum({ datumId: 'Velocity:Commits:2026-06-15' }),
+    ),
+    Command.resolve(SyncChart, Message.SucceededSyncChart()),
+    message(selectedChartMode('Velocity')),
+    resolveChartModeFocus,
+    model(model => {
+      expect(model.chartMode).toBe('Velocity')
+      expect(model.maybeSelectedDatumId._tag).toBe('None')
+    }),
+    Command.expectHas(SyncChart),
+    Command.resolve(SyncChart, Message.SucceededSyncChart()),
+  )
+})
+
+test('selecting a package syncs the selected package into the chart', () => {
+  story(
+    update,
+    given(readyModel),
+    message(selectedPackage('Ui')),
+    resolveChartModeFocus,
+    model(model => {
+      expect(model.selectedPackageId).toBe('Ui')
+    }),
+    Command.expectHas(SyncChart),
+    Command.resolve(SyncChart, Message.SucceededSyncChart()),
+  )
+})
+
+test('refreshing with data keeps the old dashboard while fetching', () => {
+  story(
+    update,
+    given(readyModel),
+    message(Message.ClickedRefresh()),
+    model(model => {
+      expect(model.telemetry._tag).toBe('Refreshing')
+      if (model.telemetry._tag === 'Refreshing') {
+        expect(model.telemetry.data.repository.stars).toBe(342)
+      }
+    }),
+    Command.expectHas(FetchTelemetry),
+    Command.resolve(
+      FetchTelemetry,
+      Message.FailedFetchTelemetry({ error: 'Test cleanup' }),
+    ),
+  )
+})
+
+test('a failed refresh preserves stale data in the stale state', () => {
+  story(
+    update,
+    given({
+      ...readyModel,
+      telemetry: TelemetryAsyncData.Refreshing({ data: sampleTelemetry }),
+    }),
+    message(Message.FailedFetchTelemetry({ error: 'rate limited' })),
+    model(model => {
+      expect(model.telemetry._tag).toBe('Stale')
+      if (model.telemetry._tag === 'Stale') {
+        expect(model.telemetry.error).toBe('rate limited')
+        expect(model.telemetry.data.repository.stars).toBe(342)
+      }
+    }),
+  )
+})
+
+test('failed fetch transitions to failure without stale data when loading', () => {
+  story(
+    update,
+    given(loadingModel),
+    message(Message.FailedFetchTelemetry({ error: 'offline' })),
+    model(model => {
+      expect(model.telemetry._tag).toBe('Failure')
+      if (model.telemetry._tag === 'Failure') {
+        expect(model.telemetry.error).toBe('offline')
+      }
+    }),
+  )
+})
+
+test('successful fetch stores data and syncs when mounted', () => {
+  story(
+    update,
+    given(readyModel),
+    message(Message.SucceededFetchTelemetry({ telemetry: sampleTelemetry })),
+    model(model => {
+      expect(model.telemetry._tag).toBe('Success')
+    }),
+    Command.expectHas(SyncChart),
+    Command.resolve(SyncChart, Message.SucceededSyncChart()),
+  )
+})

package/dist/templates/examples/charting/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

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

@@ -0,0 +1,70 @@
+import { Effect, Option, Queue, Schema as S, Stream, pipe } from 'effect'
+import { Subscription } from 'foldkit'
+
+import { getChart } from './chartHost'
+import { Message } from './message'
+import type { Model } from './model'
+
+const ChartClickPayload = S.Struct({
+  data: S.OptionFromOptional(S.Struct({ id: S.String })),
+})
+
+const chartClickToDatumId = (event: unknown): Option.Option<string> =>
+  pipe(
+    event,
+    S.decodeUnknownOption(ChartClickPayload),
+    Option.flatMap(({ data }) => data),
+    Option.map(({ id }) => id),
+  )
+
+const chartEvents = (hostId: string): Stream.Stream<Message> =>
+  Stream.callback<Message>(queue =>
+    Effect.acquireRelease(
+      Effect.sync(() => {
+        const maybeChart = getChart(hostId)
+
+        if (Option.isSome(maybeChart)) {
+          const chart = maybeChart.value
+
+          const onClick = (event: unknown) => {
+            const maybeDatumId = chartClickToDatumId(event)
+
+            if (Option.isSome(maybeDatumId)) {
+              Queue.offerUnsafe(
+                queue,
+                Message.ClickedChartDatum({ datumId: maybeDatumId.value }),
+              )
+            }
+          }
+
+          chart.on('click', onClick)
+
+          return Option.some({ chart, onClick })
+        }
+
+        return Option.none()
+      }),
+      maybeHandle =>
+        Effect.sync(() => {
+          if (Option.isSome(maybeHandle)) {
+            maybeHandle.value.chart.off('click', maybeHandle.value.onClick)
+          }
+        }),
+    ).pipe(Effect.flatMap(() => Effect.never)),
+  )
+
+export const subscriptions = Subscription.make<Model, Message>()(entry => ({
+  chartEvents: entry(
+    { maybeChartHostId: S.Option(S.String) },
+    {
+      modelToDependencies: model => ({
+        maybeChartHostId: model.maybeChartHostId,
+      }),
+      dependenciesToStream: ({ maybeChartHostId }) =>
+        Option.match(maybeChartHostId, {
+          onNone: () => Stream.empty,
+          onSome: chartEvents,
+        }),
+    },
+  ),
+}))

package/dist/templates/examples/charting/src/telemetry.test.ts

@@ -0,0 +1,64 @@
+import { Array, Effect, Layer, Match as M, String } from 'effect'
+import { HttpClient, HttpClientResponse } from 'effect/unstable/http'
+import { expect, test } from 'vitest'
+
+import { GitHubApiLive } from './githubApi'
+import {
+  mockGitHubRepository,
+  mockNpmDownloads,
+  mockNpmPackument,
+} from './main.fixtures'
+import { NpmApiLive } from './npmApi'
+import { fetchRawTelemetry, transformTelemetry } from './telemetry'
+
+test('folds public API responses into a Telemetry value', async () => {
+  const mockClient = HttpClient.make(request =>
+    Effect.sync(() => {
+      const body = M.value(request.url).pipe(
+        M.when(String.includes('/contributors'), () => [
+          { login: 'devin', contributions: 42 },
+        ]),
+        M.when(String.includes('/issues'), () => [{}, { pull_request: {} }]),
+        M.when(String.includes('/pulls'), () => [{ id: 1 }]),
+        M.when(String.includes('/releases'), () => [
+          {
+            tag_name: 'v0.115.0',
+            published_at: '2026-06-20T12:00:00Z',
+            prerelease: false,
+            draft: false,
+          },
+        ]),
+        M.when(String.includes('/stargazers'), () => [
+          { starred_at: '2026-06-15T12:00:00Z' },
+        ]),
+        M.when(String.includes('/stats/commit_activity'), () => [
+          { week: 1781481600, total: 5 },
+        ]),
+        M.when(String.includes('/stats/code_frequency'), () => [
+          [1781481600, 120, -35],
+        ]),
+        M.when(String.includes('api.npmjs.org'), () => mockNpmDownloads),
+        M.when(String.includes('registry.npmjs.org'), () => mockNpmPackument),
+        M.orElse(() => mockGitHubRepository),
+      )
+
+      return HttpClientResponse.fromWeb(
+        request,
+        new Response(JSON.stringify(body), { status: 200 }),
+      )
+    }),
+  )
+
+  const telemetryLayer = Layer.mergeAll(GitHubApiLive, NpmApiLive).pipe(
+    Layer.provide(Layer.succeed(HttpClient.HttpClient, mockClient)),
+  )
+  const telemetry = await fetchRawTelemetry.pipe(
+    Effect.map(transformTelemetry),
+    Effect.provide(telemetryLayer),
+    Effect.runPromise,
+  )
+
+  expect(telemetry.repository.stars).toBe(342)
+  expect(telemetry.repository.openIssues).toBe(1)
+  expect(Array.length(telemetry.packages)).toBeGreaterThan(0)
+})