From 486db21f54b4209206496f12806cc97affc49d5c Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Thu, 4 Jan 2024 00:43:18 +0900 Subject: [PATCH] deploy --- dist/components/checkbox/Checkbox.d.ts | 9 ++ dist/components/checkbox/Checkbox.js | 93 ++++++++++++++ dist/components/checkbox/checkbox.type.d.ts | 20 +++ dist/components/checkbox/checkbox.type.js | 1 + dist/components/common/type.d.ts | 11 ++ dist/components/common/type.js | 1 + dist/components/dialog/Dialog.d.ts | 11 ++ dist/components/dialog/Dialog.js | 129 ++++++++++++++++++++ dist/components/dialog/dialog.type.d.ts | 24 ++++ dist/components/dialog/dialog.type.js | 1 + dist/components/select/Select.d.ts | 13 ++ dist/components/select/Select.js | 125 +++++++++++++++++++ dist/components/select/select.type.d.ts | 32 +++++ dist/components/select/select.type.js | 1 + dist/components/switch/Switch.d.ts | 9 ++ dist/components/switch/Switch.js | 89 ++++++++++++++ dist/components/switch/switch.type.d.ts | 25 ++++ dist/components/switch/switch.type.js | 1 + dist/hooks/useExternalState.d.ts | 7 ++ dist/hooks/useExternalState.js | 18 +++ dist/lib/index.d.ts | 4 + dist/lib/index.js | 4 + dist/utils/createContext.d.ts | 14 +++ dist/utils/createContext.js | 34 ++++++ dist/utils/dom.d.ts | 9 ++ dist/utils/dom.js | 32 +++++ my-website/docusaurus.config.js | 8 +- my-website/src/pages/index.jsx | 4 +- package-lock.json | 9 +- 29 files changed, 727 insertions(+), 11 deletions(-) create mode 100644 dist/components/checkbox/Checkbox.d.ts create mode 100644 dist/components/checkbox/Checkbox.js create mode 100644 dist/components/checkbox/checkbox.type.d.ts create mode 100644 dist/components/checkbox/checkbox.type.js create mode 100644 dist/components/common/type.d.ts create mode 100644 dist/components/common/type.js create mode 100644 dist/components/dialog/Dialog.d.ts create mode 100644 dist/components/dialog/Dialog.js create mode 100644 dist/components/dialog/dialog.type.d.ts create mode 100644 dist/components/dialog/dialog.type.js create mode 100644 dist/components/select/Select.d.ts create mode 100644 dist/components/select/Select.js create mode 100644 dist/components/select/select.type.d.ts create mode 100644 dist/components/select/select.type.js create mode 100644 dist/components/switch/Switch.d.ts create mode 100644 dist/components/switch/Switch.js create mode 100644 dist/components/switch/switch.type.d.ts create mode 100644 dist/components/switch/switch.type.js create mode 100644 dist/hooks/useExternalState.d.ts create mode 100644 dist/hooks/useExternalState.js create mode 100644 dist/lib/index.d.ts create mode 100644 dist/lib/index.js create mode 100644 dist/utils/createContext.d.ts create mode 100644 dist/utils/createContext.js create mode 100644 dist/utils/dom.d.ts create mode 100644 dist/utils/dom.js diff --git a/dist/components/checkbox/Checkbox.d.ts b/dist/components/checkbox/Checkbox.d.ts new file mode 100644 index 0000000..df9b7b7 --- /dev/null +++ b/dist/components/checkbox/Checkbox.d.ts @@ -0,0 +1,9 @@ +import { CheckBoxIndicatorProps, CheckBoxLabelProps, CheckBoxRootProps } from "./checkbox.type"; +declare function CheckBoxRoot(props: CheckBoxRootProps): import("react/jsx-runtime").JSX.Element; +declare function CheckBoxIndicator(props: CheckBoxIndicatorProps): import("react/jsx-runtime").JSX.Element; +declare function CheckBoxLabel(props: CheckBoxLabelProps): import("react/jsx-runtime").JSX.Element; +declare const CheckBox: typeof CheckBoxRoot & { + Indicator: typeof CheckBoxIndicator; + Label: typeof CheckBoxLabel; +}; +export default CheckBox; diff --git a/dist/components/checkbox/Checkbox.js b/dist/components/checkbox/Checkbox.js new file mode 100644 index 0000000..1ebc2a7 --- /dev/null +++ b/dist/components/checkbox/Checkbox.js @@ -0,0 +1,93 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import { createContext } from "../../utils/createContext"; +import { getNarrowTypedProps, getCustomElement } from "../../utils/dom"; +import { useExternalState } from "../../hooks/useExternalState"; +var checkboxDefaultValue = { + checked: false, + toggleCheckBox: function () { }, + id: null, +}; +var _a = createContext({ + defaultValue: checkboxDefaultValue, + contextName: "CheckBox", +}), CheckBoxProvider = _a.CheckBoxProvider, CheckBoxUseContext = _a.CheckBoxUseContext; +function CheckBoxRoot(props) { + var children = props.children, externalCheck = props.externalCheck, _a = props.defaultCheck, defaultCheck = _a === void 0 ? false : _a, onCheckChange = props.onCheckChange, id = props.id; + var _b = useExternalState({ + prop: externalCheck, + defaultProp: defaultCheck, + handler: onCheckChange, + }), _c = _b[0], checked = _c === void 0 ? false : _c, setChecked = _b[1]; + var toggleCheckBox = function () { + console.log(checked); + checked ? setChecked(false) : setChecked(true); + }; + return (_jsx(CheckBoxProvider, __assign({ contextValues: { checked: checked, toggleCheckBox: toggleCheckBox, id: id } }, { children: children }))); +} +function CheckBoxIndicator(props) { + var _a = getNarrowTypedProps(props), children = _a.children, asChild = _a.asChild, restProps = __rest(_a, ["children", "asChild"]); + var _b = CheckBoxUseContext(), checked = _b.checked, toggleCheckBox = _b.toggleCheckBox, id = _b.id; + var handleClick = function (e) { + var _a; + if (asChild) { + (_a = restProps.onIndicatorClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + } + toggleCheckBox(); + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + checked: checked, + onClick: handleClick, + type: "checkbox", + id: id, + }); + } + return (_jsx("input", __assign({ type: "checkbox", id: "checkbox-".concat(id), onClick: toggleCheckBox, checked: checked, className: restProps.className }, { children: children }))); +} +function CheckBoxLabel(props) { + var _a = getNarrowTypedProps(props), children = _a.children, asChild = _a.asChild, restProps = __rest(_a, ["children", "asChild"]); + var _b = CheckBoxUseContext(), checked = _b.checked, id = _b.id; + var handleClick = function (e) { + var _a; + if (asChild) { + (_a = restProps.onLabelClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + } + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + htmlFor: "checkbox-".concat(id), + checked: checked, + onClick: handleClick, + }); + } + return (_jsx("label", __assign({ htmlFor: "checkbox-".concat(id), className: restProps.className }, { children: children }))); +} +var CheckBox = Object.assign(CheckBoxRoot, { + Indicator: CheckBoxIndicator, + Label: CheckBoxLabel, +}); +export default CheckBox; diff --git a/dist/components/checkbox/checkbox.type.d.ts b/dist/components/checkbox/checkbox.type.d.ts new file mode 100644 index 0000000..3e29206 --- /dev/null +++ b/dist/components/checkbox/checkbox.type.d.ts @@ -0,0 +1,20 @@ +import { DefaultProps } from "../common/type"; +export type CheckBoxContextType = { + checked: boolean; + toggleCheckBox: () => void; + id: string | null; +}; +export type CheckBoxRootProps = DefaultProps & { + id: string; + externalCheck?: boolean; + defaultCheck?: boolean; + onCheckChange?: (state?: boolean) => void; +}; +export type CheckBoxIndicatorProps = DefaultProps & { + className?: string; + onIndicatorClick?: (e: MouseEvent) => void; +}; +export type CheckBoxLabelProps = DefaultProps & { + className?: string; + onLabelClick?: (e: MouseEvent) => void; +}; diff --git a/dist/components/checkbox/checkbox.type.js b/dist/components/checkbox/checkbox.type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/components/checkbox/checkbox.type.js @@ -0,0 +1 @@ +export {}; diff --git a/dist/components/common/type.d.ts b/dist/components/common/type.d.ts new file mode 100644 index 0000000..015bf29 --- /dev/null +++ b/dist/components/common/type.d.ts @@ -0,0 +1,11 @@ +import { ReactElement } from "react"; +type PropsWithAsChildType = { + asChild: true; + children: ReactElement; +}; +type PropsWhithoutAsChildType = { + asChild?: false; + children?: ReactElement | ReactElement[] | undefined; +}; +export type DefaultProps = PropsWithAsChildType | PropsWhithoutAsChildType; +export {}; diff --git a/dist/components/common/type.js b/dist/components/common/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/components/common/type.js @@ -0,0 +1 @@ +export {}; diff --git a/dist/components/dialog/Dialog.d.ts b/dist/components/dialog/Dialog.d.ts new file mode 100644 index 0000000..e69f648 --- /dev/null +++ b/dist/components/dialog/Dialog.d.ts @@ -0,0 +1,11 @@ +import { DialogBackDropProps, DialogContentProps, DialogRootProps, DialogTriggerProps } from "./dialog.type"; +declare function DialogRoot(props: DialogRootProps): import("react/jsx-runtime").JSX.Element; +declare function DialogTrigger(props: DialogTriggerProps): import("react/jsx-runtime").JSX.Element; +declare function DialogBackDrop(props: DialogBackDropProps): import("react/jsx-runtime").JSX.Element | null; +declare function DialogContent(props: DialogContentProps): import("react/jsx-runtime").JSX.Element | null; +declare const Dialog: typeof DialogRoot & { + Trigger: typeof DialogTrigger; + BackDrop: typeof DialogBackDrop; + Content: typeof DialogContent; +}; +export default Dialog; diff --git a/dist/components/dialog/Dialog.js b/dist/components/dialog/Dialog.js new file mode 100644 index 0000000..dafec47 --- /dev/null +++ b/dist/components/dialog/Dialog.js @@ -0,0 +1,129 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import { useEffect } from "react"; +import { createContext } from "../../utils/createContext"; +import { useExternalState } from "../../hooks/useExternalState"; +import { getCustomElement, getNarrowTypedProps } from "../../utils/dom"; +var dialogDefalutValues = { + open: false, + toggleDialog: function () { }, + openDialog: function () { }, + closeDialog: function () { }, +}; +var _a = createContext({ + defaultValue: dialogDefalutValues, + contextName: "Dialog", +}), DialogProvider = _a.DialogProvider, DialogUseContext = _a.DialogUseContext; +function DialogRoot(props) { + var children = props.children, externalOpen = props.externalOpen, onOpenChange = props.onOpenChange, _a = props.defaultOpen, defaultOpen = _a === void 0 ? false : _a; + var _b = useExternalState({ + prop: externalOpen, + defaultProp: defaultOpen, + handler: onOpenChange, + }), _c = _b[0], open = _c === void 0 ? false : _c, setOpen = _b[1]; + var toggleDialog = function () { + open ? setOpen(false) : setOpen(true); + }; + var openDialog = function () { + setOpen(true); + }; + var closeDialog = function () { + setOpen(false); + }; + return (_jsx(DialogProvider, __assign({ contextValues: { open: open, toggleDialog: toggleDialog, openDialog: openDialog, closeDialog: closeDialog } }, { children: children }))); +} +function DialogTrigger(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var toggleDialog = DialogUseContext().toggleDialog; + var handleClick = function (e) { + var _a; + if (asChild) { + (_a = restProps.onTriggerClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + } + toggleDialog(); + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + onClick: handleClick, + }); + } + return (_jsx("button", __assign({ onClick: toggleDialog, className: restProps.className }, { children: children }))); +} +function DialogBackDrop(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var _b = DialogUseContext(), open = _b.open, closeDialog = _b.closeDialog; + useEffect(function () { + var _a; + (_a = document + .getElementById("navrary-dialog-backdrop")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", closeDialog); + return function () { + window.removeEventListener("click", closeDialog); + }; + }); + var handleClick = function (e) { + var _a; + (_a = restProps.onBackDropClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + closeDialog(); + }; + if (asChild) { + return open + ? getCustomElement(children, { + className: restProps.className, + onClick: handleClick, + id: "navrary-dialog-backdrop", + }) + : null; + } + return (_jsx("button", __assign({ id: "navrary-dialog-backdrop", onClick: closeDialog, className: restProps.className }, { children: children }))); +} +function DialogContent(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var _b = DialogUseContext(), open = _b.open, closeDialog = _b.closeDialog; + var closeWithEscapeKey = function (e) { + if (!restProps.closeOnEsc || e.key !== "Escape") + return; + closeDialog(); + }; + useEffect(function () { + window.addEventListener("keydown", closeWithEscapeKey); + return function () { + window.removeEventListener("keydown", closeWithEscapeKey); + }; + }); + if (asChild) { + return open + ? getCustomElement(children, { + className: restProps.className, + }) + : null; + } + return open ? (_jsx("article", __assign({ className: restProps.className }, { children: children }))) : null; +} +var Dialog = Object.assign(DialogRoot, { + Trigger: DialogTrigger, + BackDrop: DialogBackDrop, + Content: DialogContent, +}); +export default Dialog; diff --git a/dist/components/dialog/dialog.type.d.ts b/dist/components/dialog/dialog.type.d.ts new file mode 100644 index 0000000..7833efd --- /dev/null +++ b/dist/components/dialog/dialog.type.d.ts @@ -0,0 +1,24 @@ +import { DefaultProps } from "../common/type"; +export type DialogDefalutValuesType = { + open: boolean; + toggleDialog: () => void; + openDialog: () => void; + closeDialog: () => void; +}; +export type DialogRootProps = { + externalOpen?: boolean; + defaultOpen?: boolean; + onOpenChange?: (state?: boolean) => void; +} & DefaultProps; +export type DialogTriggerProps = DefaultProps & { + className?: string; + onTriggerClick?: (e: MouseEvent) => void; +}; +export type DialogBackDropProps = DefaultProps & { + onBackDropClick?: (e: MouseEvent) => void; + className?: string; +}; +export type DialogContentProps = DefaultProps & { + closeOnEsc?: boolean; + className?: string; +}; diff --git a/dist/components/dialog/dialog.type.js b/dist/components/dialog/dialog.type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/components/dialog/dialog.type.js @@ -0,0 +1 @@ +export {}; diff --git a/dist/components/select/Select.d.ts b/dist/components/select/Select.d.ts new file mode 100644 index 0000000..fb2410a --- /dev/null +++ b/dist/components/select/Select.d.ts @@ -0,0 +1,13 @@ +import { SelecOptionProps, SelectOptionGroupProps, SelectRootProps, SelectTriggerProps, SelectValueProps } from "./select.type"; +declare function SelectRoot(props: SelectRootProps): import("react/jsx-runtime").JSX.Element; +declare function SelectTrigger(props: SelectTriggerProps): import("react/jsx-runtime").JSX.Element; +declare function SelectOptionGroup(props: SelectOptionGroupProps): import("react/jsx-runtime").JSX.Element | null; +declare function SelectOption(props: SelecOptionProps): import("react/jsx-runtime").JSX.Element; +declare function SelectValue(props: SelectValueProps): import("react/jsx-runtime").JSX.Element; +declare const Select: typeof SelectRoot & { + Trigger: typeof SelectTrigger; + OptionGroup: typeof SelectOptionGroup; + Option: typeof SelectOption; + Value: typeof SelectValue; +}; +export default Select; diff --git a/dist/components/select/Select.js b/dist/components/select/Select.js new file mode 100644 index 0000000..6ca50d0 --- /dev/null +++ b/dist/components/select/Select.js @@ -0,0 +1,125 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime"; +import { createContext } from "../../utils/createContext"; +import { useExternalState } from "../../hooks/useExternalState"; +import { getCustomElement, getNarrowTypedProps } from "../../utils/dom"; +var selectDefaultValues = { + select: function (option) { }, + selectedOption: null, + open: false, + toggleSelectBox: function () { }, +}; +var _a = createContext({ + defaultValue: selectDefaultValues, + contextName: "Select", +}), SelectProvider = _a.SelectProvider, SelectUseContext = _a.SelectUseContext; +function SelectRoot(props) { + var children = props.children, externalSelectedOption = props.externalSelectedOption, defalutSelected = props.defalutSelected, onSelectChange = props.onSelectChange, externalOpen = props.externalOpen, defaultOpen = props.defaultOpen, onOpenChange = props.onOpenChange; + var _a = useExternalState({ + prop: externalSelectedOption, + defaultProp: defalutSelected, + handler: onSelectChange, + }), _b = _a[0], selectedOption = _b === void 0 ? null : _b, setSelectedOption = _a[1]; + var _c = useExternalState({ + prop: externalOpen, + defaultProp: defaultOpen, + handler: onOpenChange, + }), _d = _c[0], open = _d === void 0 ? false : _d, setOpen = _c[1]; + var toggleSelectBox = function () { + open ? setOpen(false) : setOpen(true); + }; + var select = function (option) { + setSelectedOption(option); + }; + return (_jsx(SelectProvider, __assign({ contextValues: { selectedOption: selectedOption, select: select, toggleSelectBox: toggleSelectBox, open: open } }, { children: children }))); +} +function SelectTrigger(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var toggleSelectBox = SelectUseContext().toggleSelectBox; + var handleClick = function (e) { + var _a; + e.preventDefault(); + if (asChild) { + (_a = restProps.onTriggerClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + } + toggleSelectBox(); + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + onClick: handleClick, + }); + } + return (_jsx("button", __assign({ onClick: toggleSelectBox, className: restProps.className }, { children: children }))); +} +function SelectOptionGroup(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var open = SelectUseContext().open; + if (asChild) { + return open + ? getCustomElement(children, { + className: restProps.className, + }) + : null; + } + return open ? _jsx("ul", __assign({ className: restProps.className }, { children: children })) : null; +} +function SelectOption(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var _b = SelectUseContext(), selectedOption = _b.selectedOption, select = _b.select; + var isSelected = restProps.id === selectedOption; + var handleSelect = function (e) { + var _a; + (_a = restProps.onOptionClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + select(restProps.id); + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + onClick: handleSelect, + isSelected: isSelected, + }); + } + return (_jsx("li", __assign({ onClick: function () { return select(restProps.id); }, className: restProps.className }, { children: children }))); +} +function SelectValue(props) { + var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]); + var selectedOption = SelectUseContext().selectedOption; + var selectedValue = selectedOption === null + ? restProps.defautlValue + : restProps.options[selectedOption]; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + }, selectedValue); + } + return _jsx(_Fragment, { children: selectedValue }); +} +var Select = Object.assign(SelectRoot, { + Trigger: SelectTrigger, + OptionGroup: SelectOptionGroup, + Option: SelectOption, + Value: SelectValue, +}); +export default Select; diff --git a/dist/components/select/select.type.d.ts b/dist/components/select/select.type.d.ts new file mode 100644 index 0000000..e77ee82 --- /dev/null +++ b/dist/components/select/select.type.d.ts @@ -0,0 +1,32 @@ +import { DefaultProps } from "../common/type"; +export type SelectDefaultValuesType = { + select: (option: any) => void; + selectedOption: any; + open: boolean; + toggleSelectBox: () => void; +}; +export type SelectRootProps = { + externalSelectedOption?: any; + defalutSelected?: any; + onSelectChange?: (state?: any) => void; + externalOpen?: boolean; + defaultOpen?: boolean; + onOpenChange?: (state?: boolean) => void; +} & DefaultProps; +export type SelectTriggerProps = DefaultProps & { + className?: string; + onTriggerClick?: (e: MouseEvent) => void; +}; +export type SelectOptionGroupProps = DefaultProps & { + className?: string; +}; +export type SelecOptionProps = DefaultProps & { + className?: string; + onOptionClick?: (e: MouseEvent) => void; + id: T; +}; +export type SelectValueProps = DefaultProps & { + className?: string; + options: Record; + defautlValue?: T; +}; diff --git a/dist/components/select/select.type.js b/dist/components/select/select.type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/components/select/select.type.js @@ -0,0 +1 @@ +export {}; diff --git a/dist/components/switch/Switch.d.ts b/dist/components/switch/Switch.d.ts new file mode 100644 index 0000000..bccbd74 --- /dev/null +++ b/dist/components/switch/Switch.d.ts @@ -0,0 +1,9 @@ +import { SwitchBoxProps, SwitchRootProps, SwitchThumbProps } from "./switch.type"; +declare function SwitchRoot(props: SwitchRootProps): import("react/jsx-runtime").JSX.Element; +declare function SwitchThumb(props: SwitchThumbProps): import("react/jsx-runtime").JSX.Element; +declare function SwitchBox(props: SwitchBoxProps): import("react/jsx-runtime").JSX.Element; +declare const Switch: typeof SwitchRoot & { + Thumb: typeof SwitchThumb; + Box: typeof SwitchBox; +}; +export default Switch; diff --git a/dist/components/switch/Switch.js b/dist/components/switch/Switch.js new file mode 100644 index 0000000..2f424f5 --- /dev/null +++ b/dist/components/switch/Switch.js @@ -0,0 +1,89 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import { createContext } from "../../utils/createContext"; +import { useExternalState } from "../../hooks/useExternalState"; +import { getNarrowTypedProps, getCustomElement } from "../../utils/dom"; +var switcheDefaultValue = { + mode: "off", + toggleMode: function () { }, +}; +var _a = createContext({ + defaultValue: switcheDefaultValue, + contextName: "Switch", +}), SwitchProvider = _a.SwitchProvider, SwitchUseContext = _a.SwitchUseContext; +function SwitchRoot(props) { + var children = props.children, externalMode = props.externalMode, defaultMode = props.defaultMode, onModeChange = props.onModeChange; + var _a = useExternalState({ + prop: externalMode, + defaultProp: defaultMode, + handler: onModeChange, + }), _b = _a[0], mode = _b === void 0 ? "off" : _b, setMode = _a[1]; + var toggleMode = function () { + mode === "off" ? setMode("on") : setMode("off"); + }; + return (_jsx(SwitchProvider, __assign({ contextValues: { mode: mode, toggleMode: toggleMode } }, { children: children }))); +} +function SwitchThumb(props) { + var _a = getNarrowTypedProps(props), children = _a.children, asChild = _a.asChild, restProps = __rest(_a, ["children", "asChild"]); + var _b = SwitchUseContext(), mode = _b.mode, toggleMode = _b.toggleMode; + var handleClick = function (e) { + var _a; + if (asChild) { + (_a = restProps.onThumbClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + } + toggleMode(); + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + mode: mode, + onClick: handleClick, + }); + } + return (_jsx("div", __assign({ onClick: toggleMode, className: restProps.className }, { children: children }))); +} +function SwitchBox(props) { + var _a = getNarrowTypedProps(props), children = _a.children, asChild = _a.asChild, restProps = __rest(_a, ["children", "asChild"]); + var _b = SwitchUseContext(), mode = _b.mode, toggleMode = _b.toggleMode; + var handleClick = function (e) { + var _a; + if (asChild && restProps.clickable) { + (_a = restProps.onBoxClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e); + toggleMode(); + } + }; + if (asChild) { + return getCustomElement(children, { + className: restProps.className, + mode: mode, + onClick: restProps.clickable ? handleClick : undefined, + }); + } + return _jsx("div", __assign({ className: restProps.className }, { children: children })); +} +var Switch = Object.assign(SwitchRoot, { + Thumb: SwitchThumb, + Box: SwitchBox, +}); +export default Switch; diff --git a/dist/components/switch/switch.type.d.ts b/dist/components/switch/switch.type.d.ts new file mode 100644 index 0000000..0cfa57b --- /dev/null +++ b/dist/components/switch/switch.type.d.ts @@ -0,0 +1,25 @@ +import { DefaultProps } from "../common/type"; +type ModeType = "on" | "off"; +export type SwitchDefaultValueType = { + mode: ModeType; + toggleMode: () => void; +}; +export type SwitchRootProps = DefaultProps & { + externalMode?: ModeType; + defaultMode?: ModeType; + onModeChange?: (state?: ModeType) => void; +}; +export type SwitchThumbProps = DefaultProps & { + className?: string; + onThumbClick?: (e: MouseEvent) => void; +}; +export type SwitchBoxProps = DefaultProps & ({ + className?: string; + clickable: true; + onBoxClick: (e: MouseEvent) => void; +} | { + className?: string; + clickable?: false; + onBoxClick: never; +}); +export {}; diff --git a/dist/components/switch/switch.type.js b/dist/components/switch/switch.type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/components/switch/switch.type.js @@ -0,0 +1 @@ +export {}; diff --git a/dist/hooks/useExternalState.d.ts b/dist/hooks/useExternalState.d.ts new file mode 100644 index 0000000..dadb7aa --- /dev/null +++ b/dist/hooks/useExternalState.d.ts @@ -0,0 +1,7 @@ +type ExternalStateType = { + prop?: T; + defaultProp?: T; + handler?: (state: T) => void; +}; +export declare function useExternalState({ prop, defaultProp, handler, }: ExternalStateType): readonly [T | undefined, (handledValue: T | ((prevState?: T) => T)) => void]; +export {}; diff --git a/dist/hooks/useExternalState.js b/dist/hooks/useExternalState.js new file mode 100644 index 0000000..8eff69c --- /dev/null +++ b/dist/hooks/useExternalState.js @@ -0,0 +1,18 @@ +import { useState } from "react"; +export function useExternalState(_a) { + var prop = _a.prop, defaultProp = _a.defaultProp, handler = _a.handler; + var _b = useState(defaultProp), innerState = _b[0], setInnerState = _b[1]; + var isControlledByExternal = prop !== undefined; + var value = isControlledByExternal ? prop : innerState; + var setValue = function (handledValue) { + if (isControlledByExternal) { + var setter = handledValue; + var value_1 = typeof handledValue === "function" ? setter(prop) : handledValue; + handler === null || handler === void 0 ? void 0 : handler(value_1); + } + else { + setInnerState(handledValue); + } + }; + return [value, setValue]; +} diff --git a/dist/lib/index.d.ts b/dist/lib/index.d.ts new file mode 100644 index 0000000..4c1a75f --- /dev/null +++ b/dist/lib/index.d.ts @@ -0,0 +1,4 @@ +export { default as Dialog } from "../components/dialog/Dialog"; +export { default as Select } from "../components/select/Select"; +export { default as CheckBox } from "../components/checkbox/Checkbox"; +export { default as Switch } from "../components/switch/Switch"; diff --git a/dist/lib/index.js b/dist/lib/index.js new file mode 100644 index 0000000..4c1a75f --- /dev/null +++ b/dist/lib/index.js @@ -0,0 +1,4 @@ +export { default as Dialog } from "../components/dialog/Dialog"; +export { default as Select } from "../components/select/Select"; +export { default as CheckBox } from "../components/checkbox/Checkbox"; +export { default as Switch } from "../components/switch/Switch"; diff --git a/dist/utils/createContext.d.ts b/dist/utils/createContext.d.ts new file mode 100644 index 0000000..8bd04d8 --- /dev/null +++ b/dist/utils/createContext.d.ts @@ -0,0 +1,14 @@ +import * as React from "react"; +type CreateContextProps = { + defaultValue: TDefaultValues; + contextName: string; +}; +type ContextReturnType = { + [key in `${CreateContextProps["contextName"]}Provider`]: ({ children, contextValues, }: React.PropsWithChildren<{ + contextValues: TDefaultValues; + }>) => JSX.Element; +} & { + [key in `${CreateContextProps["contextName"]}UseContext`]: () => TDefaultValues; +}; +export declare function createContext(props: React.PropsWithChildren>): ContextReturnType; +export {}; diff --git a/dist/utils/createContext.js b/dist/utils/createContext.js new file mode 100644 index 0000000..a797e28 --- /dev/null +++ b/dist/utils/createContext.js @@ -0,0 +1,34 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import * as React from "react"; +export function createContext(props) { + var _a; + var defaultValue = props.defaultValue, contextName = props.contextName, children = props.children; + var Context = React.createContext(defaultValue); + function Provider(props) { + var contextValues = props.contextValues, children = props.children; + return (_jsx(Context.Provider, __assign({ value: contextValues }, { children: children }))); + } + Context.displayName = contextName; + function useContext() { + var value = React.useContext(Context); + if (!value) { + throw Error("This function can only be used within ".concat(contextName, "context.")); + } + return value; + } + return _a = {}, + _a["".concat(contextName, "Provider")] = Provider, + _a["".concat(contextName, "UseContext")] = useContext, + _a; +} diff --git a/dist/utils/dom.d.ts b/dist/utils/dom.d.ts new file mode 100644 index 0000000..3637743 --- /dev/null +++ b/dist/utils/dom.d.ts @@ -0,0 +1,9 @@ +import { Attributes, ReactElement, ReactNode } from "react"; +import { DefaultProps } from "../components/common/type"; +export declare const getCustomElement:

& Attributes>(children: ReactElement, props: P, innerChild?: ReactNode) => ReactElement>; +export declare const getNarrowTypedProps: (props: T) => (T & { + asChild: boolean; + children: ReactElement>; +}) | (T & { + asChild: boolean; +}); diff --git a/dist/utils/dom.js b/dist/utils/dom.js new file mode 100644 index 0000000..fa942fe --- /dev/null +++ b/dist/utils/dom.js @@ -0,0 +1,32 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { Children, cloneElement, isValidElement, } from "react"; +var getValidChild = function (children) { + return Children.only(children); +}; +var validateCustomChildren = function (children) { + return isValidElement(children); +}; +export var getCustomElement = function (children, props, innerChild) { + if (validateCustomChildren(children)) { + return innerChild + ? cloneElement(getValidChild(children), props, innerChild) + : cloneElement(getValidChild(children), props); + } + throw Error("Invalid React Element!"); +}; +export var getNarrowTypedProps = function (props) { + if (props.asChild) { + return __assign(__assign({}, props), { asChild: true, children: props.children }); + } + return __assign(__assign({}, props), { asChild: false }); +}; diff --git a/my-website/docusaurus.config.js b/my-website/docusaurus.config.js index 538e993..b41439c 100644 --- a/my-website/docusaurus.config.js +++ b/my-website/docusaurus.config.js @@ -8,7 +8,7 @@ import { themes as prismThemes } from "prism-react-renderer"; /** @type {import('@docusaurus/types').Config} */ const config = { - title: "Navrary-ck-util-components", + title: "navrary-util-components", tagline: "Dinosaurs are cool", favicon: "img/favicon.ico", @@ -16,12 +16,12 @@ const config = { url: "https://NaveOWO.github.io", // Set the // pathname under which your site is served // For GitHub pages deployment, it is often '//' - baseUrl: "/navrary-CK-util-componenets/", + baseUrl: "/navrary-util-components/", // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. organizationName: "NaveOWO", // Usually your GitHub org/user name. - projectName: "navrary-CK-util-componenets", // Usually your repo name. + projectName: "navrary-util-components", // Usually your repo name. onBrokenLinks: "throw", onBrokenMarkdownLinks: "warn", @@ -79,7 +79,7 @@ const config = { label: "Tutorial", }, { - href: "https://github.com/NaveOWO/navrary-CK-util-componenets", + href: "https://github.com/NaveOWO/navrary-util-components", label: "GitHub", position: "right", }, diff --git a/my-website/src/pages/index.jsx b/my-website/src/pages/index.jsx index 17ac306..891fa80 100644 --- a/my-website/src/pages/index.jsx +++ b/my-website/src/pages/index.jsx @@ -5,9 +5,7 @@ export default function Home() { const isBrowser = useIsBrowser(); if (isBrowser) { - return ( - - ); + return ; } return null; diff --git a/package-lock.json b/package-lock.json index 543977a..e0b9c60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,13 @@ { - "name": "navrary-ck-util-componenets", - "version": "0.1.0", + "name": "ck-util-components", + "version": "1.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "navrary-ck-util-componenets", - "version": "0.1.0", + "name": "ck-util-components", + "version": "1.4.0", + "license": "ISC", "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0",