layout for story

Author: bubulux

apps/frontend/ui/src/layout/partials/Sidebar/func.tsx

@@ -1,10 +1,13 @@
 import type { JSX } from "react";
 
+import { Flex, Divider } from "@lib-components";
+import { Logo } from "@lib-theme";
+
 import useSidebarClasses from "@app-ui/layout/partials/Sidebar/styles";
 
 type TProps = {};
 
 export default function Sidebar({}: TProps): JSX.Element {
   const classes = useSidebarClasses();
-  return <div className={classes.root}>Sidebar</div>;
+  return <Flex className={classes.root}>Sidebar</Flex>;
 }

apps/frontend/ui/src/layout/partials/Sidebar/stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Sidebar from "@app-ui/layout/partials/Sidebar";
+
+import { Flex } from "@lib-components";
+import { tokens } from "@lib-theme";
+
+const meta: Meta = {
+  title: "App/UI/Layout/Partials/Sidebar",
+  component: Sidebar,
+};
+
+export default meta;
+
+type TStory = StoryObj<typeof Sidebar>;
+
+export const Index: TStory = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        backgroundColor: "black",
+        gap: "1rem",
+        padding: "1rem",
+      }}
+    >
+      <Sidebar />
+      <div
+        style={{
+          width: "100%",
+          height: "600px",
+          backgroundColor: tokens.colorNeutralBackground2,
+        }}
+      />
+    </div>
+  ),
+};

apps/frontend/ui/src/layout/partials/Sidebar/stories.tsx

@@ -1 +1,3 @@
+export { Divider } from "@fluentui/react-components";
+
 export { Flex } from "@lib-components/layout";