@fias/arche-sdk 1.6.0 → 1.8.0

package/templates/multi-step/src/context/AppContext.tsx

@@ -0,0 +1,36 @@
+import { createContext, useContext, ReactNode } from 'react';
+import { usePersistentState } from '@fias/arche-sdk';
+
+interface AppContextValue {
+  currentStep: string | null;
+  setCurrentStep: (step: string | null) => void;
+  // Domain data — safe to persist with usePersistentState.
+  notes: string;
+  setNotes: (value: string) => void;
+}
+
+const AppContext = createContext<AppContextValue | null>(null);
+
+interface AppProviderProps {
+  children: ReactNode;
+  currentStep: string | null;
+  setCurrentStep: (step: string | null) => void;
+}
+
+export function AppProvider({ children, currentStep, setCurrentStep }: AppProviderProps) {
+  // Step navigation comes in from useStepNavigation (in App.tsx) — the single
+  // source of truth. Only domain data lives in usePersistentState here.
+  const [notes, setNotes] = usePersistentState<string>('notes', '');
+
+  return (
+    <AppContext.Provider value={{ currentStep, setCurrentStep, notes, setNotes }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+export function useAppContext(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('useAppContext must be used within AppProvider');
+  return ctx;
+}

package/templates/multi-step/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { FiasProvider } from '@fias/arche-sdk';
+import { App } from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <FiasProvider>
+      <App />
+    </FiasProvider>
+  </React.StrictMode>,
+);

package/templates/multi-step/src/steps/step-one/StepOne.tsx

@@ -0,0 +1,43 @@
+import { useFiasTheme } from '@fias/arche-sdk';
+import { useAppContext } from '../../context/AppContext';
+
+export function StepOne() {
+  const theme = useFiasTheme();
+  const { notes, setNotes, setCurrentStep } = useAppContext();
+
+  if (!theme) return null;
+
+  return (
+    <div>
+      <h1 style={{ fontFamily: theme.fonts.heading }}>Step 1 — Notes</h1>
+      <textarea
+        value={notes}
+        onChange={(e) => setNotes(e.target.value)}
+        rows={6}
+        style={{
+          width: '100%',
+          padding: theme.spacing.sm,
+          backgroundColor: theme.colors.surface,
+          color: theme.colors.text,
+          border: `${theme.components.borderWidth} solid ${theme.colors.border}`,
+          borderRadius: theme.components.inputRadius,
+        }}
+      />
+      <button
+        onClick={() => setCurrentStep('step-two')}
+        disabled={notes.trim().length === 0}
+        style={{
+          marginTop: theme.spacing.md,
+          padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.primaryText,
+          border: 'none',
+          borderRadius: theme.components.buttonRadius,
+          cursor: notes.trim().length === 0 ? 'not-allowed' : 'pointer',
+        }}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

package/templates/multi-step/src/steps/step-two/StepTwo.tsx

@@ -0,0 +1,40 @@
+import { useFiasTheme } from '@fias/arche-sdk';
+import { useAppContext } from '../../context/AppContext';
+
+export function StepTwo() {
+  const theme = useFiasTheme();
+  const { notes, setCurrentStep } = useAppContext();
+
+  if (!theme) return null;
+
+  return (
+    <div>
+      <h1 style={{ fontFamily: theme.fonts.heading }}>Step 2 — Review</h1>
+      <pre
+        style={{
+          padding: theme.spacing.md,
+          backgroundColor: theme.colors.surface,
+          color: theme.colors.text,
+          borderRadius: theme.components.cardRadius,
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {notes}
+      </pre>
+      <button
+        onClick={() => setCurrentStep('step-one')}
+        style={{
+          marginTop: theme.spacing.md,
+          padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+          backgroundColor: theme.colors.surface,
+          color: theme.colors.text,
+          border: `${theme.components.borderWidth} solid ${theme.colors.border}`,
+          borderRadius: theme.components.buttonRadius,
+          cursor: 'pointer',
+        }}
+      >
+        Back
+      </button>
+    </div>
+  );
+}

package/templates/multi-step/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/templates/multi-step/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: 'index.html',
+    },
+  },
+  server: {
+    port: 3100,
+    cors: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    hmr: { host: 'localhost' },
+  },
+});