Base Components

.eslintrc.cjs

@@ -1,52 +1,59 @@
-module.exports = {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "airbnb",
-    "airbnb/hooks",
-    "airbnb-typescript",
-    "@feature-sliced",
-    "plugin:storybook/recommended"
-  ],
-  "ignorePatterns": ["*.pnp.*", "*.config.ts", "node_modules", ".yarn", ".eslintrc.cjs", "dist/**", "**/*.stories.tsx"],
-  "overrides": [
-    {
-      "env": {
-        "node": true
-      },
-      "files": [
-        ".eslintrc.{js,cjs}"
-      ],
-      "parserOptions": {
-        "sourceType": "script"
-      }
-    }
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "project": "./tsconfig.app.json"
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "react"
-  ],
-  "rules": {
-    "react/react-in-jsx-scope": 'off',
-    "react/require-default-props": "off",
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        '': 'never',
-        'js': 'never',
-        'jsx': 'never',
-        'ts': 'never',
-        'tsx': 'never'
-      }
-    ],
-  }
-}
+module.exports = {
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:storybook/recommended"
+  ],
+  "ignorePatterns": ["*.pnp.*", "*.config.ts", "node_modules", ".yarn", ".eslintrc.cjs", "dist/**", "**/*.stories.tsx"],
+  "overrides": [
+    {
+      "env": {
+        "node": true
+      },
+      "files": [
+        ".eslintrc.{js,cjs}"
+      ],
+      "parserOptions": {
+        "sourceType": "script"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.app.json"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        '': 'never',
+        'js': 'never',
+        'jsx': 'never',
+        'ts': 'never',
+        'tsx': 'never'
+      }
+    ],
+    'react/require-default-props': 'off',
+    'react/no-unknown-property': [
+      'error',
+      {
+        ignore: ['css'],
+      }
+    ],
+    'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/no-use-before-define': 'off'
+  },
+}

.gitignore

@@ -26,4 +26,4 @@ dist-ssr
 *.sln
 *.sw?
 
-*storybook.log
+*storybook.log

.storybook/main.ts

@@ -1,16 +1,25 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
 };

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

@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import PassportProvider from '../src/providers/PassportProvider';
 
 const preview: Preview = {
   parameters: {
@@ -9,6 +10,13 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <PassportProvider>
+        <Story />
+      </PassportProvider>
+    )
+  ],
 };
 
 export default preview;

package.json

@@ -17,28 +17,30 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@tanstack/react-query": "^5.59.0",
     "emotion-normalize": "^11.0.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
+    "@chromatic-com/storybook": "1.9.0",
     "@emotion/babel-plugin": "^11.12.0",
     "@eslint/js": "^9.9.0",
     "@feature-sliced/eslint-config": "^0.1.1",
-    "@storybook/addon-essentials": "^8.3.4",
-    "@storybook/addon-interactions": "^8.3.4",
-    "@storybook/addon-links": "^8.3.4",
-    "@storybook/addon-onboarding": "^8.3.4",
-    "@storybook/blocks": "^8.3.4",
-    "@storybook/react": "^8.3.4",
-    "@storybook/react-vite": "^8.3.4",
-    "@storybook/test": "^8.3.4",
+    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-interactions": "8.3.4",
+    "@storybook/addon-links": "8.3.4",
+    "@storybook/addon-onboarding": "8.3.4",
+    "@storybook/blocks": "8.3.4",
+    "@storybook/react": "8.3.4",
+    "@storybook/react-vite": "8.3.4",
+    "@storybook/test": "8.3.4",
     "@types/eslint-plugin-jsx-a11y": "^6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "7.0.0",
+    "@typescript-eslint/parser": "^8.6.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -52,10 +54,11 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-storybook": "^0.9.0",
     "globals": "^15.9.0",
-    "storybook": "^8.3.4",
+    "storybook": "8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1"
   },

src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from '@components/avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    css: { control: 'object' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const AvatarImage: Story = {
+  args: {
+    src: 'https://picsum.photos/200',
+  },
+};
+
+export const DefaultAvatar: Story = {
+  args: {
+  },
+};

src/components/avatar/index.tsx

@@ -0,0 +1,21 @@
+import { ImgHTMLAttributes } from 'react';
+import useAvatarStyle from '@components/avatar/useAvatarStyle';
+import { CSSObject } from '@emotion/react';
+import defaultAvatar from '@assets/icons/default-avatar.svg';
+
+interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+  src?: string;
+  alt?: string;
+  css?: CSSObject;
+}
+
+function Avatar({
+  src, alt, css, ...rest
+}: AvatarProps) {
+  const { avatarStyle } = useAvatarStyle();
+  return (
+    <img src={src || defaultAvatar} css={[avatarStyle, css]} alt={alt || 'avatar'} {...rest} />
+  );
+}
+
+export default Avatar;

src/components/avatar/useAvatarStyle.ts

@@ -0,0 +1,16 @@
+import useTheme from '@hooks/useTheme';
+import { css } from '@emotion/react';
+
+function useAvatarStyle() {
+  const theme = useTheme();
+
+  const avatarStyle = css`
+    border-radius: ${theme.corners.round};
+    width: 60px;
+    height: 60px;
+  `;
+
+  return { avatarStyle };
+}
+
+export default useAvatarStyle;

src/components/button/button.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from '@components/button';
+import icon from '@assets/icons/eye.svg';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+
+    buttonTheme: {
+      control: 'radio',
+      options: ['default', 'dark', 'light-outlined'],
+    },
+    children: {
+      control: 'text',
+      defaultValue: 'Button Text',
+    },
+    css: { control: 'object' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    buttonTheme: 'default',
+    children: 'Default Button',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    buttonTheme: 'dark',
+    children: 'Dark Button',
+    icon,
+  },
+};
+
+export const CustomStyled: Story = {
+  args: {
+    buttonTheme: 'default',
+    children: 'Custom Styled Button',
+    css: {
+      backgroundColor: 'lightblue',
+      padding: '10px 20px',
+      borderRadius: '5px',
+      border: 'none',
+      cursor: 'pointer',
+    },
+  },
+};