Import code blocks and shared content into pages.

Author: koculu

frontend/purestack.studio/components/actions/badge/badge.mdx

@@ -60,105 +60,7 @@ Edit the label and explore every tone and variant. The default surface treatment
 ```
   </TabPane>
   <TabPane id="badge-playground-ts" label="badge-playground.ts">
-```typescript
-import {
-  type ComponentVariant,
-  defineBadgeComponents,
-  defineButtonComponents,
-  defineFlexComponents,
-  defineFormInputField,
-  defineFormSelectField,
-  defineGridComponents,
-  defineIconComponents,
-  type FormSelectOption,
-} from '@purestack/ts-components'
-import { SEMANTIC_TONES, type SemanticTone } from '@purestack/ts-style'
-import { lucide_chevron_down } from '@purestack/ts-svg-icons'
-import { batch, createApp, defineComponent, html, type Ref, ref } from 'regor'
-
-export interface BadgePlayground {
-  badgeLabel: Ref<string>
-  tone: Ref<SemanticTone>
-  variant: Ref<ComponentVariant>
-  tones: FormSelectOption[]
-  variants: FormSelectOption[]
-  reset: () => void
-}
-
-const badgePlaygroundTemplate = html`<Flex direction="column">
-  <Flex align="center" justify="center" class="p-4">
-    <Badge :tone="tone" :variant="variant">{{ badgeLabel }}</Badge>
-  </Flex>
-  <Grid columns="1" columnsSm="2" columnsLg="3">
-    <FormInputField id="badge-label" label="Label" :model="badgeLabel"/>
-    <FormSelectField id="badge-tone" label="Tone" :model="tone" :options="tones"/>
-    <FormSelectField id="badge-variant" label="Variant" :model="variant" :options="variants"/>
-  </Grid>
-  <Btn variant="link" @click="reset">Reset playground</Btn>
-</Flex>`
-
-function createBadgePlayground(): BadgePlayground {
-  const badgeLabel = ref('Stable')
-  const tone = ref<SemanticTone>('success')
-  const variant = ref<ComponentVariant>('surface')
-  return {
-    badgeLabel,
-    tone,
-    variant,
-    tones: SEMANTIC_TONES.map((value) => ({ label: value, value })),
-    variants: [
-      'solid',
-      'surface',
-      'surfaceAlt',
-      'spotlight',
-      'glass',
-      'flat',
-      'flatAlt',
-      'flatSolid',
-      'outlineFill',
-      'outline',
-      'subtle',
-      'subtleBtn',
-      'link',
-      'sheen',
-      'underline',
-      'rail',
-      'bracket',
-      'none',
-    ].map((value) => ({ label: value, value })),
-    reset: () =>
-      batch(() => {
-        badgeLabel('Stable')
-        tone('success')
-        variant('surface')
-      }),
-  }
-}
-
-const component = defineComponent<BadgePlayground>(badgePlaygroundTemplate, {
-  context: createBadgePlayground,
-})
-
-createApp(
-  {
-    components: {
-      BadgePlayground: component,
-      ...defineBadgeComponents(),
-      ...defineButtonComponents(),
-      ...defineFlexComponents(),
-      ...defineGridComponents(),
-      ...defineFormInputField(),
-      ...defineFormSelectField(),
-      ...defineIconComponents((name) => {
-        if (name !== 'lucide:chevron-down')
-          throw new Error(`Icon is not registered: ${name}`)
-        return lucide_chevron_down
-      }),
-    },
-  },
-  { selector: 'app#badge-playground', template: html`<BadgePlayground/>` },
-)
-```
+  <import-codeblock src="./badge-playground.ts"/>
   </TabPane>
 </Tabs>
 
@@ -341,122 +243,7 @@ This example runs entirely in your browser. It models a release workflow without
 ```
   </TabPane>
   <TabPane id="release-checklist-ts" label="release-checklist.ts">
-```typescript
-import {
-  defineBadgeComponents,
-  defineBtnGroupComponents,
-  defineButtonComponents,
-  defineFlexComponents,
-  defineFormComponents,
-} from '@purestack/ts-components'
-import type { SemanticTone } from '@purestack/ts-style'
-import {
-  batch,
-  type ComputedRef,
-  computed,
-  createApp,
-  defineComponent,
-  html,
-  type Ref,
-  ref,
-} from 'regor'
-
-export interface ReleaseChecklist {
-  documentation: Ref<boolean>
-  tests: Ref<boolean>
-  review: Ref<boolean>
-  published: Ref<boolean>
-  completed: ComputedRef<number>
-  status: ComputedRef<string>
-  tone: ComputedRef<SemanticTone>
-  message: ComputedRef<string>
-  publishDisabled: ComputedRef<boolean>
-  publish: () => void
-  reset: () => void
-}
-
-const releaseChecklistTemplate = html`<Flex direction="column" align="start">
-  <fieldset class="m-0 p-3 w-full">
-    <legend>Release checklist</legend>
-    <Flex direction="column" align="start">
-      <FormCheck id="release-documentation" label="Documentation is up to date" :checked="documentation" :disabled="published"/>
-      <FormCheck id="release-tests" label="Tests are passing" :checked="tests" :disabled="published"/>
-      <FormCheck id="release-review" label="Review is complete" :checked="review" :disabled="published"/>
-    </Flex>
-  </fieldset>
-  <Flex align="center" wrap="true" role="status">
-    <Badge :tone="tone">{{ status }}</Badge>
-    <span>{{ message }}</span>
-  </Flex>
-  <BtnGroup :wrap="true" role="group" aria-label="Release actions">
-    <Btn tone="accent" :disabled="publishDisabled" @click="publish">Publish preview</Btn>
-    <Btn variant="surface" @click="reset">Reset checklist</Btn>
-  </BtnGroup>
-</Flex>`
-
-function createReleaseChecklist(): ReleaseChecklist {
-  const documentation = ref(false)
-  const tests = ref(false)
-  const review = ref(false)
-  const published = ref(false)
-  const completed = computed(
-    () => Number(documentation()) + Number(tests()) + Number(review()),
-  )
-  const status = computed(() =>
-    published() ? 'Published' : `${completed()}/3 ready`,
-  )
-  const tone = computed<SemanticTone>(() =>
-    published() || completed() === 3 ? 'success' : 'warning',
-  )
-  const message = computed<string>(() =>
-    published()
-      ? 'Preview release published.'
-      : completed() === 3
-        ? 'All checks passed. Ready to publish.'
-        : 'Complete every check to publish the preview.',
-  )
-  const publishDisabled = computed(() => completed() !== 3 || published())
-  return {
-    documentation,
-    tests,
-    review,
-    published,
-    completed,
-    status,
-    tone,
-    message,
-    publishDisabled,
-    publish: () => {
-      if (!publishDisabled()) published(true)
-    },
-    reset: () =>
-      batch(() => {
-        documentation(false)
-        tests(false)
-        review(false)
-        published(false)
-      }),
-  }
-}
-
-const component = defineComponent<ReleaseChecklist>(releaseChecklistTemplate, {
-  context: createReleaseChecklist,
-})
-
-createApp(
-  {
-    components: {
-      ReleaseChecklist: component,
-      ...defineBadgeComponents(),
-      ...defineBtnGroupComponents(),
-      ...defineButtonComponents(),
-      ...defineFlexComponents(),
-      ...defineFormComponents(),
-    },
-  },
-  { selector: 'app#release-checklist', template: html`<ReleaseChecklist/>` },
-)
-```
+  <import-codeblock src="./release-checklist.ts"/>
   </TabPane>
 </Tabs>