@temp-spotwork/ui 1.4.8 → 1.6.0

package/dist/components/atoms/form/textarea/RichTextarea.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RichTextarea } from './rich-textarea';
+
+declare const meta: Meta<typeof RichTextarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const WithInitialFormatting: Story;
+export declare const ErrorState: Story;
+export declare const WarningState: Story;
+export declare const DisabledState: Story;

package/dist/components/atoms/form/textarea/RichTextarea.stories.js

@@ -0,0 +1,67 @@
+import n, { useState as l } from "react";
+import { RichTextarea as a } from "./rich-textarea.js";
+const c = {
+  title: "@spotwork-ui/RichTextarea",
+  component: a,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  args: {
+    value: "",
+    label: "Description",
+    placeholder: "Add content description",
+    helperText: "Use the toolbar to format text",
+    rows: 6,
+    onChange: () => {
+    }
+  }
+}, e = {
+  render: (t) => {
+    const [o, i] = l(t.value ?? "");
+    return n.createElement(
+      "div",
+      { style: { width: 520 } },
+      n.createElement(a, {
+        ...t,
+        value: o,
+        onChange: (r) => {
+          i(r), t.onChange(r);
+        }
+      })
+    );
+  }
+}, p = {
+  args: {
+    value: "<p><strong>Highlights</strong></p><ul><li>Rich text content</li><li><em>Italic details</em></li></ul>",
+    helperText: "Initial HTML content is supported."
+  },
+  render: e.render
+}, u = {
+  args: {
+    error: !0,
+    helperText: "Description is required"
+  },
+  render: e.render
+}, h = {
+  args: {
+    warning: !0,
+    helperText: "Description is getting too long"
+  },
+  render: e.render
+}, g = {
+  args: {
+    disabled: !0,
+    value: "<p>This content is read-only</p>",
+    helperText: "Disabled inputs cannot be edited"
+  },
+  render: e.render
+};
+export {
+  g as DisabledState,
+  u as ErrorState,
+  e as Primary,
+  h as WarningState,
+  p as WithInitialFormatting,
+  c as default
+};

package/dist/components/atoms/form/textarea/Textarea.stories.d.ts

@@ -5,3 +5,7 @@ declare const meta: Meta<typeof Textarea>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const WithInitialFormatting: Story;
+export declare const ErrorState: Story;
+export declare const WarningState: Story;
+export declare const DisabledState: Story;

package/dist/components/atoms/form/textarea/Textarea.stories.js

@@ -1,22 +1,67 @@
-import { f as o } from "../../../../index-CktvVE7I.js";
-import { Textarea as a } from "./textarea.js";
-const e = {
+import a, { useState as s } from "react";
+import { Textarea as n } from "./textarea.js";
+const c = {
   title: "@spotwork-ui/Textarea",
-  component: a,
+  component: n,
   parameters: {
     layout: "centered"
   },
   tags: ["autodocs"],
-  argTypes: {
-    backgroundColor: { control: "color" }
-  },
-  args: { onClick: o() }
-}, s = {
   args: {
-    label: "Textarea"
+    value: "",
+    label: "Description",
+    placeholder: "Add content description",
+    helperText: "Add helpful details",
+    rows: 6,
+    onChange: () => {
+    }
+  }
+}, e = {
+  render: (t) => {
+    const [o, i] = s(t.value ?? "");
+    return a.createElement(
+      "div",
+      { style: { width: 520 } },
+      a.createElement(n, {
+        ...t,
+        value: o,
+        onChange: (r) => {
+          i(r), t.onChange(r);
+        }
+      })
+    );
   }
+}, p = {
+  args: {
+    value: "This starts with pre-filled content.",
+    helperText: "Textarea accepts plain text values."
+  },
+  render: e.render
+}, u = {
+  args: {
+    error: !0,
+    helperText: "Description is required"
+  },
+  render: e.render
+}, h = {
+  args: {
+    warning: !0,
+    helperText: "Description is getting too long"
+  },
+  render: e.render
+}, g = {
+  args: {
+    disabled: !0,
+    value: "<p>This content is read-only</p>",
+    helperText: "Disabled inputs cannot be edited"
+  },
+  render: e.render
 };
 export {
-  s as Primary,
-  e as default
+  g as DisabledState,
+  u as ErrorState,
+  e as Primary,
+  h as WarningState,
+  p as WithInitialFormatting,
+  c as default
 };

package/dist/components/atoms/form/textarea/index.d.ts

@@ -1,2 +1,4 @@
 export { Textarea } from './textarea';
 export type { TextareaProps } from './textarea';
+export { RichTextarea } from './rich-textarea';
+export type { RichTextareaProps } from './rich-textarea';

package/dist/components/atoms/form/textarea/index.js

@@ -1,4 +1,6 @@
 import { Textarea as a } from "./textarea.js";
+import { RichTextarea as t } from "./rich-textarea.js";
 export {
+  t as RichTextarea,
   a as Textarea
 };

package/dist/components/atoms/form/textarea/rich-textarea.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+
+export type RichTextareaProps = {
+    /**
+     * HTML value for rich text content
+     */
+    value: string;
+    /**
+     * placeholder
+     */
+    placeholder?: string;
+    /**
+     * inital amount of rows wants for the textarea
+     */
+    rows?: number;
+    /**
+     * The inital amount of columns wanted for the textarea
+     */
+    cols?: number;
+    /**
+     * the hint text that is at the bottom of the component
+     */
+    helperText?: string;
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * variable to determine disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Returns editor content as HTML string
+     */
+    onChange: (value: string) => void;
+    /**
+     * The label that is placed at the top of the component
+     */
+    label?: string;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * optional?: autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare const RichTextarea: React.ForwardRefExoticComponent<RichTextareaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/form/textarea/rich-textarea.js

@@ -0,0 +1,275 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import R, { useState as L, useRef as A, useImperativeHandle as _, useEffect as w, useCallback as k } from "react";
+import { Icons as q } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { styles as O } from "./styles.js";
+import { c as p } from "../../../../index-fN7hCOo3.js";
+import { Typography as T } from "../../../styles/typography/typography.js";
+import { styleMap as E } from "../../../styles/typography/style.js";
+import { getLabelColor as D, getBorderClasses as j, getHelperTextColor as W } from "../utils-for-forms/state-functions.js";
+const d = ({
+  onClick: l,
+  active: c,
+  title: x,
+  children: u
+}) => /* @__PURE__ */ e(
+  "button",
+  {
+    type: "button",
+    title: x,
+    onMouseDown: (n) => {
+      n.preventDefault(), l();
+    },
+    style: {
+      width: 28,
+      height: 28,
+      border: "none",
+      borderRadius: 5,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 13,
+      fontFamily: "inherit",
+      background: c ? "#EEEDFE" : "transparent",
+      color: c ? "#534AB7" : "var(--color-text-secondary, #888)",
+      padding: 0,
+      flexShrink: 0
+    },
+    children: u
+  }
+), K = () => /* @__PURE__ */ e("b", { style: { fontWeight: 700, fontSize: 13 }, children: "B" }), G = () => /* @__PURE__ */ e("i", { style: { fontStyle: "italic", fontSize: 13 }, children: "I" }), J = () => /* @__PURE__ */ e("u", { style: { textDecoration: "underline", fontSize: 13 }, children: "U" }), P = () => /* @__PURE__ */ i("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ e("circle", { cx: "2", cy: "4", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "3", width: "8", height: "2", rx: "1", fill: "currentColor" }),
+  /* @__PURE__ */ e("circle", { cx: "2", cy: "9", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "8", width: "8", height: "2", rx: "1", fill: "currentColor" })
+] }), Q = () => /* @__PURE__ */ i("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ e("text", { x: "0", y: "6", fontSize: "6", fill: "currentColor", children: "1." }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "3", width: "8", height: "2", rx: "1", fill: "currentColor" }),
+  /* @__PURE__ */ e("text", { x: "0", y: "11", fontSize: "6", fill: "currentColor", children: "2." }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "8", width: "8", height: "2", rx: "1", fill: "currentColor" })
+] }), oe = R.forwardRef(
+  ({
+    value: l,
+    placeholder: c,
+    rows: x = 6,
+    helperText: u,
+    error: n = !1,
+    warning: f = !1,
+    disabled: t = !1,
+    label: H,
+    onChange: y,
+    onBlur: v,
+    autoFocus: g = !1
+  }, U) => {
+    const [C, b] = L(!1), [s, B] = L({
+      bold: !1,
+      italic: !1,
+      underline: !1,
+      insertUnorderedList: !1,
+      insertOrderedList: !1
+    }), o = A(null);
+    _(U, () => o.current, []);
+    const m = O(t), N = D(C, f, n, t), S = W(f, n, t), z = j(C, f, n, t);
+    w(() => {
+      const r = o.current;
+      r && r.innerHTML !== l && (r.innerHTML = l);
+    }, [l]), w(() => {
+      var r;
+      g && ((r = o.current) == null || r.focus());
+    }, [g]);
+    const h = k(() => {
+      B({
+        bold: document.queryCommandState("bold"),
+        italic: document.queryCommandState("italic"),
+        underline: document.queryCommandState("underline"),
+        insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+        insertOrderedList: document.queryCommandState("insertOrderedList")
+      });
+    }, []), a = k(
+      (r) => {
+        var I;
+        t || ((I = o.current) == null || I.focus(), document.execCommand(r, !1, void 0), h(), o.current && y(o.current.innerHTML));
+      },
+      [t, y, h]
+    ), F = x * 24, M = l.replace(/<br\s*\/?>/gi, "").trim().length === 0;
+    return /* @__PURE__ */ i("div", { className: m.container, children: [
+      /* @__PURE__ */ e(
+        T,
+        {
+          swStyle: 3,
+          "data-testid": "labelTextarea",
+          color: N,
+          children: H
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: p(m.subContainer), children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: p(z, "w-full self-stretch"),
+            style: { borderRadius: "var(--border-radius-md, 6px)", overflow: "hidden" },
+            children: [
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 2,
+                    padding: "6px 8px",
+                    borderBottom: "1px solid var(--color-border-tertiary, #d9d9d9)",
+                    background: "var(--color-background-secondary)",
+                    opacity: t ? 0.4 : 1,
+                    pointerEvents: t ? "none" : "auto"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Bold",
+                        active: s.bold,
+                        onClick: () => a("bold"),
+                        children: /* @__PURE__ */ e(K, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Italic",
+                        active: s.italic,
+                        onClick: () => a("italic"),
+                        children: /* @__PURE__ */ e(G, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Underline",
+                        active: s.underline,
+                        onClick: () => a("underline"),
+                        children: /* @__PURE__ */ e(J, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: 1,
+                          height: 18,
+                          background: "var(--color-border-tertiary)",
+                          margin: "0 4px",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Bullet list",
+                        active: s.insertUnorderedList,
+                        onClick: () => a("insertUnorderedList"),
+                        children: /* @__PURE__ */ e(P, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Numbered list",
+                        active: s.insertOrderedList,
+                        onClick: () => a("insertOrderedList"),
+                        children: /* @__PURE__ */ e(Q, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    position: "relative"
+                  },
+                  children: [
+                    M && c && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: p(E[5]),
+                        style: {
+                          position: "absolute",
+                          inset: "10px 12px auto 12px",
+                          color: "var(--color-text-tertiary)",
+                          pointerEvents: "none",
+                          lineHeight: 1.6
+                        },
+                        children: c
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        ref: o,
+                        contentEditable: !t,
+                        "data-testid": "textarea",
+                        suppressContentEditableWarning: !0,
+                        className: p(
+                          m.textarea,
+                          E[5],
+                          "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6"
+                        ),
+                        style: {
+                          minHeight: F,
+                          padding: "10px 12px",
+                          outline: "none",
+                          border: "none",
+                          boxSizing: "border-box",
+                          lineHeight: 1.6,
+                          cursor: t ? "not-allowed" : "text",
+                          opacity: t ? 0.5 : 1
+                        },
+                        onFocus: () => b(!0),
+                        onBlur: () => {
+                          b(!1), v == null || v();
+                        },
+                        onInput: (r) => {
+                          t || y(r.target.innerHTML);
+                        },
+                        onKeyUp: h,
+                        onMouseUp: h
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        u && /* @__PURE__ */ i("div", { className: m.helperContainer, children: [
+          (n || f) && /* @__PURE__ */ e(
+            q,
+            {
+              disabled: !0,
+              icon: n ? "AlertSmall" : "WarningSmall",
+              color: S,
+              id: "IconHintTextarea"
+            }
+          ),
+          /* @__PURE__ */ e(
+            T,
+            {
+              "data-testid": "hintTextarea",
+              color: S,
+              children: u,
+              swStyle: 1
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+export {
+  oe as RichTextarea
+};

package/dist/components/atoms/form/textarea/textarea.js

@@ -51,11 +51,7 @@ const J = A.forwardRef(
             onChange: (N) => {
               !e && v(N.target.value);
             },
-            className: f(
-              g,
-              o.textarea,
-              H[5]
-            ),
+            className: f(g, o.textarea, H[5]),
             value: d,
             placeholder: x,
             rows: h,

package/dist/components/atoms/icons/iconMap.d.ts

@@ -58,6 +58,12 @@ export declare const svgs: {
     Clock: ({ fill }: {
         fill: any;
     }) => import("react/jsx-runtime").JSX.Element;
+    CloudLightning: ({ fill }: {
+        fill: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+    cloudLightning: ({ fill }: {
+        fill: any;
+    }) => import("react/jsx-runtime").JSX.Element;
     CollapseSmall: ({ fill }: {
         fill: any;
     }) => import("react/jsx-runtime").JSX.Element;
@@ -234,6 +240,12 @@ export declare const svgs: {
     CrossSmall: ({ fill }: {
         fill: any;
     }) => import("react/jsx-runtime").JSX.Element;
+    CloudLightningSmall: ({ fill }: {
+        fill: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+    cloudLightningSmall: ({ fill }: {
+        fill: any;
+    }) => import("react/jsx-runtime").JSX.Element;
     CopyLarge: ({ fill }: {
         fill: any;
     }) => import("react/jsx-runtime").JSX.Element;