feat: Organize component directories by type

src/components/AnnotationModal/AnnotationModal.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useState } from "react";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
-import { Button } from "src/components/Button/Button";
+import { Button } from "src/components/general/Button/Button";
 import { AnnotationModal } from "src/components/AnnotationModal/AnnotationModal";
 
 const meta: Meta<typeof AnnotationModal> = {

src/components/AnnotationModal/AnnotationModal.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { LoadingModal } from "../LoadingModal/LoadingModal";
 import { ILoadingModalProps } from "../LoadingModal/LoadingModal";
-import { Input } from "src/components/Input/Input";
-import { Dropdown } from "src/components/Dropdown/Dropdown";
-import { Button } from "src/components/Button/Button";
+import { DatePicker } from "src/components/data-entry/DatePicker/DatePicker";
+import { Dropdown } from "src/components/navigation/Dropdown/Dropdown";
+import { Input } from "src/components/data-entry/Input/Input";
+import { Flex } from "src/components/layout/Flex/Flex";
+import { Button } from "src/components/general/Button/Button";
 import { ItemType } from "antd/es/menu/hooks/useItems";
-import { DatePicker } from "src/components/DatePicker/DatePicker";
 
 export interface IAnnotationModalProps extends Omit<ILoadingModalProps<iAnnotationModel>, "fetchData" | "children"> {
 }
@@ -35,22 +36,19 @@ export function AnnotationModal(props: IAnnotationModalProps) {
                                     fetchData={fetchAnnotations}>
 
       {initData => <>
+        <Flex vertical gap={'middle'}>
+
         <Input placeholder="title"></Input>
 
-        <br/><br/>
 
         <Input placeholder="description"></Input>
 
-        <br/><br/>
-
         <DatePicker size={"large"}></DatePicker>
 
-        <br/><br/>
-
         <Dropdown dropdownButton={<Button copy="Events Dropdown"/>}
                   menu={{ items: initData.events.map(event => ({ value: event.name, label: event.name, type: "group" } as ItemType)) }}>
         </Dropdown>
-
+        </Flex>
       </>}
 
     </LoadingModal>

src/components/LoadingModal/LoadingModal.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useState } from "react";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
-import { Button } from "src/components/Button/Button";
+import { Button } from "src/components/general/Button/Button";
 import { LoadingModal } from "src/components/LoadingModal/LoadingModal";
 import { ILoadingModalProps } from "src/components/LoadingModal/LoadingModal";
 

src/components/LoadingModal/LoadingModal.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { useInitData } from "src/hooks/useInitData";
-import { Modal } from "src/components/Modal/Modal";
-import { IModalProps } from "src/components/Modal/Modal";
-import { Result } from "src/components/Result/Result";
-import { Skeleton } from "src/components/Skeleton/Skeleton";
+import { IModalProps } from "src/components/feedback/Modal/Modal";
+import { Skeleton } from "src/components/feedback/Skeleton/Skeleton";
+import { Modal } from "src/components/feedback/Modal/Modal";
+import { Result } from "src/components/feedback/Result/Result";
 
 export interface ILoadingModalProps<Data> extends Omit<IModalProps, "children"> {
   fetchData(): Promise<Data>;

src/components/data-display/Popover/Popover.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Popover } from "src/components/data-display/Popover/Popover";
+import { IPopoverProps } from "src/components/data-display/Popover/Popover";
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { Button } from "src/components/general/Button/Button";
+
+const meta: Meta<typeof Popover> = {
+  title: "Aquarium/Data Entry/Popover",
+  component: Popover,
+
+  args: {},
+};
+export default meta;
+
+
+type Story = StoryObj<typeof Popover>
+
+const PrimaryTemplate = (args: IPopoverProps) => {
+
+  const content = (
+    <div>
+      <p>Content</p>
+    </div>);
+
+  return <>
+    <Popover content={content} title="Title" trigger={args.trigger}>
+      <Button copy={args.children + ""}/>
+    </Popover>
+  </>;
+};
+
+
+export const Primary: Story = {
+  args: { trigger: "click", children: "Click Me" },
+  render: PrimaryTemplate,
+};
+
+export const Hover: Story = {
+  args: { trigger: "hover", children: "Hover Me" },
+  render: PrimaryTemplate,
+};
+
+export const Focus: Story = {
+  args: { trigger: "focus", children: "Focus Me" },
+  render: PrimaryTemplate,
+};

src/components/data-display/Popover/Popover.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Popover as AntPopover } from "antd";
+import { PopoverProps as AntPopoverProps } from "antd";
+
+export interface IPopoverProps extends AntPopoverProps {
+}
+
+export const Popover = (props: IPopoverProps) => {
+  return <>
+    <AntPopover {...props}/>
+  </>;
+};

src/components/AutoComplete/AutoComplete.stories.tsx → src/components/data-entry/AutoComplete/AutoComplete.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useState } from "react";
-import { AutoComplete } from "src/components/AutoComplete/AutoComplete";
-import { IAutoCompleteProps } from "src/components/AutoComplete/AutoComplete";
+import { AutoComplete } from "src/components/data-entry/AutoComplete/AutoComplete";
+import { IAutoCompleteProps } from "src/components/data-entry/AutoComplete/AutoComplete";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
 
@@ -34,7 +34,7 @@ const PrimaryTemplate = (args: IAutoCompleteProps) => {
   const [options, setOptions] = useState<IAutoCompleteProps["options"]>([]);
 
   let onSearch = (text: string) => setOptions(getPanelValue(text));
-  const onSelect = (value: string) => { alert("you selected value: " + value); };
+  const onSelect = (value: string) => { console.log("you selected value: " + value); };
 
   const getPanelValue = (searchText: string): IAutoCompleteProps["options"] => {
     if (!searchText) return [];

src/components/DatePicker/DatePicker.stories.tsx → src/components/data-entry/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import { DatePicker } from "src/components/DatePicker/DatePicker";
+import { DatePicker } from "src/components/data-entry/DatePicker/DatePicker";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
 

src/components/Input/Input.stories.tsx → src/components/data-entry/Input/Input.stories.tsx

@@ -1,4 +1,4 @@
-import { Input } from "src/components/Input/Input";
+import { Input } from "src/components/data-entry/Input/Input";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
 

src/components/Modal/Modal.stories.tsx → src/components/feedback/Modal/Modal.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { useState } from "react";
-import { Modal } from "src/components/Modal/Modal";
-import { IModalProps } from "src/components/Modal/Modal";
+import { Modal } from "src/components/feedback/Modal/Modal";
+import { IModalProps } from "src/components/feedback/Modal/Modal";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
-import { Button } from "src/components/Button/Button";
+import { Button } from "src/components/general/Button/Button";
 
 const meta: Meta<typeof Modal> = {
   title: "Aquarium/Feedback/Modal",

src/components/Result/Result.stories.tsx → src/components/feedback/Result/Result.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
-import { Result } from "src/components/Result/Result";
+import { Result } from "src/components/feedback/Result/Result";
 
 const meta: Meta<typeof Result> = {
   title: "Aquarium/Feedback/Result",

src/components/Skeleton/Skeleton.stories.tsx → src/components/feedback/Skeleton/Skeleton.stories.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "src/components/Skeleton/Skeleton";
+import { Skeleton } from "src/components/feedback/Skeleton/Skeleton";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
 

src/components/Button/Button.stories.tsx → src/components/general/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Button } from "src/components/Button/Button";
+import { Button } from "src/components/general/Button/Button";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
 

src/components/layout/Flex/Flex.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { Flex } from "src/components/layout/Flex/Flex";
+
+const meta: Meta<typeof Flex> = {
+  title: "Aquarium/Feedback/Flex",
+  component: Flex,
+
+  args: {},
+};
+export default meta;
+
+
+type Story = StoryObj<typeof Flex>
+
+
+
+export const Primary: Story = {
+}; 

src/components/layout/Flex/Flex.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Flex as AntFlex } from "antd";
+import { FlexProps as AntFlexProps } from "antd";
+
+export interface IFlexProps extends AntFlexProps {
+}
+
+export const Flex = (props: IFlexProps) => {
+  return <>
+    <AntFlex {...props}/>
+  </>;
+};

src/components/layout/Space/Space.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { Space } from "src/components/layout/Space/Space";
+
+const meta: Meta<typeof Space> = {
+  title: "Aquarium/Feedback/Space",
+  component: Space,
+
+  args: {},
+};
+export default meta;
+
+
+type Story = StoryObj<typeof Space>
+
+
+export const Primary: Story = {
+}; 

src/components/layout/Space/Space.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Space as AntSpace } from "antd";
+import { SpaceProps as AntSpaceProps } from "antd";
+
+export interface ISpaceProps extends AntSpaceProps {
+}
+
+export const Space = (props: ISpaceProps) => {
+  return <>
+    <AntSpace {...props}/>
+  </>;
+};

src/components/Dropdown/Dropdown.stories.tsx → src/components/navigation/Dropdown/Dropdown.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Dropdown } from "src/components/Dropdown/Dropdown";
+import { Dropdown } from "src/components/navigation/Dropdown/Dropdown";
 import { Meta } from "@storybook/react";
 import { StoryObj } from "@storybook/react";
 import { SmileOutlined } from "@ant-design/icons";
-import { Button } from "src/components/Button/Button";
+import { Button } from "src/components/general/Button/Button";
 
 const meta: Meta<typeof Dropdown> = {
   title: "Aquarium/Navigation/Dropdown",