feature(layout): ✨ sidebar

README.md

@@ -0,0 +1,7 @@
+# 🚀 Teameights
+
+Refer to following link to find all info you need!
+
+🔗 [Notion](https://teameights.notion.site/ad80d7c691ba47a09be954dc992752ec?v=cffe6ca69a8d4c4b91675b35cfd733ad)
+
+![Logo T8S (8)](https://github.com/nmashchenko/teameights/assets/52038455/b1898e79-8515-4d50-a9ab-8b3d0cf5d042)

client/.eslintrc.json

@@ -1,4 +1,11 @@
 {
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true,
+    "es2021": true
+  },
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
   "extends": [

client/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd ./client && yarn lint
+cd ./client && yarn lint

client/.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd ./client && yarn build
+cd ./client && yarn build

client/.storybook/main.ts

@@ -2,7 +2,10 @@ import type { StorybookConfig } from '@storybook/nextjs';
 import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+    '../docs/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  ],
   staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
@@ -25,7 +28,7 @@ const config: StorybookConfig = {
     },
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
   core: {
     builder: '@storybook/builder-webpack5',

client/.storybook/preview.tsx

@@ -0,0 +1,85 @@
+import type { StoryFn } from '@storybook/react';
+import '../src/app/styles/globals.scss';
+import './font.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  viewMode: 'docs',
+  previewTabs: {
+    canvas: {
+      title: 'Story',
+    },
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+    },
+  },
+
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#26292b',
+      },
+      {
+        name: 'white',
+        value: '#fff',
+      },
+      {
+        name: 'additional white',
+        value: '#fafafa',
+      },
+    ],
+  },
+  viewport: {
+    viewports: {
+      '360': {
+        name: '360',
+        styles: {
+          width: '360px',
+          height: '780px',
+        },
+      },
+      '768': {
+        name: '768',
+        styles: {
+          width: '768px',
+          height: '1664px',
+        },
+      },
+      '1024': {
+        name: '1024',
+        styles: {
+          width: '1024px',
+          height: '576px',
+        },
+      },
+      '1600+': {
+        name: '1600+',
+        styles: {
+          width: '1600px',
+          height: '900px',
+        },
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (Story: StoryFn) => (
+    <div
+      style={{
+        margin: 10,
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'start',
+        flexDirection: 'column',
+        gap: '20px',
+      }}
+    >
+      <Story />
+    </div>
+  ),
+];

client/docs/colors.stories.mdx

@@ -0,0 +1,134 @@
+import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
+
+<Meta title='global/Colors' />
+
+<ColorPalette>
+  <ColorItem
+    title='Base'
+    subtitle='asdasd'
+    colors={{
+      'Black color': 'var(--black-color)',
+      'White colors': 'var(--white-color)',
+      'Card color': 'var(--cards-color)',
+      'BG color': 'var(--bg-color)',
+    }}
+  />
+  <ColorItem
+    title='Green'
+    subtitle='asdasd'
+    colors={{
+      'Dark color': 'var(--green-dark-color)',
+      'Normal color': 'var(--green-normal-color)',
+      'Active color': 'var(--green-active-color)',
+      'Bright color': 'var(--green-bright-color)',
+    }}
+  />
+  <ColorItem
+    title='Grey'
+    subtitle='asdasd'
+    colors={{
+      'Dark color': 'var(--grey-dark-color)',
+      'Normal color': 'var(--grey-normal-color)',
+      'Medium color': 'var(--grey-medium-color)',
+      'Light color': 'var(--grey-light-color)',
+    }}
+  />
+  <ColorItem
+    title='Red'
+    subtitle='asdasdasd'
+    colors={{
+      'Dark color': 'var(--red-dark-color)',
+      'Normal color': 'var(--red-normal-color)',
+      'Light color': 'var(--red-light-color)',
+      'Error color': 'var(--red-error-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Red'
+    colors={{
+      'Dark/Red': 'var(--additional-dark-red-color)',
+      'Normal/Red': 'var(--additional-normal-red-color)',
+      'Light/Red': 'var(--additional-light-red-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Orage'
+    colors={{
+      'Dark/Orange': 'var(--additional-dark-orange-color)',
+      'Normal/Orange': 'var(--additional-normal-orange-color)',
+      'Light/Orange': 'var(--additional-light-orange-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Yellow'
+    colors={{
+      'Dark/Yellow': 'var(--additional-dark-yellow-color)',
+      'Normal/Yellow': 'var(--additional-normal-yellow-color)',
+      'Light/Yellow': 'var(--additional-light-yellow-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Lime'
+    colors={{
+      'Dark/Lime': 'var(--additional-dark-lime-color)',
+      'Normal/Lime': 'var(--additional-normal-lime-color)',
+      'Light/Lime': 'var(--additional-light-lime-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Green'
+    colors={{
+      'Dark/Green': 'var(--additional-dark-green-color)',
+      'Normal/Green': 'var(--additional-normal-green-color)',
+      'Light/Green': 'var(--additional-light-green-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Sky'
+    colors={{
+      'Dark/Sky': 'var(--additional-dark-cyan-color)',
+      'Normal/Sky': 'var(--additional-normal-cyan-color)',
+      'Light/Sky': 'var(--additional-light-cyan-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Blue'
+    colors={{
+      'Dark/Blue': 'var(--additional-dark-blue-color)',
+      'Normal/Blue': 'var(--additional-normal-blue-color)',
+      'Light/Blue': 'var(--additional-light-blue-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Violet'
+    colors={{
+      'Dark/Violet': 'var(--additional-dark-violet-color)',
+      'Normal/Violet': 'var(--additional-normal-violet-color)',
+      'Light/Violet': 'var(--additional-light-violet-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Pink'
+    colors={{
+      'Dark/Pink': 'var(--additional-dark-pink-color)',
+      'Normal/Pink': 'var(--additional-normal-pink-color)',
+      'Light/Pink': 'var(--additional-light-pink-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='White'
+    colors={{
+      'Additional/White color': 'var(--additional-white-color)',
+    }}
+  />
+</ColorPalette>

client/docs/loading.stories.mdx

@@ -0,0 +1,14 @@
+import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
+
+<Meta title='global/Loading' />
+
+<ColorPalette>
+  <ColorItem
+    title='Loading'
+    subtitle='asdasd'
+    colors={{
+      'Base color': 'var(--loading-base-color)',
+      'Highlight color': 'var(--loading-highlight-color)',
+    }}
+  />
+</ColorPalette>

client/jest.config.mjs

@@ -0,0 +1,25 @@
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
+  testMatch: ['<rootDir>/src/**/*(*.)@(test).[tj]s?(x)'],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  moduleNameMapper: {
+    '^~/(.*)$': '<rootDir>/src/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

client/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

client/next.config.js

@@ -1,8 +1,7 @@
 /** @type {import('next').NextConfig} */
-const path = require('path');
 
 module.exports = {
-  sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')],
+  images: {
+    domains: ['teameights-production.s3.amazonaws.com', 'localhost'],
   },
 };

client/package.json

@@ -16,6 +16,7 @@
     "lint:ts:fix": "npx eslint \"**/*.{ts,tsx}\" --fix",
     "prettier:check": "prettier --check \"**/*.{js,ts,tsx,css,mdx}\"",
     "prettier:fix": "prettier --write \"**/*.{js,ts,tsx,css,mdx}\"",
+    "test:unit": "jest",
     "prepare": "cd .. && husky install ./client/.husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -51,16 +52,22 @@
     "@storybook/addon-essentials": "7.2.1",
     "@storybook/addon-interactions": "7.2.1",
     "@storybook/addon-links": "7.2.1",
-    "@storybook/addon-onboarding": "1.0.8",
-    "@storybook/blocks": "7.2.1",
+    "@storybook/addon-mdx-gfm": "^7.4.4",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.4",
     "@storybook/nextjs": "7.2.1",
     "@storybook/react": "7.2.1",
     "@storybook/testing-library": "0.2.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
     "@types/react-modal": "^3.16.0",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "eslint-plugin-storybook": "^0.6.13",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.0.1",
     "storybook": "7.2.1"
   },

client/src/app/(main)/Layout.module.scss

@@ -0,0 +1,22 @@
+.container {
+  height: 100dvh;
+  width: 100%;
+  padding: 48px 55px;
+
+  @media (width <= 1120px) {
+    padding: 48px 24px;
+  }
+
+  @media (width <= 580px) {
+    padding: 24px;
+  }
+}
+
+.children {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}

client/src/app/(main)/layout.tsx

@@ -0,0 +1,11 @@
+import styles from './Layout.module.scss';
+import { Sidebar } from '@/widgets/sidebar';
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={styles.container}>
+      <Sidebar />
+      <div className={styles.children}>{children}</div>
+    </div>
+  );
+}