@jigowatts/jigowatts-ui 0.0.1-12

package/dist/components/DatePickerController/index.d.ts

@@ -0,0 +1,16 @@
+import { FieldPath, UseControllerProps, FieldValues, UseFormSetValue } from 'react-hook-form';
+
+type Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & {
+    setValue: UseFormSetValue<TFieldValues>;
+    dateFormat: string;
+    maxDateTime?: Date;
+    minDateTime?: Date;
+};
+/**
+ * Date,DateTimeをを選択できるコンポーネント
+ * dateFormatに合わせてpickerViewを生成します。
+ * @param props
+ * @returns
+ */
+declare const DatePickerController: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: Props<TFieldValues, TName>) => JSX.Element;
+export default DatePickerController;

package/dist/components/DatePickerController/index.js

@@ -0,0 +1,83 @@
+import { jsx as a } from "react/jsx-runtime";
+import { L as h, A as g, j as y, p as x } from "../../index-CICI7n5Y.js";
+import { C as D } from "../../index.esm-ChwJSgnF.js";
+import { j as C, D as P } from "../../DateTimePicker-DJSOr5wM.js";
+import '../../assets/index19.css';const T = "_rangeContainer_17n2w_1", j = {
+  rangeContainer: T
+}, L = {
+  ".MuiButtonBase-root": {
+    padding: 0.5,
+    paddingLeft: 0
+  },
+  "& input::placeholder": {
+    fontSize: "x-small"
+  }
+}, v = (l) => {
+  const {
+    defaultValue: o,
+    maxDateTime: c,
+    minDateTime: d,
+    setValue: s,
+    dateFormat: t,
+    ...r
+  } = l, u = (e) => {
+    const n = e ? e instanceof Date ? e : typeof e == "string" ? x(e, t, /* @__PURE__ */ new Date()) : null : null;
+    return typeof e == "string" && s(r.name, n), n;
+  }, p = (e) => {
+    s(r.name, e ?? o, {
+      shouldDirty: !0
+    });
+  }, m = (() => {
+    const e = [];
+    return t.includes("yyyy") && e.push("year"), t.includes("MM") && e.push("month"), t.includes("dd") && e.push("day"), t.includes("HH") && e.push("hours"), t.includes("mm") && e.push("minutes"), t.includes("ss") && e.push("seconds"), e;
+  })();
+  return /* @__PURE__ */ a(
+    h,
+    {
+      dateAdapter: g,
+      adapterLocale: y,
+      localeText: C.components.MuiLocalizationProvider.defaultProps.localeText,
+      children: /* @__PURE__ */ a("div", { className: j.rangeContainer, children: /* @__PURE__ */ a(
+        D,
+        {
+          control: r.control,
+          name: r.name,
+          defaultValue: o,
+          render: ({ field: e, fieldState: n }) => {
+            var i;
+            return /* @__PURE__ */ a(
+              P,
+              {
+                ...e,
+                format: t,
+                views: m,
+                sx: L,
+                value: u(e.value),
+                onChange: (f) => {
+                  p(f);
+                },
+                slotProps: {
+                  textField: {
+                    error: !!n.error,
+                    helperText: (i = n.error) == null ? void 0 : i.message,
+                    fullWidth: !0
+                  },
+                  // NOTE: clearボタンが文字を隠していまうのでとりあえずcalendar内のもので代用
+                  // field: {
+                  //   clearable: true,
+                  // },
+                  actionBar: { actions: ["clear", "accept"] }
+                },
+                maxDateTime: c,
+                minDateTime: d
+              }
+            );
+          }
+        }
+      ) })
+    }
+  );
+};
+export {
+  v as default
+};

package/dist/components/DatePickerController/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePickerController/index.test.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { r as a, a as n, s } from "../../react.esm-C8amP77L.js";
+import { u as c } from "../../index.esm-ChwJSgnF.js";
+import m from "./index.js";
+describe("RangeDatePickerController component", () => {
+  it("renders date pickers with correct default values", () => {
+    const { result: e } = a(() => c()), r = e.current.control;
+    n(
+      /* @__PURE__ */ o(
+        m,
+        {
+          control: r,
+          name: "fromDate",
+          defaultValue: "2024-03-01",
+          dateFormat: "yyyy-MM-dd",
+          setValue: () => {
+          }
+        }
+      )
+    );
+    const t = s.getByDisplayValue("2024-03-01");
+    expect(t).toBeInTheDocument();
+  });
+});

package/dist/components/ErrorMessage/index.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    errorMessage: string;
+};
+export declare const ErrorMessage: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ErrorMessage;

package/dist/components/ErrorMessage/index.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/index6.css';const o = "_errorMessage_1x344_1", a = {
+  errorMessage: o
+}, c = (r) => {
+  const { errorMessage: e } = r;
+  return /* @__PURE__ */ s("p", { className: a.errorMessage, children: e });
+};
+export {
+  c as ErrorMessage,
+  c as default
+};

package/dist/components/ErrorMessage/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ErrorMessage/index.test.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { a as o, s as c } from "../../react.esm-C8amP77L.js";
+import { j as t } from "../../index-Di2gTfPF.js";
+import { ErrorMessage as a } from "./index.js";
+describe("ErrorMessage component", () => {
+  const r = "Test error message";
+  it("renders the error message", () => {
+    o(/* @__PURE__ */ s(a, { errorMessage: r }));
+    const e = c.getByText(r);
+    expect(e).toBeInTheDocument(), expect(e).toHaveClass("errorMessage");
+  }), it("should be accessible", async () => {
+    const { container: e } = o(
+      /* @__PURE__ */ s(a, { errorMessage: r })
+    ), n = await t.axe(e);
+    expect.extend(t.toHaveNoViolations), expect(n).toHaveNoViolations();
+  });
+});

package/dist/components/EvseStateLabel/index.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    evseState: number;
+};
+export declare const EvseStateLabel: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default EvseStateLabel;

package/dist/components/EvseStateLabel/index.js

@@ -0,0 +1,36 @@
+import { jsx as l } from "react/jsx-runtime";
+import { c as o } from "../../index-DWRHnq8_.js";
+import '../../assets/index7.css';const c = "_evseStateLabel_10v1n_1", r = {
+  evseStateLabel: c
+}, v = (s) => {
+  const { evseState: t } = s;
+  console.log(t);
+  let e, a;
+  switch (t) {
+    case 0:
+      e = "未接続", a = "#0056FD";
+      break;
+    case 1:
+      e = "接続中", a = "#24A3FF";
+      break;
+    case 2:
+    case 3:
+      e = "充電中", a = "#00B127";
+      break;
+    default:
+      e = "エラー", a = "#FF3E24";
+      break;
+  }
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: o(r.evseStateLabel),
+      style: { backgroundColor: a },
+      children: e
+    }
+  );
+};
+export {
+  v as EvseStateLabel,
+  v as default
+};

package/dist/components/FlexButtons/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+type Position = "flex-start" | "flex-end";
+type Props = {
+    position: Position;
+    children: ReactNode;
+};
+export declare const FlexButtons: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default FlexButtons;

package/dist/components/FlexButtons/index.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/index8.css';const u = "_buttons_10vqq_1", c = {
+  buttons: u
+}, l = (t) => {
+  const { position: s, children: n } = t, o = {
+    justifyContent: s
+  };
+  return /* @__PURE__ */ e("div", { className: c.buttons, style: o, children: n });
+};
+export {
+  l as FlexButtons,
+  l as default
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+type Props = {
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    children: ReactNode;
+};
+export declare const Form: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Form;

package/dist/components/Form/index.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/index9.css';const t = "_form_1fwny_1", f = {
+  form: t
+}, c = (o) => {
+  const { onSubmit: r, children: m } = o;
+  return /* @__PURE__ */ s("form", { onSubmit: r, className: f.form, children: m });
+};
+export {
+  c as Form,
+  c as default
+};

package/dist/components/Form/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Form/index.test.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { a as i, s as c, f as l } from "../../react.esm-C8amP77L.js";
+import { j as r } from "../../index-Di2gTfPF.js";
+import { Form as s } from "./index.js";
+describe("Form component", () => {
+  const o = "Test content", n = jest.fn((e) => e.preventDefault());
+  it("renders the children", () => {
+    i(
+      /* @__PURE__ */ t(s, { onSubmit: n, children: /* @__PURE__ */ t("div", { children: o }) })
+    );
+    const e = c.getByText(o);
+    expect(e).toBeInTheDocument();
+  }), it("calls the onSubmit handler when the form is submitted", () => {
+    i(
+      /* @__PURE__ */ t(s, { onSubmit: n, children: /* @__PURE__ */ t("button", { type: "submit", children: "Submit" }) })
+    );
+    const e = c.getByText("Submit");
+    l.click(e), expect(n).toHaveBeenCalledTimes(1);
+  }), it("should be accessible", async () => {
+    const { container: e } = i(
+      /* @__PURE__ */ t(s, { onSubmit: n, children: /* @__PURE__ */ t("div", { children: o }) })
+    ), a = await r.axe(e);
+    expect.extend(r.toHaveNoViolations), expect(a).toHaveNoViolations();
+  });
+});

package/dist/components/FormItem/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+type Position = "gridFirst";
+type Props = {
+    position?: Position;
+    children: ReactNode;
+};
+export declare const FormItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default FormItem;

package/dist/components/FormItem/index.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { c as i } from "../../index-DWRHnq8_.js";
+import '../../assets/index10.css';const e = "_formItem_oyo9s_1", c = "_gridFirst_oyo9s_25", s = {
+  formItem: e,
+  gridFirst: c
+}, d = (o) => {
+  const { position: r, children: t } = o;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: i(s.formItem, { [s.gridFirst]: r }),
+      children: t
+    }
+  );
+};
+export {
+  d as FormItem,
+  d as default
+};

package/dist/components/FormItem/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FormItem/index.test.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { a as n, s as i } from "../../react.esm-C8amP77L.js";
+import { j as s } from "../../index-Di2gTfPF.js";
+import { FormItem as r } from "./index.js";
+describe("FormItem component", () => {
+  const e = "Test content";
+  it("renders the children", () => {
+    n(/* @__PURE__ */ o(r, { children: e }));
+    const t = i.getByText(e);
+    expect(t).toBeInTheDocument();
+  }), it("should be accessible", async () => {
+    const { container: t } = n(/* @__PURE__ */ o(r, { children: e })), c = await s.axe(t);
+    expect.extend(s.toHaveNoViolations), expect(c).toHaveNoViolations();
+  });
+});

package/dist/components/FormTitle/index.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    title: string;
+};
+export declare const FormTitle: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default FormTitle;

package/dist/components/FormTitle/index.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/index11.css';const r = "_formTitle_qum4o_1", l = {
+  formTitle: r
+}, i = (t) => {
+  const { title: o } = t;
+  return /* @__PURE__ */ e("div", { className: l.formTitle, children: o });
+};
+export {
+  i as FormTitle,
+  i as default
+};

package/dist/components/FormTitle/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FormTitle/index.test.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { a as s, s as c } from "../../react.esm-C8amP77L.js";
+import { j as i } from "../../index-Di2gTfPF.js";
+import { FormTitle as r } from "./index.js";
+describe("FormTitle component", () => {
+  const e = "Test Title";
+  it("renders the title", () => {
+    s(/* @__PURE__ */ o(r, { title: e }));
+    const t = c.getByText(e);
+    expect(t).toBeInTheDocument();
+  }), it("should be accessible", async () => {
+    const { container: t } = s(/* @__PURE__ */ o(r, { title: e })), n = await i.axe(t);
+    expect.extend(i.toHaveNoViolations), expect(n).toHaveNoViolations();
+  });
+});

package/dist/components/Input/index.d.ts

@@ -0,0 +1,15 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+type Type = "text" | "number" | "password" | "email" | "tel";
+type Props = {
+    type: Type;
+    id?: string;
+    name?: string;
+    autoComplete?: string;
+    register?: UseFormRegisterReturn;
+    placeholder?: string;
+    maxLength?: number;
+    errorMessage?: string;
+};
+export declare const Input: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,39 @@
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { c as m } from "../../index-DWRHnq8_.js";
+import '../../assets/index12.css';const _ = "_inputContainer_1gij2_1", g = "_input_1gij2_1", d = "_error_1gij2_22", j = "_errorMessage_1gij2_26", r = {
+  inputContainer: _,
+  input: g,
+  error: d,
+  errorMessage: j
+}, h = (t) => {
+  const {
+    type: n,
+    id: o,
+    name: a,
+    autoComplete: i,
+    register: p,
+    placeholder: c,
+    maxLength: l,
+    errorMessage: e
+  } = t;
+  return /* @__PURE__ */ u("div", { className: r.inputContainer, children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        type: n,
+        id: o,
+        name: a,
+        autoComplete: i,
+        ...p,
+        className: m(r.input, { [r.error]: e }),
+        placeholder: c,
+        maxLength: l
+      }
+    ),
+    e && /* @__PURE__ */ s("small", { className: r.errorMessage, children: e })
+  ] });
+};
+export {
+  h as Input,
+  h as default
+};

package/dist/components/Input/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Input/index.test.js

@@ -0,0 +1,39 @@
+import { jsx as p } from "react/jsx-runtime";
+import { a as s, s as c } from "../../react.esm-C8amP77L.js";
+import { Input as i } from "./index.js";
+describe("Input component", () => {
+  it("renders an input with the correct type, id, name, autoComplete, placeholder, and maxLength", () => {
+    const t = "text", o = "test-id", r = "test-name", n = "off", a = "Test placeholder";
+    s(
+      /* @__PURE__ */ p(
+        i,
+        {
+          type: t,
+          id: o,
+          name: r,
+          autoComplete: n,
+          placeholder: a,
+          maxLength: 10
+        }
+      )
+    );
+    const e = c.getByPlaceholderText(a);
+    expect(e).toBeInTheDocument(), expect(e).toHaveAttribute("type", t), expect(e).toHaveAttribute("id", o), expect(e).toHaveAttribute("name", r), expect(e).toHaveAttribute("autoComplete", n), expect(e).toHaveAttribute("placeholder", a), expect(e).toHaveAttribute("maxLength", "10");
+  }), it("renders an input with an error message if provided", () => {
+    const t = "Test error message", o = "Test placeholder";
+    s(
+      /* @__PURE__ */ p(
+        i,
+        {
+          type: "text",
+          placeholder: o,
+          errorMessage: t
+        }
+      )
+    );
+    const r = c.getByPlaceholderText(o);
+    expect(r).toHaveClass("error");
+    const n = c.getByText(t);
+    expect(n).toBeInTheDocument();
+  });
+});

package/dist/components/InputController/index.d.ts

@@ -0,0 +1,20 @@
+import { FieldPath, PathValue, Control, FieldValues } from 'react-hook-form';
+import { FilledInputProps, InputProps, OutlinedInputProps } from '@mui/material';
+
+type Type = "search" | "text" | "number" | "email" | "tel" | "textarea";
+type MultilineOption = {
+    rows: number;
+};
+type Props<T extends FieldValues> = {
+    control: Control<T>;
+    type: Type;
+    textareaOption?: MultilineOption;
+    name: FieldPath<T>;
+    defaultValue?: PathValue<T, FieldPath<T>>;
+    emptyValue?: "" | null | undefined;
+    autoComplete?: string;
+    placeholder?: string;
+    inputProps?: Partial<FilledInputProps> | Partial<OutlinedInputProps> | Partial<InputProps>;
+};
+export declare const InputController: <T extends FieldValues>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default InputController;

package/dist/components/InputController/index.js

@@ -0,0 +1,81 @@
+import g, { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { i as F } from "../../styled-CWju4EfZ.js";
+import { r as I } from "../../createSvgIcon-Dj8zNxRS.js";
+import { FormControl as b, TextField as y, InputAdornment as _, IconButton as j, FormHelperText as w } from "@mui/material";
+import { C as k } from "../../index.esm-ChwJSgnF.js";
+var l = {}, q = F;
+Object.defineProperty(l, "__esModule", {
+  value: !0
+});
+var s = l.default = void 0, M = q(I()), B = g;
+s = l.default = (0, M.default)(/* @__PURE__ */ (0, B.jsx)("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Clear");
+const S = (p) => {
+  const {
+    control: v,
+    type: t,
+    textareaOption: n,
+    name: c,
+    autoComplete: h,
+    placeholder: x,
+    defaultValue: u,
+    emptyValue: i,
+    inputProps: e
+  } = p, d = i === void 0 && u !== void 0 ? null : i;
+  return /* @__PURE__ */ o(
+    k,
+    {
+      control: v,
+      name: c,
+      defaultValue: u,
+      render: ({ field: r, fieldState: C }) => {
+        var m;
+        return /* @__PURE__ */ f(b, { error: C.invalid, children: [
+          /* @__PURE__ */ o(
+            y,
+            {
+              ...r,
+              type: t === "textarea" ? void 0 : t,
+              multiline: t === "textarea",
+              rows: (n == null ? void 0 : n.rows) ?? 1,
+              autoComplete: h,
+              placeholder: x,
+              value: r.value ?? "",
+              onChange: (a) => {
+                r.onChange(a), a.target.value ? r.onChange(a) : r.onChange(d);
+              },
+              InputProps: {
+                ...e,
+                endAdornment: r.value && !(e != null && e.readOnly) && !(e != null && e.disabled) ? /* @__PURE__ */ o(_, { position: "end", children: /* @__PURE__ */ o(
+                  j,
+                  {
+                    onClick: () => r.onChange(d),
+                    edge: "end",
+                    children: /* @__PURE__ */ o(s, {})
+                  }
+                ) }) : void 0
+              },
+              sx: {
+                "& .MuiInput-underline:before": {
+                  borderColor: "#CCCCCC"
+                },
+                "& .MuiInputBase-root": {
+                  backgroundColor: "#FFFFFF"
+                },
+                "input:-webkit-autofill": {
+                  WebkitBoxShadow: "0 0 0 1000px white inset"
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ o(w, { children: (m = C.error) == null ? void 0 : m.message })
+        ] });
+      }
+    }
+  );
+};
+export {
+  S as InputController,
+  S as default
+};

package/dist/components/InputController/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/InputController/index.test.js

@@ -0,0 +1,56 @@
+import { jsx as c } from "react/jsx-runtime";
+import { r as l, a, s, f as i } from "../../react.esm-C8amP77L.js";
+import { u } from "../../index.esm-ChwJSgnF.js";
+import { InputController as m } from "./index.js";
+describe("InputController component", () => {
+  it("renders an input with the correct type, id, name, autoComplete, placeholder, and maxLength", () => {
+    const n = l(() => u().control).result.current, r = "TestName", e = "TestPlaceholder";
+    a(
+      /* @__PURE__ */ c(
+        m,
+        {
+          control: n,
+          type: "text",
+          name: r,
+          placeholder: e,
+          defaultValue: void 0
+        }
+      )
+    );
+    const t = s.getByPlaceholderText(e);
+    expect(t).toBeInTheDocument(), expect(t).toHaveAttribute("type", "text"), expect(t).toHaveAttribute("name", r), expect(t).toHaveAttribute("placeholder", e);
+  }), it("renders a multiline textarea with the correct rows", () => {
+    const n = l(() => u().control).result.current, r = "TestName", e = "TestPlaceholder", t = 4;
+    a(
+      /* @__PURE__ */ c(
+        m,
+        {
+          control: n,
+          type: "textarea",
+          name: r,
+          placeholder: e,
+          defaultValue: void 0,
+          textareaOption: { rows: t }
+        }
+      )
+    );
+    const o = s.getByPlaceholderText(e);
+    expect(o).toBeInTheDocument(), expect(o.tagName).toBe("TEXTAREA"), expect(o).toHaveAttribute("rows", t.toString());
+  }), it("sets value to default value if input is empty", () => {
+    const n = l(() => u().control).result.current, r = "TestName", e = "TestPlaceholder";
+    a(
+      /* @__PURE__ */ c(
+        m,
+        {
+          control: n,
+          type: "text",
+          name: r,
+          placeholder: e,
+          defaultValue: "Default Value"
+        }
+      )
+    );
+    const o = s.getByPlaceholderText(e);
+    expect(o).toBeInTheDocument(), i.change(o, { target: { value: "" } });
+  });
+});

package/dist/components/InputGroup/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+type Props = {
+    children: ReactNode;
+};
+export declare const InputGroup: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default InputGroup;

package/dist/components/InputGroup/index.js

@@ -0,0 +1,11 @@
+import { jsx as p } from "react/jsx-runtime";
+import '../../assets/index13.css';const u = "_inputGroup_yg0op_1", n = {
+  inputGroup: u
+}, s = (t) => {
+  const { children: o } = t;
+  return /* @__PURE__ */ p("div", { className: n.inputGroup, children: o });
+};
+export {
+  s as InputGroup,
+  s as default
+};