DuskMoon workflow duskmoon implemented 7 demos

DmStatus

DmStatus documents the DmStatus export from duskmoon.

Import @duskmoon-dev/components/dm-status

2 API sections

7 documented props

5 behavior scenarios

Key API

statusheightloadingPropsdescriptionimageimageStyle

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmStatus is most often configured through `status`, `height`, `loadingProps`, `description`.

Covered behavior

Renders empty status with default description and numeric height

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Dm Status

Basic usage

authored

Import the component stylesheet and DmStatus from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmStatus } from "@duskmoon-dev/components/dm-status";

export function Example() {
  return (<DmStatus
  status="success"
>
  DuskMoon Dm Status
</DmStatus>);
}

Preview

DuskMoon Dm Status

Renders empty status with default description and numeric height

test-backed

DmStatus scenario from the component test coverage: renders empty status with default description and numeric height.

Source

import "@duskmoon-dev/components/styles.css";
import { DmStatus } from "@duskmoon-dev/components/dm-status";

export function DmStatusRendersEmptyStatusWithDemo() {
  return (<DmStatus
  // Renders empty status with default description and numeric height
  status="success"
>
  DuskMoon Dm Status
</DmStatus>);
}

Preview

DuskMoon Dm Status

Renders error status with custom description and action

test-backed

DmStatus scenario from the component test coverage: renders error status with custom description and action.

Source

import "@duskmoon-dev/components/styles.css";
import { DmStatus } from "@duskmoon-dev/components/dm-status";

export function DmStatusRendersErrorStatusWithDemo() {
  return (<DmStatus
  // Renders error status with custom description and action
  status="success"
>
  DuskMoon Dm Status
</DmStatus>);
}

Preview

DuskMoon Dm Status

Renders loading status with spin props and children

test-backed

DmStatus scenario from the component test coverage: renders loading status with spin props and children.

Source

import "@duskmoon-dev/components/styles.css";
import { DmStatus } from "@duskmoon-dev/components/dm-status";

export function DmStatusRendersLoadingStatusWithDemo() {
  return (<DmStatus
  // Renders loading status with spin props and children
  status="success"
>
  DuskMoon Dm Status
</DmStatus>);
}

Preview

DuskMoon Dm Status

Returns children directly for success status

test-backed

DmStatus scenario from the component test coverage: returns children directly for success status.

Source

import "@duskmoon-dev/components/styles.css";
import { DmStatus } from "@duskmoon-dev/components/dm-status";

export function DmStatusReturnsChildrenDirectlyForDemo() {
  return (<DmStatus
  // Returns children directly for success status
  status="success"
>
  DuskMoon Dm Status
</DmStatus>);
}

Preview

DuskMoon Dm Status

Supports custom image string and className

test-backed

DmStatus scenario from the component test coverage: supports custom image string and classname.

Source

import "@duskmoon-dev/components/styles.css";
import { DmStatus } from "@duskmoon-dev/components/dm-status";

export function DmStatusSupportsCustomImageStringDemo() {
  return (<DmStatus
  // Supports custom image string and className
  status="success"
>
  DuskMoon Dm Status
</DmStatus>);
}

Preview

Sunshine Theme

DuskMoon Dm Status

Moonlight Theme

DuskMoon Dm Status

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmStatus
  status="success"
>
  DuskMoon Dm Status
</DmStatus>
</div>

<div data-theme="moonlight">
  <DmStatus
  status="success"
>
  DuskMoon Dm Status
</DmStatus>
</div>

API

The API reference below lists every parsed exported type or interface for DmStatus. Start with `status`, `height`, `loadingProps`, `description` for common usage.

Types: packages/components/src/components/dm-status/DmStatus.types.ts Scenarios: packages/components/src/components/dm-status/DmStatus.test.tsx

DmStatusProps interface extends Omit<ComponentProps<"div">, "children">

Prop	Type	Required	Description
`status`	`DmStatusType`	No	status configures DmStatus.
`height`	`string \| number`	No	height configures DmStatus.
`loadingProps`	`SpinProps`	No	loadingProps configures DmStatus.
`description`	`ReactNode`	No	description configures DmStatus.
`image`	`string \| ReactNode`	No	image configures DmStatus.
`children`	`ReactNode`	No	children configures DmStatus.
`imageStyle`	`CSSProperties`	No	imageStyle configures DmStatus.

DmStatusType type

"empty" | "loading" | "error" | "success"