@dsh-plugin/dsh-ui-components 0.0.0-stage → 0.0.1

package/src/basic/styles.ts

@@ -0,0 +1,412 @@
+/**
+ * 基础控件追加样式。
+ *
+ * 桥接样式表已经把 Arco 的配色与圆角整体改指 DSH 令牌，这里只补充那些
+ * 必须改结构而不是改变量的部分：控件高度、内边距、字重与勾选控件的几何。
+ *
+ * @module @dsh-plugin/dsh-ui-components/basic/styles
+ */
+import { injectUiStyle } from '../foundation/style.js'
+
+/** 基础控件样式表。 */
+export const BASIC_CSS = `
+/* ── 按钮 ────────────────────────────────────────────────────────── */
+/* Arco 的按钮基线是 inline-block，落进 flex 容器后会被块化，文字随即失去
+   垂直居中并在小尺寸下被裁切。DSH 的按钮是 flex 居中的，这里显式改成同一
+   语义，不再依赖容器的布局方式。 */
+.dsh-ui .arco-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-weight: 500;
+  box-sizing: border-box;
+  gap: 6px;
+}
+
+.dsh-ui .dsh-btn-md .arco-btn,
+.dsh-ui .arco-btn-size-default {
+  height: 36px;
+  font-size: 14px;
+  line-height: 22px;
+  padding: 0 14px;
+}
+
+.dsh-ui .arco-btn-size-small {
+  height: 28px;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 0 10px;
+}
+
+.dsh-ui .arco-btn-size-large {
+  height: 44px;
+  font-size: 15px;
+  line-height: 24px;
+  padding: 0 18px;
+  border-radius: var(--dsw-radius-lg, 16px);
+}
+
+.dsh-ui .arco-btn-shape-circle {
+  border-radius: 50%;
+  corner-shape: round;
+  width: 36px;
+  padding: 0;
+}
+
+.dsh-ui .arco-btn-shape-circle.arco-btn-size-small {
+  width: 28px;
+}
+
+/* Arco 给所有按钮默认带上 shape="square"，只有真正省略文字的图标按钮才该是
+   固定方形，因此这里按 icon-only 收紧而不是按 shape。 */
+.dsh-ui .arco-btn.arco-btn-icon-only {
+  width: 36px;
+  padding: 0;
+}
+
+.dsh-ui .arco-btn.arco-btn-icon-only.arco-btn-size-small {
+  width: 28px;
+}
+
+.dsh-ui .arco-btn.arco-btn-icon-only.arco-btn-size-large {
+  width: 44px;
+}
+
+.dsh-ui .arco-btn-icon-only {
+  gap: 0;
+}
+
+/* ── 输入类控件 ──────────────────────────────────────────────────── */
+/* 宿主的输入框是「层级底色 + 半像素描边」，且用的是第三层（深色下比第一层亮
+   一档）；Arco 默认用半透明的填充层且描边透明，深色主题下会明显更暗。 */
+.dsh-ui .arco-input,
+.dsh-ui .arco-input-inner-wrapper,
+.dsh-ui .arco-textarea,
+.dsh-ui .arco-input-number,
+.dsh-ui .arco-select-view {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  border-radius: var(--dsw-radius-md, 12px);
+  background-color: var(--dsw-alias-bg-layer-3);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+}
+
+/* 包裹层自己画边框与底色，内部的原生输入框必须退回透明，否则会出现双层边框。 */
+.dsh-ui .arco-input-inner-wrapper > .arco-input,
+.dsh-ui .arco-input-inner-wrapper .arco-input,
+.dsh-ui .arco-input-number > .arco-input {
+  border: 0;
+  background-color: transparent;
+}
+
+.dsh-ui .arco-input:hover,
+.dsh-ui .arco-input-inner-wrapper:hover,
+.dsh-ui .arco-textarea:hover,
+.dsh-ui .arco-input-number:hover,
+.dsh-ui .arco-select:hover .arco-select-view,
+.dsh-ui .arco-select-view:hover {
+  background-color: var(--dsw-alias-bg-layer-3);
+  border-color: var(--dsw-alias-border-l4);
+}
+
+.dsh-ui .arco-input-size-default,
+.dsh-ui .arco-input-inner-wrapper-default {
+  height: 32px;
+}
+
+.dsh-ui .arco-input-size-small,
+.dsh-ui .arco-input-inner-wrapper-small {
+  height: 28px;
+  font-size: 12px;
+  border-radius: var(--dsw-radius-sm, 8px);
+}
+
+.dsh-ui .arco-input-size-large,
+.dsh-ui .arco-input-inner-wrapper-large {
+  height: 44px;
+  border-radius: var(--dsw-radius-lg, 16px);
+}
+
+.dsh-ui .arco-input::placeholder,
+.dsh-ui .arco-textarea::placeholder {
+  color: var(--dsw-alias-label-dimmed);
+}
+
+/* Arco 的错误态默认用整块浅红填充；DSH 的输入框只换描边与焦点环，填充保持
+   背景色，避免表单错误时整片发红。 */
+.dsh-ui .arco-input-error,
+.dsh-ui .arco-textarea-error,
+.dsh-ui .arco-input-wrapper-error,
+.dsh-ui .arco-select-view-error {
+  background-color: var(--dsw-alias-bg-layer-1);
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.dsh-ui .arco-input-error:hover,
+.dsh-ui .arco-textarea-error:hover,
+.dsh-ui .arco-input-wrapper-error:hover,
+.dsh-ui .arco-select-view-error:hover {
+  background-color: var(--dsw-alias-bg-layer-1);
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.dsh-ui .arco-input-wrapper.arco-input-error > .arco-input {
+  background: transparent;
+}
+
+.dsh-ui .dsh-mono .arco-input,
+.dsh-ui .arco-input.dsh-mono,
+.dsh-ui .arco-textarea.dsh-mono {
+  font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+
+.dsh-ui .arco-textarea {
+  padding: 7px 12px;
+  min-height: 72px;
+}
+
+.dsh-ui .dsh-textarea-sm.arco-textarea {
+  font-size: 12px;
+  line-height: 18px;
+  padding: 5px 10px;
+  min-height: 60px;
+  border-radius: var(--dsw-radius-sm, 8px);
+}
+
+.dsh-ui .dsh-textarea-lg.arco-textarea {
+  font-size: 15px;
+  line-height: 24px;
+  padding: 10px 14px;
+  min-height: 96px;
+  border-radius: var(--dsw-radius-lg, 16px);
+}
+
+/* ── 选择器 ─────────────────────────────────────────────────────── */
+.dsh-ui .arco-select-view,
+.dsh-ui .arco-select-view-single {
+  font-family: inherit;
+  font-size: 14px;
+  border-radius: var(--dsw-radius-md, 12px);
+}
+
+.dsh-ui .arco-select-size-default .arco-select-view {
+  height: 32px;
+}
+
+.dsh-ui .arco-select-size-small .arco-select-view {
+  height: 28px;
+  font-size: 12px;
+  border-radius: var(--dsw-radius-sm, 8px);
+}
+
+.dsh-ui .arco-select-popup,
+.dsh-ui .arco-select-dropdown {
+  border-radius: var(--dsw-radius-lg, 16px);
+  padding: 4px;
+}
+
+.dsh-ui .arco-select-option {
+  border-radius: var(--dsw-radius-sm, 8px);
+  min-height: 32px;
+  line-height: 22px;
+  font-size: 14px;
+}
+
+.dsh-ui .arco-select-option-hover {
+  background-color: var(--dsw-alias-interactive-bg-hover);
+}
+
+.dsh-ui .arco-select-option-selected {
+  background-color: var(--dsw-alias-button-ghost-active-fill);
+  color: var(--dsw-alias-label-primary);
+  font-weight: 500;
+}
+
+/* ── 开关 ───────────────────────────────────────────────────────── */
+.dsh-ui .arco-switch {
+  min-width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  corner-shape: round;
+  background-color: var(--dsw-alias-border-l3);
+}
+
+.dsh-ui .arco-switch-checked {
+  background-color: var(--dsw-alias-brand-primary);
+}
+
+.dsh-ui .arco-switch-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  corner-shape: round;
+  background-color: var(--dsw-alias-switch-thumb);
+  top: 2px;
+  left: 2px;
+}
+
+.dsh-ui .arco-switch-checked .arco-switch-dot {
+  background-color: var(--dsw-alias-label-primary-foreground);
+  left: calc(100% - 18px);
+}
+
+.dsh-ui .arco-switch[disabled] {
+  opacity: 0.4;
+}
+
+/* ── 复选框与单选框 ─────────────────────────────────────────────── */
+.dsh-ui .arco-checkbox,
+.dsh-ui .arco-radio {
+  font-size: 14px;
+  line-height: 20px;
+  padding-left: 24px;
+}
+
+.dsh-ui .arco-checkbox-mask,
+.dsh-ui .arco-radio-mask {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--dsw-radius-xs, 4px);
+  border-width: 1px;
+  border-color: var(--dsw-alias-border-l4);
+  background-color: transparent;
+}
+
+.dsh-ui .arco-radio-mask {
+  border-radius: 50%;
+  corner-shape: round;
+}
+
+.dsh-ui .arco-checkbox-checked .arco-checkbox-mask,
+.dsh-ui .arco-radio-checked .arco-radio-mask {
+  background-color: var(--dsw-alias-brand-primary);
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.dsh-ui .arco-checkbox-checked .arco-checkbox-mask-icon {
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+/* Arco 的圆点是绝对定位在左上角再缩放；mask 尺寸被改大后必须重新居中。 */
+.dsh-ui .arco-radio-mask::after {
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  border-radius: 50%;
+  transition: transform var(--ds-transition-duration-fast, 0.15s) var(--ds-ease-in-out, ease-out);
+}
+
+.dsh-ui .arco-radio-checked .arco-radio-mask::after {
+  transform: translate(-50%, -50%) scale(1);
+  background-color: var(--dsw-alias-label-primary-foreground);
+}
+
+/* ── 数字输入与滑块 ─────────────────────────────────────────────── */
+.dsh-ui .arco-input-number-step-button {
+  border-color: transparent;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* Arco 的 road 是 12px 高的点击热区，轨道本身画在伪元素上；给 road 上色
+   会得到一条粗灰带，因此只给轨道和已完成段上色。 */
+.dsh-ui .arco-slider-road {
+  background-color: transparent;
+}
+
+.dsh-ui .arco-slider-road::before {
+  height: 4px;
+  border-radius: 999px;
+  background-color: var(--dsw-alias-border-l2);
+}
+
+.dsh-ui .arco-slider-bar {
+  height: 4px;
+  top: calc(50% - 2px);
+  transform: none;
+  border-radius: 999px;
+  background-color: var(--dsw-alias-brand-primary);
+}
+
+/* Arco 把可见手柄画在手柄元素的伪元素上，外层定位盒子与轨道同为 12px 高，
+   因此只需调整伪元素本身的尺寸与描边。 */
+.dsh-ui .arco-slider-button::after {
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  top: -1px;
+  left: -1px;
+  border: 2px solid var(--dsw-alias-brand-primary);
+  border-radius: 50%;
+  background-color: var(--dsw-alias-bg-layer-1);
+  box-shadow: var(--dsw-elevation-soft);
+  transition: transform var(--ds-transition-duration-fast, 0.15s) var(--ds-ease-in-out, ease-out);
+}
+
+.dsh-ui .arco-slider-button:hover::after,
+.dsh-ui .arco-slider-button.arco-slider-button-active::after {
+  transform: none;
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: var(--dsw-elevation-soft);
+}
+
+.dsh-ui .arco-slider-button:focus-visible {
+  outline: none;
+}
+
+.dsh-ui .arco-slider-button:focus-visible::after {
+  box-shadow: 0 0 0 2px var(--dsw-alias-state-business-primary);
+}
+
+/* ── 表单 ───────────────────────────────────────────────────────── */
+.dsh-ui .arco-form-label-item > label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.dsh-ui .arco-form-item-message {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.dsh-ui .arco-form-item-status-error .arco-input,
+.dsh-ui .arco-form-item-status-error .arco-textarea,
+.dsh-ui .arco-form-item-status-error .arco-select-view {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+/* ── 上传 ───────────────────────────────────────────────────────── */
+.dsh-ui .arco-upload-trigger,
+.dsh-ui .arco-upload-drag {
+  border-radius: var(--dsw-radius-lg, 16px);
+  border-color: var(--dsw-alias-border-l3);
+  background-color: var(--dsw-alias-bg-layer-1);
+}
+
+.dsh-ui .arco-upload-drag:hover {
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+/* 减少动效偏好下关闭过渡 */
+@media (prefers-reduced-motion: reduce) {
+  .dsh-ui .arco-btn,
+  .dsh-ui .arco-switch-dot,
+  .dsh-ui .arco-slider-btn {
+    transition: none;
+  }
+}
+`
+
+/**
+ * 注入基础控件样式。幂等，可在任意控件首次渲染时调用。
+ *
+ * @returns 释放函数。
+ */
+export function injectBasicStyles(): () => void {
+  return injectUiStyle('basic/controls.css', BASIC_CSS)
+}

package/src/basic/toggle.tsx

@@ -0,0 +1,116 @@
+/**
+ * 开关类控件：复选框、单选框、开关。
+ *
+ * 三者都沿用 Arco 的受控与非受控语义，因此 `checked` / `defaultChecked` /
+ * `onChange` 的行为与原生表单一致。勾选状态的配色由桥接样式表改指 DSH 的
+ * 品牌色令牌。
+ *
+ * @module @dsh-plugin/dsh-ui-components/basic/toggle
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { injectBasicStyles } from './styles.js'
+
+/** {@link Checkbox} 的 props。 */
+export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Checkbox>, 'children'> & {
+  /** 勾选框右侧的文字。 */
+  label?: React.ReactNode
+}
+
+/**
+ * 一个复选框。
+ *
+ * @param props - 见 {@link CheckboxProps}。
+ * @returns 复选框元素。
+ */
+export function Checkbox({ label, ...rest }: CheckboxProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Checkbox {...rest}>{label}</Arco.Checkbox>
+}
+
+/** {@link CheckboxGroup} 的 props。 */
+export type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof Arco.Checkbox.Group>
+
+/**
+ * 一组复选框。
+ *
+ * @param props - 见 {@link CheckboxGroupProps}。
+ * @returns 复选框组元素。
+ */
+export function CheckboxGroup(props: CheckboxGroupProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Checkbox.Group {...props} />
+}
+
+/** {@link Radio} 的 props。 */
+export type RadioProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Radio>, 'children'> & {
+  /** 单选框右侧的文字。 */
+  label?: React.ReactNode
+}
+
+/**
+ * 一个单选框。
+ *
+ * @param props - 见 {@link RadioProps}。
+ * @returns 单选框元素。
+ */
+export function Radio({ label, ...rest }: RadioProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Radio {...rest}>{label}</Arco.Radio>
+}
+
+/** {@link RadioGroup} 的 props。 */
+export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof Arco.Radio.Group>
+
+/**
+ * 一组单选框，`onChange` 回调选中的 value。
+ *
+ * @param props - 见 {@link RadioGroupProps}。
+ * @returns 单选框组元素。
+ */
+export function RadioGroup(props: RadioGroupProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Radio.Group {...props} />
+}
+
+/** {@link Switch} 的 props。 */
+export type SwitchProps = React.ComponentPropsWithoutRef<typeof Arco.Switch>
+
+/**
+ * 一个开关，用于即时生效的设置项。
+ *
+ * @param props - 见 {@link SwitchProps}。
+ * @returns 开关元素。
+ */
+export function Switch(props: SwitchProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Switch {...props} />
+}
+
+/** {@link Slider} 的 props。 */
+export type SliderProps = React.ComponentPropsWithoutRef<typeof Arco.Slider>
+
+/**
+ * 一个滑块。
+ *
+ * @param props - 见 {@link SliderProps}。
+ * @returns 滑块元素。
+ */
+export function Slider(props: SliderProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Slider {...props} />
+}
+
+/** {@link Rate} 的 props。 */
+export type RateProps = React.ComponentPropsWithoutRef<typeof Arco.Rate>
+
+/**
+ * 一个评分控件。
+ *
+ * @param props - 见 {@link RateProps}。
+ * @returns 评分元素。
+ */
+export function Rate(props: RateProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Rate {...props} />
+}

package/src/composites/data-view.tsx

@@ -0,0 +1,189 @@
+/**
+ * JSON 树与代码块外壳。
+ *
+ * `JsonTree` 用于只读查看工具入参与结果，配色走宿主自己的 JSON 配色令牌；
+ * `CodeBlockShell` 提供语言标签、右侧操作区与等宽内容区，供插件包裹自己的
+ * 高亮结果。
+ *
+ * @module @dsh-plugin/dsh-ui-components/composites/data-view
+ */
+import * as React from 'react'
+import { cx } from '../foundation/style.js'
+import { Icon } from '../foundation/icons.js'
+import { injectCompositeStyles } from './styles.js'
+
+/** {@link JsonTree} 的 props。 */
+export interface JsonTreeProps {
+  /** 要展示的值，可以是任意可 JSON 化的数据。 */
+  value: unknown
+  /** 根节点的初始展开状态，默认展开。 */
+  defaultExpanded?: boolean
+  /** 追加类名。 */
+  className?: string
+}
+
+/** 一个值的渲染种类。 */
+type JsonKind = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null'
+
+/**
+ * 判断一个值的渲染种类。
+ *
+ * @param value - 任意值。
+ * @returns 渲染种类。
+ */
+function kindOf(value: unknown): JsonKind {
+  if (value === null) return 'null'
+  if (Array.isArray(value)) return 'array'
+  const type = typeof value
+  if (type === 'object') return 'object'
+  if (type === 'number') return 'number'
+  if (type === 'boolean') return 'boolean'
+  return 'string'
+}
+
+/** 一个节点。 */
+interface JsonNodeProps {
+  /** 键名；根节点省略。 */
+  name?: string
+  /** 值。 */
+  value: unknown
+  /** 是否是最后一个同级节点，决定尾逗号。 */
+  last: boolean
+  /** 初始是否展开。 */
+  defaultExpanded: boolean
+  /** 缩进层级，仅用于渲染。 */
+  depth: number
+}
+
+/**
+ * 渲染一个 JSON 节点。
+ *
+ * @param props - 见 {@link JsonNodeProps}。
+ * @returns 节点元素。
+ */
+function JsonNode({ name, value, last, defaultExpanded, depth }: JsonNodeProps): React.ReactElement {
+  const kind = kindOf(value)
+  const expandable = kind === 'object' || kind === 'array'
+  const [expanded, setExpanded] = React.useState(defaultExpanded || depth < 1)
+  const suffix = last ? '' : ','
+  const keyPart = name === undefined ? null : <span className="dsh-json-tree__key">{name}: </span>
+
+  if (!expandable) {
+    const text = kind === 'string' ? JSON.stringify(value) : String(value)
+    const className =
+      kind === 'string'
+        ? 'dsh-json-tree__string'
+        : kind === 'number'
+          ? 'dsh-json-tree__number'
+          : 'dsh-json-tree__keyword'
+    return (
+      <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
+        <span style={{ width: 14, flex: 'none' }} />
+        {keyPart}
+        <span className={className}>{text}</span>
+        <span className="dsh-json-tree__punct">{suffix}</span>
+      </div>
+    )
+  }
+
+  const entries = kind === 'array'
+    ? (value as unknown[]).map((item, index) => [String(index), item] as const)
+    : Object.entries(value as Record<string, unknown>)
+  const open = kind === 'array' ? '[' : '{'
+  const close = kind === 'array' ? ']' : '}'
+
+  return (
+    <div>
+      <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
+        <button
+          type="button"
+          className="dsh-json-tree__toggle"
+          aria-expanded={expanded}
+          aria-label={expanded ? '收起' : '展开'}
+          onClick={() => setExpanded(previous => !previous)}
+        >
+          <Icon name={expanded ? 'ChevronDown' : 'ChevronRight'} size={10} />
+        </button>
+        {keyPart}
+        <span className="dsh-json-tree__punct">{open}</span>
+        {expanded ? null : (
+          <>
+            <span className="dsh-json-tree__summary">{` ${entries.length} 项 `}</span>
+            <span className="dsh-json-tree__punct">{close}{suffix}</span>
+          </>
+        )}
+      </div>
+      {expanded ? (
+        <>
+          <div className="dsh-json-tree__children">
+            {entries.map(([key, item], index) => (
+              <JsonNode
+                key={key}
+                name={kind === 'array' ? undefined : key}
+                value={item}
+                last={index === entries.length - 1}
+                defaultExpanded={defaultExpanded}
+                depth={depth + 1}
+              />
+            ))}
+          </div>
+          {/* 闭合括号属于当前层，必须与开括号同级缩进；放进子容器会多缩一层。 */}
+          <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
+            <span style={{ width: 14, flex: 'none' }} />
+            <span className="dsh-json-tree__punct">{close}{suffix}</span>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * 只读 JSON 树。
+ *
+ * @param props - 见 {@link JsonTreeProps}。
+ * @returns JSON 树元素。
+ */
+export function JsonTree({ value, defaultExpanded = false, className }: JsonTreeProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <div className={cx('dsh-json-tree', className)}>
+      <JsonNode value={value} last defaultExpanded={defaultExpanded} depth={0} />
+    </div>
+  )
+}
+
+/** {@link CodeBlockShell} 的 props。 */
+export interface CodeBlockShellProps {
+  /** 语言标签，显示在横幅左侧。 */
+  language?: string
+  /** 横幅右侧的操作。 */
+  actions?: React.ReactNode
+  /** 代码内容，通常是 `<pre>` 或高亮后的节点。 */
+  children?: React.ReactNode
+  /** 追加类名。 */
+  className?: string
+}
+
+/**
+ * 代码块外壳：横幅加等宽内容区。
+ *
+ * @param props - 见 {@link CodeBlockShellProps}。
+ * @returns 代码块元素。
+ */
+export function CodeBlockShell({ language, actions, children, className }: CodeBlockShellProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <div className={cx('dsh-code-shell', className)}>
+      {language === undefined && actions === undefined
+        ? null
+        : (
+          <div className="dsh-code-shell__banner">
+            <span className="dsh-code-shell__lang">{language}</span>
+            {actions === undefined ? null : <span className="dsh-code-shell__actions">{actions}</span>}
+          </div>
+        )}
+      <div className="dsh-code-shell__body">{children}</div>
+    </div>
+  )
+}