@zenkigen-inc/component-ui 1.0.0

package/README.md

@@ -0,0 +1,40 @@
+# @zenkigen-inc/components
+
+## インストール
+
+```bash
+yarn add @zenkigen-inc/components
+```
+
+## 利用方法
+
+```tsx
+import { Button } from 'zenkigen-component';
+
+const Component = () => {
+  return <Button>ボタン</Button>;
+};
+```
+
+## 開発者向け
+
+### コンポーネントの雛形を生成する
+
+hygen で雛形を生成することができるので、必ずこのコマンドから生成されたファイルを元に実装を始めてください。
+
+```bash
+yarn generate-component
+```
+
+### 実装したコンポーネントを export する
+
+使用する側の import を簡略化させるため root にある [packages/component-ui/src/index.ts](https://github.com/zenkigen/zenkigen-component/blob/main/packages/components/src/index.ts) に実装したコンポーネントを export してください。
+
+### コーディングガイドライン（社内のみ）
+
+開発する際は以下を参照してください。
+https://www.notion.so/zenkigen/5d4ebd0d93b74124a533cf167b852ec0
+
+## ライセンス
+
+@zenkigen-inc/components は MIT ライセンスに基づいています。

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const isAsciiString: (str: string) => boolean;
+type Props = {
+    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+    userId?: number;
+    firstName: string;
+    lastName: string;
+    isDisabled?: boolean;
+};
+export declare function Avatar({ size, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from './avatar';

package/dist/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type Props = {
+    isLast: boolean;
+    children?: ReactNode;
+};
+export declare const BreadcrumbItem: ({ children, isLast }: Props) => import("react").JSX.Element;
+export {};

package/dist/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type Props = {
+    children: ReactNode[];
+};
+export declare const Breadcrumb: ({ children }: Props) => import("react").JSX.Element;
+export {};

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumb';

package/dist/button/button.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+type Size = 'small' | 'medium' | 'large';
+type Variant = 'fill' | 'fillDanger' | 'outline' | 'text';
+type Props = {
+    size?: Size;
+    width?: CSSProperties['width'];
+    isDisabled?: boolean;
+    variant?: Variant;
+    before?: ReactNode;
+    after?: ReactNode;
+    children: ReactNode;
+} & ({
+    isAnchor: true;
+    href: string;
+    target?: HTMLAnchorElement['target'];
+} | {
+    isAnchor?: false;
+    onClick?: () => void;
+});
+export declare function Button({ size, variant, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './button';

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,14 @@
+import { ChangeEvent } from 'react';
+type Props = {
+    name?: string;
+    value?: string;
+    id?: string;
+    isChecked?: boolean;
+    color?: 'default' | 'gray' | 'error';
+    isIndeterminate?: boolean;
+    isDisabled?: boolean;
+    label?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props): import("react").JSX.Element;
+export {};

package/dist/checkbox/checked-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CheckedIcon: () => import("react").JSX.Element;

package/dist/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

package/dist/checkbox/minus-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MinusIcon: () => import("react").JSX.Element;

package/dist/dropdown/dropdown-context.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type UseDropdownReturnType = {
+    isVisible: boolean;
+    setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    isDisabled: boolean;
+    targetDimensions: {
+        width: number;
+        height: number;
+    };
+    variant: 'text' | 'outline';
+};
+export declare const DropdownContext: import("react").Context<UseDropdownReturnType>;
+export {};

package/dist/dropdown/dropdown-item.d.ts

@@ -0,0 +1,8 @@
+import { MouseEvent, ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    color?: 'gray' | 'red';
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+export declare function DropdownItem({ children, color, onClick }: Props): import("react").JSX.Element;
+export {};

package/dist/dropdown/dropdown-menu.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DropdownHorizontalAlign, DropdownVerticalPosition } from './type';
+type Props = {
+    children: ReactNode;
+    maxHeight?: CSSProperties['height'];
+    isNoPadding?: boolean;
+    verticalPosition?: DropdownVerticalPosition;
+    horizontalAlign?: DropdownHorizontalAlign;
+};
+export declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: Props): false | import("react").JSX.Element;
+export {};

package/dist/dropdown/dropdown.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement, ReactNode } from 'react';
+import { IconName } from '@zenkigen-inc/component-icons';
+import { DropdownItem } from './dropdown-item';
+import { DropdownMenu } from './dropdown-menu';
+type Props = {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'text' | 'outline';
+    title?: string;
+    isDisabled?: boolean;
+    isArrowHidden?: boolean;
+    children: ReactNode;
+} & ({
+    target: ReactElement;
+    label?: never;
+    icon?: never;
+} | {
+    target?: undefined;
+    label: string;
+    icon?: IconName;
+});
+export declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, }: Props): import("react").JSX.Element;
+export declare namespace Dropdown {
+    var Menu: typeof DropdownMenu;
+    var Item: typeof DropdownItem;
+}
+export {};

package/dist/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './dropdown';
+export type * from './type';

package/dist/dropdown/type.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type DropdownItemType = {
+    id: string;
+    content: ReactNode;
+    color?: 'gray' | 'red';
+    onClick?: () => void;
+};
+export type DropdownVerticalPosition = 'top' | 'bottom';
+export type DropdownHorizontalAlign = 'left' | 'center' | 'right';

package/dist/evaluation-star/evaluation-star.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    value: number;
+    isEditable?: boolean;
+    onChangeRating?: (newRating: number) => void | null;
+    size?: 'medium' | 'large';
+};
+export declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props): import("react").JSX.Element;
+export {};

package/dist/evaluation-star/index.d.ts

@@ -0,0 +1 @@
+export { EvaluationStar } from './evaluation-star';

package/dist/heading/heading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type Level = 1 | 2 | 3 | 4 | 5;
+type Props = {
+    level: Level;
+    before?: ReactNode;
+    after?: ReactNode;
+    children?: ReactNode;
+};
+export declare function Heading(props: Props): import("react").JSX.Element;
+export {};

package/dist/heading/index.d.ts

@@ -0,0 +1 @@
+export { Heading } from './heading';

package/dist/hooks/use-outside-click.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void, enabled?: boolean) => void;

package/dist/icon/icon.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconName } from '@zenkigen-inc/component-icons';
+import { iconColors } from '@zenkigen-inc/component-theme';
+type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+type Color = keyof typeof iconColors;
+type Props = {
+    name: IconName;
+    size?: Size;
+    color?: Color;
+    isDisabled?: boolean;
+};
+export declare const Icon: ({ size, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './icon';

package/dist/icon-button/icon-button.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { IconName } from '@zenkigen-inc/component-icons';
+type Size = 'small' | 'medium' | 'large';
+type Variant = 'outline' | 'text';
+type Props = {
+    icon: IconName;
+    size?: Size;
+    isDisabled?: boolean;
+    isNoPadding?: boolean;
+    variant?: Variant;
+} & ({
+    isAnchor: true;
+    href: string;
+    target?: HTMLAnchorElement['target'];
+} | {
+    isAnchor?: false;
+    onClick?: () => void;
+});
+export declare function IconButton({ size, variant, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/icon-button/index.d.ts

@@ -0,0 +1 @@
+export { IconButton } from './icon-button';

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export * from './avatar';
+export * from './breadcrumb';
+export * from './button';
+export * from './checkbox';
+export * from './dropdown';
+export * from './evaluation-star';
+export * from './heading';
+export * from './icon';
+export * from './icon-button';
+export * from './loading';
+export * from './modal';
+export * from './notification-inline';
+export * from './radio';
+export * from './search';
+export * from './select';
+export * from './select-sort';
+export * from './tab';
+export * from './table';
+export * from './tag';
+export * from './toast';
+export * from './toggle';
+export * from './tooltip';