feat: setup the base of channel feature

client/.storybook/preview.ts → client/.storybook/preview.tsx

@@ -1,5 +1,8 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import React from "react";
+
 import "../src/styles/global.css";
 
 const preview: Preview = {
@@ -46,6 +49,11 @@ const preview: Preview = {
       },
       defaultTheme: "light",
     }),
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
   ],
 };
 

client/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
     "valibot": "^0.20.1"
   },
   "devDependencies": {

client/src/App.tsx

@@ -1,23 +1,57 @@
 import { BrowserRouter } from "react-router-dom";
 import { LoadingOverlay } from "./components/loading-overlay/loading-overlay";
 import { AppRoutes } from "./routes";
-import { Suspense } from "react";
-import { LoadingOverlayProvider } from "./providers/loading-overlay.tsx";
-import { AuthProvider } from "./providers/auth.tsx";
+import { Suspense, useCallback, useContext, useEffect } from "react";
+import {
+  LoadingOverlayContext,
+  LoadingOverlayProvider,
+} from "./providers/loading-overlay.tsx";
+import { AuthContext, AuthProvider } from "./providers/auth.tsx";
+import { ChannelContext, ChannelProvider } from "./providers/channel.tsx";
 
-function App() {
+interface AppRootProps {
+  children: React.ReactNode;
+}
+
+const AppRoot = ({ children }: AppRootProps) => {
+  const { setIsLoading } = useContext(LoadingOverlayContext);
+  const { fetchUser } = useContext(AuthContext);
+  const { fetchChannels } = useContext(ChannelContext);
+
+  const setupApplication = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await fetchUser();
+      await fetchChannels();
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetchUser, fetchChannels, setIsLoading]);
+
+  useEffect(() => {
+    void setupApplication();
+  }, []);
+
+  return <div>{children}</div>;
+};
+
+const App = () => {
   return (
     <AuthProvider>
-      <LoadingOverlayProvider>
-        <LoadingOverlay />
-        <BrowserRouter>
-          <Suspense>
-            <AppRoutes />
-          </Suspense>
-        </BrowserRouter>
-      </LoadingOverlayProvider>
+      <ChannelProvider>
+        <LoadingOverlayProvider>
+          <LoadingOverlay />
+          <AppRoot>
+            <BrowserRouter>
+              <Suspense>
+                <AppRoutes />
+              </Suspense>
+            </BrowserRouter>
+          </AppRoot>
+        </LoadingOverlayProvider>
+      </ChannelProvider>
     </AuthProvider>
   );
-}
+};
 
 export default App;

client/src/features/channel/components/layout/__stories__/layout.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta } from "@storybook/react";
+import { ChannelLayout } from "..";
+
+const meta = {
+  title: "Features/Channel/Layout",
+} satisfies Meta;
+
+export default meta;
+
+export const Overview = () => (
+  <ChannelLayout
+    sidePanel={<span>Channel List</span>}
+    main={<span>Channel Chat</span>}
+  />
+);

client/src/features/channel/components/layout/index.ts

@@ -0,0 +1 @@
+export * from "./layout"

client/src/features/channel/components/layout/layout.css.ts

@@ -0,0 +1,30 @@
+import { constants, vars } from "@/styles";
+import { style } from "@vanilla-extract/css";
+
+export const styles = {
+  channelLayoutWrapper: style({
+    display: "flex",
+    width: "100%",
+    height: "100dvh",
+  }),
+  channelLayoutSidePanel: style({
+    width: constants.sizes.channelLayoutSidePanelWidth,
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: vars.spacing[4],
+    padding: vars.spacing[4],
+    boxSizing: "border-box",
+  }),
+  channelLayoutSidePanelLogo: style({
+    color: vars.color.gray[11],
+    fontSize: vars.font.size["xl"],
+    padding: vars.spacing[4],
+  }),
+  channelLayoutMain: style({
+    flexGrow: 1,
+    background: vars.color.gray[2],
+    borderLeft: `1px solid ${vars.color.gray[6]}`,
+  }),
+};

client/src/features/channel/components/layout/layout.tsx

@@ -0,0 +1,21 @@
+import { MaximumIcon } from "@/components/icons/maximum";
+import { styles } from "./layout.css";
+
+interface ChannelLayoutProps {
+  sidePanel: React.ReactNode;
+  main: React.ReactNode;
+}
+
+export const ChannelLayout = ({ sidePanel, main }: ChannelLayoutProps) => {
+  return (
+    <div className={styles.channelLayoutWrapper}>
+      <div className={styles.channelLayoutSidePanel}>
+        <div className={styles.channelLayoutSidePanelLogo}>
+          <MaximumIcon />
+        </div>
+        {sidePanel}
+      </div>
+      <div className={styles.channelLayoutMain}>{main}</div>
+    </div>
+  );
+};

client/src/features/channel/pages/top/__stories__/channel-top.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react";
+import { ChannelTopPageTemplate } from "../template";
+
+const meta = {
+  title: "Features/Channel/Top",
+} satisfies Meta;
+
+export default meta;
+
+const mockUser = {
+  name: "test",
+  imageURL: "https://example.com",
+};
+
+const mockChannels = [
+  {
+    id: 1,
+    name: "general",
+  },
+  {
+    id: 2,
+    name: "random",
+  },
+  {
+    id: 3,
+    name: "random2",
+  },
+];
+
+export const Overview = () => (
+  <ChannelTopPageTemplate user={mockUser} channels={mockChannels} />
+);

client/src/features/channel/pages/top/components/channel-list/__stories__/channel-list.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta } from "@storybook/react";
+import { ChannelList } from "..";
+
+const meta = {
+  title: "Features/Channel/Top/Components/ChannelList",
+} satisfies Meta;
+
+export default meta;
+
+const mockChannels = [
+  {
+    id: 1,
+    name: "general",
+  },
+  {
+    id: 2,
+    name: "random",
+  },
+  {
+    id: 3,
+    name: "random2",
+  },
+];
+
+export const Overview = () => <ChannelList channels={mockChannels} />;
+
+export const WithActiveChannel = () => (
+  <ChannelList
+    channels={[
+      mockChannels[0],
+      { ...mockChannels[1], active: true },
+      mockChannels[2],
+    ]}
+  />
+);
+
+export const WithNotification = () => (
+  <ChannelList
+    channels={[
+      mockChannels[0],
+      { ...mockChannels[1], hasNotification: true },
+      mockChannels[2],
+    ]}
+  />
+);

client/src/features/channel/pages/top/components/channel-list/channel-list.css.ts

@@ -0,0 +1,45 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "@/styles";
+
+export const styles = {
+  channelList: style({
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: vars.spacing[2],
+    padding: vars.spacing[4],
+    overflowY: "auto",
+  }),
+  channelListItem: style({
+    display: "flex",
+    gap: vars.spacing[2],
+    alignItems: "center",
+    cursor: "pointer",
+    color: vars.color.gray[11],
+    textDecoration: "none",
+    transition: vars.transition.normal("background"),
+    background: "transparent",
+    padding: `${vars.spacing[1]} ${vars.spacing[2]}`,
+    borderRadius: vars.spacing[2],
+
+    selectors: {
+      "&:hover": {
+        background: vars.color.gray[3],
+      },
+    },
+  }),
+  channelListItemActive: style({
+    color: vars.color.gray[12],
+    background: vars.color.gray[4],
+    fontWeight: 600,
+  }),
+  channelListItemNotification: style({
+    color: vars.color.gray[12],
+  }),
+  channelListItemIcon: style({
+    strokeWidth: 3,
+    width: vars.spacing[4],
+    flexShrink: 0,
+  }),
+};

client/src/features/channel/pages/top/components/channel-list/channel-list.tsx

@@ -0,0 +1,36 @@
+import { Link } from "react-router-dom";
+import { styles } from "./channel-list.css";
+import { Hash } from "react-feather";
+import { clsx } from "@/libs/clsx";
+
+interface Channel {
+  id: number;
+  name: string;
+  active?: boolean;
+  hasNotification?: boolean;
+}
+
+interface Props {
+  channels: Channel[];
+}
+
+export const ChannelList = ({ channels }: Props) => {
+  return (
+    <div className={styles.channelList}>
+      {channels.map((channel) => (
+        <Link
+          key={channel.id}
+          className={clsx(
+            styles.channelListItem,
+            channel.hasNotification && styles.channelListItemNotification,
+            channel.active && styles.channelListItemActive
+          )}
+          to={`/channel/${channel.id}`}
+        >
+          <Hash className={styles.channelListItemIcon} />
+          {channel.name}
+        </Link>
+      ))}
+    </div>
+  );
+};

client/src/features/channel/pages/top/components/channel-list/index.ts

@@ -0,0 +1 @@
+export * from "./channel-list";

client/src/features/channel/pages/top/index.ts

@@ -0,0 +1 @@
+export { ChannelTopPage as default } from "./page";