@starcier/create-builder 0.0.0-stage → 1.0.0-next.0

package/template/src/prototypes/getting-started/welcome/welcome.css

@@ -0,0 +1,71 @@
+.welcome {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xl);
+  max-width: 960px;
+  margin: 0 auto;
+  padding: var(--space-3xl) var(--space-2xl);
+}
+
+.welcome__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+}
+
+.welcome__overline {
+  color: var(--color-text-accent);
+  font-size: var(--text-overline-size);
+  font-weight: var(--text-overline-weight);
+  line-height: var(--text-overline-line);
+  letter-spacing: var(--text-overline-tracking);
+  text-transform: var(--text-overline-case);
+}
+
+.welcome__title {
+  margin: 0;
+  font-size: var(--text-heading-size);
+  font-weight: var(--text-heading-weight);
+  line-height: var(--text-heading-line);
+}
+
+.welcome__lead {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+.welcome__stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-l);
+}
+
+.welcome__stat-label,
+.welcome__stat-note {
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption-size);
+  line-height: var(--text-caption-line);
+}
+
+.welcome__stat-value {
+  font-size: var(--text-heading-size);
+  font-weight: var(--text-heading-weight);
+  line-height: var(--text-heading-line);
+}
+
+.welcome .ds-card:has(.welcome__stat-value) {
+  gap: var(--space-2xs);
+  padding: var(--space-l);
+}
+
+.welcome__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-l);
+  max-width: 360px;
+}
+
+.welcome__summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+}

package/template/src/prototypes/getting-started/welcome/workflows.ts

@@ -0,0 +1,51 @@
+import type { OnboardingWorkflow } from '@starcier/collab-core';
+
+/**
+ * A guided tour of the Welcome prototype. Each step targets a `data-tour`
+ * anchor in `Welcome.tsx`; `prototypeId` is the prototype's slug.
+ */
+export const welcomeTour: OnboardingWorkflow = {
+  id: 'getting-started-welcome-tour',
+  prototypeId: 'getting-started/welcome',
+  name: 'Welcome walkthrough',
+  description: 'A short tour of the example prototype: the summary, the form and its dialog.',
+  steps: [
+    {
+      id: 'header',
+      target: '[data-tour="welcome-header"]',
+      title: 'An example prototype',
+      description: 'Prototypes are ordinary React screens built from this builder’s design system.',
+      placement: 'bottom',
+    },
+    {
+      id: 'stats',
+      target: '[data-tour="welcome-stats"]',
+      title: 'Mock data',
+      description: 'Everything here comes from data.ts in the prototype’s folder. Prototypes never call a backend.',
+      placement: 'bottom',
+    },
+    {
+      id: 'form',
+      target: '[data-tour="welcome-form"]',
+      title: 'A form',
+      description: 'We’ll fill it in for you, so the next step can continue.',
+      placement: 'top',
+      populateInputs: true,
+    },
+    {
+      id: 'review',
+      target: '[data-tour="welcome-review"]',
+      title: 'Open the dialog',
+      description: 'Pressing Next clicks this button for you.',
+      placement: 'right',
+      initiateAction: true,
+    },
+    {
+      id: 'modal',
+      target: '[data-tour="welcome-modal"]',
+      title: 'Dialogs work in tours',
+      description: 'Tours can step into dialogs. Review comments go on the page itself, not inside dialogs.',
+      placement: 'bottom',
+    },
+  ],
+};

package/template/src/prototypes/registry.ts

@@ -0,0 +1,20 @@
+import type { BuilderPrototype } from '@starcier/builder-shell';
+import { Welcome } from './getting-started/welcome';
+
+/**
+ * Every prototype this builder ships. The catalogue groups them by folder, and
+ * each opens at `/prototypes/<slug>`. The slug is also the prototype's key in
+ * the Starcier API, which comments, tours and shares hang off, so do not rename
+ * one that has comments.
+ */
+export const prototypes: readonly BuilderPrototype[] = [
+  {
+    slug: 'getting-started/welcome',
+    title: 'Welcome',
+    description: 'An example prototype: a small dashboard and a form with a dialog.',
+    folder: 'getting-started',
+    folderLabel: 'Getting started',
+    status: 'Example',
+    component: Welcome,
+  },
+];

package/template/src/prototypes/workflows.ts

@@ -0,0 +1,9 @@
+import type { OnboardingWorkflow } from '@starcier/collab-core';
+import { welcomeTour } from './getting-started/welcome';
+
+/**
+ * The guided tours defined in code. Offline, each is copied into the browser
+ * once; to see an edited tour there, give it a new `id`. With the API on, tours
+ * live in the database and are created in the builder instead.
+ */
+export const workflows: readonly OnboardingWorkflow[] = [welcomeTour];

package/template/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "erasableSyntaxOnly": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "erasableSyntaxOnly": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vercel.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}

package/template/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    // The Starcier API allows this origin for local development, and the Auth0
+    // application lists it as a callback. Another port would be refused by both.
+    port: 5173,
+    strictPort: true,
+  },
+});