astryx-dracula 0.1.3 → 0.2.0

package/templates/file-explorer.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'File Explorer',
+  description: 'Column-based file browser with preview',
+  category: 'tooling',
+};

package/templates/file-explorer.tsx

@@ -0,0 +1,577 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState, useMemo, type CSSProperties} from 'react';
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Toolbar} from '@astryxdesign/core/Toolbar';
+import {List, ListItem} from '@astryxdesign/core/List';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Section} from '@astryxdesign/core/Section';
+import {Avatar} from '@astryxdesign/core/Avatar';
+import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@astryxdesign/core/SegmentedControl';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Search,
+  Share2,
+  Tag,
+  Ellipsis,
+  Columns,
+  LayoutGrid,
+  Rows3,
+  Table,
+  SlidersHorizontal,
+  FileText,
+  Folder,
+} from 'lucide-react';
+
+interface FileSystemItem {
+  id: string;
+  name: string;
+  type: 'file' | 'folder';
+  children?: FileSystemItem[];
+}
+
+const FILESYSTEM: FileSystemItem[] = [
+  {
+    id: 'applications',
+    name: 'Applications',
+    type: 'folder',
+    children: [
+      {
+        id: 'chrome-apps',
+        name: 'Chrome Apps',
+        type: 'folder',
+        children: [
+          {id: 'component-lab', name: 'Palette Lab.app', type: 'file'},
+          {id: 'google-chat', name: 'Night Chat.app', type: 'file'},
+          {id: 'workchat', name: 'Coven.app', type: 'file'},
+        ],
+      },
+      {id: 'figma', name: 'Figma.app', type: 'file'},
+      {id: 'safari', name: 'Safari.app', type: 'file'},
+      {id: 'slack', name: 'Slack.app', type: 'file'},
+      {id: 'terminal', name: 'Terminal.app', type: 'file'},
+      {id: 'vscode', name: 'Visual Studio Code.app', type: 'file'},
+      {id: 'xcode', name: 'Xcode.app', type: 'file'},
+    ],
+  },
+  {id: 'debug-log', name: 'debug-nocturne.log', type: 'file'},
+  {
+    id: 'desktop',
+    name: 'Desktop',
+    type: 'folder',
+    children: [
+      {id: 'screenshot1', name: 'Screenshot 2026-10-31.png', type: 'file'},
+      {id: 'notes-txt', name: 'midnight-notes.txt', type: 'file'},
+      {
+        id: 'projects',
+        name: 'Projects',
+        type: 'folder',
+        children: [
+          {id: 'readme-proj', name: 'README.md', type: 'file'},
+          {
+            id: 'src-folder',
+            name: 'src',
+            type: 'folder',
+            children: [
+              {id: 'index-ts', name: 'index.ts', type: 'file'},
+              {id: 'app-tsx', name: 'App.tsx', type: 'file'},
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'documents',
+    name: 'Documents',
+    type: 'folder',
+    children: [
+      {id: 'design-spec', name: 'dracula-spec.pdf', type: 'file'},
+      {id: 'resume', name: 'resume.docx', type: 'file'},
+      {
+        id: 'work',
+        name: 'Work',
+        type: 'folder',
+        children: [
+          {id: 'q1-report', name: 'Q1-report.xlsx', type: 'file'},
+          {id: 'presentation', name: 'team-presentation.pptx', type: 'file'},
+        ],
+      },
+    ],
+  },
+  {
+    id: 'downloads',
+    name: 'Downloads',
+    type: 'folder',
+    children: [
+      {id: 'archive', name: 'archive.zip', type: 'file'},
+      {id: 'installer', name: 'installer.dmg', type: 'file'},
+      {id: 'photo', name: 'castle-2026.jpg', type: 'file'},
+    ],
+  },
+  {id: 'login-screenshot', name: 'login-midnight-screenshot.png', type: 'file'},
+  {
+    id: 'movies',
+    name: 'Movies',
+    type: 'folder',
+    children: [{id: 'recording', name: 'screen-recording.mov', type: 'file'}],
+  },
+  {
+    id: 'music',
+    name: 'Music',
+    type: 'folder',
+    children: [{id: 'playlist', name: 'favorites.m3u', type: 'file'}],
+  },
+  {
+    id: 'node-modules',
+    name: 'node_modules',
+    type: 'folder',
+    children: [
+      {
+        id: 'react',
+        name: 'react',
+        type: 'folder',
+        children: [{id: 'react-index', name: 'index.js', type: 'file'}],
+      },
+      {
+        id: 'react-dom',
+        name: 'react-dom',
+        type: 'folder',
+        children: [{id: 'react-dom-index', name: 'index.js', type: 'file'}],
+      },
+    ],
+  },
+  {
+    id: 'pictures',
+    name: 'Pictures',
+    type: 'folder',
+    children: [
+      {
+        id: 'vacation',
+        name: 'transylvania-2026',
+        type: 'folder',
+        children: [
+          {id: 'img1', name: 'IMG_0001.jpg', type: 'file'},
+          {id: 'img2', name: 'IMG_0002.jpg', type: 'file'},
+          {id: 'img3', name: 'IMG_0003.jpg', type: 'file'},
+        ],
+      },
+      {
+        id: 'screenshots-folder',
+        name: 'Screenshots',
+        type: 'folder',
+        children: [
+          {id: 'ss1', name: 'Screen Shot 1.png', type: 'file'},
+          {id: 'ss2', name: 'Screen Shot 2.png', type: 'file'},
+        ],
+      },
+    ],
+  },
+  {
+    id: 'public',
+    name: 'Public',
+    type: 'folder',
+    children: [
+      {id: 'drop-box', name: 'Drop Box', type: 'folder', children: []},
+    ],
+  },
+  {
+    id: 'astryx',
+    name: 'astryx',
+    type: 'folder',
+    children: [
+      {id: 'astryx-readme', name: 'README.md', type: 'file'},
+      {id: 'astryx-pkg', name: 'package.json', type: 'file'},
+      {
+        id: 'astryx-packages',
+        name: 'packages',
+        type: 'folder',
+        children: [
+          {
+            id: 'astryx-core',
+            name: 'core',
+            type: 'folder',
+            children: [
+              {
+                id: 'core-src',
+                name: 'src',
+                type: 'folder',
+                children: [
+                  {id: 'button-tsx', name: 'Button.tsx', type: 'file'},
+                  {id: 'card-tsx', name: 'Card.tsx', type: 'file'},
+                  {id: 'text-tsx', name: 'Text.tsx', type: 'file'},
+                ],
+              },
+            ],
+          },
+          {
+            id: 'astryx-cli',
+            name: 'cli',
+            type: 'folder',
+            children: [{id: 'cli-index', name: 'index.ts', type: 'file'}],
+          },
+        ],
+      },
+      {
+        id: 'astryx-apps',
+        name: 'apps',
+        type: 'folder',
+        children: [
+          {
+            id: 'storybook',
+            name: 'storybook',
+            type: 'folder',
+            children: [
+              {
+                id: 'sb-config',
+                name: '.storybook',
+                type: 'folder',
+                children: [],
+              },
+            ],
+          },
+          {
+            id: 'sandbox-app',
+            name: 'sandbox',
+            type: 'folder',
+            children: [
+              {
+                id: 'sandbox-src',
+                name: 'src',
+                type: 'folder',
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const page: CSSProperties = {height: '100dvh'};
+const columnRow: CSSProperties = {overflowX: 'auto', overflowY: 'hidden'};
+const scrollable: CSSProperties = {overflowY: 'auto'};
+const fixedColumn: CSSProperties = {flexShrink: 0};
+const detailColumn: CSSProperties = {
+  flexGrow: 1,
+  flexShrink: 0,
+  flexBasis: 320,
+};
+const controlsScroll: CSSProperties = {overflowX: 'auto'};
+
+function findItem(items: FileSystemItem[], id: string): FileSystemItem | null {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children) {
+      const found = findItem(item.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+function getFileExtension(name: string): string {
+  const dot = name.lastIndexOf('.');
+  return dot > 0 ? name.substring(dot + 1).toUpperCase() : 'File';
+}
+
+export default function FileExplorer() {
+  const [selectedPath, setSelectedPath] = useState<string[]>([
+    'applications',
+    'chrome-apps',
+    'component-lab',
+  ]);
+
+  const isNarrow = useMediaQuery('(max-width: 768px)');
+  const isPhone = useMediaQuery('(max-width: 767px)');
+
+  const columns = useMemo(() => {
+    const cols: {items: FileSystemItem[]; selectedId: string | null}[] = [];
+    cols.push({items: FILESYSTEM, selectedId: selectedPath[0] ?? null});
+    let currentItems: FileSystemItem[] = FILESYSTEM;
+    for (let i = 0; i < selectedPath.length; i++) {
+      const selected = currentItems.find(item => item.id === selectedPath[i]);
+      if (selected?.children && selected.children.length > 0) {
+        cols.push({
+          items: selected.children,
+          selectedId: selectedPath[i + 1] ?? null,
+        });
+        currentItems = selected.children;
+      } else {
+        break;
+      }
+    }
+    return cols;
+  }, [selectedPath]);
+
+  const columnOffset = isNarrow ? Math.max(columns.length - 1, 0) : 0;
+  const visibleColumns = isNarrow ? columns.slice(-1) : columns;
+
+  const currentFolderName = useMemo(() => {
+    if (selectedPath.length === 0) {
+      return 'Home';
+    }
+    const lastId = selectedPath[selectedPath.length - 1];
+    const item = findItem(FILESYSTEM, lastId);
+    if (item?.type === 'folder') {
+      return item.name;
+    }
+    if (selectedPath.length >= 2) {
+      const parent = findItem(
+        FILESYSTEM,
+        selectedPath[selectedPath.length - 2],
+      );
+      return parent?.name ?? 'Home';
+    }
+    return 'Home';
+  }, [selectedPath]);
+
+  const selectedFile = useMemo(() => {
+    if (selectedPath.length === 0) {
+      return null;
+    }
+    const lastId = selectedPath[selectedPath.length - 1];
+    const item = findItem(FILESYSTEM, lastId);
+    return item?.type === 'file' ? item : null;
+  }, [selectedPath]);
+
+  const handleSelect = (columnIndex: number, itemId: string) => {
+    setSelectedPath([...selectedPath.slice(0, columnIndex), itemId]);
+  };
+
+  const titleContent = (
+    <>
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={ChevronLeft} size="sm" />}
+        onClick={() => {
+          if (selectedPath.length > 0) {
+            setSelectedPath(selectedPath.slice(0, -1));
+          }
+        }}
+        isDisabled={selectedPath.length === 0}
+        label="Go back"
+        tooltip="Go back"
+      />
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={ChevronRight} size="sm" />}
+        isDisabled
+        label="Go forward"
+        tooltip="Go forward"
+      />
+      <Text type="label" maxLines={1}>
+        {currentFolderName}
+      </Text>
+    </>
+  );
+  const viewSwitcher = (
+    <SegmentedControl
+      value="column"
+      onChange={() => {}}
+      label="View mode">
+      <SegmentedControlItem
+        value="grid"
+        label="Grid"
+        icon={<Icon icon={LayoutGrid} size="sm" />}
+        isLabelHidden
+      />
+      <SegmentedControlItem
+        value="list"
+        label="List"
+        icon={<Icon icon={Rows3} size="sm" />}
+        isLabelHidden
+      />
+      <SegmentedControlItem
+        value="column"
+        label="Column"
+        icon={<Icon icon={Columns} size="sm" />}
+        isLabelHidden
+      />
+      <SegmentedControlItem
+        value="gallery"
+        label="Gallery"
+        icon={<Icon icon={Table} size="sm" />}
+        isLabelHidden
+      />
+    </SegmentedControl>
+  );
+  const fileActions = (
+    <>
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={SlidersHorizontal} size="sm" />}
+        label="Group"
+        tooltip="Group"
+      />
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={Share2} size="sm" />}
+        label="Share"
+        tooltip="Share"
+      />
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={Tag} size="sm" />}
+        label="Tags"
+        tooltip="Tags"
+      />
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={Ellipsis} size="sm" />}
+        label="More"
+        tooltip="More"
+      />
+      <IconButton
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={Search} size="sm" />}
+        label="Search"
+        tooltip="Search"
+      />
+    </>
+  );
+
+  return (
+    <Layout
+      style={page}
+      height="fill"
+      header={
+        <>
+          <Toolbar
+            label="File Explorer"
+            size="sm"
+            dividers={isPhone ? undefined : ['bottom']}
+            startContent={titleContent}
+            centerContent={isPhone ? undefined : viewSwitcher}
+            endContent={isPhone ? undefined : fileActions}
+          />
+          {isPhone && (
+            <Section
+              variant="transparent"
+              padding={2}
+              dividers={['bottom']}>
+              <HStack gap={2} vAlign="center" style={controlsScroll}>
+                {viewSwitcher}
+                {fileActions}
+              </HStack>
+            </Section>
+          )}
+        </>
+      }
+      content={
+        <LayoutContent padding={0} isScrollable={false}>
+          <HStack height="100%" style={columnRow}>
+            {visibleColumns.map((col, colIndex) => {
+              const trueIndex = columnOffset + colIndex;
+              const showDivider =
+                trueIndex < columns.length - 1 || selectedFile != null;
+              return (
+                <Section
+                  key={trueIndex}
+                  width={240}
+                  padding={2}
+                  variant="transparent"
+                  dividers={showDivider ? ['end'] : undefined}
+                  style={{...scrollable, ...fixedColumn}}>
+                  <List density="compact" hasDividers={false}>
+                    {col.items.map(item => {
+                      const isSelected = col.selectedId === item.id;
+                      const hasChildren =
+                        item.type === 'folder' &&
+                        item.children != null &&
+                        item.children.length > 0;
+                      return (
+                        <ListItem
+                          key={item.id}
+                          label={
+                            <Text type="body" maxLines={1}>
+                              {item.name}
+                            </Text>
+                          }
+                          startContent={
+                            <Icon
+                              icon={
+                                item.type === 'folder'
+                                  ? Folder
+                                  : FileText
+                              }
+                              color={
+                                item.type === 'folder' ? 'accent' : 'secondary'
+                              }
+                              size="sm"
+                            />
+                          }
+                          endContent={
+                            hasChildren ? (
+                              <Icon
+                                icon={ChevronRight}
+                                size="xsm"
+                                color="secondary"
+                              />
+                            ) : undefined
+                          }
+                          onClick={() => handleSelect(trueIndex, item.id)}
+                          isSelected={isSelected}
+                        />
+                      );
+                    })}
+                  </List>
+                </Section>
+              );
+            })}
+            {selectedFile && (
+              <Section
+                padding={6}
+                variant="transparent"
+                style={{...scrollable, ...detailColumn}}>
+                <VStack gap={4} hAlign="center">
+                  <Avatar name={selectedFile.name} size={96} />
+                  <VStack gap={1} hAlign="center">
+                    <Text type="label" maxLines={1}>
+                      {selectedFile.name}
+                    </Text>
+                    <Text type="supporting">
+                      {getFileExtension(selectedFile.name)} Document
+                    </Text>
+                  </VStack>
+                  <MetadataList title="Information">
+                    <MetadataListItem label="Created">
+                      March 28, 2026 at 2:15 PM
+                    </MetadataListItem>
+                    <MetadataListItem label="Modified">
+                      Yesterday, 10:27 PM
+                    </MetadataListItem>
+                    <MetadataListItem label="Kind">
+                      {getFileExtension(selectedFile.name)} Document
+                    </MetadataListItem>
+                  </MetadataList>
+                </VStack>
+              </Section>
+            )}
+          </HStack>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/form-two-column.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Two-column Form',
+  description: 'Contact form with illustration and info strip',
+  category: 'forms',
+};