@uva-glass/component-library/dist/components/InputField/InputField.stories.js

React components UvA

import { jsx as o } from "react/jsx-runtime";
import { useState as d, useRef as g } from "react";
import { l as p } from "../../index-DvUwfXNb.js";
import { InputField as e } from "./InputField.js";
import { Container as u } from "../../storyComponents/Container/Container.js";
import "../Accordion/Accordion.js";
import { Icon as h } from "../Icon/Icon.js";
import "../Buttons/Button.js";
import "../Buttons/LinkButton.js";
import "@react-aria/button";
import "../Checkbox/Checkbox.js";
import "@react-aria/dialog";
import "@react-aria/focus";
import "@react-aria/overlays";
import "../OverlayCloseButton/OverlayCloseButton.js";
import "../GridRow/GridRow.js";
import "../IconButton/IconButton.js";
import "../Input/Input.js";
import "react-router";
import "../../TablePlugin-BLbsvcuu.js";
import "../RteEditor/Providers/LanguageProvider.js";
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
import "../RteEditor/hooks/components/Flyout.js";
import "react-dom";
import "../../index-yEhaxKq-.js";
import "../SearchField/SearchField.js";
import "../SelectListbox/SelectListbox.js";
import "../SelectListbox/SelectProvider.js";
import "../Sortable/components/SortableItem.js";
import "../../SortableProvider-BbwlEPIr.js";
import "../WeekSelector/components/WeekSelectorOptionContainer.js";
const C = `
// Has all HTMLInputElement props available except "className" and "style" 
<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}
  value={value} type={type} clearTrigger={clearTrigger} />
`, f = (t) => {
  const r = t.variant ?? [];
  return { ...t, variant: r.toString() };
}, Z = {
  title: "Atoms/InputField",
  component: e,
  argTypes: {
    variant: {
      options: ["large"],
      control: "check"
    },
    width: {
      control: "radio",
      options: [void 0, "small", "compact"]
    },
    type: {
      control: "radio",
      options: ["text", "password", "email"]
    },
    background: {
      control: "check",
      options: ["white"]
    },
    id: {
      control: "text"
    },
    autoComplete: {
      table: {
        disable: !0
      }
    }
  },
  parameters: {
    inspectComponent: e,
    codeString: C
  }
}, i = (t) => {
  const [r, n] = d(""), l = g(null), m = (c) => {
    n(c.target.value), p()("handleChange");
  }, s = () => {
    n(""), p()("handleClear");
  };
  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
    e,
    {
      ...f(t),
      value: r,
      onChange: m,
      onClear: s,
      ref: l
    }
  ) });
}, a = {
  type: "text",
  variant: void 0,
  id: "4f9ca77d"
}, b = i.bind({});
b.args = {
  ...a
};
const v = i.bind({});
v.args = {
  ...a,
  clearTrigger: "Clear"
};
const y = i.bind({});
y.args = {
  ...a,
  clearTrigger: /* @__PURE__ */ o(h, { name: "Cross" })
};
export {
  b as InputFieldExample,
  y as WithIconClearTrigger,
  v as WithStringClearTrigger,
  Z as default
};
//# sourceMappingURL=InputField.stories.js.map