@terrafirmagreg-team/guide 0.0.0-stage → 1.2.0

package/src/components/views/kind/table.tsx

@@ -0,0 +1,140 @@
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import { Card } from '@terrafirmagreg-team/ui/components/ui/card';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@terrafirmagreg-team/ui/components/ui/table';
+import { collectItemIds } from '@terrafirmagreg-team/guide/lib/data/parse';
+import { cssColor, cellTexts } from '@terrafirmagreg-team/guide/lib/table';
+import { guideFormatOpts } from '@terrafirmagreg-team/guide/lib/format';
+import type { GuideTableCell, PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+export function TablePage(props: PageRendererProps) {
+  const { page } = props;
+  const raw = page.strings ?? page.rows ?? [];
+  const cells = Array.isArray(raw) ? raw : [];
+  const columnCount =
+    typeof page.columns === 'number' ? page.columns : undefined;
+  const rows =
+    columnCount && columnCount > 0
+      ? Array.from(
+          { length: Math.ceil(cells.length / (columnCount + 1)) },
+          (_, index) =>
+            cells.slice(
+              index * (columnCount + 1),
+              (index + 1) * (columnCount + 1),
+            ),
+        )
+      : cells.map((cell) => (Array.isArray(cell) ? cell : [cell]));
+  const opts = guideFormatOpts(props);
+  if (!rows.length) {
+    return <Card className="min-h-16 bg-secondary p-0" aria-hidden />;
+  }
+  const legend = Array.isArray(page.legend) ? page.legend : [];
+  const legendItems = legend
+    .map((entry) => ({
+      color: cssColor(entry.color),
+      lines: (Array.isArray(entry.texts)
+        ? entry.texts.filter(Boolean)
+        : entry.text
+          ? [entry.text]
+          : []
+      ) as string[],
+    }))
+    .filter((entry) => entry.lines.length);
+
+  return (
+    <>
+      <Table className="border-collapse text-left">
+        {Array.isArray(page.columns) && page.columns.length ? (
+          <TableHeader>
+            <TableRow className="border-0 hover:bg-transparent">
+              {page.columns.map((column) => (
+                <TableHead
+                  key={column}
+                  className="h-auto border border-border bg-secondary px-2 py-1 whitespace-normal"
+                >
+                  <GuideText text={column} {...opts} />
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+        ) : null}
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            <TableRow key={rowIndex} className="border-0 hover:bg-transparent">
+              {row.map((cell, columnIndex) => {
+                const value: GuideTableCell | undefined =
+                  cell && typeof cell === 'object' && !Array.isArray(cell)
+                    ? (cell as GuideTableCell)
+                    : undefined;
+                const items = value ? collectItemIds(value.item) : [];
+                const lines = value
+                  ? cellTexts(value)
+                  : typeof cell === 'string'
+                    ? [cell]
+                    : [];
+                return (
+                  <TableCell
+                    key={columnIndex}
+                    className={
+                      value?.bold
+                        ? 'border border-border px-2 py-1 font-semibold whitespace-normal'
+                        : 'border border-border px-2 py-1 whitespace-normal'
+                    }
+                    style={{ backgroundColor: cssColor(value?.fill) }}
+                  >
+                    <span className="inline-flex flex-wrap items-center gap-1">
+                      {items.map((id) => (
+                        <Entry
+                          kind="item"
+                          key={id}
+                          id={id}
+                          name={id}
+                          size="sm"
+                          href={false}
+                        />
+                      ))}
+                      {lines.map((line, index) => (
+                        <span key={index}>
+                          <GuideText text={line} {...opts} />
+                        </span>
+                      ))}
+                    </span>
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {legendItems.length ? (
+        <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
+          {legendItems.map((entry, index) => (
+            <li key={index} className="flex items-center gap-2">
+              {entry.color ? (
+                <span
+                  className="inline-block size-3 rounded-sm"
+                  style={{ backgroundColor: entry.color }}
+                />
+              ) : null}
+              <span className="flex flex-wrap gap-x-2">
+                {entry.lines.map((line, lineIndex) => (
+                  <span key={lineIndex}>
+                    <GuideText text={line} {...opts} />
+                  </span>
+                ))}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+}
+

package/src/components/views/kind/unknown.tsx

@@ -0,0 +1,24 @@
+import { Alert, AlertTitle } from '@terrafirmagreg-team/ui/components/ui/alert';
+import type { GuidePage } from '@terrafirmagreg-team/guide/lib/data/dto';
+import type { PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+export function UnknownPage({
+  page,
+  index,
+}: { page: GuidePage; index?: number } & PageRendererProps) {
+  const keys = Object.keys(page).filter((key) => key !== 'type');
+  return (
+    <Alert variant="destructive">
+      <AlertTitle>
+        Unknown page type &quot;{page.type ?? 'text'}&quot;
+        {index !== undefined ? ` on page ${index + 1}` : ''}
+      </AlertTitle>
+      {keys.length ? (
+        <pre className="mt-2 overflow-auto text-xs">
+          {JSON.stringify(page, null, 2)}
+        </pre>
+      ) : null}
+    </Alert>
+  );
+}
+

package/src/components/views/page/category-body.tsx

@@ -0,0 +1,58 @@
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { guideBookHref } from '@terrafirmagreg-team/guide/lib/paths';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import type { GuideIndex, GuideMessages } from '@terrafirmagreg-team/guide/types';
+
+type GuideCategoryBodyProps = {
+  dataset: DatasetRef;
+  lang: string;
+  modId?: string;
+  bookPath?: string;
+  overview?: GuideIndex;
+  categoryId?: string;
+  messages: GuideMessages;
+};
+
+export function GuideCategoryBody({
+  dataset,
+  lang,
+  modId,
+  bookPath,
+  overview,
+  categoryId,
+  messages,
+}: GuideCategoryBodyProps) {
+  const cat = overview?.categories.find((c) => c.id === categoryId);
+  return (
+    <div className="not-prose grid gap-3 sm:grid-cols-2">
+      {(cat?.entries ?? []).map((entry) => (
+        <ItemRow
+          key={entry.id}
+          href={guideBookHref(
+            dataset,
+            lang,
+            modId ?? overview?.modId ?? '',
+            bookPath ?? '',
+            entry.id,
+          )}
+          variant="outline"
+          className="rounded-xl bg-card p-4"
+          media={entry.icon?.id ? (
+            <Entry id={entry.icon.id} kind={entry.icon.kind} dataset={dataset} href={false} tooltip={false} />
+          ) : null}
+          title={entry.name}
+          description={
+            entry.pageCount
+              ? guideMessage(messages, 'guide.page_count', {
+                  count: entry.pageCount,
+                })
+              : undefined
+          }
+        />
+      ))}
+    </div>
+  );
+}
+

package/src/components/views/page/entry-body.tsx

@@ -0,0 +1,81 @@
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { EntryView } from '@terrafirmagreg-team/guide/components/views/entry/view';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type {
+  GuideEntry,
+  GuideEntryExtras,
+  GuideIndex,
+  GuideMessages,
+} from '@terrafirmagreg-team/guide/types';
+
+type GuideEntryBodyProps = {
+  dataset: DatasetRef;
+  lang: Lang;
+  bookPath?: string;
+  overview: GuideIndex;
+  entry?: GuideEntry;
+  categories: Map<string, string>;
+  langMap: Record<string, string>;
+  extras?: GuideEntryExtras;
+  questLinks?: Record<string, { filename: string; questId: string }>;
+  previews?: Record<string, PagePreviewData>;
+  messages: GuideMessages;
+};
+
+export function GuideEntryBody({
+  dataset,
+  lang,
+  bookPath,
+  overview,
+  entry,
+  categories,
+  langMap,
+  extras,
+  questLinks,
+  previews,
+  messages,
+}: GuideEntryBodyProps) {
+  const catIconByEntry = new Map(
+    overview.categories.flatMap((category) =>
+      category.entries.map((item) => [item.id, category.icon] as const),
+    ),
+  );
+  const entryRefs = new Map(
+    overview.entries.map((item) => [
+      item.id,
+      {
+        id: item.id,
+        name: item.name ?? item.id,
+        icon: item.icon ?? catIconByEntry.get(item.id),
+      },
+    ]),
+  );
+  if (!entry || !bookPath) {
+    return (
+      <EmptyState variant="missing">
+        {guideMessage(messages, 'guide.entry_missing')}
+      </EmptyState>
+    );
+  }
+  return (
+    <EntryView
+      dataset={dataset}
+      lang={lang}
+      bookPath={bookPath}
+      entry={entry}
+      bookModId={overview.modId}
+      categoryByEntry={categories}
+      book={overview.book}
+      langMap={langMap}
+      entryRefs={entryRefs}
+      extras={extras}
+      questLinks={questLinks}
+      previews={previews}
+      messages={messages}
+    />
+  );
+}
+

package/src/components/views/page/overview-body.tsx

@@ -0,0 +1,99 @@
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { MediaImage } from '@terrafirmagreg-team/ui/components/blocks/media/image';
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import {
+  guideCategoryHref,
+  isRootCategory,
+} from '@terrafirmagreg-team/guide/lib/paths';
+import { texturePublicUrl } from '@terrafirmagreg-team/dump/lib/dump/assets/urls';
+import { useDumpLocation } from '@terrafirmagreg-team/game/hooks/use-dump-location';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { GuideIndex, GuideMessages } from '@terrafirmagreg-team/guide/types';
+
+type GuideOverviewBodyProps = {
+  dataset: DatasetRef;
+  lang: Lang;
+  modId?: string;
+  bookPath?: string;
+  overview: GuideIndex;
+  categories: Map<string, string>;
+  langMap: Record<string, string>;
+  questLinks?: Record<string, { filename: string; questId: string }>;
+  previews?: Record<string, PagePreviewData>;
+  messages: GuideMessages;
+};
+
+export function GuideOverviewBody({
+  dataset,
+  lang,
+  modId,
+  bookPath,
+  overview,
+  categories,
+  langMap,
+  questLinks,
+  previews,
+  messages,
+}: GuideOverviewBodyProps) {
+  useDumpLocation(dataset);
+  if (overview.status === 'missing') return null;
+  return (
+    <div className="space-y-6">
+      {overview.book?.cover ? (
+        <MediaImage
+          src={texturePublicUrl(dataset, overview.book.cover.id)}
+          alt={overview.book.name}
+          eager
+          className="h-auto max-h-64 max-w-full rounded-lg border border-border object-contain"
+          pixelated
+        />
+      ) : null}
+      {overview.book?.landingText ? (
+        <p className="whitespace-pre-wrap text-muted-foreground">
+          <GuideText
+            text={overview.book.landingText}
+            dataset={dataset}
+            lang={lang}
+            modId={modId}
+            bookPath={bookPath}
+            categoryByEntry={categories}
+            macros={overview.book.macros}
+            langMap={langMap}
+            questLinks={questLinks}
+            previews={previews}
+          />
+        </p>
+      ) : null}
+      <div className="not-prose grid gap-3 sm:grid-cols-2">
+        {overview.categories
+          .filter((cat) => isRootCategory(cat, overview.categories))
+          .map((cat) => (
+            <ItemRow
+              key={cat.id}
+              href={guideCategoryHref(
+                dataset,
+                lang,
+                modId ?? overview.modId,
+                bookPath ?? '',
+                cat,
+              )}
+              variant="outline"
+              className="rounded-xl bg-card p-4"
+              media={cat.icon?.id ? (
+                <Entry id={cat.icon.id} kind={cat.icon.kind} dataset={dataset} href={false} tooltip={false} />
+              ) : null}
+              title={cat.name}
+              description={guideMessage(messages, 'guide.entry_count', {
+                count: cat.entries.length,
+              })}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+

package/src/components/views/page/text.tsx

@@ -0,0 +1,58 @@
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import { pageTexts } from '@terrafirmagreg-team/guide/lib/page-kind';
+import type { PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+type PageTextProps = Pick<
+  PageRendererProps,
+  | 'page'
+  | 'dataset'
+  | 'lang'
+  | 'bookPath'
+  | 'bookModId'
+  | 'categoryByEntry'
+  | 'langMap'
+  | 'keybinds'
+  | 'book'
+  | 'questLinks'
+  | 'previews'
+>;
+
+export function PageText({
+  page,
+  dataset,
+  lang,
+  bookPath,
+  bookModId,
+  categoryByEntry,
+  book,
+  langMap,
+  keybinds,
+  questLinks,
+  previews,
+}: PageTextProps) {
+  return (
+    <>
+      {pageTexts(page).map((text, index) => (
+        <div
+          key={index}
+          className="whitespace-pre-wrap text-sm leading-relaxed"
+        >
+          <GuideText
+            text={text}
+            dataset={dataset}
+            lang={lang}
+            modId={bookModId}
+            bookPath={bookPath}
+            categoryByEntry={categoryByEntry}
+            macros={book?.macros}
+            langMap={langMap}
+            keybinds={keybinds}
+            questLinks={questLinks}
+            previews={previews}
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+