@dbcdk/react-components 0.0.2 → 0.0.4

package/dist/components/filter-field/FilterField.cjs

@@ -0,0 +1,174 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var Popover = require('../popover/Popover');
+var Input = require('../input/Input');
+var Menu = require('../menu/Menu');
+var MultiSelect = require('../multi-select/MultiSelect');
+var Select = require('../select/Select');
+var styles = require('./FilterField.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const LABELS = {
+  is: "is",
+  isNot: "not",
+  contains: "contains",
+  notContains: "not contain",
+  startsWith: "starts with",
+  endsWith: "ends with",
+  gt: ">",
+  lt: "<",
+  gte: "\u2265",
+  lte: "\u2264",
+  in: "",
+  notIn: "not in",
+  isEmpty: "empty",
+  isNotEmpty: "not empty"
+};
+const DEFAULT_TEXT_OPERATORS = [
+  "is",
+  "isNot",
+  "contains",
+  "notContains",
+  "startsWith",
+  "endsWith",
+  "isEmpty",
+  "isNotEmpty"
+];
+const NUMBER_OPERATORS = [
+  "is",
+  "isNot",
+  "gt",
+  "lt",
+  "gte",
+  "lte",
+  "isEmpty",
+  "isNotEmpty"
+];
+function OperatorDropdown({
+  value,
+  onChange,
+  operators,
+  size = "sm",
+  disabled
+}) {
+  const popRef = react.useRef(null);
+  const [activeIndex, setActiveIndex] = react.useState(() => Math.max(0, operators.indexOf(value)));
+  const handleSelect = (op) => {
+    var _a;
+    onChange(op);
+    setActiveIndex(operators.indexOf(op));
+    (_a = popRef.current) == null ? void 0 : _a.close();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      ref: popRef,
+      minWidth: "220px",
+      trigger: (toggle, icon) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          disabled,
+          "aria-label": "Change operator",
+          className: `${styles__default.default.operatorTrigger} ${styles__default.default[size]}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.operatorText, children: LABELS[value] }),
+            icon
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: operators.map((op) => {
+        const selected = op === value;
+        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selected, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => handleSelect(op), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }) : null }),
+          LABELS[op]
+        ] }) }, op);
+      }) })
+    }
+  );
+}
+function FilterField({
+  field,
+  control,
+  operator,
+  onChange,
+  operators,
+  options = [],
+  single = true,
+  value = control === "select" ? single ? null : [] : "",
+  size = "sm",
+  label,
+  placeholder = "Type value\u2026",
+  disabled,
+  ...inputProps
+}) {
+  const ops = react.useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+  const [op, setOp] = react.useState(operator);
+  const [val, setVal] = react.useState(value);
+  react.useEffect(() => {
+    onChange({ field, operator: op, value: val });
+  }, [field, op, val, onChange]);
+  const emitValue = react.useCallback((next) => setVal(next), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ` ${styles__default.default.filterField} ${styles__default.default[size]}`, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.label} ${styles__default.default[size]}`, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OperatorDropdown,
+      {
+        value: op,
+        onChange: setOp,
+        operators: ops,
+        size,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${control === "input" ? "" : styles__default.default.valueWrapper}`, children: control === "input" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Input.Input,
+      {
+        ...inputProps,
+        value: val != null ? val : "",
+        onChange: (e) => emitValue(e.currentTarget.value),
+        inputSize: size,
+        placeholder,
+        minWidth: "120px",
+        disabled,
+        onClear: () => emitValue("")
+      }
+    ) : single ? /* @__PURE__ */ jsxRuntime.jsx(
+      Select.Select,
+      {
+        options,
+        selectedValue: val != null ? val : null,
+        onChange: (v) => emitValue(v),
+        placeholder,
+        size,
+        variant: "inline",
+        onClear: () => emitValue("")
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      MultiSelect.MultiSelect,
+      {
+        options,
+        size,
+        variant: "inline",
+        selectedValues: Array.isArray(val) ? val : [],
+        onChange: (v) => {
+          const current = new Set(Array.isArray(val) ? val : []);
+          current.has(v) ? current.delete(v) : current.add(v);
+          emitValue(Array.from(current));
+        },
+        onClear: () => emitValue([]),
+        children: placeholder
+      }
+    ) })
+  ] });
+}
+
+exports.FilterField = FilterField;
+exports.NUMBER_OPERATORS = NUMBER_OPERATORS;

package/dist/components/filter-field/FilterField.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export type Operator = 'is' | 'isNot' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'in' | 'notIn' | 'isEmpty' | 'isNotEmpty';
+export interface FilterEvent {
+    field: string;
+    operator: Operator;
+    value: string | string[] | null;
+}
+export interface MultiselectOption {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'value'> {
+    field: string;
+    control: 'input' | 'select';
+    operator: Operator;
+    onChange: (e: FilterEvent) => void;
+    operators?: Operator[];
+    options?: MultiselectOption[];
+    single?: boolean;
+    value?: string | string[] | null;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare const NUMBER_OPERATORS: Operator[];
+export declare function FilterField({ field, control, operator, onChange, operators, options, single, value, size, label, placeholder, disabled, ...inputProps }: FilterFieldProps): React.ReactElement;

package/dist/components/filter-field/FilterField.js

@@ -0,0 +1,167 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import { Check } from 'lucide-react';
+import { Popover } from '../popover/Popover';
+import { Input } from '../input/Input';
+import { Menu } from '../menu/Menu';
+import { MultiSelect } from '../multi-select/MultiSelect';
+import { Select } from '../select/Select';
+import styles from './FilterField.module.css';
+
+const LABELS = {
+  is: "is",
+  isNot: "not",
+  contains: "contains",
+  notContains: "not contain",
+  startsWith: "starts with",
+  endsWith: "ends with",
+  gt: ">",
+  lt: "<",
+  gte: "\u2265",
+  lte: "\u2264",
+  in: "",
+  notIn: "not in",
+  isEmpty: "empty",
+  isNotEmpty: "not empty"
+};
+const DEFAULT_TEXT_OPERATORS = [
+  "is",
+  "isNot",
+  "contains",
+  "notContains",
+  "startsWith",
+  "endsWith",
+  "isEmpty",
+  "isNotEmpty"
+];
+const NUMBER_OPERATORS = [
+  "is",
+  "isNot",
+  "gt",
+  "lt",
+  "gte",
+  "lte",
+  "isEmpty",
+  "isNotEmpty"
+];
+function OperatorDropdown({
+  value,
+  onChange,
+  operators,
+  size = "sm",
+  disabled
+}) {
+  const popRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
+  const handleSelect = (op) => {
+    var _a;
+    onChange(op);
+    setActiveIndex(operators.indexOf(op));
+    (_a = popRef.current) == null ? void 0 : _a.close();
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref: popRef,
+      minWidth: "220px",
+      trigger: (toggle, icon) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          disabled,
+          "aria-label": "Change operator",
+          className: `${styles.operatorTrigger} ${styles[size]}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.operatorText, children: LABELS[value] }),
+            icon
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsx(Menu, { children: operators.map((op) => {
+        const selected = op === value;
+        return /* @__PURE__ */ jsx(Menu.Item, { active: selected, children: /* @__PURE__ */ jsxs("button", { onClick: () => handleSelect(op), children: [
+          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsx(Check, { size: 16 }) : null }),
+          LABELS[op]
+        ] }) }, op);
+      }) })
+    }
+  );
+}
+function FilterField({
+  field,
+  control,
+  operator,
+  onChange,
+  operators,
+  options = [],
+  single = true,
+  value = control === "select" ? single ? null : [] : "",
+  size = "sm",
+  label,
+  placeholder = "Type value\u2026",
+  disabled,
+  ...inputProps
+}) {
+  const ops = useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+  const [op, setOp] = useState(operator);
+  const [val, setVal] = useState(value);
+  useEffect(() => {
+    onChange({ field, operator: op, value: val });
+  }, [field, op, val, onChange]);
+  const emitValue = useCallback((next) => setVal(next), []);
+  return /* @__PURE__ */ jsxs("div", { className: ` ${styles.filterField} ${styles[size]}`, children: [
+    label ? /* @__PURE__ */ jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null,
+    /* @__PURE__ */ jsx(
+      OperatorDropdown,
+      {
+        value: op,
+        onChange: setOp,
+        operators: ops,
+        size,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: `${control === "input" ? "" : styles.valueWrapper}`, children: control === "input" ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...inputProps,
+        value: val != null ? val : "",
+        onChange: (e) => emitValue(e.currentTarget.value),
+        inputSize: size,
+        placeholder,
+        minWidth: "120px",
+        disabled,
+        onClear: () => emitValue("")
+      }
+    ) : single ? /* @__PURE__ */ jsx(
+      Select,
+      {
+        options,
+        selectedValue: val != null ? val : null,
+        onChange: (v) => emitValue(v),
+        placeholder,
+        size,
+        variant: "inline",
+        onClear: () => emitValue("")
+      }
+    ) : /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        options,
+        size,
+        variant: "inline",
+        selectedValues: Array.isArray(val) ? val : [],
+        onChange: (v) => {
+          const current = new Set(Array.isArray(val) ? val : []);
+          current.has(v) ? current.delete(v) : current.add(v);
+          emitValue(Array.from(current));
+        },
+        onClear: () => emitValue([]),
+        children: placeholder
+      }
+    ) })
+  ] });
+}
+
+export { FilterField, NUMBER_OPERATORS };

package/dist/components/filter-field/FilterField.module.css

@@ -0,0 +1,109 @@
+.filterField {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family);
+  background: var(--color-surface);
+  color: var(--color-text);
+
+  border: var(--border-width-thin) solid var(--color-border);
+  border-radius: var(--border-radius-default);
+
+  transition:
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.filterField:focus-within {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}
+
+.filterField.sm {
+  min-block-size: calc(var(--component-size-sm) + var(--density));
+}
+.filterField.md {
+  min-block-size: calc(var(--component-size-md) + var(--density));
+}
+
+.filterField .label {
+  display: inline-flex;
+  align-items: center;
+
+  padding-block: calc(var(--spacing-2xs) + var(--density)); /* ~2px + density */
+  padding-inline: var(--spacing-sm); /* 12px */
+
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.filterField .operatorTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-inline: var(--spacing-sm);
+
+  background: var(--opac-bg-default);
+  color: var(--color-text);
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+.filterField .operatorTrigger:hover {
+  background: var(--opac-bg-dark);
+}
+.filterField .operatorTrigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.filterField .operatorTrigger:disabled,
+.filterField .operatorTrigger[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: var(--color-disabled-text);
+  background: var(--color-disabled-bg);
+}
+
+.filterField .operatorText {
+  white-space: nowrap;
+}
+
+.filterField .valueWrapper {
+  display: inline-flex;
+  align-items: center;
+
+  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-inline: var(--spacing-sm);
+}
+
+.filterField input {
+  appearance: none;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+
+  inline-size: auto;
+  min-inline-size: 10ch;
+
+  block-size: 100%;
+}
+
+.filterField input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.filterField input:disabled {
+  color: var(--color-disabled-text);
+  cursor: not-allowed;
+}

package/dist/components/headline/Headline.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Headline.module.css');
+var severity = require('../../constants/severity');
+var Icon = require('../icon/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Headline({
+  size = 2,
+  marker,
+  disableMargin,
+  children,
+  severity: severity$1,
+  weight = 600,
+  subHeadline,
+  addition,
+  icon
+}) {
+  const Tag = `h${size}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Tag,
+        {
+          style: {
+            "--font-weight": weight,
+            "--marker-color": severity$1 ? severity.SeverityBgColor[severity$1] : void 0
+          },
+          className: ` ${styles__default.default.headline} ${disableMargin ? styles__default.default.noMargin : void 0} ${marker ? `${styles__default.default.marker} ` : void 0}`,
+          children: [
+            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) : null,
+            children
+          ]
+        }
+      ),
+      addition
+    ] }),
+    subHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.subHeadline, children: subHeadline })
+  ] });
+}
+
+exports.Headline = Headline;

package/dist/components/headline/Headline.d.ts

@@ -0,0 +1,14 @@
+import React, { JSX, PropsWithChildren } from 'react';
+import { Severity } from '../../constants/severity.types';
+interface HeadlineProps extends React.AriaAttributes {
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    marker?: boolean;
+    disableMargin?: boolean;
+    severity?: Severity;
+    weight?: 500 | 600 | 700;
+    subHeadline?: string | JSX.Element;
+    addition?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export {};

package/dist/components/headline/Headline.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import styles from './Headline.module.css';
+import { SeverityBgColor } from '../../constants/severity';
+import { Icon } from '../icon/Icon';
+
+function Headline({
+  size = 2,
+  marker,
+  disableMargin,
+  children,
+  severity,
+  weight = 600,
+  subHeadline,
+  addition,
+  icon
+}) {
+  const Tag = `h${size}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    " ",
+    /* @__PURE__ */ jsxs("div", { className: styles.headlineContainer, children: [
+      /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          style: {
+            "--font-weight": weight,
+            "--marker-color": severity ? SeverityBgColor[severity] : void 0
+          },
+          className: ` ${styles.headline} ${disableMargin ? styles.noMargin : void 0} ${marker ? `${styles.marker} ` : void 0}`,
+          children: [
+            icon || severity && !marker ? /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) : null,
+            children
+          ]
+        }
+      ),
+      addition
+    ] }),
+    subHeadline && /* @__PURE__ */ jsx("div", { className: styles.subHeadline, children: subHeadline })
+  ] });
+}
+
+export { Headline };

package/dist/components/headline/Headline.module.css

@@ -0,0 +1,35 @@
+.headlineContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex-wrap: wrap;
+}
+
+.headline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-tight);
+  color: var(--color-text);
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.noMargin {
+  margin: 0;
+}
+
+.marker {
+  border-inline-start: var(--border-width-thick) solid var(--marker-color);
+  padding-inline-start: var(--spacing-sm);
+  border-start-start-radius: var(--border-radius-default);
+  border-end-start-radius: var(--border-radius-default);
+}
+
+.subHeadline {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-md);
+  margin-block-start: calc(var(--spacing-2xs) * -1);
+  line-height: var(--line-height-normal);
+}

package/dist/components/icon/Icon.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var styles = require('./Icon.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const SeverityIcon = {
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
+  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
+};
+function Icon({ severity, label, customIcon }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+  ] });
+}
+
+exports.Icon = Icon;
+exports.SeverityIcon = SeverityIcon;

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,9 @@
+import { Severity } from '@/constants/severity.types';
+export declare const SeverityIcon: Record<Severity, React.ReactNode>;
+interface IconProps {
+    severity?: Severity;
+    customIcon?: React.ReactNode;
+    label?: string;
+}
+export declare function Icon({ severity, label, customIcon }: IconProps): JSX.Element;
+export {};

package/dist/components/icon/Icon.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import styles from './Icon.module.css';
+
+const SeverityIcon = {
+  neutral: /* @__PURE__ */ jsx(CircleCheck, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  error: /* @__PURE__ */ jsx(CircleX, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(CircleAlert, {}),
+  brand: /* @__PURE__ */ jsx(Building2, {})
+};
+function Icon({ severity, label, customIcon }) {
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
+    label && /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+}
+
+export { Icon, SeverityIcon };