feat: merged initial release (#142)

* fix: 🚑 ci (#102)

* docs: update README.md

* docs: update README.md

* fix: 🚑 fix ci don't work in develop and master branches

---------

Co-authored-by: Nikita Mashchenko <52038455+nmashchenko@users.noreply.github.com>

* feature: ✨ storybook pallete icons docs (#106)

* feat: add colors story

* feat: add loading story

* feat: add iconography stories and change stories settings

* feat: ✨ shared flex icon wrapper (#107)

* feat: ✨ add flex component

* feat: ✨ add flex component and docs

* docs: 📝 add docs for Flex component

* fix: in flex width auto -> 100%

* fix: in flex width auto -> 100% in storybook

* docs: 📝 add .md doc for how to use storybook (#108)

* feature: ✨ add util - get-elapsed-time (#111)

* feature: ✨ add util - get-past-time

* refactor: ♻️ rename get-past-time => get-elapsed-time. And add docs

* feat: ✨ add useGetScreenWidth hook (#112)

* feature: ✨ add useGetScreenWidth hook

* fix: 🐛 get window width in server-side

* test: ✅ init jest, and add 1 test, add to ci (#113)

* test: init jest, and add 1 test, add to ci

* test: init jest, and add 1 test, add to ci

* fix: tests for get elapsed time

* feat: ✨ add skeleton (#117)

* feat: ✨ add skeleton

* docs: 📝 add docs for skeleton

* docs: 📝 add more story cases for storybook

* fix: 🩹 fix tests for get elapsed time

* fix: shared components

* docs: updated skeleton

* feat: added teameights-types

* feat: added loader

* feat: added drawer, sonner

* feat: settings are added (#123)

* feat: settings are added

* fix: props are renamed

* feat: added select-autocomplete & debounce

* feat: new badge component and updated iconwrapper (#125)

* feat: new badge component and updated iconwrapper

* fix: stories

* fix: badge type added

* fix: styles/logic

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* refactor: added new backend (#101)

* feat: added new server version

* refactor: remove client

* ci: added ci for backend

* feat: added github auth / removed others

* refactor: ♻️ absolute paths (#98)

* refactor: ♻️ rename absolute paths

* fix: 🚑 fix storybook alias paths

* fix: delete .idea directory

* refactor: removed all server

* docs: update core info

* docs: fixed auth

* fix: gtihub return entity

* ci: fixed tests

* ci: added api in docker

* ci: fixed backend tests

* fix: crlf disabled

* ci: disabled api for local

* feat: extended user schema, tests, dtos, etc

* ci: fixed tests runner

* feature: backend architecture (#120)

* fix: refactor arch signature for actual Module struct

* fix: connect docker & upload container structs

* upload: reload references by migration

* upd: fix docker

* upload: production docker without nodeEnd, should fix it

* feature: docker works

* fix docs

* ci: added backend branch

* ci: fix branch name

* fix: tests command

* fix: added .env copying step

* fix: doc & docker reference

* fix: tests & docs

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: issues, password, username updates

* fix: tests, ci, env-example

* ci: temporary yarnpath fix for tests

* feat: added universityData

* fix: linter

* fix: fixed docs & nested validation

* feat: added all required relations for base user

* feature: backend api docker (#122)

* fix: autobuild project gun

* fix: docs & workflow

* fix: gitflow

* fix: test gitflow

* fix: test gitflow

* fix: test gitflow

* fix: test gitflow

* fix: test gitflow

* fix: logs

* fix: sed

* fix: sed

* fix: compose postgres

* v3.6.3

* v3.6.4

* fix: yarn

* fix: postgres volumes

* fix: production condinion toggle

* docs: fixed descriptions

* feat: merged refactor/backend

* docs: fixed local setup

* fix: removed old files

* fix: merge test

* fix: docker-compose dev virtual volume

* fix: default starter prepare

* fix: db-prepare env point

* fix: sed checker

* fix: docs & code

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: added filters query for users

---------

Co-authored-by: Nikita Mashchenko <52038455+exortme1ster@users.noreply.github.com>
Co-authored-by: Pikj [JReydman] Reyderman <58705342+jreydman@users.noreply.github.com>

* fix: port for server

* feat: updated auth based on new design

* fix: design issues

* feat: updated experience type

* feat: added @teameights/types

* feature: reusable modals (#121)

* feat: added initial info-modal

* fix: cleanup & useless styles

* fix: fixed some styles, returned action modal

* fix: changed the approach to using styles

* fix: flex issue

* fix: test version teameights-types

* fix: types

* fix: added type

* fix: lib issues, reusability

* fix: added new modal window

* fix: badges and modals

* fix: added logic for mobile user

* fix: added new phone action modal

* fix: added new phone action modal

* fix: code issues

* fix: changed folder location

* fix: some styles

* fix: added storybook for modal

* fix: added storybook for modal

* Revert "fix: added storybook for modal"

This reverts commit c5e7773.

* fix: added for test new function

* fix: added new modal for a test

* fix: changed mock data

* fix: changed mock data

* fix: fixed new error

* fix: previous issues and code

* fix: namings

* fix: namings

* fix: added new modal that fixes freezes

* feat: added image loader, fix issues with modals

* feat: added flags & fixed issues

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: add events for flex component (#128)

Co-authored-by: “merankori” <skiselev@team.amocrm.com>

* fix: 🐛 flex (#130)

* fix: add events for flex component

* fix: add rest props for Flex component

---------

Co-authored-by: “merankori” <skiselev@team.amocrm.com>

* refactor(mocks): ✨ enhance user mock data generation with notificatfications (#129)

* refactor(mocks): ✨  enhance user mock data generation with notifications and team

* refactor(mocks): ♻️ convert functions to arrow functions

* test

* fix(eslint)

* save changes

* fix: refactor

* fix: date type

* fix: upgrade types

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: new search bar (#133) 🤟🏻

* feat: add border disable for ui select

* feat: add filter-select draft functionality

* fix: closing select menu and codestyle

* fix: conflicts with develop

* fix: removed server actions

* fix: imports

* fix: select and input border

* fix: filter-select

* fix: some fixes for select

* fix: interfaces of searchbar

* feat: add draft search-input functionality

* fix: filter type in filter select

* fix: some fixes for selects

* feat: add draft functionality for tags-list

* feat: add placeholders and tags-list for searchbar

* feat: add outside click closing for multiple-tag

* fix: fix text-filter clearing

* fix: some tag fixes

* feat: add clear all button in tags list

* fix: change file structure

* feat: add select indicator toggle

* fix: fix search-bar styles

* feat: add api request handler for search-input

* fix: move tag in entities

* fix: move tag in features

* feat: add some filters for search-bar on page

* fix: tags-list filtersArr typization

* feat: replace react hook form functionality from search bar with native react

* fix: checkbox-list functionality typization

* fix: codestyle fixes

* feat: add query string functionality for search-bar

* fix: replace flex divs with Flex component

* feat: add search-bar in storybook

* feat: add multiple value filter functionality

* fix: add multiple filter in stories / fix timer of search-bar

* fix: codestyle fix in tag-menu

* fix: destructurize fix

* fix: state changing in search-bar

* feat: add custom styles support in shared select

* fix: margins and paddings of search-bar

* fix: design fixes

* fix: class naming fixes

* fix: menu columns in search-bar input-select

* fix: style fixes

* fix: clear logs and fix naming of callbacks

* fix: codereview fixes

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>
Co-authored-by: skiselev <skiselev@team.amocrm.com>

* feat: added new icons/skills (#132)

* feat: added new icons/files

* feat: changed concentration to speciality

* feat: added support for specialities

* fix: import

* fix: server support for updates

* fix: docker

* fix: prettier

* feat: added isActive for badge

* fix: added todos for backend

* fix: final adjustments

* fix: mocks, user entity, etc

* fix: fallback

* feat: transfer old react-query hooks (#109)

* feat: added initial setup

* fix: style

* feat: added auth queries

* feat: added password reset hooks

* feat: folders refactor

* fix: added server fixes

* fix: removed bugged test

* feat: changed hooks, consts & logout

* fix: error handling

* feat: fix merge issues

* fix: deployment issue

* fix: other issues

* docs: update pull_request_template.md

* fix: server cleanup (#136)

* feat: new filters approach

* fix: old issues

* feat: new jwt approach to hash

* fix: small issues on frontend

* fix: lint errors

* feat: added base layout for registration; refactored and added some s… (#134)

* feat: added base layout for registration; refactored and added some shared component

* fix: resolved tsc issue

* fix: revert

* fix: resolved conflicts

* Revert "fix: revert"

This reverts commit a2f4c00.

* fix: inline styles

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: icons cleanup (#137)

* fix: added new branch

* fix: arrows

* fix: cleaned up the icons on the new branch

* fix: new names for icons and illustrations

* Revert "fix: new names for icons and illustrations"

This reverts commit 4464738.

* fix: changed the names of icons and illustrations

* fix: some small issues

* fix: lint

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feature: transfer user card functionality (#110)

* feat(user-card): move user-card component from previuos branch

* fix(docs): change .MD to .md

* feat(and-more): add new component

* feat(and-more): add counter

* feat(and-more): {finaly} add counting of languages

* fix(user-card): names of files

* fix(user-card & and-more): delete comments

* fix(user-card): move inline styles to separate file

* fix(user-card): change props using + minor changes

* feat(user-card): move 'and-more' feature to badge-framework component

* feat(user-card): move 'and-more' feature to badge-languages component

* fix(user-card): and-more button size in badge-framework component

* fix(user-card): displaying of 2 languages

* fix(and-more): delete unused component

* fix(user-card): use css variables

* fix(user-card): delete inline styles and move to scss file

* fix(badge-framework): replace img tag with Image

* refactor(user-card): new polymorphic function to use render badges

* fix(user-card): all problems

* fix(user-card): delete unused part of code

* fix(user-card): linter

* fix(user-card): fix placement of elements

* feat(user-card): crown for leaders

* feat: add new logic for render langs and frameworks

* refactor: refactor

* refactor: refactor

* refactor: refactor

* refactor: refactor

* refactor: refactor scss

* refactor: refactor

* refactor: refactor

* feat: ✨ add animation for crown

* feat: ✨ add animation for card

* feat: ✨ add types

* feat: ✨ add types

* feat: ✨ add @teameights/types

* Delete node_modules directory

* fix: save changes

* fix: fix css

* refactor: refactor

* refactor: refactor

* fix(user-card): crown

* feat(user-card): hover effect

* feat(user-card): use entities instead of widgets

* feat(user-card): add controller for storybook

* feat(user-card): storybook params

* feat(user-card): add onClick param for useCallback hooks

* save changes

* feat(user-card): adjust badgeFrameworkLayoutConfig and Image component in card module

* feat(user-card): add hover effect and cursor pointer to user card component

* feat(user-card): add hover effect and cursor pointer to user card component

* feat(user-card): update UserCard component to display user's date of birth and role name

* feat(user-card): use generateMockUser function for default user in UserCardPreview story

* feat(user-card): update generateMockFileEntity to include random query parameter for image path 🚀

* feat(user-card): calculate and display user's age in UserCard component 🎂

* feat(user-card): add new mock data generation functions and update Home component to use them 🚀

* feat(user-card): update file paths and import styles to use consistent naming convention 🔄📦

* feat(user-card): add new logic for render langs and frameworks 🌐✨

* fix

* fix

* feat(user-card): restyle badge-language

* fix: adjust code to changes from merge

* fix(user-card): update user for storybook to match user type

* feat(user-card): add country flag icon

---------

Co-authored-by: Berezhnev Vladimir <vova21473@gmail.com>
Co-authored-by: Sivritkin Dmitriy <dmitriysivritkin@gmail.com>
Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>

* feat: mobile search (#139)

* feat: add context for search-bar props

* feat: add draft functionality of mobile-search

* fix: refactor

* feat: add portaling for search select

* fix: icons naming

* fix: style fixes

* feat: add useGetUsers hook

* feat: add drawer in modal and optimize modal button

* fix: getting data and modal button fixes

* fix: drawer class types

* fix: codestyle fixes

* feat: move search-bar in shared

* fix: refactor and codestyle fixes

* fix: small issue

* fix: use client

---------

Co-authored-by: “merankori” <skiselev@team.amocrm.com>
Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: added server notifications (#140)

* feat: added notifications

* fix: previous issues with notifications

* fix: lint issues

* feat: added ws support

* fix: lint

* feat: ✨ create sidebar (#114)

* add: 🍱 add unregistered user image to public

* add: 🍱 icons

* fix: git stash

* feat: ✨ add types for user, team, role, notification

* git stash

* git stash

* feat: ✨ add sidebar

* fix: 🩹 fix build

* fix: 🩹 fix build

* docs: 📝 add storybook for notification-item and notification-content

* docs: 📝 JSDoc for notification-content

* docs: 📝 JSDoc for notification-list, add stories, add tests for sort-notifications

* fix: save changes

* refactor: with new types `notification-item`

* refactor: with new types `notification-list`

* refactor: with new types `notification-modal`

* refactor: with new types `sidebar`

* refactor: with new types `sidebar-profile`

* fix save

* refactor(sidebar): 📦♻️ update typings to use `@teameights/types`

* refactor code

* save changes

* refactor: ♻️ replace hardcoded mock data with generateMockUser and other mock data generators in sidebar and notification components

* refactor(sidebar): 🎨 update styles and typography in sidebar components

* feat(icons): ✨ update burger-clo se icon in shared assets

* feat(sidebar): ✨ add user state and image loading skeleton in sidebar-profile

* feat(sidebar-profile): ✨ replace Image with ImageLoader in sidebar-profile component

* feat: merged develop

* fix: storybook

* feat: added server

* fix: linter

* fix: reading notifications issues

* fix: small issues

* feat: added websocket

* fix: socket issue

* fix: linter issue

* fix: sockets / timings issues

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: added main page and connected everything (#141)

* feat: added initial implementation

* Revert "feat: added initial implementation"

This reverts commit 83f6152.

* feat: added initial screen with issues

* feat: added server loading & filters, etc

* feat: final touches before merging

* feat: added multi-step signup (#138)

* feat: added new registration step - Account-Type

* feat: added new step

* fix: small fixes in styles

* fix: removed inline styles

* fix: added new step

* fix: added new step

* feat: added icons and updated the input-link

* fix: some fixes with icons

* feat: added new step Specialty

* feat: add step 4 of onboarding

* fix: minor lang selection update

* fix: minor issues & reusability

* fix: disable select if no empty cells

* feat: add recommended languages

* feat: add search to languages

* wip: implement form

* feat: bind speciality step to the form

* fix: update effect dependencies list

* feat: update next step logics

* feat: update select-fields layout

* refactor: apply Prettier

* fix: speciality to occupation conversion

* typo: update language label

* feat: add selected field component

* fix: remove step 1 recommendations on step 2

* feat: new approach wip

* feat: wip (need to fix errors)

* fix: handle key prop error

* fix: final client cleanup

* feat: add responsiveness to ActionSection

* feat: add responsiveness to AccountType

* feat: restyle Options

* feat: add responsiveness to steps

* fix: change recommended_icons height

* feat: refactor + illustrations

* fix: server stuff to support registration

* fix: minor issues

* feat: everything working now

* fix: mocks

* fix: lint issues

* fix: backend lint

* feat: add illustration resizing

* feat: add illustration resizing

* fix: update icons size

* fix: rename Javascript to JavaScript

* fix: styles

* feat: last touches

* fix: lint

* fix: lint part 2

* fix: seeds

* fix: small updates

* fix: remove console log

* fix: removed broken tests

---------

Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>
Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

---------

Co-authored-by: Sivritkin Dmitriy <129217598+velenyx@users.noreply.github.com>
Co-authored-by: dmtrack <dmtrack.dev@gmail.com>
Co-authored-by: Nikita Mashchenko <52038455+exortme1ster@users.noreply.github.com>
Co-authored-by: Pikj [JReydman] Reyderman <58705342+jreydman@users.noreply.github.com>
Co-authored-by: LanselonX <101521725+LanselonX@users.noreply.github.com>
Co-authored-by: MelancholicCode <96338248+MelancholicCode@users.noreply.github.com>
Co-authored-by: “merankori” <skiselev@team.amocrm.com>
Co-authored-by: Michael Maliar <61254973+mikhail2404@users.noreply.github.com>
Co-authored-by: Berezhnev Vladimir <vova21473@gmail.com>
Co-authored-by: Sivritkin Dmitriy <dmitriysivritkin@gmail.com>
Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>
Co-authored-by: merankori <96338248+merankori@users.noreply.github.com>

.gitattributes

@@ -22,3 +22,6 @@
 *.css text
 *.scss text
 *.sass text
+
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

.github/workflows/client.yml

@@ -4,18 +4,19 @@ run-name: ${{ github.actor }} is starting sueta at the frontend code ☺️
 on:
   push:
     branches:
-      - dev-nextjs
+      - develop
+      - master
     paths:
       - "client/**"
   pull_request:
     branches:
-      - dev-nextjs
+      - develop
+      - master
     paths:
       - "client/**"
 
 jobs:
   pipeline:
-    # Exclude renovate[bot] from triggering the workflow
     if: github.actor != 'renovate[bot]'
     runs-on: ubuntu-latest
     strategy:
@@ -27,27 +28,25 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{matrix.node-version}}
-
-      - name: Cache Yarn dependencies
-        uses: actions/cache@v3.2.2
-        with:
-          path: ./client/node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('./client/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          cache: 'yarn'
+          cache-dependency-path: ./client/yarn.lock
 
       - name: Install yarn and dependencies
         working-directory: ./client
         run: |
           npm install --global yarn
-          yarn install --frozen-lockfile
+          yarn install --immutable
 
       - name: Lint and Format
         working-directory: ./client
         run: |
           yarn lint:ts:check
           yarn prettier:check
 
+      - name: Unit testing 💀💀
+        working-directory: ./client
+        run:  yarn test:unit
+
       - name: Build project
         working-directory: ./client
         run: yarn build
@@ -86,4 +85,4 @@ jobs:
           vercel-org-id: ${{ secrets.ORG_ID }}
           github-token: ${{ secrets.GITHUB_TOKEN }}
           vercel-project-id: ${{ secrets.PROJECT_ID_STORYBOOK }}
-          vercel-args: ${{ steps.vercel_args.outputs.args }}
+          vercel-args: ${{ steps.vercel_args.outputs.args }}

.github/workflows/docker-e2e.yml

@@ -0,0 +1,22 @@
+name: Backend checker, will punish for bad code 🪓😵‍💫
+run-name: ${{ github.actor }} is starting sueta at the backend code ☺️
+
+on:
+  push:
+    branches: [develop, master]
+    paths:
+      - "server/**"
+  pull_request:
+    branches: [develop, master]
+    paths:
+      - "server/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run e2e tests
+        working-directory: ./server
+        run: docker compose -f docker-compose.ci.yaml --env-file env-example -p ci up --build --exit-code-from api

.gitignore

@@ -1,2 +1,12 @@
 /.idea
-/.vscode
+/.vscode
+
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
+/database

client/.env.local.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GOOGLE_API_OAUTH_TOKEN=
+NEXT_PUBLIC_GITHUB_API_OAUTH_TOKEN=

client/.eslintrc.json

@@ -1,12 +1,18 @@
 {
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true
+  },
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "@tanstack/query"],
   "extends": [
     "next",
     "next/core-web-vitals",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "globals": {
     "React": "readonly"
@@ -21,9 +27,20 @@
     }
   ],
   "rules": {
+    "react/display-name": 0,
     // I suggest you add those two rules:
-    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "error",
-    "@typescript-eslint/no-var-requires": "off"
+    "@typescript-eslint/no-var-requires": "off",
+    // query rules
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/stable-query-client": "error"
   }
 }

client/.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+node_modules
 .idea
 .vscode
 /storybook-static

client/.storybook/main.ts

@@ -1,13 +1,18 @@
 import type { StorybookConfig } from '@storybook/nextjs';
-import path from 'path';
+import * as 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',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    'storybook-addon-next-router',
     {
       name: '@storybook/addon-styling',
       options: {
@@ -25,7 +30,7 @@ const config: StorybookConfig = {
     },
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
   core: {
     builder: '@storybook/builder-webpack5',

client/.storybook/preview.tsx

@@ -0,0 +1,88 @@
+import type { StoryFn } from '@storybook/react';
+import '../src/app/styles/globals.scss';
+import './font.scss';
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context';
+
+export const parameters = {
+  nextRouter: {
+    Provider: AppRouterContext.Provider,
+  },
+  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>
+  ),
+];