From dde0f3a259d4d32eabc6e66a085532ffd1f53884 Mon Sep 17 00:00:00 2001
From: jdickman <jdickman@mparticle.com>
Date: Tue, 12 Dec 2023 15:21:01 -0800
Subject: [PATCH 1/2] organize component directories by type

---
 .../AnnotationModal.stories.tsx               |  2 +-
 .../AnnotationModal/AnnotationModal.tsx       | 18 ++++---
 .../LoadingModal/LoadingModal.stories.tsx     |  2 +-
 src/components/LoadingModal/LoadingModal.tsx  |  8 ++--
 .../data-display/Popover/Popover.stories.tsx  | 47 +++++++++++++++++++
 .../data-display/Popover/Popover.tsx          | 12 +++++
 .../AutoComplete/AutoComplete.stories.tsx     |  6 +--
 .../AutoComplete/AutoComplete.tsx             |  0
 .../DatePicker/DatePicker.stories.tsx         |  2 +-
 .../DatePicker/DatePicker.tsx                 |  0
 .../{ => data-entry}/Input/Input.stories.tsx  |  2 +-
 .../{ => data-entry}/Input/Input.tsx          |  0
 .../{ => feedback}/Modal/Modal.stories.tsx    |  6 +--
 src/components/{ => feedback}/Modal/Modal.tsx |  0
 .../{ => feedback}/Result/Result.stories.tsx  |  2 +-
 .../{ => feedback}/Result/Result.tsx          |  0
 .../Skeleton/Skeleton.stories.tsx             |  2 +-
 .../{ => feedback}/Skeleton/Skeleton.tsx      |  0
 .../{ => general}/Button/Button.stories.tsx   |  0
 .../{ => general}/Button/Button.tsx           |  0
 src/components/layout/Flex/Flex.stories.tsx   | 19 ++++++++
 src/components/layout/Flex/Flex.tsx           | 12 +++++
 src/components/layout/Space/Space.stories.tsx | 18 +++++++
 src/components/layout/Space/Space.tsx         | 12 +++++
 .../Dropdown/Dropdown.stories.tsx             |  4 +-
 .../{ => navigation}/Dropdown/Dropdown.tsx    |  0
 26 files changed, 146 insertions(+), 28 deletions(-)
 create mode 100644 src/components/data-display/Popover/Popover.stories.tsx
 create mode 100644 src/components/data-display/Popover/Popover.tsx
 rename src/components/{ => data-entry}/AutoComplete/AutoComplete.stories.tsx (86%)
 rename src/components/{ => data-entry}/AutoComplete/AutoComplete.tsx (100%)
 rename src/components/{ => data-entry}/DatePicker/DatePicker.stories.tsx (80%)
 rename src/components/{ => data-entry}/DatePicker/DatePicker.tsx (100%)
 rename src/components/{ => data-entry}/Input/Input.stories.tsx (89%)
 rename src/components/{ => data-entry}/Input/Input.tsx (100%)
 rename src/components/{ => feedback}/Modal/Modal.stories.tsx (83%)
 rename src/components/{ => feedback}/Modal/Modal.tsx (100%)
 rename src/components/{ => feedback}/Result/Result.stories.tsx (89%)
 rename src/components/{ => feedback}/Result/Result.tsx (100%)
 rename src/components/{ => feedback}/Skeleton/Skeleton.stories.tsx (83%)
 rename src/components/{ => feedback}/Skeleton/Skeleton.tsx (100%)
 rename src/components/{ => general}/Button/Button.stories.tsx (100%)
 rename src/components/{ => general}/Button/Button.tsx (100%)
 create mode 100644 src/components/layout/Flex/Flex.stories.tsx
 create mode 100644 src/components/layout/Flex/Flex.tsx
 create mode 100644 src/components/layout/Space/Space.stories.tsx
 create mode 100644 src/components/layout/Space/Space.tsx
 rename src/components/{ => navigation}/Dropdown/Dropdown.stories.tsx (91%)
 rename src/components/{ => navigation}/Dropdown/Dropdown.tsx (100%)

diff --git a/src/components/AnnotationModal/AnnotationModal.stories.tsx b/src/components/AnnotationModal/AnnotationModal.stories.tsx
index 1836d56b2..ee58a96b3 100644
--- a/src/components/AnnotationModal/AnnotationModal.stories.tsx
+++ b/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> = {
diff --git a/src/components/AnnotationModal/AnnotationModal.tsx b/src/components/AnnotationModal/AnnotationModal.tsx
index 122196031..ab7a7c64a 100644
--- a/src/components/AnnotationModal/AnnotationModal.tsx
+++ b/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>
diff --git a/src/components/LoadingModal/LoadingModal.stories.tsx b/src/components/LoadingModal/LoadingModal.stories.tsx
index aa034be30..73b786ea4 100644
--- a/src/components/LoadingModal/LoadingModal.stories.tsx
+++ b/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";
 
diff --git a/src/components/LoadingModal/LoadingModal.tsx b/src/components/LoadingModal/LoadingModal.tsx
index b3035c03e..32f4a73fd 100644
--- a/src/components/LoadingModal/LoadingModal.tsx
+++ b/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>;
diff --git a/src/components/data-display/Popover/Popover.stories.tsx b/src/components/data-display/Popover/Popover.stories.tsx
new file mode 100644
index 000000000..ce9b3bc80
--- /dev/null
+++ b/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,
+};
\ No newline at end of file
diff --git a/src/components/data-display/Popover/Popover.tsx b/src/components/data-display/Popover/Popover.tsx
new file mode 100644
index 000000000..28a2e3cb8
--- /dev/null
+++ b/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}/>
+  </>;
+};
\ No newline at end of file
diff --git a/src/components/AutoComplete/AutoComplete.stories.tsx b/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx
similarity index 86%
rename from src/components/AutoComplete/AutoComplete.stories.tsx
rename to src/components/data-entry/AutoComplete/AutoComplete.stories.tsx
index c2dd8efaa..173b06277 100644
--- a/src/components/AutoComplete/AutoComplete.stories.tsx
+++ b/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 [];
diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/data-entry/AutoComplete/AutoComplete.tsx
similarity index 100%
rename from src/components/AutoComplete/AutoComplete.tsx
rename to src/components/data-entry/AutoComplete/AutoComplete.tsx
diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/data-entry/DatePicker/DatePicker.stories.tsx
similarity index 80%
rename from src/components/DatePicker/DatePicker.stories.tsx
rename to src/components/data-entry/DatePicker/DatePicker.stories.tsx
index ac54eaa80..24b709474 100644
--- a/src/components/DatePicker/DatePicker.stories.tsx
+++ b/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";
 
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/data-entry/DatePicker/DatePicker.tsx
similarity index 100%
rename from src/components/DatePicker/DatePicker.tsx
rename to src/components/data-entry/DatePicker/DatePicker.tsx
diff --git a/src/components/Input/Input.stories.tsx b/src/components/data-entry/Input/Input.stories.tsx
similarity index 89%
rename from src/components/Input/Input.stories.tsx
rename to src/components/data-entry/Input/Input.stories.tsx
index fa0a49ef9..bece2de3b 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/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";
 
diff --git a/src/components/Input/Input.tsx b/src/components/data-entry/Input/Input.tsx
similarity index 100%
rename from src/components/Input/Input.tsx
rename to src/components/data-entry/Input/Input.tsx
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/feedback/Modal/Modal.stories.tsx
similarity index 83%
rename from src/components/Modal/Modal.stories.tsx
rename to src/components/feedback/Modal/Modal.stories.tsx
index 86a0ecbbc..36a67fe88 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/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",
diff --git a/src/components/Modal/Modal.tsx b/src/components/feedback/Modal/Modal.tsx
similarity index 100%
rename from src/components/Modal/Modal.tsx
rename to src/components/feedback/Modal/Modal.tsx
diff --git a/src/components/Result/Result.stories.tsx b/src/components/feedback/Result/Result.stories.tsx
similarity index 89%
rename from src/components/Result/Result.stories.tsx
rename to src/components/feedback/Result/Result.stories.tsx
index 4779f1bf4..4c180c329 100644
--- a/src/components/Result/Result.stories.tsx
+++ b/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",
diff --git a/src/components/Result/Result.tsx b/src/components/feedback/Result/Result.tsx
similarity index 100%
rename from src/components/Result/Result.tsx
rename to src/components/feedback/Result/Result.tsx
diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/feedback/Skeleton/Skeleton.stories.tsx
similarity index 83%
rename from src/components/Skeleton/Skeleton.stories.tsx
rename to src/components/feedback/Skeleton/Skeleton.stories.tsx
index 4205abf76..1a6ad0e7f 100644
--- a/src/components/Skeleton/Skeleton.stories.tsx
+++ b/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";
 
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/feedback/Skeleton/Skeleton.tsx
similarity index 100%
rename from src/components/Skeleton/Skeleton.tsx
rename to src/components/feedback/Skeleton/Skeleton.tsx
diff --git a/src/components/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx
similarity index 100%
rename from src/components/Button/Button.stories.tsx
rename to src/components/general/Button/Button.stories.tsx
diff --git a/src/components/Button/Button.tsx b/src/components/general/Button/Button.tsx
similarity index 100%
rename from src/components/Button/Button.tsx
rename to src/components/general/Button/Button.tsx
diff --git a/src/components/layout/Flex/Flex.stories.tsx b/src/components/layout/Flex/Flex.stories.tsx
new file mode 100644
index 000000000..ab4d5a871
--- /dev/null
+++ b/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 = {
+}; 
\ No newline at end of file
diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
new file mode 100644
index 000000000..690fe3c73
--- /dev/null
+++ b/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}/>
+  </>;
+};
\ No newline at end of file
diff --git a/src/components/layout/Space/Space.stories.tsx b/src/components/layout/Space/Space.stories.tsx
new file mode 100644
index 000000000..cea0ba814
--- /dev/null
+++ b/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 = {
+}; 
\ No newline at end of file
diff --git a/src/components/layout/Space/Space.tsx b/src/components/layout/Space/Space.tsx
new file mode 100644
index 000000000..1bebfb317
--- /dev/null
+++ b/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}/>
+  </>;
+};
\ No newline at end of file
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/navigation/Dropdown/Dropdown.stories.tsx
similarity index 91%
rename from src/components/Dropdown/Dropdown.stories.tsx
rename to src/components/navigation/Dropdown/Dropdown.stories.tsx
index 86c7c1a5f..b3d938341 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/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",
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/navigation/Dropdown/Dropdown.tsx
similarity index 100%
rename from src/components/Dropdown/Dropdown.tsx
rename to src/components/navigation/Dropdown/Dropdown.tsx

From cdf374f1a980e75b6d49b41a87f9affbd8f6c9bd Mon Sep 17 00:00:00 2001
From: jdickman <jdickman@mparticle.com>
Date: Tue, 12 Dec 2023 15:28:40 -0800
Subject: [PATCH 2/2] update Button directory

---
 src/components/general/Button/Button.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx
index 795219850..87d388da8 100644
--- a/src/components/general/Button/Button.stories.tsx
+++ b/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";