@umami/shiso 1.7.0 → 1.8.0

package/types/components.d.ts

@@ -0,0 +1,217 @@
+import type { ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
+
+export interface AccordionProps {
+  title?: ReactNode;
+  icon?: ReactNode | string;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+}
+
+export interface AccordionGroupProps {
+  children?: ReactNode;
+  defaultOpen?: boolean;
+}
+
+export declare function Accordion(props: AccordionProps): ReactElement;
+export declare function AccordionGroup(props: AccordionGroupProps): ReactElement | null;
+
+export type BadgeColor =
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'yellow'
+  | 'orange'
+  | 'red'
+  | 'purple'
+  | 'white'
+  | 'surface'
+  | 'white-destructive'
+  | 'surface-destructive';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export type BadgeShape = 'rounded' | 'pill';
+
+export interface BadgeProps {
+  color?: BadgeColor;
+  size?: BadgeSize;
+  shape?: BadgeShape;
+  icon?: ReactNode;
+  stroke?: boolean;
+  disabled?: boolean;
+  className?: string;
+  /** @deprecated Use `color` instead. */
+  tone?: 'muted' | 'primary';
+  children?: ReactNode;
+}
+
+export declare function Badge(props: BadgeProps): ReactElement;
+
+export interface ButtonProps {
+  href?: string;
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
+  size?: 'default' | 'xs' | 'sm' | 'lg';
+  icon?: ReactNode | string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export declare function Button(props: ButtonProps): ReactElement;
+
+export type CalloutVariant = 'note' | 'tip' | 'warning' | 'info' | 'check' | 'danger';
+
+export interface CalloutProps {
+  title?: ReactNode;
+  icon?: ReactNode | string;
+  children?: ReactNode;
+  variant?: CalloutVariant;
+}
+
+export interface ChildrenProps {
+  children?: ReactNode;
+}
+
+export declare function Callout(props: CalloutProps): ReactElement;
+export declare function Note(props: ChildrenProps): ReactElement;
+export declare function Tip(props: ChildrenProps): ReactElement;
+export declare function Warning(props: ChildrenProps): ReactElement;
+export declare function Info(props: ChildrenProps): ReactElement;
+export declare function Check(props: ChildrenProps): ReactElement;
+export declare function Danger(props: ChildrenProps): ReactElement;
+export declare function WarningBanner(props: ChildrenProps): ReactElement;
+
+export type CardType = 'note' | 'info' | 'warning' | 'tip' | 'check' | 'danger';
+
+export interface CardProps {
+  title?: ReactNode;
+  href?: string;
+  icon?: ReactNode | string;
+  color?: string;
+  img?: string;
+  cta?: string;
+  horizontal?: boolean;
+  arrow?: boolean;
+  type?: CardType;
+  children?: ReactNode;
+}
+
+export interface CardGroupProps {
+  children?: ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+}
+
+export declare function Card(props: CardProps): ReactElement;
+export declare function CardGroup(props: CardGroupProps): ReactElement;
+
+export interface CodeGroupProps {
+  children?: ReactNode;
+}
+
+export declare function CodeGroup(props: CodeGroupProps): ReactElement | null;
+
+export interface ColumnsProps {
+  children?: ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+}
+
+export interface ColumnProps {
+  children?: ReactNode;
+}
+
+export declare function Columns(props: ColumnsProps): ReactElement;
+export declare function Column(props: ColumnProps): ReactElement;
+
+export interface ExpandableProps {
+  title: ReactNode;
+  children?: ReactNode;
+  defaultOpen?: boolean;
+}
+
+export declare function Expandable(props: ExpandableProps): ReactElement;
+
+export interface FrameProps {
+  caption?: ReactNode;
+  hint?: ReactNode;
+  children?: ReactNode;
+}
+
+export declare function Frame(props: FrameProps): ReactElement;
+
+export interface IconProps {
+  icon?: string;
+  src?: string;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+export declare function Icon(props: IconProps): ReactElement | null;
+
+export interface ParamFieldProps {
+  name?: string;
+  query?: string;
+  path?: string;
+  header?: string;
+  body?: string;
+  type?: string;
+  required?: boolean;
+  children?: ReactNode;
+}
+
+export declare function ParamField(props: ParamFieldProps): ReactElement;
+export declare function Param(props: ChildrenProps): ReactElement;
+
+export interface PropertiesTableProps {
+  children?: ReactNode;
+}
+
+export declare function PropertiesTable(props: PropertiesTableProps): ReactElement | null;
+
+type FieldValue = string | number | boolean | null | undefined;
+
+export interface ResponseFieldProps {
+  name: string;
+  type?: FieldValue;
+  default?: FieldValue;
+  required?: boolean;
+  deprecated?: boolean;
+  children?: ReactNode;
+}
+
+export declare function ResponseField(props: ResponseFieldProps): ReactElement;
+
+export interface StepProps {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export interface StepsProps {
+  children?: ReactNode;
+}
+
+export declare function Step(props: StepProps): ReactElement;
+export declare function Steps(props: StepsProps): ReactElement | null;
+
+export interface TabProps {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export interface TabsProps {
+  children?: ReactNode;
+  group?: string;
+}
+
+export declare function Tab(props: TabProps): ReactElement;
+export declare function Tabs(props: TabsProps): ReactElement | null;
+
+export interface TooltipProps {
+  tip?: ReactNode;
+  children?: ReactNode;
+}
+
+export declare function Tooltip(props: TooltipProps): ReactElement;
+
+export interface ZoomableImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  noZoom?: boolean;
+}
+
+export declare function ZoomableImage(props: ZoomableImageProps): ReactElement;

package/vite.config.ts

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
-import { defineConfig, type Plugin } from 'vite';
+import { defineConfig, type Plugin, searchForWorkspaceRoot } from 'vite';
 import { shisoMdx } from './mdx.config.ts';
 import { generateIconRegistry } from './scripts/generate-icon-registry.mjs';
 import { shisoLastModified } from './scripts/generate-last-modified.mjs';
@@ -49,7 +49,11 @@ function shisoSearchIndex(
       await generateSearchIndex({ config: getDocsConfig(), shiso: getShisoConfig(), root, output });
     },
     async handleHotUpdate({ file }) {
-      if (/\.(md|mdx)$/.test(file) || file.endsWith('docs.json') || /shiso\.config\.\w+$/.test(file)) {
+      if (
+        /\.(md|mdx)$/.test(file) ||
+        file.endsWith('docs.json') ||
+        /shiso\.config\.\w+$/.test(file)
+      ) {
         await generateSearchIndex({
           config: getDocsConfig(),
           shiso: getShisoConfig(),
@@ -294,9 +298,9 @@ function shisoHtml(getDocsConfig: () => DocsConfig): Plugin {
 
 /**
  * Serves the raw markdown source for `<route>.md` URLs during development,
- * mirroring the `.md` copies the prerenderer publishes next to every page in
- * production builds. The contextual menu's copy/view options and AI links
- * depend on these URLs.
+ * mirroring the `.md` copies the prerenderer publishes next to Markdown and
+ * MDX pages in production builds. TSX standalone pages return 404 because
+ * their source is not a Markdown representation.
  */
 function shisoMarkdownDev(
   getDocsConfig: () => DocsConfig,
@@ -336,7 +340,7 @@ function shisoMarkdownDev(
           const pageSlug = standalone.page
             .trim()
             .replace(/^\/+/, '')
-            .replace(/\.mdx?$/, '');
+            .replace(/\.(?:mdx?|tsx)$/, '');
 
           for (const candidate of [`${pageSlug}.mdx`, `${pageSlug}.md`]) {
             const filePath = path.resolve(pagesRoot, candidate);
@@ -355,6 +359,11 @@ function shisoMarkdownDev(
               // Try the next candidate.
             }
           }
+
+          // Component pages intentionally have no raw Markdown representation.
+          res.statusCode = 404;
+          res.end('Not found');
+          return;
         }
 
         if (docsPrefix && route.startsWith(docsPrefix)) {
@@ -404,7 +413,22 @@ export default defineConfig(async () => {
   const getDocsConfig = configModule.getConfig as () => DocsConfig;
   const getShisoConfig = configModule.getShisoConfig as () => ResolvedShisoConfig;
 
+  // Shiso may be installed via link:/file: from a directory outside the
+  // project's workspace root. Allow the framework's real location (and the
+  // repository root above it, which holds its dependency store) so raw assets
+  // like fonts remain servable in dev instead of returning 403.
+  const shisoRoot = path.dirname(fileURLToPath(import.meta.url));
+
   return {
+    server: {
+      fs: {
+        allow: [
+          searchForWorkspaceRoot(process.cwd()),
+          shisoRoot,
+          path.resolve(shisoRoot, '..', '..'),
+        ],
+      },
+    },
     optimizeDeps: {
       // The published runtime is already bundled ESM and contains project-time
       // virtual imports that are resolved by the plugins below.