initial commit

2026-01-11 11:08:48 +01:00
commit 0efd3d954b
58 changed files with 19390 additions and 0 deletions
--- a/dev/routes/(shell)/forms.tsx
+++ b/dev/routes/(shell)/forms.tsx
@@ -0,0 +1,118 @@
+import type { Component } from 'solid-js';
+import { createSignal } from 'solid-js';
+import {
+  SSChip,
+  SSDivider,
+  SSForm,
+  SSHeader,
+  SSSurface,
+} from 'src';
+import { peopleOptions, stackSuggestions, teamOptions } from '../../demo/content';
+
+const FormsPage: Component = () => {
+  const [result, setResult] = createSignal<string | null>(null);
+
+  return (
+    <div class="demo_page">
+      <SSHeader title="Forms" subtitle="Inputs, selections, and validation in one place." />
+
+      <SSSurface class="demo_surface">
+        <SSForm
+          onsubmit={async (context) => {
+            const values = await context.getValues();
+            setResult(JSON.stringify(values, null, 2));
+          }}
+        >
+          <div class="demo_form_grid">
+            <SSForm.Input label="Project name" name="project" required />
+            <SSForm.Input label="Email" name="email" type="email" required />
+            <SSForm.Input label="Password" name="password" type="password" required />
+            <SSForm.Input label="Contact phone" name="phone" type="tel" />
+          </div>
+
+          <SSForm.Input
+            label="Message"
+            name="message"
+            textArea
+          />
+
+          <SSForm.Input
+            label="Tech stack"
+            name="stack"
+            suggestions={{
+              prepare: () => stackSuggestions,
+              getItems: ({ query, init }) =>
+                init.filter((item) => item.toLowerCase().includes(query)).slice(0, 5),
+              stringify: ({ item }) => item,
+            }}
+          />
+
+          <div class="demo_form_grid">
+            <SSForm.Date label="Start date" name="startDate" editable />
+            <SSForm.Date label="Target date" name="targetDate" />
+          </div>
+
+          <div class="demo_form_grid">
+            <SSForm.Select
+              label="Team"
+              name="team"
+              getOptions={() => teamOptions}
+              buildOption={(item) => item.label}
+            />
+            <SSForm.Checkbox label="Notify stakeholders" name="notify" />
+          </div>
+
+          <SSDivider />
+
+          <SSForm.ACSelect
+            label="Invite members"
+            name="members"
+            minSelectedItems={1}
+            getOptions={({ query }) =>
+              peopleOptions.filter((item) =>
+                item.name.toLowerCase().includes(query.toLowerCase())
+              )
+            }
+            renderItem={({ item }) => (
+              <div class="demo_ac_item">
+                <strong>{item.name}</strong>
+                <span>{item.role}</span>
+              </div>
+            )}
+          />
+
+          <SSForm.ACSelect
+            label="Primary owner"
+            name="owner"
+            maxSelectedItems={1}
+            getOptions={({ query }) =>
+              peopleOptions.filter((item) =>
+                item.name.toLowerCase().includes(query.toLowerCase())
+              )
+            }
+            renderItem={({ item }) => (
+              <div class="demo_ac_item">
+                <strong>{item.name}</strong>
+                <span>{item.role}</span>
+              </div>
+            )}
+            renderSelection={({ item }) => (
+              <SSChip color="indigo">{item.name}</SSChip>
+            )}
+          />
+
+          <SSForm.SubmitButton>Save form</SSForm.SubmitButton>
+        </SSForm>
+      </SSSurface>
+
+      {result() && (
+        <SSSurface class="demo_surface">
+          <div class="demo_section_title">Submitted values</div>
+          <pre class="demo_code">{result()}</pre>
+        </SSSurface>
+      )}
+    </div>
+  );
+};
+
+export default FormsPage;