@zjpcy/simple-design 1.1.0 → 1.1.2

package/dist/types/components/Dropdown/types.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export type DropdownType = 'text' | 'button';
+export interface DropdownItem {
+    key: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    icon?: string | React.ReactNode;
+}
+export interface DropdownProps {
+    items: DropdownItem[];
+    type?: DropdownType;
+    children?: React.ReactNode;
+    trigger?: 'click' | 'hover';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    disabled?: boolean;
+    open?: boolean;
+    ellipsis?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    contentStyles?: React.CSSProperties;
+    getContainer?: () => HTMLElement;
+    onVisibleChange?: (visible: boolean) => void;
+    onChange?: (item: DropdownItem) => void;
+}

package/dist/types/components/Hooks/useClickOutside.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+type Event = MouseEvent | TouchEvent;
+export declare const useClickOutside: <T extends HTMLElement>(ref: RefObject<T | null>, callback: (event: Event) => void) => void;
+export {};

package/dist/types/components/Menu/index.d.ts

@@ -0,0 +1,4 @@
+import './index.css';
+import { MenuProps } from './types';
+declare const Menu: React.FC<MenuProps>;
+export default Menu;

package/dist/types/components/Menu/types.d.ts

@@ -0,0 +1,18 @@
+export interface MenuItemProps {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    childrens?: MenuItemProps[];
+}
+export interface MenuProps {
+    mode: 'horizontal' | 'vertical' | 'inline-flex' | 'inline-block';
+    items: MenuItemProps[];
+    className?: string;
+    style?: React.CSSProperties;
+    selectedKey?: string;
+    collapsed?: boolean;
+    onChange?: (info: MenuItemProps, key: string) => void;
+    menuItemStyle?: React.CSSProperties;
+}
+export interface ContextProps {
+}

package/dist/types/components/Modal/types.d.ts

@@ -9,6 +9,7 @@ export interface ModalProps {
     direction?: 'center' | 'top-right' | 'bottom-right' | 'normal';
     top?: number;
     footer?: null | React.ReactNode;
+    bordered?: boolean;
     onCancel?: () => void;
     onOk?: () => void;
     children?: React.ReactNode;

package/dist/types/components/Navigation/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NavigationProps } from './types';
+import './Navigation.css';
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/dist/types/components/Navigation/types.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+export interface NavigationItem {
+    key: string;
+    name: string;
+    description?: string;
+    icon?: React.ReactNode;
+    childrens?: NavigationItem[];
+    disabled?: boolean;
+}
+export type NavigationMode = 'vertical' | 'horizontal';
+export interface NavigationProps {
+    items: NavigationItem[];
+    selectedKey?: string;
+    collapsed?: boolean;
+    defaultOpenKeys?: string[];
+    mode?: NavigationMode;
+    closeOnOutsideClick?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    onChange?: (item: NavigationItem, key: string) => void;
+    onCollapseChange?: (collapsed: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    width?: number;
+    collapsedWidth?: number;
+    animationDuration?: number;
+}
+export interface NavigationState {
+    openKeys: string[];
+    selectedKey: string;
+    collapsed: boolean;
+}
+export interface NavigationContextType {
+    openKeys: string[];
+    selectedKey: string;
+    collapsed: boolean;
+    keyRef: React.RefObject<string>;
+    clickNodeRef: React.RefObject<NavigationItem | null>;
+    toggleOpenKey: (key: string) => void;
+    setSelectedKey: (key: string) => void;
+    toggleCollapsed: () => void;
+}
+export {};

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Pagination.css';
+import type { PaginationProps } from './types';
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/types/components/Pagination/types.d.ts

@@ -0,0 +1,29 @@
+export interface PaginationProps {
+    total?: number;
+    current?: number;
+    defaultCurrent?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    onChange?: {
+        (current: number): void;
+        (current: number, pageSize?: number): void;
+    };
+    pageSizeOptions?: string[];
+    showSizeChanger?: boolean;
+    showQuickJumper?: boolean;
+    showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+    size?: 'default' | 'small';
+    /**
+    * 分页组件位置对齐方式
+    */
+    align?: 'flex-start' | 'center' | 'flex-end';
+    /**
+     * 自定义CSS类名
+     */
+    className?: string;
+    /**
+     * 自定义内联样式
+     */
+    style?: React.CSSProperties;
+}
+export {};

package/dist/types/components/Steps/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StepsProps } from './types';
+import './Steps.css';
+declare const Steps: React.FC<StepsProps>;
+export default Steps;

package/dist/types/components/Steps/types.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+export interface StepItem {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    node?: React.ReactNode;
+    status?: StepStatus;
+    disabled?: boolean;
+    tailColor?: string;
+    tailTitle?: React.ReactNode;
+    tailType?: 'solid' | 'dashed';
+}
+export interface StepsProps {
+    current?: number;
+    status?: StepStatus;
+    direction?: 'horizontal' | 'vertical';
+    size?: 'default' | 'small';
+    type?: 'default' | 'panel';
+    items: StepItem[];
+    onChange?: (current: number) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface StepContextType {
+    current: number;
+    status: StepStatus;
+    direction: 'horizontal' | 'vertical';
+    size: 'default' | 'small';
+    type: 'default' | 'panel';
+    onChange?: (current: number) => void;
+}

package/dist/types/components/Table/index.d.ts

@@ -14,7 +14,7 @@ export interface PaginationProps {
     pageSize?: number;
     total?: number;
     current?: number;
-    onChange?: (page: number, pageSize: number) => void;
+    onChange?: (page: number, pageSize?: number) => void;
     [key: string]: any;
 }
 interface TableProps {

package/dist/types/components/Tabs/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabsProps } from './types';
+import './Tabs.css';
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/types/components/Tabs/types.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface TabItem {
+    key: string;
+    label: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+    closable?: boolean;
+    icon?: React.ReactNode;
+}
+export type TabPlacement = 'top' | 'start' | 'end' | 'bottom';
+export type TabType = 'line' | 'card';
+export interface TabsProps {
+    items?: TabItem[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    onClose?: (key: string) => void;
+    tabsClosable?: boolean;
+    tabPlacement?: TabPlacement;
+    type?: TabType;
+    onAdd?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    draggable?: boolean;
+    onDragEnd?: (items: TabItem[]) => void;
+}

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

@@ -1,4 +1,5 @@
 export { default as Button } from './Button';
+export { default as Cascader } from './Cascader';
 export { default as ColorPicker } from './ColorPicker';
 export { default as CopyToClipboard, useOnCopy as useCopy } from './CopyToClipboard';
 export { default as Divider } from './Divider';
@@ -19,5 +20,12 @@ export { default as Typography } from './Typography';
 export { default as Masonry } from './Masonry';
 export { default as Space } from './Space';
 export { default as Anchor } from './Anchor';
+export { default as Breadcrumb } from './Breadcrumb';
 export { default as I18nProvider, useI18n, load18n } from '../i18n/I18nProvider';
 export { default as i18n } from '../i18n/index';
+export { default as Dropdown } from './Dropdown';
+export { default as Menu } from './Menu';
+export { default as Pagination } from './Pagination';
+export { default as Navigation } from './Navigation';
+export { default as Steps } from './Steps';
+export { default as Tabs } from './Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "IDP Studio Design System - React Component Library",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -49,6 +49,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.23",
     "css-loader": "^6.0.0",
+    "dnd-kit": "^0.0.2",
     "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.32.0",
     "html-webpack-plugin": "^5.6.5",
@@ -75,10 +76,14 @@
     "webpack-dev-server": "^4.13.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.3.0",
     "prismjs": "^1.30.0",
     "react-color": "^2.19.3",
-    "react-syntax-highlighter": "^16.1.0"
+    "react-syntax-highlighter": "^16.1.0",
+    "styled-components": "^6.3.8"
   },
   "repository": {
     "type": "git",