feat: components (#33)

package.json

@@ -23,8 +23,11 @@
     "tokens-to-css": "npx style-dictionary build --config ./style-dictionary.json"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "antd": "5.12.1",
     "react": "18.2.0",
     "typescript": "5.3.2"
   }
-}
+}

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Avatar as AntAvatar } from "antd";
+import { AvatarProps as AntAvatarProps } from "antd";
+
+export interface IAvatarProps extends AntAvatarProps {
+}
+
+export const Avatar = (props: IAvatarProps) => {
+  return <>
+    <AntAvatar {...props}/>
+  </>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Badge as AntBadge } from "antd";
+import { BadgeProps as AntBadgeProps } from "antd";
+
+export interface IBadgeProps extends AntBadgeProps {
+}
+
+export const Badge = (props: IBadgeProps) => {
+  return <>
+    <AntBadge {...props}/>
+  </>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Calendar as AntCalendar } from "antd";
+import { CalendarProps as AntCalendarProps } from "antd";
+
+export interface ICalendarProps extends AntCalendarProps {
+}
+
+export const Calendar = (props: ICalendarProps) => {
+  return <>
+    <AntCalendar {...props}/>
+  </>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Card as AntCard } from "antd";
+import { CardProps as AntCardProps } from "antd";
+
+export interface ICardProps extends AntCardProps {
+}
+
+export const Card = (props: ICardProps) => {
+  return <>
+    <AntCard {...props}/>
+  </>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Carousel as AntCarousel } from "antd";
+import { CarouselProps as AntCarouselProps } from "antd";
+
+export interface ICarouselProps extends AntCarouselProps {
+}
+
+export const Carousel = (props: ICarouselProps) => {
+  return <>
+    <AntCarousel {...props}/>
+  </>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Collapse as AntCollapse } from "antd";
+import { CollapseProps as AntCollapseProps } from "antd";
+
+export interface ICollapseProps extends AntCollapseProps {
+}
+
+export const Collapse = (props: ICollapseProps) => {
+  return <>
+    <AntCollapse {...props}/>
+  </>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Descriptions as AntDescriptions } from "antd";
+import { DescriptionsProps as AntDescriptionsProps } from "antd";
+
+export interface IDescriptionsProps extends AntDescriptionsProps {
+}
+
+export const Descriptions = (props: IDescriptionsProps) => {
+  return <>
+    <AntDescriptions {...props}/>
+  </>;
+};

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

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { Empty } from "src/components/data-display/Empty/Empty";
+
+const meta: Meta<typeof Empty> = {
+  title: "Aquarium/Data Display/Empty",
+  component: Empty,
+
+  args: {
+    description: "Default Message",
+    image: Empty.PRESENTED_IMAGE_DEFAULT,
+    imageStyle: undefined,
+  },
+};
+export default meta;
+
+
+type Story = StoryObj<typeof Empty>
+
+/*
+  Initial story templates generated by AI.
+  Customize the stories based on specific requirements.
+*/
+
+export const Primary: Story = {};
+
+export const CustomDescription: Story = {
+  args: {
+    description: "Custom description for empty state",
+  },
+};
+
+export const CustomImageStyle: Story = {
+  args: {
+    imageStyle: { width: "60px", height: "60px" },
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    image: null,
+  },
+};
+
+export const AltImage: Story = {
+  args: {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+  },
+};
+
+export const CustomDescriptionAndImage: Story = {
+  args: {
+    description: <>
+      <p>This is a custom description for the empty state.</p>
+      <b>Feel free to add <i>formatted</i> content here.</b>
+    </>,
+    imageStyle: { width: "200px", height: "200px" },
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    description: "",
+  },
+};
+
+export const CustomImageAndStyle: Story = {
+  args: {
+    description: "No data available",
+    imageStyle: { borderRadius: "50%", boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)" },
+  },
+};
+
+export const NoImageAndNoDescription: Story = {
+  args: {
+    description: null,
+    image: null,
+  },
+};

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { Empty as AntEmpty } from "antd";
+import { EmptyProps as AntEmptyProps } from "antd";
+
+export interface IEmptyProps extends AntEmptyProps {
+}
+
+export const Empty = (props: IEmptyProps) => {
+  return <>
+    <AntEmpty {...props}/>
+  </>;
+};
+
+Empty.PRESENTED_IMAGE_DEFAULT = AntEmpty.PRESENTED_IMAGE_DEFAULT;
+Empty.PRESENTED_IMAGE_SIMPLE = AntEmpty.PRESENTED_IMAGE_SIMPLE;

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Image as AntImage } from "antd";
+import { ImageProps as AntImageProps } from "antd";
+
+export interface IImageProps extends AntImageProps {
+}
+
+export const Image = (props: IImageProps) => {
+  return <>
+    <AntImage {...props}/>
+  </>;
+};