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

package/templates/dock-settings.tsx

@@ -0,0 +1,272 @@
+import { Heading } from '@astryxdesign/core/Heading'
+import { Icon, type IconName } from '@astryxdesign/core/Icon'
+import { Selector } from '@astryxdesign/core/Selector'
+import { SideNav, SideNavItem, SideNavSection } from '@astryxdesign/core/SideNav'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Switch } from '@astryxdesign/core/Switch'
+import { Tab, TabList } from '@astryxdesign/core/TabList'
+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 { useState, type ReactNode } from 'react'
+import { PageContainer } from '@/components/layout'
+
+const SECTIONS = [
+  { id: 'general', icon: 'wrench' },
+  { id: 'notifications', icon: 'info' },
+  { id: 'privacy', icon: 'eyeSlash' },
+] as const
+type SectionId = (typeof SECTIONS)[number]['id']
+
+const ROWS = {
+  general: [
+    {
+      id: 'theme',
+      icon: 'wrench',
+      titleKey: 'page.__PAGE__.general.theme.title',
+      descriptionKey: 'page.__PAGE__.general.theme.description',
+    },
+  ],
+  notifications: [
+    {
+      id: 'updates',
+      icon: 'info',
+      titleKey: 'page.__PAGE__.notifications.updates.title',
+      descriptionKey: 'page.__PAGE__.notifications.updates.description',
+    },
+  ],
+  privacy: [
+    {
+      id: 'history',
+      icon: 'eyeSlash',
+      titleKey: 'page.__PAGE__.privacy.history.title',
+      descriptionKey: 'page.__PAGE__.privacy.history.description',
+    },
+  ],
+} as const
+
+const styles = stylex.create({
+  pageColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    flex: 1,
+    minHeight: 0,
+    width: '100%',
+    overflow: 'hidden',
+    '@container (min-width: 420px)': { gap: '1.5rem' },
+  },
+  layout: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    flex: 1,
+    minHeight: 0,
+    width: '100%',
+    '@container (min-width: 640px)': { flexDirection: 'row', gap: '1.5rem' },
+  },
+  wideNav: {
+    display: 'none',
+    '@container (min-width: 640px)': { display: 'block', width: '13rem', flexShrink: 0 },
+  },
+  sideNav: { width: '100%' },
+  narrowNav: {
+    width: '100%',
+    '@container (min-width: 640px)': { display: 'none' },
+  },
+  panel: {
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    width: '100%',
+    overflowY: 'auto',
+    paddingBlockEnd: '1rem',
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: '0.75rem',
+    '@container (min-width: 480px)': {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+  },
+  copy: { minWidth: 0 },
+  control: {
+    flexShrink: 0,
+    '@container (max-width: 479px)': { width: '100%' },
+  },
+})
+
+function isSectionId(value: string): value is SectionId {
+  return SECTIONS.some((section) => section.id === value)
+}
+
+interface SettingsRowProps {
+  readonly icon: IconName
+  readonly title: string
+  readonly description: string
+  readonly control: ReactNode
+}
+
+function SettingsRow({ icon, title, description, control }: SettingsRowProps) {
+  return (
+    <Stack direction="horizontal" gap={2} vAlign="start" xstyle={styles.row}>
+      <Stack direction="horizontal" gap={2} vAlign="start" xstyle={styles.copy}>
+        <Icon icon={icon} size="sm" color="secondary" />
+        <Stack gap={0.5} xstyle={styles.copy}>
+          <Text type="body" weight="semibold">
+            {title}
+          </Text>
+          <Text type="supporting" color="secondary">
+            {description}
+          </Text>
+        </Stack>
+      </Stack>
+      <Stack xstyle={styles.control}>{control}</Stack>
+    </Stack>
+  )
+}
+
+export default function DockSettings() {
+  const t = useTranslator()
+  const [section, setSection] = useState<SectionId>('general')
+  const [theme, setTheme] = useState('neutral')
+  const [notifications, setNotifications] = useState(true)
+  const [history, setHistory] = useState(false)
+  const rows = ROWS[section]
+
+  return (
+    <PageContainer isFullHeight>
+      <VisuallyHidden>
+        <Heading level={1}>{t('page.__PAGE__.title')}</Heading>
+      </VisuallyHidden>
+      <Stack xstyle={styles.pageColumn}>
+        <Stack direction="horizontal" gap={4} xstyle={styles.layout}>
+          <TabList
+            aria-label={t('page.__PAGE__.sections')}
+            value={section}
+            onChange={(value) => {
+              if (isSectionId(value)) setSection(value)
+            }}
+            size="sm"
+            hasDivider
+            xstyle={styles.narrowNav}
+          >
+            {SECTIONS.map((candidate) => (
+              <Tab
+                key={candidate.id}
+                value={candidate.id}
+                label={t(`page.__PAGE__.section.${candidate.id}`)}
+                icon={<Icon icon={candidate.icon} size="sm" />}
+              />
+            ))}
+          </TabList>
+
+          <Stack xstyle={styles.wideNav}>
+            <SideNav aria-label={t('page.__PAGE__.sections')} xstyle={styles.sideNav}>
+              <SideNavSection title={t('page.__PAGE__.sections')} isHeaderHidden>
+                {SECTIONS.map((candidate) => (
+                  <SideNavItem
+                    key={candidate.id}
+                    label={t(`page.__PAGE__.section.${candidate.id}`)}
+                    icon={<Icon icon={candidate.icon} size="sm" />}
+                    isSelected={candidate.id === section}
+                    onClick={() => setSection(candidate.id)}
+                  />
+                ))}
+              </SideNavSection>
+            </SideNav>
+          </Stack>
+
+          <Stack gap={4} isScrollable xstyle={styles.panel}>
+            {rows.map((row) => {
+              const control =
+                row.id === 'theme' ? (
+                  <Selector
+                    label={t('page.__PAGE__.general.theme.control')}
+                    value={theme}
+                    onChange={setTheme}
+                    options={[
+                      { value: 'neutral', label: t('page.__PAGE__.general.theme.neutral') },
+                      { value: 'matcha', label: t('page.__PAGE__.general.theme.matcha') },
+                      { value: 'stone', label: t('page.__PAGE__.general.theme.stone') },
+                    ]}
+                  />
+                ) : row.id === 'updates' ? (
+                  <Switch
+                    label={t('page.__PAGE__.notifications.updates.control')}
+                    value={notifications}
+                    onChange={setNotifications}
+                  />
+                ) : (
+                  <Switch
+                    label={t('page.__PAGE__.privacy.history.control')}
+                    value={history}
+                    onChange={setHistory}
+                  />
+                )
+
+              return (
+                <SettingsRow
+                  key={row.id}
+                  icon={row.icon}
+                  title={t(row.titleKey)}
+                  description={t(row.descriptionKey)}
+                  control={control}
+                />
+              )
+            })}
+          </Stack>
+        </Stack>
+      </Stack>
+    </PageContainer>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Settings",
+    "page.__PAGE__.sections": "Settings sections",
+    "page.__PAGE__.section.general": "General",
+    "page.__PAGE__.section.notifications": "Notifications",
+    "page.__PAGE__.section.privacy": "Privacy",
+    "page.__PAGE__.general.theme.title": "Theme",
+    "page.__PAGE__.general.theme.description": "Choose the color system used across the workspace.",
+    "page.__PAGE__.general.theme.control": "Theme",
+    "page.__PAGE__.general.theme.neutral": "Neutral",
+    "page.__PAGE__.general.theme.matcha": "Matcha",
+    "page.__PAGE__.general.theme.stone": "Stone",
+    "page.__PAGE__.notifications.updates.title": "Product updates",
+    "page.__PAGE__.notifications.updates.description": "Receive occasional messages about new features.",
+    "page.__PAGE__.notifications.updates.control": "Product updates",
+    "page.__PAGE__.privacy.history.title": "Activity history",
+    "page.__PAGE__.privacy.history.description": "Keep recent activity available in this workspace.",
+    "page.__PAGE__.privacy.history.control": "Activity history"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "设置",
+    "page.__PAGE__.sections": "设置分区",
+    "page.__PAGE__.section.general": "通用",
+    "page.__PAGE__.section.notifications": "通知",
+    "page.__PAGE__.section.privacy": "隐私",
+    "page.__PAGE__.general.theme.title": "主题",
+    "page.__PAGE__.general.theme.description": "选择整个工作区使用的色彩系统。",
+    "page.__PAGE__.general.theme.control": "主题",
+    "page.__PAGE__.general.theme.neutral": "中性",
+    "page.__PAGE__.general.theme.matcha": "抹茶",
+    "page.__PAGE__.general.theme.stone": "石色",
+    "page.__PAGE__.notifications.updates.title": "产品更新",
+    "page.__PAGE__.notifications.updates.description": "偶尔接收新功能消息。",
+    "page.__PAGE__.notifications.updates.control": "产品更新",
+    "page.__PAGE__.privacy.history.title": "活动历史",
+    "page.__PAGE__.privacy.history.description": "在此工作区保留最近活动。",
+    "page.__PAGE__.privacy.history.control": "活动历史"
+  }
+}
+*/

package/templates/dock-workbench.doc.mjs

@@ -0,0 +1,11 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Workbench page',
+  displayName: 'Workbench page',
+  description:
+    'A second-level one-screen workbench with a fixed top bar, section rows, an inline add action, and configuration in a side drawer.',
+  category: 'Workspace - Workbench',
+  keywords: ['workbench page', 'workspace', 'top bar', 'sections', 'side drawer', 'mobile'],
+  isReady: true,
+}

package/templates/dock-workbench.tsx

@@ -0,0 +1,193 @@
+import { Button } from '@astryxdesign/core/Button'
+import { Divider } from '@astryxdesign/core/Divider'
+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 { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { TextInput } from '@astryxdesign/core/TextInput'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import { useState } from 'react'
+import { PageShell, SideDrawer } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const SAMPLE_ROWS = [
+  {
+    id: 'primary',
+    titleKey: 'page.__PAGE__.row.primary.title',
+    descriptionKey: 'page.__PAGE__.row.primary.description',
+  },
+  {
+    id: 'secondary',
+    titleKey: 'page.__PAGE__.row.secondary.title',
+    descriptionKey: 'page.__PAGE__.row.secondary.description',
+  },
+] as const
+// Replace with feature data
+
+export default function DockWorkbench() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const [draft, setDraft] = useState('')
+
+  return (
+    <PageShell
+      title={t('page.__PAGE__.title')}
+      backHref={`/${locale}`}
+      backLabel={t('page.__PAGE__.back')}
+      actions={
+        <Stack direction="horizontal" gap={1} vAlign="center">
+          <MoreMenu
+            label={t('page.__PAGE__.options')}
+            alignment="end"
+            items={[
+              {
+                id: 'reset',
+                label: t('page.__PAGE__.reset'),
+                icon: <Icon icon="close" size="sm" />,
+                onClick: () => setDraft(''),
+              },
+            ]}
+          />
+          <Button
+            label={t('page.__PAGE__.add')}
+            size="sm"
+            variant="primary"
+            onClick={() => setIsDrawerOpen(true)}
+          />
+        </Stack>
+      }
+    >
+      <Stack gap={4}>
+        <Stack as="section" gap={3}>
+          <Stack direction="horizontal" hAlign="between" vAlign="center" gap={2}>
+            <Heading level={2}>{t('page.__PAGE__.section.current')}</Heading>
+            <Button
+              label={t('page.__PAGE__.section.add')}
+              size="sm"
+              variant="ghost"
+              onClick={() => setIsDrawerOpen(true)}
+            />
+          </Stack>
+          <List density="balanced" hasDividers>
+            {SAMPLE_ROWS.map((row) => (
+              <ListItem
+                key={row.id}
+                label={t(row.titleKey)}
+                description={t(row.descriptionKey)}
+                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>
+        </Stack>
+
+        <Divider variant="subtle" />
+
+        <Stack as="section" gap={3}>
+          <Stack direction="horizontal" hAlign="between" vAlign="center" gap={2}>
+            <Heading level={2}>{t('page.__PAGE__.section.review')}</Heading>
+            <Button
+              label={t('page.__PAGE__.section.add')}
+              size="sm"
+              variant="ghost"
+              onClick={() => setIsDrawerOpen(true)}
+            />
+          </Stack>
+          <Text type="body" color="secondary">
+            {t('page.__PAGE__.section.empty')}
+          </Text>
+        </Stack>
+      </Stack>
+
+      <SideDrawer
+        isOpen={isDrawerOpen}
+        onOpenChange={setIsDrawerOpen}
+        label={t('page.__PAGE__.drawer.label')}
+        header={t('page.__PAGE__.drawer.title')}
+      >
+        <Stack gap={4}>
+          <TextInput
+            label={t('page.__PAGE__.field.name')}
+            value={draft}
+            onChange={setDraft}
+            placeholder={t('page.__PAGE__.field.placeholder')}
+            isRequired
+          />
+          <Stack direction="horizontal" hAlign="end">
+            <Button
+              label={t('page.__PAGE__.drawer.save')}
+              variant="primary"
+              onClick={() => setIsDrawerOpen(false)}
+            />
+          </Stack>
+        </Stack>
+      </SideDrawer>
+    </PageShell>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Workspace",
+    "page.__PAGE__.back": "Back",
+    "page.__PAGE__.options": "Workspace actions",
+    "page.__PAGE__.reset": "Clear draft",
+    "page.__PAGE__.add": "Add item",
+    "page.__PAGE__.section.current": "Current work",
+    "page.__PAGE__.section.review": "Needs review",
+    "page.__PAGE__.section.add": "Add",
+    "page.__PAGE__.section.empty": "Nothing needs review.",
+    "page.__PAGE__.row.primary.title": "Prepare release notes",
+    "page.__PAGE__.row.primary.description": "Updated today",
+    "page.__PAGE__.row.secondary.title": "Review access request",
+    "page.__PAGE__.row.secondary.description": "Waiting for a decision",
+    "page.__PAGE__.row.options": "Item actions",
+    "page.__PAGE__.row.archive": "Archive",
+    "page.__PAGE__.drawer.label": "Add a workspace item",
+    "page.__PAGE__.drawer.title": "New item",
+    "page.__PAGE__.field.name": "Name",
+    "page.__PAGE__.field.placeholder": "Describe the work",
+    "page.__PAGE__.drawer.save": "Add item"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "工作台",
+    "page.__PAGE__.back": "返回",
+    "page.__PAGE__.options": "工作台操作",
+    "page.__PAGE__.reset": "清空草稿",
+    "page.__PAGE__.add": "添加事项",
+    "page.__PAGE__.section.current": "当前工作",
+    "page.__PAGE__.section.review": "待审核",
+    "page.__PAGE__.section.add": "添加",
+    "page.__PAGE__.section.empty": "没有待审核事项。",
+    "page.__PAGE__.row.primary.title": "准备发布说明",
+    "page.__PAGE__.row.primary.description": "今天更新",
+    "page.__PAGE__.row.secondary.title": "审核访问请求",
+    "page.__PAGE__.row.secondary.description": "等待决定",
+    "page.__PAGE__.row.options": "事项操作",
+    "page.__PAGE__.row.archive": "归档",
+    "page.__PAGE__.drawer.label": "添加工作台事项",
+    "page.__PAGE__.drawer.title": "新事项",
+    "page.__PAGE__.field.name": "名称",
+    "page.__PAGE__.field.placeholder": "描述这项工作",
+    "page.__PAGE__.drawer.save": "添加事项"
+  }
+}
+*/