Feat/organizations page

app/entrypoints/renderer/locales/ru.json

@@ -3,12 +3,14 @@
   "add-member-modal.invite": "Пригласить",
   "add-member-modal_input.invalid-email": "Введите правильный E-mail",
   "add-member-to-organization-modal.header": "Добавить сотрудника в организацию",
+  "add-member-to-organization-modal.teams": "Команды организации",
+  "add-member-to-organization-modal.button": "Пригласить",
   "add-member-to-organization-modal_input.placeholder": "Team member",
   "organization-card_member.one": "member",
   "organization-card_member.many": "members",
   "confirm-deleting-organization.warning": "Вы уверены, что хотите исключить пользователя из данной организации?",
   "confirm-deleting-organization.yes": "Да",
-  "confirm-deleting-organization.no":"Нет",
+  "confirm-deleting-organization.no": "Нет",
   "logo-title": "Team management system",
   "notifications-modal.title": "Уведомления",
   "notifications-modal.mark-all-read": "Отметить все, как прочитанное",
@@ -19,4 +21,4 @@
   "users-modal.button-remove": "Удалить",
   "users-title.title": "Команда",
   "registration-page.login-button": "Войти с помощью GitHub"
-}
+}

app/entrypoints/renderer/package.json

@@ -9,7 +9,13 @@
     "prepack": "run build",
     "start": "node dist/src/index.cjs"
   },
+  "dependencies": {
+    "react-intl": "6.6.8"
+  },
   "devDependencies": {
+    "@app/base-layout-fragment": "workspace:*",
+    "@app/dashboard-redirect-page": "workspace:*",
+    "@app/organizations-page": "workspace:*",
     "@app/registration-page": "workspace:*",
     "@emotion/react": "11.11.4",
     "@types/node": "20.12.12",
@@ -21,8 +27,5 @@
     "react-dom": "18.3.1",
     "react-intl": "6.6.8",
     "typescript": "5.2.2"
-  },
-  "dependencies": {
-    "react-intl": "6.6.8"
   }
 }

app/entrypoints/renderer/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,7 @@
+import React          from 'react'
+
+import { BaseLayout } from '@app/base-layout-fragment'
+
+const Layout = ({ children }) => <BaseLayout>{children}</BaseLayout>
+
+export default Layout

app/entrypoints/renderer/src/app/(dashboard)/organizations/page.ts

@@ -0,0 +1 @@
+export { default } from '@app/organizations-page'

app/entrypoints/renderer/src/app/page.tsx

@@ -1,6 +1 @@
-'use client'
-
-import React from 'react'
-
-const Page = () => <>page</>
-export default Page
+export { default } from '@app/dashboard-redirect-page'

app/entrypoints/renderer/src/next.config.js

@@ -0,0 +1,31 @@
+import { join } from 'path'
+import { dirname } from 'path'
+
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+/** @type {import('next').NextConfig} */
+export default {
+  experimental: {
+    externalDir: true,
+    outputFileTracingRoot: join(__dirname, './'),
+    esmExternals: 'loose',
+  },
+  compiler: {
+    styledComponents: true,
+  },
+  webpack: (webpackConfig, { webpack }) => {
+    webpackConfig.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(new RegExp(/\.js$/), function (
+        /** @type {{ request: string }} */
+        resource
+      ) {
+        resource.request = resource.request.replace('.js', '')
+      })
+    )
+    return webpackConfig
+  },
+  output: 'standalone',
+}

app/entrypoints/renderer/src/tsconfig.json

@@ -16,7 +16,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
   "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

app/fragments/add-member-modal/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@fragments/add-member-modal",
+  "name": "@app/add-member-modal-fragment",
   "version": "0.0.1",
   "private": true,
   "license": "BSD-3-Clause",

app/fragments/add-member-modal/src/add-member-modal.component.tsx

@@ -22,12 +22,12 @@ import { ThemeType }               from '@ui/theme'
 import { HandleAddInputClickType } from './add-member-modal.interfaces.js'
 import { InputValuesType }         from './add-member-modal.interfaces.js'
 import { HandlerSwitchType }       from './add-member-modal.interfaces.js'
-import { TeamMemberModalProps }    from './add-member-modal.interfaces.js'
+import { AddMemberModalProps }     from './add-member-modal.interfaces.js'
 import { CheckedSwitchesType }     from './add-member-modal.interfaces.js'
 import { AddMemberModalInput }     from './input/index.js'
 import { useButtonActiveHook }     from './use-button-active.hook.js'
 
-export const AddMemberModal: FC<TeamMemberModalProps> = memo(({ open }) => {
+export const AddMemberModal: FC<AddMemberModalProps> = memo(({ open, onBackdropClick }) => {
   const theme = useTheme() as ThemeType
 
   const { formatMessage } = useIntl()
@@ -57,7 +57,7 @@ export const AddMemberModal: FC<TeamMemberModalProps> = memo(({ open }) => {
   }
 
   return (
-    <Modal open={open} padding={theme.spaces.increased}>
+    <Modal open={open} padding={theme.spaces.increased} onBackdropClick={onBackdropClick}>
       <Column gap={theme.spaces.moderate}>
         <Text fontSize='normal.increased'>{formatMessage({ id: 'add-member-modal.header' })}</Text>
         {inputValues.map((_inputValue: string, index: number) => (
@@ -75,7 +75,7 @@ export const AddMemberModal: FC<TeamMemberModalProps> = memo(({ open }) => {
             style={{ boxShadow: theme.shadows.black }}
             variant='whiteBackgroundButton'
           >
-            <AddIcon />
+            <AddIcon color={theme.colors.addMemberModal.addIcon} />
           </Button>
         </Row>
         <Row justifyContent='space-between'>
@@ -98,7 +98,7 @@ export const AddMemberModal: FC<TeamMemberModalProps> = memo(({ open }) => {
             variant='blueBackgroundButton'
             size='middlingRoundedPadding'
           >
-            <Text fontSize='normal.semiDefault' fontWeight='normal'>
+            <Text fontSize='normal.semiDefault' fontWeight='normal' color={theme.colors.white}>
               {formatMessage({ id: 'add-member-modal.invite' })}
             </Text>
           </Button>

app/fragments/add-member-modal/src/add-member-modal.interfaces.ts

@@ -1,8 +1,6 @@
 export interface AddMemberModalProps {
   open: boolean
-}
-export interface TeamMemberModalProps {
-  open: boolean
+  onBackdropClick: VoidFunction
 }
 
 export type InputValuesType = Array<string>

app/fragments/add-member-to-organization-modal/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@fragments/add-member-to-organization-modal",
+  "name": "@app/add-member-to-organization-modal-fragment",
   "version": "0.0.1",
   "private": true,
   "license": "BSD-3-Clause",
@@ -16,13 +16,15 @@
   },
   "devDependencies": {
     "@emotion/react": "11.11.4",
+    "@faker-js/faker": "8.4.1",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.6.8"
   },
   "peerDependencies": {
+    "@faker-js/faker": "*",
     "react": "*",
     "react-dom": "*",
     "react-intl": "*"

app/fragments/add-member-to-organization-modal/src/add-member-to-organization-modal.component.tsx

@@ -14,6 +14,7 @@ import { Modal }                             from '@ui/modal'
 import { Text }                              from '@ui/text'
 import { ThemeType }                         from '@ui/theme'
 
+import { USERS_TEST_DATA }                   from './add-member-to-organization-modal.constants.js'
 import { AddMemberToOrganizationModalProps } from './add-member-to-organization-modal.interfaces.js'
 import { SelectedUsersType }                 from './add-member-to-organization-modal.interfaces.js'
 import { CheckedSwitchesType }               from './add-member-to-organization-modal.interfaces.js'
@@ -23,6 +24,8 @@ import { useButtonActiveHook }               from './use-button-active.hook.js'
 
 export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps> = memo(({
   open,
+  onBackdropClick,
+  organizationId,
 }) => {
   const theme = useTheme() as ThemeType
   const { formatMessage } = useIntl()
@@ -41,34 +44,17 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
 
   useButtonActiveHook(selectedUsers, checkedSwitches, setButtonActive)
 
-  const testUsersData = [
-    {
-      id: 1,
-      primaryInfo: 'test user1',
-      secondaryInfo: 'testmail1@mail.ru',
-      imageSrc: 'https://placehold.co/400',
-    },
-    {
-      id: 2,
-      primaryInfo: 'test user2',
-      secondaryInfo: 'testmail2@mail.ru',
-      imageSrc: 'https://placehold.co/400',
-    },
-    {
-      id: 3,
-      primaryInfo: 'test user3',
-    },
-  ]
+  const usersData = USERS_TEST_DATA
 
   return (
-    <Modal open={open} width={theme.spaces.superPuperExtra}>
+    <Modal open={open} width={theme.spaces.superPuperExtra} onBackdropClick={onBackdropClick}>
       <Column flexDirection='column' gap={theme.spaces.large}>
         <Text fontSize='medium.semiReduced' fontWeight='normal' padding={theme.spaces.micro}>
           {formatMessage({ id: 'add-member-to-organization-modal.header' })}
         </Text>
         <SelectInput
           placeholder={formatMessage({ id: 'add-member-to-organization-modal_input.placeholder' })}
-          searchItems={testUsersData}
+          searchItems={usersData}
           parentHook={setSelectedUsers}
         />
         <Row
@@ -79,7 +65,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
           rowGap={theme.spaces.large}
         >
           <Text fontSize='normal.semiIncreased' width='100%'>
-            Команды организации
+            {formatMessage({ id: 'add-member-to-organization-modal.teams' })}
           </Text>
           <TeamSwitch teamName='Design' onChange={(e) => handlerSwitch(e, 'design')} />
           <TeamSwitch teamName='Frontend' onChange={(e) => handlerSwitch(e, 'frontend')} />
@@ -93,8 +79,8 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
             variant='blueBackgroundButton'
             size='middlingRoundedPadding'
           >
-            <Text fontSize='normal.semiDefault' fontWeight='normal'>
-              Пригласить
+            <Text fontSize='normal.semiDefault' fontWeight='normal' color={theme.colors.white}>
+              {formatMessage({ id: 'add-member-to-organization-modal.button' })}
             </Text>
           </Button>
         </Row>

app/fragments/add-member-to-organization-modal/src/add-member-to-organization-modal.constants.ts

@@ -0,0 +1,10 @@
+import { faker } from '@faker-js/faker'
+
+const getUserTestData = () => ({
+  id: faker.string.uuid(),
+  primaryInfo: faker.person.fullName(),
+  secondaryInfo: faker.internet.email(),
+  imageSrc: faker.image.avatar(),
+})
+
+export const USERS_TEST_DATA = Array(5).fill(getUserTestData())

app/fragments/add-member-to-organization-modal/src/add-member-to-organization-modal.interfaces.ts

@@ -1,5 +1,7 @@
 export interface AddMemberToOrganizationModalProps {
   open: boolean
+  onBackdropClick: VoidFunction
+  organizationId: number
 }
 
 export type SelectedUsersType = Array<number>

app/fragments/app-animated-card/package.json

@@ -1,23 +1,12 @@
 {
   "name": "@app/animated-card",
   "version": "0.0.1",
-  "type": "module",
   "private": true,
-  "main": "src/index.ts",
+  "type": "module",
   "exports": {
     ".": "./src/index.ts"
   },
-  "peerDependencies": {
-    "@emotion/react": "*",
-    "react": "*",
-    "react-intl": "*"
-  },
-  "devDependencies": {
-    "@emotion/react": "11.11.4",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "18.3.0",
-    "react-intl": "6.6.8"
-  },
+  "main": "src/index.ts",
   "dependencies": {
     "@ui/button": "workspace:*",
     "@ui/card": "workspace:*",
@@ -27,5 +16,16 @@
     "@ui/text": "workspace:0.0.1",
     "@ui/theme": "workspace:*",
     "framer-motion": "10.16.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "18.3.0",
+    "react-intl": "6.6.8"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "react": "*",
+    "react-intl": "*"
   }
 }

app/fragments/app-main-logo/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@app/main-logo",
   "version": "0.0.1",
-  "type": "module",
   "private": true,
-  "main": "src/index.ts",
+  "type": "module",
   "exports": {
     ".": "./src/index.ts"
   },
+  "main": "src/index.ts",
   "dependencies": {
     "@ui/icons": "workspace:*",
     "@ui/layout": "workspace:*",
     "@ui/text": "workspace:0.0.1",
     "@ui/theme": "workspace:*"
   },
-  "peerDependencies": {
-    "@emotion/react": "*",
-    "react": "*",
-    "react-intl": "*"
-  },
   "devDependencies": {
     "@emotion/react": "11.11.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "18.3.0",
     "react-intl": "6.6.8"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "react": "*",
+    "react-intl": "*"
   }
 }