🎨 chore: remove styled-components

ant-design · Oct 20, 2023 · cb2eb56 · cb2eb56
1 parent df815fc
commit cb2eb56
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -130,7 +130,6 @@
     "react-dom": "^18",
     "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
-    "styled-components": "^6.1.0",
     "stylelint": "^15",
     "typescript": "^5",
     "vitest": "latest"

diff --git a/src/ChatInputArea/demos/index.tsx b/src/ChatInputArea/demos/index.tsx
@@ -2,19 +2,13 @@ import { ActionIcon, ChatInputArea, DraggablePanel, Icon, TokenTag } from '@ant-
 import { Button } from 'antd';
 import { Archive, Eraser, Languages } from 'lucide-react';
 import { useState } from 'react';
-import styled from 'styled-components';
-
-const View = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 400px;
-`;
+import { Flexbox } from 'react-layout-kit';
 
 export default () => {
   const [expand, setExpand] = useState<boolean>(false);
+
   return (
-    <View>
+    <Flexbox height={400}>
       <div style={{ flex: 1 }}></div>
       <DraggablePanel expandable={false} fullscreen={expand} minHeight={200} placement="bottom">
         <ChatInputArea
@@ -31,6 +25,6 @@ export default () => {
           onExpandChange={setExpand}
         />
       </DraggablePanel>
-    </View>
+    </Flexbox>
   );
 };
diff --git a/src/DraggablePanel/demos/Layout.tsx b/src/DraggablePanel/demos/Layout.tsx
@@ -6,27 +6,13 @@ import {
   DraggablePanelHeader,
 } from '@ant-design/pro-chat';
 import { useState } from 'react';
-import styled from 'styled-components';
-
-const View = styled.div`
-  position: relative;
-
-  display: flex;
-
-  width: 100%;
-  height: 100%;
-  min-height: 500px;
-`;
-
-const Container = styled.div`
-  padding: 24px;
-`;
+import { Flexbox } from 'react-layout-kit';
 
 export default () => {
   const [expand, setExpand] = useState(true);
   const [pin, setPin] = useState(true);
   return (
-    <View>
+    <Flexbox style={{ minHeight: 500 }} width={'100%'} height={'100%'}>
       <DraggablePanel
         expand={expand}
         mode={pin ? 'fixed' : 'float'}
@@ -50,7 +36,9 @@ export default () => {
           <DraggablePanelFooter>Footer</DraggablePanelFooter>
         </DraggablePanelContainer>
       </DraggablePanel>
-      <Container style={{ flex: 1 }}>Content</Container>
-    </View>
+      <Flexbox padding={24} style={{ flex: 1 }}>
+        Content
+      </Flexbox>
+    </Flexbox>
   );
 };