@geckou/ui-react 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/README.md +46 -5
  2. package/dist/components/BasicButton.d.ts +14 -0
  3. package/dist/components/BasicButton.js +57 -0
  4. package/dist/components/CheckBox.d.ts +13 -0
  5. package/dist/components/CheckBox.js +74 -0
  6. package/dist/components/CheckBoxes.d.ts +12 -0
  7. package/dist/components/CheckBoxes.js +68 -0
  8. package/dist/components/CheckButton.d.ts +13 -0
  9. package/dist/components/CheckButton.js +56 -0
  10. package/dist/components/DatePicker.d.ts +18 -0
  11. package/dist/components/DatePicker.js +131 -0
  12. package/dist/components/DateRangePicker.d.ts +22 -0
  13. package/dist/components/DateRangePicker.js +65 -0
  14. package/dist/components/DateSelector.d.ts +13 -0
  15. package/dist/components/DateSelector.js +129 -0
  16. package/dist/components/DropdownUi.d.ts +16 -0
  17. package/dist/components/DropdownUi.js +88 -0
  18. package/dist/components/ErrorMessage.d.ts +9 -0
  19. package/dist/components/ErrorMessage.js +21 -0
  20. package/dist/components/FileInput.d.ts +7 -0
  21. package/dist/components/FileInput.js +91 -0
  22. package/dist/components/InputBox.d.ts +11 -0
  23. package/dist/components/InputBox.js +75 -0
  24. package/dist/components/InputGroup.d.ts +6 -0
  25. package/dist/components/InputGroup.js +7 -0
  26. package/dist/components/LabeledCheckbox.d.ts +12 -0
  27. package/dist/components/LabeledCheckbox.js +46 -0
  28. package/dist/components/LabeledFieldset.d.ts +8 -0
  29. package/dist/components/LabeledFieldset.js +10 -0
  30. package/dist/components/LoadingSpinner.d.ts +1 -0
  31. package/dist/components/LoadingSpinner.js +26 -0
  32. package/dist/components/ModalBox.d.ts +12 -0
  33. package/dist/components/ModalBox.js +83 -0
  34. package/dist/components/PopupBox.d.ts +14 -0
  35. package/dist/components/PopupBox.js +41 -0
  36. package/dist/components/RadioButtons.d.ts +13 -0
  37. package/dist/components/RadioButtons.js +64 -0
  38. package/dist/components/SearchableSelectBox.d.ts +14 -0
  39. package/dist/components/SearchableSelectBox.js +61 -0
  40. package/dist/components/SelectBox.d.ts +16 -0
  41. package/dist/components/SelectBox.js +107 -0
  42. package/dist/components/SlideDownUi.d.ts +17 -0
  43. package/dist/components/SlideDownUi.js +86 -0
  44. package/dist/components/TabUI.d.ts +19 -0
  45. package/dist/components/TabUI.js +76 -0
  46. package/dist/components/TextArea.d.ts +18 -0
  47. package/dist/components/TextArea.js +75 -0
  48. package/dist/components/TextBox.d.ts +20 -0
  49. package/dist/components/TextBox.js +90 -0
  50. package/dist/components/ToggleButton.d.ts +15 -0
  51. package/dist/components/ToggleButton.js +92 -0
  52. package/dist/components/icons/BackupIcon.d.ts +5 -0
  53. package/dist/components/icons/BackupIcon.js +16 -0
  54. package/dist/components/icons/CalendarIcon.d.ts +5 -0
  55. package/dist/components/icons/CalendarIcon.js +15 -0
  56. package/dist/components/icons/CheckIcon.d.ts +1 -0
  57. package/dist/components/icons/CheckIcon.js +7 -0
  58. package/dist/components/icons/CloseIcon.d.ts +5 -0
  59. package/dist/components/icons/CloseIcon.js +16 -0
  60. package/dist/components/icons/KeyboardArrowDownIcon.d.ts +5 -0
  61. package/dist/components/icons/KeyboardArrowDownIcon.js +16 -0
  62. package/dist/constants/index.d.ts +1 -0
  63. package/dist/hooks/useFormValidation.d.ts +33 -0
  64. package/dist/hooks/useFormValidation.js +28 -0
  65. package/dist/index.d.ts +38 -0
  66. package/dist/index.js +70 -0
  67. package/{src → dist}/styles/tokens.css +1 -1
  68. package/dist/types/index.d.ts +1 -0
  69. package/package.json +17 -12
  70. package/src/components/BasicButton.tsx +0 -81
  71. package/src/components/CheckBox.tsx +0 -87
  72. package/src/components/CheckBoxes.tsx +0 -93
  73. package/src/components/CheckButton.tsx +0 -66
  74. package/src/components/DatePicker.tsx +0 -154
  75. package/src/components/DateRangePicker.tsx +0 -59
  76. package/src/components/DateSelector.tsx +0 -162
  77. package/src/components/DropdownUi.tsx +0 -126
  78. package/src/components/ErrorMessage.tsx +0 -30
  79. package/src/components/FileInput.tsx +0 -93
  80. package/src/components/InputBox.tsx +0 -118
  81. package/src/components/InputGroup.tsx +0 -13
  82. package/src/components/LabeledCheckbox.tsx +0 -61
  83. package/src/components/LabeledFieldset.tsx +0 -18
  84. package/src/components/LoadingSpinner.tsx +0 -23
  85. package/src/components/ModalBox.tsx +0 -109
  86. package/src/components/PopupBox.tsx +0 -70
  87. package/src/components/RadioButtons.tsx +0 -94
  88. package/src/components/SearchableSelectBox.tsx +0 -108
  89. package/src/components/SelectBox.tsx +0 -152
  90. package/src/components/SlideDownUi.tsx +0 -123
  91. package/src/components/TabUI.tsx +0 -112
  92. package/src/components/TextArea.tsx +0 -102
  93. package/src/components/TextBox.tsx +0 -120
  94. package/src/components/ToggleButton.tsx +0 -102
  95. package/src/components/icons/BackupIcon.tsx +0 -16
  96. package/src/components/icons/CalendarIcon.tsx +0 -15
  97. package/src/components/icons/CheckIcon.tsx +0 -7
  98. package/src/components/icons/CloseIcon.tsx +0 -16
  99. package/src/components/icons/KeyboardArrowDownIcon.tsx +0 -16
  100. package/src/constants/index.ts +0 -2
  101. package/src/hooks/useFormValidation.ts +0 -69
  102. package/src/index.ts +0 -66
  103. package/src/types/index.ts +0 -23
@@ -0,0 +1,75 @@
1
+ "use client";
2
+ import { jsxs as j, jsx as p } from "react/jsx-runtime";
3
+ import { isEmptyValue as k, validateInputValue as B } from "@geckou/ui-core";
4
+ import { useState as I, useRef as n, useEffect as A } from "react";
5
+ import { InputBox as H } from "./InputBox.js";
6
+ import { ErrorMessage as N } from "./ErrorMessage.js";
7
+ function z({
8
+ name: d,
9
+ value: s,
10
+ onChange: o,
11
+ cssStyle: r,
12
+ placeholder: x = "入力してください",
13
+ isDisabled: i,
14
+ isRequired: l,
15
+ rows: g,
16
+ maxLength: h = 100,
17
+ autocomplete: v = "off",
18
+ validates: E = [],
19
+ autoAdjustHeight: V
20
+ }) {
21
+ var m, c;
22
+ const [u, C] = I([]), t = n(null), e = s ?? "", a = () => {
23
+ C(B(e, { isRequired: l, validates: E }));
24
+ }, M = n(e), f = n(!1);
25
+ return A(() => {
26
+ if (V && t.current && (t.current.style.height = "auto", t.current.style.height = `calc(${t.current.scrollHeight}px - 2rem)`), !f.current) {
27
+ if (e === M.current) {
28
+ k(e) || a();
29
+ return;
30
+ }
31
+ f.current = !0;
32
+ }
33
+ a();
34
+ }, [e]), /* @__PURE__ */ j(
35
+ H,
36
+ {
37
+ cssStyle: r,
38
+ className: "min-h-[4em]",
39
+ isErrored: !!u.length,
40
+ isDisabled: i,
41
+ children: [
42
+ /* @__PURE__ */ p(
43
+ "textarea",
44
+ {
45
+ ref: t,
46
+ name: d,
47
+ value: e,
48
+ required: l,
49
+ placeholder: x,
50
+ disabled: i,
51
+ autoComplete: v,
52
+ rows: g,
53
+ maxLength: h,
54
+ "aria-invalid": u.length ? "true" : void 0,
55
+ onChange: (b) => o == null ? void 0 : o(b.target.value),
56
+ onBlur: () => a()
57
+ }
58
+ ),
59
+ /* @__PURE__ */ p(
60
+ N,
61
+ {
62
+ errorMessages: u,
63
+ cssStyle: {
64
+ textColor: (m = r == null ? void 0 : r.error) == null ? void 0 : m.backgroundColor,
65
+ backgroundColor: (c = r == null ? void 0 : r.error) == null ? void 0 : c.textColor
66
+ }
67
+ }
68
+ )
69
+ ]
70
+ }
71
+ );
72
+ }
73
+ export {
74
+ z as TextArea
75
+ };
@@ -0,0 +1,20 @@
1
+ import { ReactNode } from 'react';
2
+ import { InputBoxStyleForEachStatus, Validates } from '../types';
3
+ type InputValue = string | number;
4
+ type Props = {
5
+ name: string;
6
+ value?: InputValue;
7
+ onChange?: (newValue: InputValue) => void;
8
+ cssStyle?: InputBoxStyleForEachStatus;
9
+ inputType?: string;
10
+ placeholder?: string;
11
+ isDisabled?: boolean;
12
+ isRequired?: boolean;
13
+ maxLength?: number;
14
+ autocomplete?: string;
15
+ validates?: Validates;
16
+ before?: ReactNode;
17
+ after?: ReactNode;
18
+ };
19
+ export declare function TextBox({ name, value, onChange, cssStyle, inputType, placeholder, isDisabled, isRequired, maxLength, autocomplete, validates, before, after, }: Props): import("react").JSX.Element;
20
+ export {};
@@ -0,0 +1,90 @@
1
+ "use client";
2
+ import { jsxs as W, jsx as c } from "react/jsx-runtime";
3
+ import { isEmptyValue as w, convertFullWidthToHalfWidth as x, validateInputValue as C } from "@geckou/ui-core";
4
+ import { useState as F, useRef as n, useEffect as H } from "react";
5
+ import { InputBox as N } from "./InputBox.js";
6
+ import { ErrorMessage as q } from "./ErrorMessage.js";
7
+ function L({
8
+ name: v,
9
+ value: E,
10
+ onChange: t,
11
+ cssStyle: r,
12
+ inputType: V = "text",
13
+ placeholder: g = "入力してください",
14
+ isDisabled: l,
15
+ isRequired: f,
16
+ maxLength: B = 30,
17
+ autocomplete: M = "off",
18
+ validates: T = [],
19
+ before: b,
20
+ after: j
21
+ }) {
22
+ var m, s;
23
+ const [o, k] = F([]), e = E ?? "", u = () => {
24
+ k(C(e, { isRequired: f, validates: T }));
25
+ }, I = n(e), p = n(!1);
26
+ H(() => {
27
+ if (!p.current) {
28
+ if (e === I.current) {
29
+ w(e) || u();
30
+ return;
31
+ }
32
+ p.current = !0;
33
+ }
34
+ u();
35
+ }, [e]);
36
+ const i = n(!1);
37
+ return /* @__PURE__ */ W(
38
+ N,
39
+ {
40
+ cssStyle: r,
41
+ className: "inline-flex [&>input]:flex-auto",
42
+ isErrored: !!o.length,
43
+ isDisabled: l,
44
+ children: [
45
+ b,
46
+ /* @__PURE__ */ c(
47
+ "input",
48
+ {
49
+ type: V,
50
+ name: v,
51
+ value: e,
52
+ required: f,
53
+ placeholder: g,
54
+ disabled: l,
55
+ autoComplete: M,
56
+ maxLength: B,
57
+ "aria-invalid": o.length ? "true" : void 0,
58
+ onChange: (a) => {
59
+ const d = a.target.value;
60
+ t == null || t(
61
+ i.current ? d : x(d)
62
+ );
63
+ },
64
+ onCompositionStart: () => {
65
+ i.current = !0;
66
+ },
67
+ onCompositionEnd: (a) => {
68
+ i.current = !1, t == null || t(x(a.currentTarget.value));
69
+ },
70
+ onBlur: () => u()
71
+ }
72
+ ),
73
+ j,
74
+ /* @__PURE__ */ c(
75
+ q,
76
+ {
77
+ errorMessages: o,
78
+ cssStyle: {
79
+ textColor: (m = r == null ? void 0 : r.error) == null ? void 0 : m.backgroundColor,
80
+ backgroundColor: (s = r == null ? void 0 : r.error) == null ? void 0 : s.textColor
81
+ }
82
+ }
83
+ )
84
+ ]
85
+ }
86
+ );
87
+ }
88
+ export {
89
+ L as TextBox
90
+ };
@@ -0,0 +1,15 @@
1
+ import { BaseStyle, StyleForEachStatus } from '../types';
2
+ type ToggleStyle = {
3
+ on: BaseStyle;
4
+ off: BaseStyle;
5
+ };
6
+ type Props = {
7
+ name: string;
8
+ label?: Record<'on' | 'off', string>;
9
+ checked?: boolean;
10
+ onChange?: (newValue: boolean) => void;
11
+ isDisabled?: boolean;
12
+ cssStyle?: StyleForEachStatus<ToggleStyle>;
13
+ };
14
+ export declare function ToggleButton({ name, label, checked, onChange, isDisabled, cssStyle, }: Props): import("react").JSX.Element;
15
+ export {};
@@ -0,0 +1,92 @@
1
+ "use client";
2
+ import { jsxs as x, jsx as f } from "react/jsx-runtime";
3
+ import { COLOR as e } from "@geckou/ui-core";
4
+ function m({
5
+ name: l,
6
+ label: n = { on: "ON", off: "OFF" },
7
+ checked: b,
8
+ onChange: d,
9
+ isDisabled: o,
10
+ cssStyle: r
11
+ }) {
12
+ var c, u, s;
13
+ const a = b ?? !1, p = Math.max(n.on.length, n.off.length), t = o ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, i = {
14
+ on: {
15
+ textColor: o ? e.lightGray : e.white,
16
+ backgroundColor: o ? e.gray : e.blue,
17
+ border: {
18
+ color: o ? e.gray : e.blue,
19
+ size: "1px",
20
+ radius: ".25rem"
21
+ },
22
+ boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
23
+ ...t == null ? void 0 : t.on
24
+ },
25
+ off: {
26
+ textColor: o ? e.gray : e.white,
27
+ backgroundColor: o ? e.lightGray : e.darkGray,
28
+ border: {
29
+ color: o ? e.gray : e.darkGray,
30
+ size: "1px",
31
+ radius: ".25rem"
32
+ },
33
+ boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
34
+ ...t == null ? void 0 : t.off
35
+ }
36
+ }[a ? "on" : "off"], h = {
37
+ "--text-color": i.textColor,
38
+ "--border-color": (c = i.border) == null ? void 0 : c.color,
39
+ "--border-size": (u = i.border) == null ? void 0 : u.size,
40
+ "--radius-size": (s = i.border) == null ? void 0 : s.radius,
41
+ "--background-color": i.backgroundColor,
42
+ "--box-shadow": i.boxShadow,
43
+ "--inline-size": `${p * 2}ch`,
44
+ "--handle-size": "1.5rem",
45
+ "--padding-size": "calc(var(--border-size) + 2px)",
46
+ "--duration": ".15s"
47
+ };
48
+ return /* @__PURE__ */ x(
49
+ "button",
50
+ {
51
+ type: "button",
52
+ style: h,
53
+ disabled: o,
54
+ "aria-pressed": a,
55
+ "aria-label": l,
56
+ onClick: (g) => {
57
+ g.stopPropagation(), o || d == null || d(!a);
58
+ },
59
+ className: "relative inline-block w-[calc(var(--inline-size)+var(--handle-size)+(var(--padding-size)*2))] cursor-pointer rounded-(--radius-size) border-none bg-(--background-color) p-(--padding-size) shadow-[0_0_0_var(--border-size)_var(--border-color)_inset,var(--box-shadow)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color)",
60
+ children: [
61
+ /* @__PURE__ */ f(
62
+ "input",
63
+ {
64
+ type: "checkbox",
65
+ name: l,
66
+ checked: a,
67
+ disabled: o,
68
+ readOnly: !0,
69
+ className: "hidden"
70
+ }
71
+ ),
72
+ /* @__PURE__ */ f(
73
+ "div",
74
+ {
75
+ "data-on": n.on,
76
+ "data-off": n.off,
77
+ className: `absolute top-0 left-0 h-full w-full text-(--text-color) uppercase before:absolute before:right-0 before:m-auto before:inline-flex before:h-full before:w-[calc(100%-var(--handle-size)-var(--padding-size))] before:items-center before:justify-center before:leading-none before:transition-opacity before:duration-(--duration) before:ease-out before:content-[attr(data-off)] after:absolute after:left-0 after:m-auto after:inline-flex after:h-full after:w-[calc(100%-var(--handle-size)-var(--padding-size))] after:items-center after:justify-center after:leading-none after:transition-opacity after:duration-(--duration) after:ease-out after:content-[attr(data-on)] ${a ? "before:opacity-0 after:opacity-100" : "before:opacity-100 after:opacity-0"}`
78
+ }
79
+ ),
80
+ /* @__PURE__ */ f(
81
+ "div",
82
+ {
83
+ className: `relative m-0 aspect-square w-(--handle-size) rounded-[calc(var(--radius-size)-(var(--padding-size)/2))] bg-(--text-color) shadow-(--box-shadow) transition-[left] duration-(--duration) ease-out ${a ? "left-[calc(100%-var(--handle-size))]" : "left-0"}`
84
+ }
85
+ )
86
+ ]
87
+ }
88
+ );
89
+ }
90
+ export {
91
+ m as ToggleButton
92
+ };
@@ -0,0 +1,5 @@
1
+ type Props = {
2
+ className?: string;
3
+ };
4
+ export declare function BackupIcon({ className }: Props): import("react").JSX.Element;
5
+ export {};
@@ -0,0 +1,16 @@
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ function o({ className: q }) {
3
+ return /* @__PURE__ */ t(
4
+ "svg",
5
+ {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ viewBox: "0 -960 960 960",
8
+ fill: "currentColor",
9
+ className: q,
10
+ children: /* @__PURE__ */ t("path", { d: "M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Z" })
11
+ }
12
+ );
13
+ }
14
+ export {
15
+ o as BackupIcon
16
+ };
@@ -0,0 +1,5 @@
1
+ type Props = {
2
+ className?: string;
3
+ };
4
+ export declare function CalendarIcon({ className }: Props): import("react").JSX.Element;
5
+ export {};
@@ -0,0 +1,15 @@
1
+ import { jsx as v } from "react/jsx-runtime";
2
+ function n({ className: h }) {
3
+ return /* @__PURE__ */ v(
4
+ "svg",
5
+ {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ viewBox: "0 -960 960 960",
8
+ className: h,
9
+ children: /* @__PURE__ */ v("path", { d: "M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Z" })
10
+ }
11
+ );
12
+ }
13
+ export {
14
+ n as CalendarIcon
15
+ };
@@ -0,0 +1 @@
1
+ export declare function CheckIcon(): import("react").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ function t() {
3
+ return /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", children: /* @__PURE__ */ o("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" }) });
4
+ }
5
+ export {
6
+ t as CheckIcon
7
+ };
@@ -0,0 +1,5 @@
1
+ type Props = {
2
+ className?: string;
3
+ };
4
+ export declare function CloseIcon({ className }: Props): import("react").JSX.Element;
5
+ export {};
@@ -0,0 +1,16 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ function n({ className: r }) {
3
+ return /* @__PURE__ */ o(
4
+ "svg",
5
+ {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ viewBox: "0 -960 960 960",
8
+ fill: "currentColor",
9
+ className: r,
10
+ children: /* @__PURE__ */ o("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
11
+ }
12
+ );
13
+ }
14
+ export {
15
+ n as CloseIcon
16
+ };
@@ -0,0 +1,5 @@
1
+ type Props = {
2
+ className?: string;
3
+ };
4
+ export declare function KeyboardArrowDownIcon({ className }: Props): import("react").JSX.Element;
5
+ export {};
@@ -0,0 +1,16 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ function t({ className: o }) {
3
+ return /* @__PURE__ */ r(
4
+ "svg",
5
+ {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ viewBox: "0 -960 960 960",
8
+ fill: "currentColor",
9
+ className: o,
10
+ children: /* @__PURE__ */ r("path", { d: "M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" })
11
+ }
12
+ );
13
+ }
14
+ export {
15
+ t as KeyboardArrowDownIcon
16
+ };
@@ -0,0 +1 @@
1
+ export { COLOR, BORDER, MESSAGES, INPUT_BOX_DEFAULT_STYLES, } from '@geckou/ui-core';
@@ -0,0 +1,33 @@
1
+ import { FormValidationStore } from '@geckou/ui-core';
2
+ export type UseFormValidationResult = {
3
+ /** 登録済みの入力がすべて有効かどうか */
4
+ isAllValid: boolean;
5
+ /** 無効になっている入力の name 一覧 */
6
+ invalidNames: string[];
7
+ /** 入力の状態を登録・更新する */
8
+ setValid: FormValidationStore['setValid'];
9
+ /** 管理対象から外す */
10
+ remove: FormValidationStore['remove'];
11
+ /** すべての状態を破棄する */
12
+ reset: FormValidationStore['reset'];
13
+ /** 子コンポーネントへ直接渡すためのストア本体 */
14
+ store: FormValidationStore;
15
+ };
16
+ /**
17
+ * フォーム内の各入力のバリデーション状態をまとめて管理する。
18
+ *
19
+ * 状態そのものは @geckou/ui-core の createFormValidationStore が持つため、
20
+ * 判定ロジックは Vue 実装(@geckou/ui-vue の FormValidationManager)と共有される。
21
+ *
22
+ * ```tsx
23
+ * const { isAllValid, store } = useFormValidation()
24
+ * // <DatePicker name="startedOn" formValidationStore={store} />
25
+ * <button disabled={!isAllValid}>送信</button>
26
+ * ```
27
+ */
28
+ export declare function useFormValidation(): UseFormValidationResult;
29
+ /**
30
+ * 入力コンポーネント側から検証結果をストアへ通知する。
31
+ * アンマウント時には登録を解除し、無効判定が残らないようにする。
32
+ */
33
+ export declare function useRegisterValidation(store: FormValidationStore | null | undefined, name: string, isValid: boolean): void;
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import { useMemo as n, useSyncExternalStore as l, useEffect as a } from "react";
3
+ import { createFormValidationStore as o } from "@geckou/ui-core";
4
+ function u() {
5
+ const e = n(() => o(), []), i = l(
6
+ e.subscribe,
7
+ e.getSnapshot,
8
+ // SSR 時は登録がまだ無いので、すべて有効なスナップショットを返す
9
+ e.getSnapshot
10
+ );
11
+ return {
12
+ isAllValid: i.isAllValid,
13
+ invalidNames: i.invalidNames,
14
+ setValid: e.setValid,
15
+ remove: e.remove,
16
+ reset: e.reset,
17
+ store: e
18
+ };
19
+ }
20
+ function c(e, i, t) {
21
+ a(() => {
22
+ e == null || e.setValid(i, t);
23
+ }, [e, i, t]), a(() => () => e == null ? void 0 : e.remove(i), [e, i]);
24
+ }
25
+ export {
26
+ u as useFormValidation,
27
+ c as useRegisterValidation
28
+ };
@@ -0,0 +1,38 @@
1
+ export { BasicButton } from './components/BasicButton';
2
+ export { CheckBox } from './components/CheckBox';
3
+ export { CheckBoxes } from './components/CheckBoxes';
4
+ export { CheckButton } from './components/CheckButton';
5
+ export { DatePicker } from './components/DatePicker';
6
+ export { DateRangePicker } from './components/DateRangePicker';
7
+ export { DateSelector } from './components/DateSelector';
8
+ export { DropdownUi } from './components/DropdownUi';
9
+ export type { DropdownUiHandle } from './components/DropdownUi';
10
+ export { ErrorMessage } from './components/ErrorMessage';
11
+ export { FileInput } from './components/FileInput';
12
+ export { InputBox } from './components/InputBox';
13
+ export { InputGroup } from './components/InputGroup';
14
+ export { LabeledCheckbox } from './components/LabeledCheckbox';
15
+ export { LabeledFieldset } from './components/LabeledFieldset';
16
+ export { LoadingSpinner } from './components/LoadingSpinner';
17
+ export { ModalBox } from './components/ModalBox';
18
+ export { PopupBox } from './components/PopupBox';
19
+ export type { PopupBoxHandle } from './components/PopupBox';
20
+ export { RadioButtons } from './components/RadioButtons';
21
+ export { SearchableSelectBox } from './components/SearchableSelectBox';
22
+ export { SelectBox } from './components/SelectBox';
23
+ export { SlideDownUi } from './components/SlideDownUi';
24
+ export type { SlideDownUiHandle } from './components/SlideDownUi';
25
+ export { TabUI } from './components/TabUI';
26
+ export { TextArea } from './components/TextArea';
27
+ export { TextBox } from './components/TextBox';
28
+ export { ToggleButton } from './components/ToggleButton';
29
+ export { BackupIcon } from './components/icons/BackupIcon';
30
+ export { CheckIcon } from './components/icons/CheckIcon';
31
+ export { CloseIcon } from './components/icons/CloseIcon';
32
+ export { CalendarIcon } from './components/icons/CalendarIcon';
33
+ export { KeyboardArrowDownIcon } from './components/icons/KeyboardArrowDownIcon';
34
+ export { useFormValidation, useRegisterValidation, } from './hooks/useFormValidation';
35
+ export type { UseFormValidationResult } from './hooks/useFormValidation';
36
+ export { COLOR, BORDER, MESSAGES, INPUT_BOX_DEFAULT_STYLES } from './constants';
37
+ export type { StateVariation, BorderStyle, BaseStyle, StyleForEachStatus, InputBoxStyle, InputBoxStyleForEachStatus, ButtonStyle, ButtonStyleForEachStatus, CheckBoxStyle, CheckBoxStyleForEachStatus, RadioButtonStyle, RadioButtonStyleForEachStatus, SelectValue, Option, Validate, Validates, InputValue, DateObject, DateType, ValidationResult, } from './types';
38
+ export type { FormValidationStore } from '@geckou/ui-core';
package/dist/index.js ADDED
@@ -0,0 +1,70 @@
1
+ import { BasicButton as e } from "./components/BasicButton.js";
2
+ import { CheckBox as x } from "./components/CheckBox.js";
3
+ import { CheckBoxes as m } from "./components/CheckBoxes.js";
4
+ import { CheckButton as a } from "./components/CheckButton.js";
5
+ import { DatePicker as c } from "./components/DatePicker.js";
6
+ import { DateRangePicker as B } from "./components/DateRangePicker.js";
7
+ import { DateSelector as d } from "./components/DateSelector.js";
8
+ import { DropdownUi as S } from "./components/DropdownUi.js";
9
+ import { ErrorMessage as I } from "./components/ErrorMessage.js";
10
+ import { FileInput as C } from "./components/FileInput.js";
11
+ import { InputBox as T } from "./components/InputBox.js";
12
+ import { InputGroup as g } from "./components/InputGroup.js";
13
+ import { LabeledCheckbox as E } from "./components/LabeledCheckbox.js";
14
+ import { LabeledFieldset as R } from "./components/LabeledFieldset.js";
15
+ import { LoadingSpinner as w } from "./components/LoadingSpinner.js";
16
+ import { ModalBox as F } from "./components/ModalBox.js";
17
+ import { PopupBox as P } from "./components/PopupBox.js";
18
+ import { RadioButtons as _ } from "./components/RadioButtons.js";
19
+ import { SearchableSelectBox as V } from "./components/SearchableSelectBox.js";
20
+ import { SelectBox as K } from "./components/SelectBox.js";
21
+ import { SlideDownUi as X } from "./components/SlideDownUi.js";
22
+ import { TabUI as j } from "./components/TabUI.js";
23
+ import { TextArea as v } from "./components/TextArea.js";
24
+ import { TextBox as H } from "./components/TextBox.js";
25
+ import { ToggleButton as Q } from "./components/ToggleButton.js";
26
+ import { BackupIcon as Z } from "./components/icons/BackupIcon.js";
27
+ import { CheckIcon as oo } from "./components/icons/CheckIcon.js";
28
+ import { CloseIcon as eo } from "./components/icons/CloseIcon.js";
29
+ import { CalendarIcon as xo } from "./components/icons/CalendarIcon.js";
30
+ import { KeyboardArrowDownIcon as mo } from "./components/icons/KeyboardArrowDownIcon.js";
31
+ import { useFormValidation as ao, useRegisterValidation as no } from "./hooks/useFormValidation.js";
32
+ import { BORDER as io, COLOR as Bo, INPUT_BOX_DEFAULT_STYLES as lo, MESSAGES as uo } from "@geckou/ui-core";
33
+ export {
34
+ io as BORDER,
35
+ Z as BackupIcon,
36
+ e as BasicButton,
37
+ Bo as COLOR,
38
+ xo as CalendarIcon,
39
+ x as CheckBox,
40
+ m as CheckBoxes,
41
+ a as CheckButton,
42
+ oo as CheckIcon,
43
+ eo as CloseIcon,
44
+ c as DatePicker,
45
+ B as DateRangePicker,
46
+ d as DateSelector,
47
+ S as DropdownUi,
48
+ I as ErrorMessage,
49
+ C as FileInput,
50
+ lo as INPUT_BOX_DEFAULT_STYLES,
51
+ T as InputBox,
52
+ g as InputGroup,
53
+ mo as KeyboardArrowDownIcon,
54
+ E as LabeledCheckbox,
55
+ R as LabeledFieldset,
56
+ w as LoadingSpinner,
57
+ uo as MESSAGES,
58
+ F as ModalBox,
59
+ P as PopupBox,
60
+ _ as RadioButtons,
61
+ V as SearchableSelectBox,
62
+ K as SelectBox,
63
+ X as SlideDownUi,
64
+ j as TabUI,
65
+ v as TextArea,
66
+ H as TextBox,
67
+ Q as ToggleButton,
68
+ ao as useFormValidation,
69
+ no as useRegisterValidation
70
+ };
@@ -6,7 +6,7 @@
6
6
  * 各コンポーネントは var(--token, フォールバック値) で参照するため、
7
7
  * このファイルを読み込まなくても固定値で動作する。
8
8
  * アプリ側で読み込むと本来の流体スケーリングが有効になる:
9
- * @import '@geckou/ui/styles/tokens.css';
9
+ * @import '@geckou/ui-react/styles/tokens.css';
10
10
  */
11
11
  :root {
12
12
  /* 基準値(6px〜8px) */
@@ -0,0 +1 @@
1
+ export type { StateVariation, BorderStyle, BaseStyle, StyleForEachStatus, InputBoxStyle, InputBoxStyleForEachStatus, ButtonStyle, ButtonStyleForEachStatus, CheckBoxStyle, CheckBoxStyleForEachStatus, RadioButtonStyle, RadioButtonStyleForEachStatus, SelectValue, Option, Validate, Validates, InputValue, DateObject, DateType, ValidationResult, } from '@geckou/ui-core';
package/package.json CHANGED
@@ -1,20 +1,21 @@
1
1
  {
2
2
  "name": "@geckou/ui-react",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "A set of reusable React UI components (forms) by Geckou",
5
5
  "type": "module",
6
- "main": "./src/index.ts",
7
- "types": "./src/index.ts",
6
+ "sideEffects": false,
7
+ "main": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
8
9
  "exports": {
9
10
  ".": {
10
- "types": "./src/index.ts",
11
- "default": "./src/index.ts"
11
+ "types": "./dist/index.d.ts",
12
+ "default": "./dist/index.js"
12
13
  },
13
- "./styles/tokens.css": "./src/styles/tokens.css",
14
+ "./styles/tokens.css": "./dist/styles/tokens.css",
14
15
  "./package.json": "./package.json"
15
16
  },
16
17
  "files": [
17
- "src",
18
+ "dist",
18
19
  "README.md",
19
20
  "LICENSE"
20
21
  ],
@@ -37,16 +38,20 @@
37
38
  "react-dom": "^19.0.0"
38
39
  },
39
40
  "dependencies": {
40
- "@geckou/ui-core": "^0.1.0"
41
+ "@geckou/ui-core": "^0.2.0"
41
42
  },
42
43
  "scripts": {
43
- "build": "echo 'ソースをそのまま配布する(利用側で transpilePackages に指定する)'",
44
- "type-check": "tsc --noEmit",
44
+ "build": "vite build && node scripts/copy-assets.mjs",
45
+ "lint": "eslint src",
46
+ "lint:fix": "eslint src --fix",
47
+ "prepublishOnly": "yarn build",
45
48
  "test": "vitest run",
46
- "test:watch": "vitest"
49
+ "test:watch": "vitest",
50
+ "type-check": "tsc --noEmit"
47
51
  },
48
52
  "devDependencies": {
49
53
  "@types/react": "^19.0.0",
50
54
  "@types/react-dom": "^19.0.0"
51
- }
55
+ },
56
+ "module": "./dist/index.js"
52
57
  }