@kosmeo-ui/react 0.1.0

package/src/components/inputs/phoneInput/index.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { faCaretDown, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import { PropsWithSize } from "../../types.js";
+import Input from "../input/index.js";
+import "./styles.css";
+import {
+  AsYouType,
+  CountryCode,
+  getCountries,
+  getCountryCallingCode,
+  parsePhoneNumberFromString,
+} from "libphonenumber-js";
+
+interface PhoneInputProps extends PropsWithSize {
+  /** E.164 value (e.g. `+13093704188`) or empty string. */
+  value?: string;
+  /** Called with the new E.164 value (or empty when cleared). */
+  onChange: (value: string) => void;
+  /** ISO 3166-1 alpha-2 country code used when no `value` is set. */
+  defaultCountry?: CountryCode;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  error?: ReactNode;
+  helperText?: ReactNode;
+  id?: string;
+  autoFocus?: boolean;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+}
+
+const FAVORITES: CountryCode[] = [
+  "US",
+  "CA",
+  "GB",
+  "MX",
+  "AU",
+  "DE",
+  "FR",
+  "JP",
+];
+
+const flagEmoji = (cc: CountryCode): string =>
+  cc
+    .toUpperCase()
+    .split("")
+    .map((c) => String.fromCodePoint(127397 + c.charCodeAt(0)))
+    .join("");
+
+const regionNames =
+  typeof Intl !== "undefined" && "DisplayNames" in Intl
+    ? new Intl.DisplayNames(["en"], { type: "region" })
+    : null;
+
+const countryName = (cc: CountryCode): string => regionNames?.of(cc) ?? cc;
+
+const PhoneInput = (props: PhoneInputProps) => {
+  const {
+    value = "",
+    onChange,
+    defaultCountry = "US",
+    disabled,
+    placeholder,
+    size,
+    ...restProps
+  } = props;
+
+  const [country, setCountry] = useState<CountryCode>(defaultCountry);
+  const [display, setDisplay] = useState<string>("");
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const pickerRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const lastEmittedRef = useRef<string>("");
+
+  useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    if (!value) {
+      setDisplay("");
+      return;
+    }
+    const parsed = parsePhoneNumberFromString(value);
+    if (parsed?.country) {
+      setCountry(parsed.country);
+      setDisplay(parsed.formatNational());
+    } else {
+      const formatter = new AsYouType(country);
+      setDisplay(formatter.input(value));
+    }
+  }, [value, country]);
+
+  useEffect(() => {
+    if (pickerOpen) {
+      searchRef.current?.focus();
+    } else {
+      setSearch("");
+    }
+  }, [pickerOpen]);
+
+  useOutsideClick([pickerRef], () => setPickerOpen(false));
+
+  const emit = (nationalDigits: string, nextCountry: CountryCode) => {
+    if (!nationalDigits) {
+      lastEmittedRef.current = "";
+      onChange("");
+      return;
+    }
+    const e164 = `+${getCountryCallingCode(nextCountry)}${nationalDigits}`;
+    lastEmittedRef.current = e164;
+    onChange(e164);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    const formatter = new AsYouType(country);
+    const formatted = formatter.input(raw);
+    const nationalDigits = formatter.getNationalNumber();
+    setDisplay(formatted);
+    emit(nationalDigits, country);
+  };
+
+  const handleCountrySelect = (cc: CountryCode) => {
+    setCountry(cc);
+    setPickerOpen(false);
+    const digits = display.replace(/\D/g, "");
+    if (digits) {
+      const formatter = new AsYouType(cc);
+      const formatted = formatter.input(digits);
+      setDisplay(formatted);
+      emit(formatter.getNationalNumber(), cc);
+    } else {
+      emit("", cc);
+    }
+  };
+
+  const orderedCountries = useMemo<CountryCode[]>(() => {
+    const all = getCountries();
+    const favSet = new Set(FAVORITES);
+    const rest = all
+      .filter((c) => !favSet.has(c))
+      .sort((a, b) => countryName(a).localeCompare(countryName(b)));
+    return [...FAVORITES.filter((c) => all.includes(c)), ...rest];
+  }, []);
+
+  const filteredCountries = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return orderedCountries;
+    return orderedCountries.filter((cc) => {
+      const name = countryName(cc).toLowerCase();
+      const dial = getCountryCallingCode(cc);
+      return (
+        name.includes(q) ||
+        cc.toLowerCase().includes(q) ||
+        dial.includes(q.replace(/^\+/, ""))
+      );
+    });
+  }, [orderedCountries, search]);
+
+  const prefix = (
+    <div ref={pickerRef} className="k-phone-input-picker">
+      <button
+        type="button"
+        className="k-phone-input-picker-trigger"
+        onClick={() => !disabled && setPickerOpen((o) => !o)}
+        disabled={disabled}
+        aria-label={`Country: ${countryName(country)}`}
+        aria-expanded={pickerOpen}
+      >
+        <span className="k-phone-input-flag">{flagEmoji(country)}</span>
+        <span className="k-phone-input-dial">
+          +{getCountryCallingCode(country)}
+        </span>
+        <FontAwesomeIcon icon={faCaretDown} className="k-phone-input-caret" />
+      </button>
+      {pickerOpen && (
+        <div className="k-phone-input-panel">
+          <div className="k-phone-input-search">
+            <FontAwesomeIcon icon={faSearch} />
+            <input
+              ref={searchRef}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search country or code"
+            />
+          </div>
+          <ul className="k-phone-input-list" role="listbox">
+            {filteredCountries.map((cc) => (
+              <li key={cc}>
+                <button
+                  type="button"
+                  className={`k-phone-input-option ${
+                    cc === country ? "selected" : ""
+                  }`}
+                  onClick={() => handleCountrySelect(cc)}
+                  role="option"
+                  aria-selected={cc === country}
+                >
+                  <span className="k-phone-input-flag">{flagEmoji(cc)}</span>
+                  <span className="k-phone-input-name">{countryName(cc)}</span>
+                  <span className="k-phone-input-dial">
+                    +{getCountryCallingCode(cc)}
+                  </span>
+                </button>
+              </li>
+            ))}
+            {filteredCountries.length === 0 && (
+              <li className="k-phone-input-empty">No matches</li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <Input
+      {...restProps}
+      size={size}
+      type="tel"
+      value={display}
+      onChange={handleInputChange}
+      disabled={disabled}
+      placeholder={placeholder ?? "(555) 555-5555"}
+      prefix={prefix}
+      autoComplete="tel-national"
+    />
+  );
+};
+
+export default PhoneInput;

package/src/components/inputs/phoneInput/styles.css

@@ -0,0 +1,118 @@
+.k-phone-input-picker {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.k-phone-input-picker-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: transparent;
+  border: none;
+  padding: 0 0.5rem 0 0;
+  margin: 0;
+  cursor: pointer;
+  color: var(--text-color);
+  font: inherit;
+}
+
+.k-phone-input-picker-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.k-phone-input-flag {
+  font-size: 1.125em;
+  line-height: 1;
+}
+
+.k-phone-input-dial {
+  font-variant-numeric: tabular-nums;
+  color: var(--text-color-secondary, var(--text-color));
+}
+
+.k-phone-input-caret {
+  font-size: 0.75em;
+  color: var(--text-color-secondary, var(--text-color));
+}
+
+.k-phone-input-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: -0.5rem;
+  width: 18rem;
+  max-height: 20rem;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.375rem 1.25rem var(--shadow-color);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.k-phone-input-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-color-secondary, var(--text-color));
+}
+
+.k-phone-input-search input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--text-color);
+  font: inherit;
+}
+
+.k-phone-input-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.k-phone-input-option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color);
+  font: inherit;
+  text-align: left;
+}
+
+.k-phone-input-option:hover,
+.k-phone-input-option:focus-visible {
+  background-color: var(--hover-color, var(--border-color));
+  outline: none;
+}
+
+.k-phone-input-option.selected {
+  background-color: var(--hover-color, var(--border-color));
+}
+
+.k-phone-input-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k-phone-input-empty {
+  padding: 0.75rem;
+  color: var(--text-color-secondary, var(--text-color));
+  text-align: center;
+  font-size: 0.875rem;
+}

package/src/components/inputs/radioGroup/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import OptionsGroup from "../../forms/optionsGroup/index.js";
+import { ReactNode } from "react";
+
+export interface RadioOption<T = string> {
+  value: T;
+  label: ReactNode;
+}
+
+interface RadioGroupProps<T = string> {
+  label?: string;
+  name: string;
+  options: RadioOption<T>[];
+  value: T | null;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+const RadioGroup = <T extends string = string>(props: RadioGroupProps<T>) => {
+  const { disabled = false, required = false } = props;
+
+  return (
+    <OptionsGroup label={props.label} required={required}>
+      {props.options.map((option, index) => (
+        <label key={index} className="k-options-group-option">
+          <input
+            type="radio"
+            name={props.name}
+            value={String(option.value)}
+            checked={props.value === option.value}
+            onChange={() => props.onChange(option.value)}
+            disabled={disabled}
+          />
+          {option.label}
+        </label>
+      ))}
+    </OptionsGroup>
+  );
+};
+
+export default RadioGroup;

package/src/components/inputs/richTextEditor/index.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useEditor, EditorContent, useEditorState } from "@tiptap/react";
+import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
+import IconButton from "../../buttons/iconButton/index.js";
+import Tooltip from "../../feedback/tooltip/index.js";
+import { Placeholder } from "@tiptap/extensions";
+import { PropsWithSize } from "../../types.js";
+import StarterKit from "@tiptap/starter-kit";
+import { useState, useEffect } from "react";
+import "./styles.css";
+import {
+  faUnderline,
+  faTextSlash,
+  faItalic,
+  faListUl,
+  faListOl,
+  faBold,
+  faCode,
+} from "@fortawesome/free-solid-svg-icons";
+
+interface RichTextEditorProps extends PropsWithSize {
+  /**
+   * **_Optional_** function that is called when the content of the editor changes.
+   *
+   * Receives the HTML string of the editor content, or undefined if only empty HTML tags.
+   */
+  onChange?: (html: string | undefined) => void;
+  /** **_Optional_** label that appears above the editor */
+  label?: string;
+  /** **_Optional_** initial HTML value to be set when the editor first loads */
+  value?: string;
+  /** **_Optional_** placeholder text that appears when the editor is empty */
+  placeholder?: string;
+  /** **_Optional_** if the editor is disabled (prevents editing) */
+  disabled?: boolean;
+  /** **_Optional_** whether the editor should be focused when it first loads */
+  autofocus?: boolean;
+  /** **_Optional_** whether the field is required (shows red asterisk) */
+  required?: boolean;
+  /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+  id?: string;
+  /** **_Optional_** whether to show character count */
+  showCharCount?: boolean;
+}
+
+const RichTextEditor = (props: RichTextEditorProps) => {
+  const { size = "md", disabled = false, required: _required = false } = props;
+  const [showHtml, setShowHtml] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const fieldId =
+    props.id || `richtext-${Math.random().toString(36).substring(2, 9)}`;
+
+  const cleanHtml = (html: string): string | undefined => {
+    // Remove trailing empty <p></p> tags
+    let cleanedHtml = html.replace(/(<p><\/p>)+$/g, "");
+    // Remove trailing empty paragraphs with just whitespace
+    cleanedHtml = cleanedHtml.replace(/(<p>\s*<\/p>)+$/g, "");
+
+    // Check if the cleaned HTML has any actual text content
+    const temp = document.createElement("div");
+    temp.innerHTML = cleanedHtml;
+    const textContent = temp.textContent || temp.innerText || "";
+
+    if (textContent.trim().length === 0) {
+      return undefined;
+    }
+
+    return cleanedHtml;
+  };
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Placeholder.configure({
+        placeholder: props.placeholder,
+      }),
+    ],
+    content: props.value,
+    editable: !disabled,
+    autofocus: props.autofocus,
+    onUpdate: ({ editor }) => {
+      if (!isInitialized) {
+        return;
+      }
+
+      const html = editor.getHTML();
+      const cleanedHtml = cleanHtml(html);
+      props.onChange?.(cleanedHtml);
+
+      // Update character count based on text content
+      const textContent = editor.state.doc.textContent;
+      setCharCount(textContent.length);
+    },
+  });
+
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor }) => {
+      return {
+        isBold: editor.isActive("bold"),
+        isItalic: editor.isActive("italic"),
+        isUnderlined: editor.isActive("underline"),
+        isBulletedList: editor.isActive("bulletList"),
+        isNumberedList: editor.isActive("orderedList"),
+      };
+    },
+  });
+
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled);
+      // Set initial character count
+      const textContent = editor.state.doc.textContent;
+      setCharCount(textContent.length);
+      setIsInitialized(true);
+    }
+  }, [disabled, editor]);
+
+  // Sync editor content when value prop changes
+  useEffect(() => {
+    if (editor) {
+      const currentHtml = editor.getHTML();
+      const newValue = props.value || "";
+
+      const cleanedCurrent = cleanHtml(currentHtml) || "";
+      const cleanedNew = cleanHtml(newValue) || "";
+
+      if (cleanedCurrent !== cleanedNew) {
+        // Temporarily mark as not initialized to prevent onChange from firing
+        // during external content sync
+        setIsInitialized(false);
+        editor.commands.setContent(newValue);
+        // Re-enable after a short delay to allow content to settle
+        setTimeout(() => setIsInitialized(true), 0);
+      }
+
+      const textContent = editor.state.doc.textContent;
+      setCharCount(textContent.length);
+    }
+  }, [props.value, editor]);
+
+  return (
+    <div className={`k-richtext-container k-richtext-container-${size}`}>
+      {props.label && (
+        <div className="k-richtext-label-wrapper">
+          <label htmlFor={fieldId} className="k-richtext-label">
+            {props.label}
+            {props.required && <MandatoryAsterisk />}
+          </label>
+          {props.showCharCount && (
+            <span className="k-richtext-char-count">{charCount}</span>
+          )}
+        </div>
+      )}
+      <div
+        id={fieldId}
+        className={`k-editor-wrapper ${
+          disabled ? "k-editor-wrapper-disabled" : ""
+        }`}
+      >
+        <div className="k-editor-toolbar">
+          <Tooltip content="Bold" position="top">
+            <IconButton
+              icon={faBold}
+              size={size}
+              variant={editorState.isBold ? "primary" : "secondary"}
+              onClick={() => editor.chain().focus().toggleBold().run()}
+              disabled={showHtml || disabled}
+            />
+          </Tooltip>
+          <Tooltip content="Italic" position="top">
+            <IconButton
+              icon={faItalic}
+              size={size}
+              variant={editorState.isItalic ? "primary" : "secondary"}
+              onClick={() => editor.chain().focus().toggleItalic().run()}
+              disabled={showHtml || disabled}
+            />
+          </Tooltip>
+          <Tooltip content="Underline" position="top">
+            <IconButton
+              icon={faUnderline}
+              size={size}
+              variant={editorState.isUnderlined ? "primary" : "secondary"}
+              onClick={() => editor.chain().focus().toggleUnderline().run()}
+              disabled={showHtml || disabled}
+            />
+          </Tooltip>
+          <div className="k-toolbar-separator"></div>
+          <Tooltip content="Bullet List" position="top">
+            <IconButton
+              icon={faListUl}
+              size={size}
+              variant={editorState.isBulletedList ? "primary" : "secondary"}
+              onClick={() => editor.chain().focus().toggleBulletList().run()}
+              disabled={showHtml || disabled}
+            />
+          </Tooltip>
+          <Tooltip content="Numbered List" position="top">
+            <IconButton
+              icon={faListOl}
+              size={size}
+              variant={editorState.isNumberedList ? "primary" : "secondary"}
+              onClick={() => editor.chain().focus().toggleOrderedList().run()}
+              disabled={showHtml || disabled}
+            />
+          </Tooltip>
+          <div className="k-toolbar-separator"></div>
+          <Tooltip content="Clear Formatting" position="top">
+            <IconButton
+              icon={faTextSlash}
+              size={size}
+              variant="secondary"
+              onClick={() => {
+                editor
+                  .chain()
+                  .focus()
+                  .selectAll()
+                  .clearNodes()
+                  .unsetAllMarks()
+                  .setTextSelection(0)
+                  .run();
+              }}
+              disabled={showHtml || disabled}
+            />
+          </Tooltip>
+          <div className="k-toolbar-separator"></div>
+          <Tooltip
+            content={showHtml ? "Show Editor" : "Show HTML"}
+            position="top"
+          >
+            <IconButton
+              icon={faCode}
+              size={size}
+              variant={showHtml ? "primary" : "secondary"}
+              onClick={() => setShowHtml(!showHtml)}
+              disabled={disabled}
+            />
+          </Tooltip>
+        </div>
+
+        {showHtml && editor ? (
+          <pre className="k-html-section">
+            {(() => {
+              const cleaned = cleanHtml(editor?.getHTML());
+              return cleaned
+                ? cleaned
+                    .replace(/></g, ">\n<")
+                    .replace(/^/, "\n")
+                    .replace(/\n\s*\n/g, "\n")
+                    .trim()
+                : "";
+            })()}
+          </pre>
+        ) : (
+          <EditorContent editor={editor} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RichTextEditor;