add-gallery-example

Adding a gallery example

Examples live in packages/shared/examples/ (consumed by both the website gallery and the multi-framework playground). The public guide packages/website/contributing/guides/gallery-examples.mdx covers the same ground in prose.

1. Create packages/shared/examples/<slug>/

<slug> is kebab-case (e.g. basic-line-chart). Add one implementation per framework plus data and index:

<slug>/
├── data.ts                 # typed dataset: export const data = [...]
├── index.tsx               # website metadata (template below)
├── <slug>.tsx              # React
├── <slug>.ts               # vanilla TypeScript  (entry MUST be named exactly <slug>.ts)
├── <slug>-solid.tsx        # Solid
├── <slug>.svelte           # Svelte
├── <slug>.vue              # Vue
├── <slug>.component.html   # ┓
├── <slug>.component.ts     # ┠ Angular
└── <slug>.module.ts        # ┛

Copy an existing example (e.g. packages/shared/examples/basic-line-chart) to get every framework file right.

2. index.tsx (current shape — includes all six frameworks)

/* eslint-disable import/no-unresolved, import/no-webpack-loader-syntax, @typescript-eslint/no-var-requires */
import React from 'react'
import type { Example } from '../types'
import metadata from '../metadata.json'

const pathname = '<slug>'
const example: Example = {
  component: () => {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    const Component = require(`./${pathname}.tsx`).default
    return <Component />
  },
  pathname,
  ...metadata[pathname],
  codeReact: require(`!!raw-loader!./${pathname}.tsx`).default,
  codeSolid: require(`!!raw-loader!./${pathname}-solid.tsx`).default,
  codeTs: require(`!!raw-loader!./${pathname}.ts`).default,
  codeAngular: {
    html: require(`!!raw-loader!./${pathname}.component.html`).default,
    component: require(`!!raw-loader!./${pathname}.component.ts`).default,
    module: require(`!!raw-loader!./${pathname}.module.ts`).default,
  },
  codeSvelte: require(`!!raw-loader!./${pathname}.svelte`).default,
  codeVue: require(`!!raw-loader!./${pathname}.vue`).default,
  data: require('!!raw-loader!./data').default,
  preview: require(`../_previews/${pathname}.png`).default,
  previewDark: require(`../_previews/${pathname}-dark.png`).default,
}

export default example