@cogito.ai/astryx-web 0.0.0-stage → 0.2.0

package/templates/dock-form-flow.tsx

@@ -0,0 +1,169 @@
+import { Button } from '@astryxdesign/core/Button'
+import { FormLayout } from '@astryxdesign/core/FormLayout'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { TextArea } from '@astryxdesign/core/TextArea'
+import { TextInput } from '@astryxdesign/core/TextInput'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+import { PageShell } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const styles = stylex.create({
+  fields: {
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr)',
+    gap: '0.75rem',
+    '@container (min-width: 640px)': {
+      gridTemplateColumns: 'auto minmax(0, 1fr)',
+      gap: '0.75rem 1rem',
+    },
+  },
+  actions: {
+    position: 'sticky',
+    bottom: 0,
+    marginBlockStart: 'auto',
+    paddingBlock: '0.75rem',
+    paddingBlockEnd: 'max(0.75rem, env(safe-area-inset-bottom))',
+    backgroundColor: 'var(--color-background-surface)',
+    '@container (min-width: 640px)': {
+      position: 'static',
+      justifyContent: 'flex-end',
+      marginBlockStart: 0,
+      paddingBlock: 0,
+    },
+  },
+})
+
+type Step = 0 | 1
+
+export default function DockFormFlow() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+  const [step, setStep] = useState<Step>(0)
+  const [name, setName] = useState('')
+  const [details, setDetails] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  function goNext() {
+    if (!name.trim()) {
+      setError(t('page.__PAGE__.error.name'))
+      return
+    }
+    setError(null)
+    setStep(1)
+  }
+
+  return (
+    <PageShell
+      title={t('page.__PAGE__.title')}
+      backHref={`/${locale}`}
+      backLabel={t('page.__PAGE__.back')}
+    >
+      <Stack gap={4} minHeight="100%">
+        <Text type="supporting" color="secondary">
+          {t('page.__PAGE__.step', { current: step + 1, total: 2 })}
+        </Text>
+        <Stack gap={1}>
+          <Heading level={2}>
+            {step === 0 ? t('page.__PAGE__.step.details') : t('page.__PAGE__.step.review')}
+          </Heading>
+          <Text type="supporting" color="secondary">
+            {step === 0
+              ? t('page.__PAGE__.step.details.description')
+              : t('page.__PAGE__.step.review.description')}
+          </Text>
+        </Stack>
+
+        {step === 0 ? (
+          <Stack gap={4}>
+            <FormLayout direction="horizontal-labels" xstyle={styles.fields}>
+              <TextInput
+                label={t('page.__PAGE__.field.name')}
+                value={name}
+                onChange={(value) => {
+                  setName(value)
+                  if (error) setError(null)
+                }}
+                placeholder={t('page.__PAGE__.field.name.placeholder')}
+                isRequired
+                status={error ? { type: 'error', message: error } : undefined}
+              />
+            </FormLayout>
+            <TextArea
+              label={t('page.__PAGE__.field.details')}
+              value={details}
+              onChange={setDetails}
+              placeholder={t('page.__PAGE__.field.details.placeholder')}
+            />
+          </Stack>
+        ) : (
+          <Stack gap={2}>
+            <Text type="body">{name}</Text>
+            <Text type="supporting" color="secondary">
+              {details || t('page.__PAGE__.review.noDetails')}
+            </Text>
+          </Stack>
+        )}
+
+        <Stack direction="horizontal" hAlign="between" gap={2} width="100%" xstyle={styles.actions}>
+          <Button
+            label={t('page.__PAGE__.backStep')}
+            variant="secondary"
+            isDisabled={step === 0}
+            onClick={() => setStep(0)}
+          />
+          <Button
+            label={step === 0 ? t('page.__PAGE__.next') : t('page.__PAGE__.create')}
+            variant="primary"
+            onClick={step === 0 ? goNext : () => undefined}
+          />
+        </Stack>
+      </Stack>
+    </PageShell>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Create item",
+    "page.__PAGE__.back": "Back",
+    "page.__PAGE__.step": "Step {current} of {total}",
+    "page.__PAGE__.step.details": "Details",
+    "page.__PAGE__.step.review": "Review",
+    "page.__PAGE__.step.details.description": "Add the information needed for this item.",
+    "page.__PAGE__.step.review.description": "Check the information before creating the item.",
+    "page.__PAGE__.field.name": "Name",
+    "page.__PAGE__.field.name.placeholder": "Name this item",
+    "page.__PAGE__.field.details": "Details",
+    "page.__PAGE__.field.details.placeholder": "Add anything the next person should know",
+    "page.__PAGE__.error.name": "Enter a name to continue.",
+    "page.__PAGE__.review.noDetails": "No details added.",
+    "page.__PAGE__.backStep": "Back",
+    "page.__PAGE__.next": "Next",
+    "page.__PAGE__.create": "Create"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "创建事项",
+    "page.__PAGE__.back": "返回",
+    "page.__PAGE__.step": "第 {current} 步，共 {total} 步",
+    "page.__PAGE__.step.details": "详细信息",
+    "page.__PAGE__.step.review": "检查",
+    "page.__PAGE__.step.details.description": "添加此事项所需的信息。",
+    "page.__PAGE__.step.review.description": "创建前检查这些信息。",
+    "page.__PAGE__.field.name": "名称",
+    "page.__PAGE__.field.name.placeholder": "为此事项命名",
+    "page.__PAGE__.field.details": "详细信息",
+    "page.__PAGE__.field.details.placeholder": "添加下一位处理者需要了解的内容",
+    "page.__PAGE__.error.name": "请输入名称后继续。",
+    "page.__PAGE__.review.noDetails": "尚未添加详细信息。",
+    "page.__PAGE__.backStep": "上一步",
+    "page.__PAGE__.next": "下一步",
+    "page.__PAGE__.create": "创建"
+  }
+}
+*/

package/templates/dock-landing.doc.mjs

@@ -0,0 +1,11 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Landing page',
+  displayName: 'Landing page',
+  description:
+    'A first-level landing page with a short orientation line and module entries that lead one route deeper.',
+  category: 'Landing - Modules',
+  keywords: ['landing page', 'home', 'index', 'module entries', 'mobile', 'mobile landing'],
+  isReady: true,
+}

package/templates/dock-landing.tsx

@@ -0,0 +1,104 @@
+import { Blockquote } from '@astryxdesign/core/Blockquote'
+import { ClickableCard } from '@astryxdesign/core/ClickableCard'
+import { Grid } from '@astryxdesign/core/Grid'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import * as stylex from '@stylexjs/stylex'
+import { PageContainer } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const styles = stylex.create({
+  entries: {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+    '@container (min-width: 600px)': {
+      gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    },
+  },
+})
+
+const SAMPLE_MODULES = [
+  {
+    id: 'primary',
+    path: 'primary',
+    titleKey: 'page.__PAGE__.module.primary.title',
+    descriptionKey: 'page.__PAGE__.module.primary.description',
+  },
+  {
+    id: 'secondary',
+    path: 'secondary',
+    titleKey: 'page.__PAGE__.module.secondary.title',
+    descriptionKey: 'page.__PAGE__.module.secondary.description',
+  },
+  {
+    id: 'settings',
+    path: 'settings',
+    titleKey: 'page.__PAGE__.module.settings.title',
+    descriptionKey: 'page.__PAGE__.module.settings.description',
+  },
+] as const
+// Replace with feature data
+
+export default function DockLanding() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+
+  return (
+    <PageContainer>
+      <VisuallyHidden>
+        <Heading level={1}>{t('page.__PAGE__.title')}</Heading>
+      </VisuallyHidden>
+      <Blockquote>{t('page.__PAGE__.orientation')}</Blockquote>
+      <Grid columns={3} gap={3} xstyle={styles.entries}>
+        {SAMPLE_MODULES.map((module) => {
+          const title = t(module.titleKey)
+          return (
+            <ClickableCard
+              key={module.id}
+              label={title}
+              href={`/${locale}/${module.path}`}
+              padding={3}
+            >
+              <Stack gap={1}>
+                <Text type="body" weight="semibold">
+                  {title}
+                </Text>
+                <Text type="supporting" color="secondary">
+                  {t(module.descriptionKey)}
+                </Text>
+              </Stack>
+            </ClickableCard>
+          )
+        })}
+      </Grid>
+    </PageContainer>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Overview",
+    "page.__PAGE__.orientation": "Choose a module to continue.",
+    "page.__PAGE__.module.primary.title": "Primary workspace",
+    "page.__PAGE__.module.primary.description": "Open the main work for this page.",
+    "page.__PAGE__.module.secondary.title": "Recent activity",
+    "page.__PAGE__.module.secondary.description": "Review the latest changes and decisions.",
+    "page.__PAGE__.module.settings.title": "Settings",
+    "page.__PAGE__.module.settings.description": "Adjust preferences for this workspace."
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "概览",
+    "page.__PAGE__.orientation": "选择一个模块继续。",
+    "page.__PAGE__.module.primary.title": "主工作区",
+    "page.__PAGE__.module.primary.description": "打开此页面的主要工作。",
+    "page.__PAGE__.module.secondary.title": "最近活动",
+    "page.__PAGE__.module.secondary.description": "查看最近的更改与决定。",
+    "page.__PAGE__.module.settings.title": "设置",
+    "page.__PAGE__.module.settings.description": "调整此工作区的偏好。"
+  }
+}
+*/

package/templates/dock-list.doc.mjs

@@ -0,0 +1,20 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'List page',
+  displayName: 'List page',
+  description:
+    'A searchable collection with a primary action, a compact filter, list rows, an empty state, and load-more pagination.',
+  category: 'List - Collection',
+  keywords: [
+    'list page',
+    'library',
+    'collection',
+    'search',
+    'recent items',
+    'mobile',
+    'mobile list',
+  ],
+  replaces: 'library',
+  isReady: true,
+}

package/templates/dock-list.tsx

@@ -0,0 +1,223 @@
+import { Button } from '@astryxdesign/core/Button'
+import { EmptyState } from '@astryxdesign/core/EmptyState'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Icon } from '@astryxdesign/core/Icon'
+import { List, ListItem } from '@astryxdesign/core/List'
+import { MoreMenu } from '@astryxdesign/core/MoreMenu'
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { TextInput } from '@astryxdesign/core/TextInput'
+import { Timestamp } from '@astryxdesign/core/Timestamp'
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import { useState } from 'react'
+import { PageShell } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const FILTERS = ['recent', 'all', 'archived'] as const
+type Filter = (typeof FILTERS)[number]
+
+const SAMPLE_ITEMS = [
+  {
+    id: 'brief',
+    titleKey: 'page.__PAGE__.item.brief.title',
+    metaKey: 'page.__PAGE__.item.brief.meta',
+    updatedAt: '2026-11-01T09:00:00.000Z',
+  },
+  {
+    id: 'notes',
+    titleKey: 'page.__PAGE__.item.notes.title',
+    metaKey: 'page.__PAGE__.item.notes.meta',
+    updatedAt: '2026-10-28T14:30:00.000Z',
+  },
+  {
+    id: 'archive',
+    titleKey: 'page.__PAGE__.item.archive.title',
+    metaKey: 'page.__PAGE__.item.archive.meta',
+    updatedAt: '2026-10-20T08:15:00.000Z',
+  },
+] as const
+// Replace with feature data
+
+function isFilter(value: string): value is Filter {
+  return FILTERS.some((filter) => filter === value)
+}
+
+export default function DockList() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<Filter>('recent')
+  const hasItems: boolean = SAMPLE_ITEMS.length > 0
+
+  const visibleItems = SAMPLE_ITEMS.filter((item) => {
+    const query = search.trim().toLocaleLowerCase()
+    if (!query) return true
+    return `${t(item.titleKey)} ${t(item.metaKey)}`.toLocaleLowerCase().includes(query)
+  })
+
+  return (
+    <PageShell
+      title={t('page.__PAGE__.title')}
+      backHref={`/${locale}`}
+      backLabel={t('page.__PAGE__.back')}
+      actions={
+        <Button
+          label={t('page.__PAGE__.new')}
+          size="sm"
+          variant="primary"
+          onClick={() => undefined}
+        />
+      }
+    >
+      <Stack gap={4}>
+        <TextInput
+          label={t('page.__PAGE__.search.label')}
+          isLabelHidden
+          value={search}
+          onChange={setSearch}
+          placeholder={t('page.__PAGE__.search.placeholder')}
+          startIcon={<Icon icon="search" size="sm" />}
+          hasClear
+        />
+        <SegmentedControl
+          label={t('page.__PAGE__.filter.label')}
+          value={filter}
+          onChange={(value) => {
+            if (isFilter(value)) setFilter(value)
+          }}
+          layout="fill"
+        >
+          {FILTERS.map((candidate) => (
+            <SegmentedControlItem
+              key={candidate}
+              value={candidate}
+              label={t(`page.__PAGE__.filter.${candidate}`)}
+            />
+          ))}
+        </SegmentedControl>
+
+        {!hasItems ? (
+          <EmptyState
+            title={t('page.__PAGE__.empty.title')}
+            description={t('page.__PAGE__.empty.description')}
+            actions={
+              <Button label={t('page.__PAGE__.new')} variant="primary" onClick={() => undefined} />
+            }
+          />
+        ) : visibleItems.length === 0 ? (
+          <Text type="body" color="secondary">
+            {t('page.__PAGE__.noResults')}
+          </Text>
+        ) : (
+          <List
+            density="balanced"
+            hasDividers
+            header={
+              <VisuallyHidden>
+                <Heading level={2}>{t('page.__PAGE__.listTitle')}</Heading>
+              </VisuallyHidden>
+            }
+          >
+            {visibleItems.map((item) => (
+              <ListItem
+                key={item.id}
+                label={t(item.titleKey)}
+                description={
+                  <Stack direction="horizontal" gap={2} vAlign="center" wrap="wrap">
+                    <Text type="supporting" color="secondary">
+                      {t(item.metaKey)}
+                    </Text>
+                    <Timestamp
+                      value={item.updatedAt}
+                      format="date"
+                      type="supporting"
+                      color="secondary"
+                    />
+                  </Stack>
+                }
+                onClick={() => undefined}
+                endContent={
+                  <MoreMenu
+                    label={t('page.__PAGE__.row.options')}
+                    size="sm"
+                    alignment="end"
+                    presentation="adaptive"
+                    items={[
+                      {
+                        id: 'archive',
+                        label: t('page.__PAGE__.row.archive'),
+                        icon: <Icon icon="close" size="sm" />,
+                      },
+                    ]}
+                  />
+                }
+              />
+            ))}
+          </List>
+        )}
+
+        {visibleItems.length > 0 ? (
+          <Stack direction="horizontal" hAlign="center">
+            <Button label={t('page.__PAGE__.loadMore')} variant="ghost" onClick={() => undefined} />
+          </Stack>
+        ) : null}
+      </Stack>
+    </PageShell>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Documents",
+    "page.__PAGE__.back": "Back",
+    "page.__PAGE__.new": "New",
+    "page.__PAGE__.search.label": "Search documents",
+    "page.__PAGE__.search.placeholder": "Search documents",
+    "page.__PAGE__.filter.label": "Document view",
+    "page.__PAGE__.filter.recent": "Recent",
+    "page.__PAGE__.filter.all": "All",
+    "page.__PAGE__.filter.archived": "Archived",
+    "page.__PAGE__.empty.title": "No documents yet",
+    "page.__PAGE__.empty.description": "Create the first document to start this collection.",
+    "page.__PAGE__.noResults": "No documents match this search.",
+    "page.__PAGE__.listTitle": "Documents",
+    "page.__PAGE__.row.options": "Document actions",
+    "page.__PAGE__.row.archive": "Archive",
+    "page.__PAGE__.item.brief.title": "Project brief",
+    "page.__PAGE__.item.brief.meta": "Product",
+    "page.__PAGE__.item.notes.title": "Research notes",
+    "page.__PAGE__.item.notes.meta": "Research",
+    "page.__PAGE__.item.archive.title": "Team guidelines",
+    "page.__PAGE__.item.archive.meta": "Operations",
+    "page.__PAGE__.loadMore": "Load more"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "文档",
+    "page.__PAGE__.back": "返回",
+    "page.__PAGE__.new": "新建",
+    "page.__PAGE__.search.label": "搜索文档",
+    "page.__PAGE__.search.placeholder": "搜索文档",
+    "page.__PAGE__.filter.label": "文档视图",
+    "page.__PAGE__.filter.recent": "最近",
+    "page.__PAGE__.filter.all": "全部",
+    "page.__PAGE__.filter.archived": "已归档",
+    "page.__PAGE__.empty.title": "暂无文档",
+    "page.__PAGE__.empty.description": "创建第一份文档来开始这个集合。",
+    "page.__PAGE__.noResults": "没有文档符合此搜索。",
+    "page.__PAGE__.listTitle": "文档",
+    "page.__PAGE__.row.options": "文档操作",
+    "page.__PAGE__.row.archive": "归档",
+    "page.__PAGE__.item.brief.title": "项目简介",
+    "page.__PAGE__.item.brief.meta": "产品",
+    "page.__PAGE__.item.notes.title": "研究笔记",
+    "page.__PAGE__.item.notes.meta": "研究",
+    "page.__PAGE__.item.archive.title": "团队指南",
+    "page.__PAGE__.item.archive.meta": "运营",
+    "page.__PAGE__.loadMore": "加载更多"
+  }
+}
+*/

package/templates/dock-settings.doc.mjs

@@ -0,0 +1,19 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Settings page',
+  displayName: 'Settings page',
+  description:
+    'A mobile-first settings surface with compact tabs, a wide side navigation, and one scrollable section panel.',
+  category: 'Settings - Sections',
+  keywords: [
+    'settings page',
+    'preferences',
+    'sections',
+    'mobile',
+    'mobile settings',
+    'account settings',
+  ],
+  replaces: 'settings',
+  isReady: true,
+}