Feat/pages users

.yarnrc.yml

@@ -1,7 +1,4 @@
 packageExtensions:
-  '@atls-ui-parts/sidebar@*':
-    peerDependencies:
-      '@atls-ui-parts/switch': '*'
   glob-promise@*:
     dependencies:
       glob: '7.2.3'

app/entrypoints/renderer/locales/ru.json

@@ -20,5 +20,6 @@
   "users-modal.subTitle": "Участники",
   "users-modal.button-remove": "Удалить",
   "users-title.title": "Команда",
-  "registration-page.login-button": "Войти с помощью GitHub"
+  "registration-page.login-button": "Войти с помощью GitHub",
+  "preloader.text": "Загрузка..."
 }

app/entrypoints/renderer/next.config.js

@@ -8,6 +8,14 @@ const __dirname = dirname(__filename)
 
 /** @type {import('next').NextConfig} */
 export default {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
   experimental: {
     externalDir: true,
     outputFileTracingRoot: join(__dirname, './'),

app/entrypoints/renderer/package.json

@@ -13,10 +13,12 @@
     "react-intl": "6.6.8"
   },
   "devDependencies": {
-    "@app/base-layout-fragment": "workspace:*",
-    "@app/dashboard-redirect-page": "workspace:*",
+    "@app/base-layout": "workspace:*",
+    "@app/index-page": "workspace:*",
+    "@app/loading": "workspace:*",
     "@app/organizations-page": "workspace:*",
     "@app/registration-page": "workspace:*",
+    "@app/users-page": "workspace:*",
     "@emotion/react": "11.11.4",
     "@types/node": "20.12.12",
     "@types/react": "18.3.3",

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

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

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

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

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

@@ -1 +1 @@
-export { default } from '@app/dashboard-redirect-page'
+export { default } from '@app/index-page'

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

@@ -59,7 +59,9 @@ export const AddMemberModal: FC<AddMemberModalProps> = memo(({ open, onBackdropC
   return (
     <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>
+        <Text fontSize='normal.increased'>
+          {formatMessage({ id: 'app-add-member-modal.header' })}
+        </Text>
         {inputValues.map((_inputValue: string, index: number) => (
           <AddMemberModalInput
             inputIndex={index}
@@ -99,7 +101,7 @@ export const AddMemberModal: FC<AddMemberModalProps> = memo(({ open, onBackdropC
             size='middlingRoundedPadding'
           >
             <Text fontSize='normal.semiDefault' fontWeight='normal' color={theme.colors.white}>
-              {formatMessage({ id: 'add-member-modal.invite' })}
+              {formatMessage({ id: 'app-add-member-modal.invite' })}
             </Text>
           </Button>
         </Row>

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

@@ -50,7 +50,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
     <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' })}
+          {formatMessage({ id: 'app-add-member-to-organization-modal.header' })}
         </Text>
         <SelectInput
           placeholder={formatMessage({ id: 'add-member-to-organization-modal_input.placeholder' })}
@@ -65,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' })}
+            {formatMessage({ id: 'app-add-member-to-organization-modal.teams' })}
           </Text>
           <TeamSwitch teamName='Design' onChange={(e) => handlerSwitch(e, 'design')} />
           <TeamSwitch teamName='Frontend' onChange={(e) => handlerSwitch(e, 'frontend')} />
@@ -80,7 +80,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
             size='middlingRoundedPadding'
           >
             <Text fontSize='normal.semiDefault' fontWeight='normal' color={theme.colors.white}>
-              {formatMessage({ id: 'add-member-to-organization-modal.button' })}
+              {formatMessage({ id: 'app-add-member-to-organization-modal.button' })}
             </Text>
           </Button>
         </Row>

app/fragments/base-layout/package.json → app/fragments/app-base-layout/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@app/base-layout-fragment",
+  "name": "@app/base-layout",
   "version": "0.0.1",
   "private": true,
   "license": "BSD-3-Clause",

app/fragments/app-base-layout/src/base-layout.component.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useTheme }          from '@emotion/react'
+
+import React                 from 'react'
+import { FC }                from 'react'
+import { PropsWithChildren } from 'react'
+
+import { ThemeSelector }     from '@app/theme-selector'
+import { UsersTitle }        from '@app/users-title'
+import { Row }               from '@ui/layout'
+import { Column }            from '@ui/layout'
+import { Sidebar }           from '@ui/sidebar'
+
+import { AVATAR }            from './base-layout.constants.js'
+import { EMAIL }             from './base-layout.constants.js'
+import { NAME }              from './base-layout.constants.js'
+import { BaseLayoutProps }   from './base-layout.interfaces.js'
+
+export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({ children }) => {
+  const theme: any = useTheme()
+  return (
+    <Row backgroundColor={theme.backgrounds.main}>
+      <Sidebar name={NAME} email={EMAIL} src={AVATAR} />
+      <Column alignItems='center' flex={1}>
+        <ThemeSelector />
+        <Column
+          maxWidth={theme.spaces.extraSuperLarge}
+          margin={theme.spaces.horizontalAutoMargin}
+          minHeight={theme.spaces.fullVh}
+          gap={theme.spaces.large}
+          justifyContent='flex-start'
+          alignItems='flex-start'
+        >
+          <UsersTitle />
+          {children}
+        </Column>
+      </Column>
+    </Row>
+  )
+}

app/fragments/app-base-layout/src/base-layout.constants.ts

@@ -0,0 +1,3 @@
+export const NAME = 'Bill Gates'
+export const EMAIL = '[email protected]'
+export const AVATAR = '/profile.png'

app/fragments/app-base-layout/src/base-layout.interfaces.ts

@@ -0,0 +1,5 @@
+export interface BaseLayoutProps {
+  name?: string
+  email?: string
+  avatar?: string
+}

app/pages/dashboard-redirect-page/package.json → app/fragments/app-loading/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@app/dashboard-redirect-page",
+  "name": "@app/loading",
   "version": "0.0.1",
   "private": true,
   "type": "module",
@@ -8,14 +8,15 @@
   },
   "main": "src/index.ts",
   "dependencies": {
-    "@app/dashboard-redirect": "workspace:*"
+    "@ui/preloader": "workspace:*"
   },
   "devDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@emotion/react": "11.11.4",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "18.3.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "@emotion/react": "*",
+    "react": "*"
   }
 }

app/fragments/app-loading/src/index.ts

@@ -0,0 +1 @@
+export * from './loading.component.js'

app/fragments/app-loading/src/loading.component.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import React         from 'react'
+import { FC }        from 'react'
+
+import { Preloader } from '@ui/preloader'
+
+const Loading: FC = () => <Preloader />
+
+export { Loading }

app/fragments/app-notifications-modal/src/notifications-modal.component.tsx

@@ -22,23 +22,24 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
   date,
   open,
   notifiaction,
+  onBackdropClick,
 }) => {
   const { formatMessage } = useIntl()
   const theme = useTheme() as ThemeType
 
   return (
     <Modal
+      top={theme.spaces.huge}
+      left='auto'
+      bottom='auto'
+      right={theme.spaces.mini}
       open={open}
+      position='absolute'
       width={theme.spaces.largeSemiLargeIncreased}
-      onBackdropClick={() => undefined as void}
+      onBackdropClick={onBackdropClick}
     >
       <Column>
-        <Text
-          maxWidth={theme.spaces.superBiggest}
-          marginBottom={theme.spaces.micro}
-          fontSize='medium.semiReduced'
-          color='GRAY_1600'
-        >
+        <Text marginBottom={theme.spaces.micro} fontSize='medium.semiReduced' color='GRAY_1600'>
           {formatMessage({ id: 'notifications-modal.title' })}
         </Text>
         <Scroll height={theme.spaces.largeSemiDecreased}>
@@ -76,12 +77,7 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
         </Scroll>
 
         <Box justifyContent='center'>
-          <Text
-            color='indigo'
-            maxWidth={theme.spaces.superBiggest}
-            marginBottom={theme.spaces.micro}
-            fontSize='normal.semiDefault'
-          >
+          <Text color='indigo' marginBottom={theme.spaces.micro} fontSize='normal.semiDefault'>
             {formatMessage({ id: 'notifications-modal.mark-all-read' })}
           </Text>
         </Box>

app/fragments/app-notifications-modal/src/notifications-modal.interfaces.ts

@@ -1,7 +1,8 @@
 export interface NotificationsModalProps {
   avatar: string
-  name: string
-  date: string
+  name?: string
+  date?: string
   open: boolean
-  notifiaction: boolean
+  notifiaction?: boolean
+  onBackdropClick: () => void
 }

app/fragments/app-organizations-modal/src/organizations-modal.component.tsx

@@ -13,9 +13,14 @@ import { Modal }                   from '@ui/modal'
 import { Text }                    from '@ui/text'
 import { ThemeType }               from '@ui/theme'
 
+import { Organization }            from './organizations-modal.interfaces.js'
 import { OrganizationsModalProps } from './organizations-modal.interfaces.js'
 
-const OrganizationsModal: FC<OrganizationsModalProps> = memo(({ organization, img, open }) => {
+const OrganizationsModal: FC<OrganizationsModalProps> = memo(({
+  organizationsData,
+  open,
+  onBackdropClick,
+}) => {
   const { formatMessage } = useIntl()
   const theme = useTheme() as ThemeType
 
@@ -24,7 +29,7 @@ const OrganizationsModal: FC<OrganizationsModalProps> = memo(({ organization, im
       open={open}
       width={theme.spaces.superExtraIncreased}
       padding={theme.spaces.large}
-      onBackdropClick={() => undefined as void}
+      onBackdropClick={onBackdropClick}
     >
       <Column>
         <Text
@@ -41,7 +46,9 @@ const OrganizationsModal: FC<OrganizationsModalProps> = memo(({ organization, im
           alignItems='flex-start'
           maxWidth={theme.spaces.largeDefaultIncreased}
         >
-          <AnimatedCard img={img} organization={organization} />
+          {organizationsData.map((org: Organization) => (
+            <AnimatedCard img={org.organizationLogo} organization={org.name} />
+          ))}
         </Box>
 
         <Box justifyContent='flex-end'>

app/fragments/app-organizations-modal/src/organizations-modal.interfaces.ts

@@ -1,5 +1,10 @@
 export interface OrganizationsModalProps {
-  organization: string
-  img: string
+  organizationsData: Organization[]
   open: boolean
+  onBackdropClick: () => void
+}
+
+export interface Organization {
+  name: string
+  organizationLogo: string
 }

app/fragments/app-theme-selector/package.json

@@ -8,6 +8,7 @@
   },
   "main": "src/index.ts",
   "dependencies": {
+    "@app/notifications-modal": "workspace:*",
     "@ui/button": "workspace:*",
     "@ui/icons": "workspace:*",
     "@ui/layout": "workspace:*",