@wizleap-inc/wiz-ui-react 0.16.3 → 0.18.0

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

@@ -7,7 +7,9 @@ export * from "./box";
 export * from "./card";
 export * from "./tag";
 export * from "./icon";
+export * from "./information-panel";
 export * from "./divider";
+export * from "./progress-bar";
 export * from "./tab";
 export * from "./step-bar";
 export * from "./message-box";
@@ -28,3 +30,5 @@ export * from "./popup-button-group";
 export * from "./navigation";
 export * from "./dropdown";
 export * from "./snackbar";
+export * from "./text-area";
+export * from "./skeleton";

package/dist/components/base/information-panel/components/index.d.ts

@@ -0,0 +1 @@
+export { WizInformationPanel } from "./information-panel";

package/dist/components/base/information-panel/components/information-panel.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+type Message = {
+    text: string;
+    type: "default" | "error";
+};
+type Props = {
+    messages: Message[];
+    width?: string;
+    border?: boolean;
+    onClose: () => void;
+};
+export declare const WizInformationPanel: FC<Props>;
+export {};

package/dist/components/base/information-panel/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/base/inputs/index.d.ts

@@ -1,8 +1,11 @@
 export * from "./checkbox";
 export * from "./radio";
+export * from "./search-input";
+export * from "./search-selector";
 export * from "./selectbox";
 export * from "./text";
 export * from "./toggle-switch";
 export * from "./panel-switch";
+export * from "./password";
 export * from "./time-picker";
 export * from "./upload";

package/dist/components/base/inputs/password/components/index.d.ts

@@ -0,0 +1 @@
+export { WizPasswordInput } from "./password-input";

package/dist/components/base/inputs/password/components/password-input.d.ts

@@ -0,0 +1,14 @@
+import { AutoCompleteKeys } from "@wizleap-inc/wiz-ui-constants";
+type Props = {
+    id?: string;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    expand?: boolean;
+    width?: string;
+    autocomplete?: Extract<AutoCompleteKeys, "currentPassword" | "newPassword">;
+    error?: boolean;
+    onChange: (value: string) => void;
+};
+export declare const WizPasswordInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/base/inputs/password/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/base/inputs/search-input/components/index.d.ts

@@ -0,0 +1 @@
+export { WizSearchInput } from "./search-input";

package/dist/components/base/inputs/search-input/components/search-input.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { SearchInputOption } from "./types";
+type Props = {
+    options: SearchInputOption[];
+    values: number[];
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    expand?: boolean;
+    inputWidth?: string;
+    popupWidth?: string;
+    isDirectionFixed?: boolean;
+    onChangeValues: (values: number[]) => void;
+};
+export declare const WizSearchInput: FC<Props>;
+export {};

package/dist/components/base/inputs/search-input/components/search-popup-panel.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { SearchInputOption } from "./types";
+type Props = {
+    options: SearchInputOption[];
+    values: number[];
+    width?: string;
+    onChangeValues: (values: number[]) => void;
+};
+export declare const SearchPopupPanel: FC<Props>;
+export {};

package/dist/components/base/inputs/search-input/components/types.d.ts

@@ -0,0 +1,5 @@
+export type SearchInputOption = {
+    label: string;
+    value: number;
+    children: SearchInputOption[];
+};

package/dist/components/base/inputs/search-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/base/inputs/search-selector/components/index.d.ts

@@ -0,0 +1 @@
+export { WizSearchSelector } from "./search-selector";

package/dist/components/base/inputs/search-selector/components/search-selector-helper.d.ts

@@ -0,0 +1,2 @@
+import { SearchSelectorOption } from "./types";
+export declare function filterOptions(options: SearchSelectorOption[], searchText: string): SearchSelectorOption[];

package/dist/components/base/inputs/search-selector/components/search-selector.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { SearchSelectorOption } from "./types";
+type Props = {
+    options: SearchSelectorOption[];
+    values: number[];
+    placeholder?: string;
+    width?: string;
+    disabled?: boolean;
+    expand?: boolean;
+    multiSelectable?: boolean;
+    addable?: boolean;
+    error?: boolean;
+    isDirectionFixed?: boolean;
+    onChangeValues: (values: number[]) => void;
+    onCreate?: (label: string) => void;
+};
+export declare const WizSearchSelector: FC<Props>;
+export {};

package/dist/components/base/inputs/search-selector/components/types.d.ts

@@ -0,0 +1,5 @@
+export type SearchSelectorOption = {
+    label: string;
+    value: number;
+    exLabel?: string;
+};

package/dist/components/base/inputs/search-selector/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/base/popup/utils/index.d.ts

@@ -1,2 +1,2 @@
-export { wrapDirection } from "./wrap";
 export * from "./placement";
+export { wrapDirection, wrapOutOfBound } from "./wrap";

package/dist/components/base/popup/utils/wrap.d.ts

@@ -39,3 +39,19 @@ export declare const reflection: {
     verticalCenter: (args: Args) => "Center" | "Top" | "Bottom";
 };
 export declare const wrapDirection: Record<DirectionValue, (args: Args) => DirectionValue>;
+/**
+ * 境界外にPopupContentが出てしまう場合、回り込みにより方向を変更します。ただし、変更後も境界外に出てしまう場合は変更しません。
+ */
+export declare const wrapOutOfBound: (dir: DirectionValue, placementArgs: {
+    bound: {
+        width: number;
+        height: number;
+    };
+    content: DOMRect;
+    anchor: DOMRect;
+    gap: number;
+    window: {
+        scrollX: number;
+        scrollY: number;
+    };
+}) => DirectionValue;

package/dist/components/base/progress-bar/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./progress-bar";
+export * from "./progress-point";
+export * from "./progress-line";

package/dist/components/base/progress-bar/components/progress-bar.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { ProgressItem } from "../types";
+type Props = {
+    contents: ProgressItem[];
+};
+export declare const WizProgressBar: FC<Props>;
+export {};

package/dist/components/base/progress-bar/components/progress-line.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+type Props = {
+    active?: boolean;
+    isFirst: boolean;
+};
+export declare const WizProgressLine: FC<Props>;
+export {};

package/dist/components/base/progress-bar/components/progress-point.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import type { ProgressStatus } from "../types";
+type Props = {
+    status: ProgressStatus;
+    value?: number;
+};
+export declare const WizProgressPoint: FC<Props>;
+export {};

package/dist/components/base/progress-bar/components/progress.d.ts

@@ -0,0 +1,4 @@
+import { ProgressItem } from "../types";
+export declare const Progress: ({ content }: {
+    content: ProgressItem;
+}) => JSX.Element;

package/dist/components/base/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/base/progress-bar/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./progress-item";

package/dist/components/base/progress-bar/types/progress-item.d.ts

@@ -0,0 +1,10 @@
+export type ProgressStatus = "done" | "active" | "inactive" | "none" | "pending" | "dead";
+export interface ProgressItem {
+    id: string;
+    status: ProgressStatus;
+    label?: string;
+    annotation?: string;
+    tooltip?: string;
+    progress?: boolean;
+    value?: number;
+}

package/dist/components/base/skeleton/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./skeleton";
+export * from "./skeleton-circle";
+export * from "./skeleton-text";

package/dist/components/base/skeleton/components/skeleton-circle.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+type Props = {
+    size: string;
+    isLoading?: boolean;
+    children?: ReactNode;
+};
+export declare const WizSkeletonCircle: {
+    ({ size, isLoading, children, }: Props): JSX.Element;
+    displayName: "WizSkeletonCircle";
+};
+export {};

package/dist/components/base/skeleton/components/skeleton-text.d.ts

@@ -0,0 +1,14 @@
+import { FontSizeKeys, SpacingKeys } from "@wizleap-inc/wiz-ui-constants";
+import { ReactNode } from "react";
+type Props = {
+    fontSize?: FontSizeKeys;
+    gap?: SpacingKeys;
+    lines?: number;
+    isLoading?: boolean;
+    children?: ReactNode;
+};
+export declare const WizSkeletonText: {
+    ({ fontSize, gap, lines, isLoading, children, }: Props): JSX.Element;
+    displayName: "WizSkeletonText";
+};
+export {};

package/dist/components/base/skeleton/components/skeleton.d.ts

@@ -0,0 +1,14 @@
+import { SpacingKeys } from "@wizleap-inc/wiz-ui-constants";
+import { ReactNode } from "react";
+type Props = {
+    width?: string;
+    height?: string;
+    borderRadius?: SpacingKeys;
+    isLoading?: boolean;
+    children?: ReactNode;
+};
+export declare const WizSkeleton: {
+    ({ width, height, borderRadius, isLoading, children, }: Props): JSX.Element;
+    displayName: "WizSkeleton";
+};
+export {};

package/dist/components/base/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/base/text-area/components/index.d.ts

@@ -0,0 +1 @@
+export { WizTextArea } from "./text-area";

package/dist/components/base/text-area/components/text-area.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    id?: string;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    expand?: boolean;
+    rows?: number;
+    error?: boolean;
+    onChange: (value: string) => void;
+};
+export declare const WizTextArea: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/base/text-area/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/components/custom/chat/components/chat-card.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, FC } from "react";
+import { WizSelectBox } from '../../../../components';
+import { Message } from "./types";
+type Props = {
+    textValue: string;
+    username: string;
+    placeholder?: string;
+    messages: Message[];
+    haveNewMessage?: boolean;
+    formRows?: number;
+    typingUsername?: string;
+    status?: number | null;
+    statusOptions?: ComponentProps<typeof WizSelectBox>["options"];
+    statusPlaceholder?: string;
+    onChangeStatus?: (status: number | null) => void;
+    onChangeTextValue: (value: string) => void;
+    onSubmit: () => void;
+    onToggleOpen?: (isOpen: boolean) => void;
+};
+export declare const WizChatCard: FC<Props>;
+export {};

package/dist/components/custom/chat/components/chat-form.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+type Props = {
+    value: string;
+    disabled?: boolean;
+    placeholder?: string;
+    formRows?: number;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+};
+export declare const WizChatForm: FC<Props>;
+export {};

package/dist/components/custom/chat/components/chat-item.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { Message } from "./types";
+type Props = {
+    content: Message;
+    maxChatItemWidth?: string;
+};
+export declare const WizChatItem: FC<Props>;
+export {};

package/dist/components/custom/chat/components/index.d.ts

@@ -0,0 +1,3 @@
+export { WizChatCard } from "./chat-card";
+export { WizChatItem } from "./chat-item";
+export { WizChatForm } from "./chat-form";

package/dist/components/custom/chat/components/types.d.ts

@@ -0,0 +1,11 @@
+export type Message = {
+    message: string;
+    sender: "me" | "other";
+    time: Date;
+    username?: string;
+    readers?: string[];
+};
+export type DisplayMessage = {
+    date: Date;
+    contents: Message[];
+};

package/dist/components/custom/chat/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

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

@@ -1,3 +1,4 @@
+export * from "./chat";
 export * from "./form";
 export * from "./notification";
 export * from "./schedule";

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useBreakpoint, BreakpointProvider } from "./use-breakpoint";
+export type { Breakpoint, BreakpointVariant } from "./use-breakpoint";

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+declare const BREAKPOINTS: readonly ["sm", "md", "lg"];
+/**
+ * @see {@link useBreakpoint}
+ * @example
+ * BreakpointVariantは、次の値のいずれかを取ります。
+ * - sm: max-width: 480px(30rem)
+ * - md: max-width: 768px(48rem)
+ * - lg: max-width: 1024px(64rem)
+ *
+ * この閾値は、BreakpointProviderを使用して、カスタマイズすることができます。
+ */
+export type BreakpointVariant = (typeof BREAKPOINTS)[number];
+export type Breakpoint = Record<BreakpointVariant, number>;
+/**
+ * @see {@link BreakpointVariant}
+ * @example
+ * # カスタマイズ
+ * `useBreakpoint`フックを使用して、一番近いBreakpointProviderで設定された値を取得できます。もし設定されてない場合はDEFAULT_BREAKPOINTが返されます。
+ * この戻り値は、`bp`という名前のPropsにそのまま渡すことができます。
+ *
+ * ```jsx
+ * import { Timeline } from "wiz-ui-react";
+ * import { useBreakpoint } from "wiz-ui-react/hooks/use-breakpoint";
+ *
+ *
+ * const App = () => {
+ *   const bp = useBreakpoint()
+ *
+ *   return (
+ *     <Timeline bp={bp} />
+ *   )
+ * };
+ */
+export declare const useBreakpoint: () => "sm" | "md" | "lg";
+export declare const BreakpointProvider: ({ children, bp, }: {
+    children: ReactNode;
+    bp: Breakpoint;
+}) => JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./components";
+export * from "./hooks";
 export declare const version = "0.0.0";
 declare const _default: {
     version: string;