@stapel/listings-react 0.4.0 → 0.8.0

package/src/default/ErrorAlert.tsx

@@ -1,46 +0,0 @@
-/**
- * The one error surface this pair's default skin renders, so the split copy
- * core produces reaches a screen the same way everywhere (mirrors the
- * docs/notifications/workspaces etalon).
- *
- * Core's `describeFlowError` splits a failure into the sentence a person
- * reads and the technical detail a support agent quotes (owner report
- * 2026-08-09: the status used to be spliced into the sentence, ending in a
- * bare `" (500)"`). The split only helps if a skin renders both halves at
- * their own weights: `message` at normal weight, `detail` muted and small.
- *
- * `undefined` in — including a `detail` core left `undefined` because there
- * was nothing worth quoting — renders nothing rather than an empty line.
- */
-import { Alert, Typography } from "antd";
-import type { CSSProperties, ReactElement, ReactNode } from "react";
-import type { FlowErrorDisplay } from "@stapel/core";
-
-export function ErrorAlert(props: {
-  error: FlowErrorDisplay | undefined;
-  style?: CSSProperties | undefined;
-  testId?: string | undefined;
-  action?: ReactNode;
-}): ReactElement | null {
-  const { error } = props;
-  if (!error) return null;
-  return (
-    <Alert
-      type="error"
-      showIcon
-      {...(props.style ? { style: props.style } : {})}
-      {...(props.testId ? { "data-testid": props.testId } : {})}
-      {...(props.action ? { action: props.action } : {})}
-      message={error.message}
-      {...(error.detail
-        ? {
-            description: (
-              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-                {error.detail}
-              </Typography.Text>
-            ),
-          }
-        : {})}
-    />
-  );
-}

package/src/default/theme.tsx

@@ -1,67 +0,0 @@
-/**
- * The default skin's INTERNAL theme provider — every `/default` surface wraps
- * itself in this, so the skin is readable no matter what the host supplies
- * (tracker #26: a skin set with no internal provider once inherited a theme
- * bridge serving light-mode values inside a dark document — text on
- * background at 1.00:1). The theme derives from `@stapel/tokens` via
- * `@stapel/tokens-antd`'s `toAntdThemeConfig(mode)`; `mode` defaults to what
- * the HOST's document declares (`resolveThemeMode()` — the `data-theme`
- * attribute `tokens.css` keys its dark block on), never to a hardcoded side.
- *
- * This is also what "override styles" means for this pair: a storefront
- * retheming through the §68 token JSON regenerates its `--stapel-*` custom
- * properties and the result page follows with zero code — a far better deal
- * than a prop-per-colour API, and the reason the skin has none.
- */
-import { useMemo } from "react";
-import type { CSSProperties, ReactElement, ReactNode } from "react";
-import { ConfigProvider } from "antd";
-import {
-  resolveThemeMode,
-  toAntdTheme,
-  toAntdThemeConfig,
-} from "@stapel/tokens-antd";
-import type { ThemeMode } from "@stapel/tokens-antd";
-
-export interface ListingsSkinThemeProps {
-  /**
-   * Light or dark. Defaults to the mode the host's document declares
-   * (`resolveThemeMode()`). Pass explicitly to pin a side.
-   */
-  readonly mode?: ThemeMode;
-  /** Extra styles merged onto the themed root element (layout only — colors
-   * come from the mode). */
-  readonly style?: CSSProperties;
-  readonly children: ReactNode;
-}
-
-/**
- * `<ListingsSkinTheme/>` — the self-theming wrapper of
- * `@stapel/listings-react/default`. Standalone use is supported (wrap any
- * composition of the skin's parts once); the shipped surfaces
- * (`ListingCard`, `ListingDetailPane`, `ListingComposerPage`,
- * `MyListingsPane`, `FavoritesPane`)
- * each already wrap themselves, and nested antd
- * `ConfigProvider`s merge, so composing them under one `ListingsSkinTheme`
- * stays correct.
- */
-export function ListingsSkinTheme(props: ListingsSkinThemeProps): ReactElement {
-  const mode = props.mode ?? resolveThemeMode();
-  const theme = useMemo(() => toAntdThemeConfig(mode), [mode]);
-  const token = useMemo(() => toAntdTheme(mode), [mode]);
-  return (
-    <ConfigProvider theme={theme}>
-      <div
-        data-listings-skin-root
-        data-listings-skin-mode={mode}
-        style={{
-          color: token.colorText,
-          backgroundColor: token.colorBgContainer,
-          ...props.style,
-        }}
-      >
-        {props.children}
-      </div>
-    </ConfigProvider>
-  );
-}