✨ feat: 初始化基础组件

.dumirc.ts

@@ -3,7 +3,9 @@ import { homepage } from './package.json';
 
 export default defineConfig({
   themeConfig: {
-    name: 'lobe-ui',
-    github: homepage,
+    name: 'Lobe UI',
+    socialLinks: {
+      github: homepage,
+    },
   },
 });

CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lobe-ui",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "ui kit for lobehub",
   "keywords": [
     "npm",
@@ -15,7 +15,7 @@
     "url": "https://github.com/lobehub/lobe-ui.git"
   },
   "license": "MIT",
-  "author": "LobeHubƒ",
+  "author": "LobeHub",
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -57,14 +57,26 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "dependencies": {
+    "@babel/runtime": "^7",
+    "antd": "^5",
+    "antd-style": "^3",
+    "chroma-js": "^2",
+    "lucide-react": "latest",
+    "re-resizable": "^6",
+    "react-layout-kit": "^1",
+    "react-rnd": "^10",
+    "styled-components": "^6.0.0-rc.1",
+    "use-merge-value": "^1"
+  },
   "devDependencies": {
     "@commitlint/cli": "^17",
     "@testing-library/react": "^13",
+    "@types/chroma-js": "^2",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@umijs/lint": "^4",
     "@vitest/coverage-c8": "latest",
-    "antd": "^5",
     "commitlint": "^17",
     "commitlint-config-gitmoji": "^2",
     "concurrently": "^7",
@@ -76,7 +88,7 @@
     "eslint-import-resolver-typescript": "^2",
     "father": "^4",
     "husky": "^8",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22",
     "lint-staged": "^13",
     "prettier": "^2",
     "prettier-plugin-organize-imports": "^3",
@@ -89,6 +101,10 @@
     "typescript": "^5",
     "vitest": "latest"
   },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

src/ActionIcon/demos/index.tsx

@@ -0,0 +1,23 @@
+import { Space } from 'antd';
+import { ActionIcon } from 'lobe-ui';
+import { Settings } from 'lucide-react';
+
+export default () => {
+  return (
+    <Space>
+      <ActionIcon icon={Settings} size="large" active />
+      <ActionIcon icon={Settings} size="large" />
+      <ActionIcon icon={Settings} />
+      <ActionIcon icon={Settings} size="small" />
+      <ActionIcon
+        icon={Settings}
+        size={{
+          blockSize: 40,
+          fontSize: 24,
+          strokeWidth: 2,
+          borderRadius: 20,
+        }}
+      />
+    </Space>
+  );
+};

src/ActionIcon/index.md

@@ -0,0 +1,13 @@
+---
+nav: Components
+group: Common
+title: ActionIcon
+---
+
+## Usage
+
+ActionIcon component <https://lucide.dev/>
+
+<code src="./demos/index.tsx"></code>
+
+<API></API>

src/ActionIcon/index.tsx

@@ -0,0 +1,94 @@
+import { DivProps } from '@/types';
+import { LucideIcon } from 'lucide-react';
+import React from 'react';
+import styled from 'styled-components';
+
+const Block = styled.div<{ active?: boolean }>`
+  cursor: pointer;
+
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+
+  color: ${({ active, theme }) => (active ? theme.colorText : theme.colorTextQuaternary)};
+
+  background: ${({ active, theme }) => (active ? theme.colorFill : 'transparent')};
+
+  transition: all 0.2s ${({ theme }) => theme.motionEaseOut};
+
+  &:hover {
+    background: ${({ theme }) => theme.colorFillTertiary};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colorText};
+    background: ${({ theme }) => theme.colorFill};
+  }
+`;
+
+export interface ActionIconProps extends DivProps {
+  active?: boolean;
+  size?:
+    | 'large'
+    | 'normal'
+    | 'small'
+    | {
+        blockSize: number;
+        fontSize: number;
+        strokeWidth: number;
+        borderRadius: number;
+      };
+  icon: LucideIcon;
+}
+
+const ActionIcon: React.FC<ActionIconProps> = ({
+  active,
+  icon,
+  size = 'normal',
+  style,
+  ...props
+}) => {
+  let blockSize: number;
+  let fontSize: number;
+  let strokeWidth: number;
+  let borderRadius: number;
+  const Icon: LucideIcon = icon;
+  switch (size) {
+    case 'large':
+      blockSize = 44;
+      fontSize = 24;
+      strokeWidth = 2;
+      borderRadius = 8;
+      break;
+    case 'normal':
+      blockSize = 36;
+      fontSize = 24;
+      strokeWidth = 2;
+      borderRadius = 5;
+      break;
+    case 'small':
+      blockSize = 28;
+      fontSize = 20;
+      strokeWidth = 1.5;
+      borderRadius = 5;
+      break;
+    default:
+      blockSize = size?.blockSize || 36;
+      fontSize = size?.fontSize || 24;
+      strokeWidth = size?.strokeWidth || 2;
+      borderRadius = size?.borderRadius || 5;
+      break;
+  }
+  return (
+    <Block
+      active={active}
+      style={{ width: blockSize, height: blockSize, borderRadius, ...style }}
+      {...props}
+    >
+      <Icon size={fontSize} strokeWidth={strokeWidth} />
+    </Block>
+  );
+};
+
+export default React.memo(ActionIcon);

src/DraggablePanel/demos/Bottom.tsx

@@ -0,0 +1,22 @@
+import { DraggablePanel } from 'lobe-ui';
+import styled from 'styled-components';
+
+const View = styled.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+`;
+
+export default () => {
+  return (
+    <View>
+      <div style={{ flex: 1 }}>Content</div>
+      <DraggablePanel placement="bottom">DraggablePanel</DraggablePanel>
+    </View>
+  );
+};

src/DraggablePanel/demos/Float.tsx

@@ -0,0 +1,23 @@
+import { DraggablePanel } from 'lobe-ui';
+import styled from 'styled-components';
+
+const View = styled.div`
+  position: relative;
+
+  display: flex;
+
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+`;
+
+export default () => {
+  return (
+    <View>
+      <DraggablePanel mode="float" placement="left">
+        DraggablePanel
+      </DraggablePanel>
+      <div style={{ flex: 1 }}>Content</div>
+    </View>
+  );
+};

src/DraggablePanel/demos/Left.tsx

@@ -0,0 +1,21 @@
+import { DraggablePanel } from 'lobe-ui';
+import styled from 'styled-components';
+
+const View = styled.div`
+  position: relative;
+
+  display: flex;
+
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+`;
+
+export default () => {
+  return (
+    <View>
+      <DraggablePanel placement="left">DraggablePanel</DraggablePanel>
+      <div style={{ flex: 1 }}>Content</div>
+    </View>
+  );
+};

src/DraggablePanel/demos/Pin.tsx

@@ -0,0 +1,23 @@
+import { DraggablePanel } from 'lobe-ui';
+import styled from 'styled-components';
+
+const View = styled.div`
+  position: relative;
+
+  display: flex;
+
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+`;
+
+export default () => {
+  return (
+    <View>
+      <DraggablePanel mode="float" placement="left" pin={false} showHandlerWhenUnexpand>
+        DraggablePanel
+      </DraggablePanel>
+      <div style={{ flex: 1 }}>Content</div>
+    </View>
+  );
+};

src/DraggablePanel/demos/Right.tsx

@@ -0,0 +1,21 @@
+import { DraggablePanel } from 'lobe-ui';
+import styled from 'styled-components';
+
+const View = styled.div`
+  position: relative;
+
+  display: flex;
+
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+`;
+
+export default () => {
+  return (
+    <View>
+      <div style={{ flex: 1 }}>Content</div>
+      <DraggablePanel placement="right">DraggablePanel</DraggablePanel>
+    </View>
+  );
+};

src/DraggablePanel/demos/Top.tsx

@@ -0,0 +1,22 @@
+import { DraggablePanel } from 'lobe-ui';
+import styled from 'styled-components';
+
+const View = styled.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+`;
+
+export default () => {
+  return (
+    <View>
+      <DraggablePanel placement="top">DraggablePanel</DraggablePanel>
+      <div style={{ flex: 1 }}>Content</div>
+    </View>
+  );
+};

src/DraggablePanel/index.md

@@ -0,0 +1,37 @@
+---
+nav: Components
+group: Layout
+title: DraggablePanel
+---
+
+## Usage
+
+DraggablePanel component
+
+### Mode
+
+**Fixed**
+
+<code src="./demos/Left.tsx"></code>
+
+**Float**
+
+<code src="./demos/Float.tsx"></code>
+
+**Pin**
+
+<code src="./demos/Pin.tsx"></code>
+
+### Positon
+
+**Right**
+
+<code src="./demos/Right.tsx"></code>
+
+**Top**
+
+<code src="./demos/Top.tsx"></code>
+
+**Bottom**
+
+<code src="./demos/Bottom.tsx"></code>