Merge pull request #26 from atls/feat/pages-regisrtation

feat:registration page

app/entrypoints/renderer/locales/ru.json

@@ -17,5 +17,6 @@
   "users-modal.title": "Команда Atlantis",
   "users-modal.subTitle": "Участники",
   "users-modal.button-remove": "Удалить",
-  "users-title.title": "Команда"
+  "users-title.title": "Команда",
+  "registration-page.login-button": "Войти с помощью GitHub"
 }

app/entrypoints/renderer/package.json

@@ -10,11 +10,8 @@
     "start": "node dist/src/index.cjs"
   },
   "devDependencies": {
+    "@app/registration-page": "workspace:*",
     "@emotion/react": "11.11.4",
-    "@fragments/add-member-modal": "workspace:*",
-    "@fragments/add-member-to-organization-modal": "workspace:*",
-    "@fragments/organization-card": "workspace:*",
-    "@fragments/organization-card-grid": "workspace:*",
     "@types/node": "20.12.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",

app/entrypoints/renderer/src/app/registration/index.ts

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

app/fragments/app-registration/package.json

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

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

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

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

@@ -0,0 +1,38 @@
+import { Background } from '@ui/background'
+import { useTheme }   from '@emotion/react'
+
+import React          from 'react'
+import { useIntl }    from 'react-intl'
+
+import { MainLogo }   from '@app/main-logo'
+import { Button }     from '@ui/button'
+import { GitHubIcon } from '@ui/icons'
+import { Box }        from '@ui/layout'
+import { Column }     from '@ui/layout'
+import { Text }       from '@ui/text'
+import { ThemeType }  from '@ui/theme'
+
+const Registration: React.FC = () => {
+  const theme = useTheme() as ThemeType
+  const { formatMessage } = useIntl()
+  return (
+    <Background backgroundUrl='url(/Bg.png)'>
+      <Column margin={theme.spaces.tb180lra} height='auto'>
+        <MainLogo />
+        <Box justifyContent='center'>
+          <Button variant='blackBackgroundButton' shape='rectangle' size='bigRoundedPadding'>
+            <GitHubIcon width={theme.spaces.bigDecreased} height={theme.spaces.bigDecreased} />
+            <Text
+              fontSize={theme.fontSizes.normal.semiIncreased}
+              fontWeight={theme.fontWeights.medium}
+            >
+              {formatMessage({ id: 'registration-page.login-button' })}
+            </Text>
+          </Button>
+        </Box>
+      </Column>
+    </Background>
+  )
+}
+
+export { Registration }

app/pages/registration-page/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@app/registration-page",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "18.3.0",
+    "react-intl": "6.6.8"
+  },
+  "dependencies": {
+    "@app/registration": "workspace:*"
+  }
+}

app/pages/registration-page/src/index.ts

@@ -0,0 +1 @@
+export { default } from './registration.page.js'

app/pages/registration-page/src/registration.page.tsx

@@ -0,0 +1,7 @@
+import { Registration } from '@app/registration'
+
+import React            from 'react'
+
+const RegistrationPage: React.FC = () => <Registration />
+
+export default RegistrationPage

ui/background/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@ui/background",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "src/index.ts",
+  "dependencies": {
+    "@ui/layout": "workspace:*",
+    "@ui/theme": "workspace:*"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "@emotion/styled": "*",
+    "react": "*",
+    "react-dom": "*"
+  }
+}

ui/background/src/background.components.tsx

@@ -0,0 +1,32 @@
+import { useTheme }          from '@emotion/react'
+
+import React                 from 'react'
+import { PropsWithChildren } from 'react'
+import { FC }                from 'react'
+
+import { Box }               from '@ui/layout'
+import { ThemeType }         from '@ui/theme'
+
+import { BackgroundProps }   from './background.interfaces.js'
+
+export const Background: FC<PropsWithChildren<BackgroundProps>> = ({
+  children,
+  backgroundUrl,
+  backgroundSize,
+  justifyContent,
+  height,
+  width,
+}) => {
+  const theme = useTheme() as ThemeType
+  return (
+    <Box
+      background={backgroundUrl}
+      height={height || theme.spaces.fullVh}
+      width={width || theme.spaces.fullWidth}
+      backgroundSize={backgroundSize || 'cover'}
+      justifyContent={justifyContent || 'center'}
+    >
+      {children}
+    </Box>
+  )
+}

ui/background/src/background.interfaces.ts

@@ -0,0 +1,9 @@
+export interface BackgroundProps {
+  width?: Record<string, number> | number | undefined
+  height?: Record<string, number> | number | undefined
+  backgroundColor?: string | Record<string, string>
+  backgroundSize?: string
+  alignItems?: string
+  justifyContent?: string
+  backgroundUrl?: string
+}

ui/background/src/index.ts

@@ -0,0 +1 @@
+export * from './background.components.js'

ui/button/src/button.component.tsx

@@ -33,7 +33,6 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = forwardRef((
 ) => {
   const [hover, hoverProps] = useHover()
   const [pressed, setPressed] = useState<boolean>(false)
-
   if (props.horizontalLocation === 'right') {
     return (
       <ButtonElement

ui/theme/src/global.styles.tsx

@@ -6,7 +6,13 @@ import React      from 'react'
 export const GlobalStyles = () => (
   <Global
     styles={css`
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
-      `}
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        max-width: 100vw;
+      }
+    `}
   />
 )

ui/theme/src/theme/colors.ts

@@ -238,17 +238,17 @@ const colors = {
         border: 'transparent',
       },
       hover: {
-        background: 'rgba(23, 24, 28, 0.9)',
+        background: 'rgba(54, 54, 54, 1)',
         font: 'rgb(255,255,255,1)',
         border: 'transparent',
       },
       pressed: {
-        background: 'rgba(23, 24, 28, 0.9)',
+        background: 'rgba(67, 67, 67, 1)',
         font: 'rgb(255,255,255,1)',
         border: 'transparent',
       },
       disabled: {
-        background: 'rgba(23, 24, 28, 0.9)',
+        background: 'rgba(228, 228, 228, 1)',
         font: 'rgb(242,242,242)',
         border: 'transparent',
       },

ui/theme/src/theme/spaces.ts

@@ -5,6 +5,7 @@ export const spaces = {
   s2: 2,
   paddingsNormal: '12px 24px',
   fullWidth: '100%',
+  fullVh: '100vh',
   fullWidthWithPaddingNormal: 'calc(100% - 24px)',
   semiTiny: 3,
   s4: 4,
@@ -98,6 +99,7 @@ export const spaces = {
   t2l0b23r0: '2px 0 0 23.5px',
   tlb0r11: '0 0 0 11px',
   t0r6lb0: '0 6px 0 0',
+  tb180lra: '180px auto',
 
   mediumDefault: 50,
   mediumIncreased: 80,

yarn.lock

@@ -189,7 +189,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@app/main-logo@workspace:app/fragments/app-main-logo":
+"@app/main-logo@workspace:*, @app/main-logo@workspace:app/fragments/app-main-logo":
   version: 0.0.0-use.local
   resolution: "@app/main-logo@workspace:app/fragments/app-main-logo"
   dependencies:
@@ -251,15 +251,50 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@app/registration-page@workspace:*, @app/registration-page@workspace:app/pages/registration-page":
+  version: 0.0.0-use.local
+  resolution: "@app/registration-page@workspace:app/pages/registration-page"
+  dependencies:
+    "@app/registration": "workspace:*"
+    "@emotion/react": "npm:11.11.4"
+    "@types/react": "npm:^18.3.3"
+    "@types/react-dom": "npm:18.3.0"
+    react-intl: "npm:6.6.8"
+  peerDependencies:
+    "@emotion/react": "*"
+    react: "*"
+    react-dom: "*"
+  languageName: unknown
+  linkType: soft
+
+"@app/registration@workspace:*, @app/registration@workspace:app/fragments/app-registration":
+  version: 0.0.0-use.local
+  resolution: "@app/registration@workspace:app/fragments/app-registration"
+  dependencies:
+    "@app/main-logo": "workspace:*"
+    "@emotion/react": "npm:11.11.4"
+    "@types/react": "npm:^18.3.3"
+    "@types/react-dom": "npm:18.3.0"
+    "@ui/background": "workspace:*"
+    "@ui/button": "workspace:*"
+    "@ui/icons": "workspace:*"
+    "@ui/layout": "workspace:*"
+    "@ui/text": "workspace:*"
+    "@ui/theme": "workspace:*"
+    react-intl: "npm:6.6.8"
+  peerDependencies:
+    "@emotion/react": "*"
+    react: "*"
+    react-dom: "*"
+  languageName: unknown
+  linkType: soft
+
 "@app/renderer-entrypoint@workspace:app/entrypoints/renderer":
   version: 0.0.0-use.local
   resolution: "@app/renderer-entrypoint@workspace:app/entrypoints/renderer"
   dependencies:
+    "@app/registration-page": "workspace:*"
     "@emotion/react": "npm:11.11.4"
-    "@fragments/add-member-modal": "workspace:*"
-    "@fragments/add-member-to-organization-modal": "workspace:*"
-    "@fragments/organization-card": "workspace:*"
-    "@fragments/organization-card-grid": "workspace:*"
     "@types/node": "npm:20.12.12"
     "@types/react": "npm:18.3.3"
     "@types/react-dom": "npm:18.3.0"
@@ -1587,7 +1622,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fragments/add-member-modal@workspace:*, @fragments/add-member-modal@workspace:app/fragments/add-member-modal":
+"@fragments/add-member-modal@workspace:app/fragments/add-member-modal":
   version: 0.0.0-use.local
   resolution: "@fragments/add-member-modal@workspace:app/fragments/add-member-modal"
   dependencies:
@@ -1616,7 +1651,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@fragments/add-member-to-organization-modal@workspace:*, @fragments/add-member-to-organization-modal@workspace:app/fragments/add-member-to-organization-modal":
+"@fragments/add-member-to-organization-modal@workspace:app/fragments/add-member-to-organization-modal":
   version: 0.0.0-use.local
   resolution: "@fragments/add-member-to-organization-modal@workspace:app/fragments/add-member-to-organization-modal"
   dependencies:
@@ -1640,7 +1675,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@fragments/organization-card-grid@workspace:*, @fragments/organization-card-grid@workspace:app/fragments/organization-card-grid":
+"@fragments/organization-card-grid@workspace:app/fragments/organization-card-grid":
   version: 0.0.0-use.local
   resolution: "@fragments/organization-card-grid@workspace:app/fragments/organization-card-grid"
   dependencies:
@@ -1660,7 +1695,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@fragments/organization-card@workspace:*, @fragments/organization-card@workspace:app/fragments/organization-card":
+"@fragments/organization-card@workspace:app/fragments/organization-card":
   version: 0.0.0-use.local
   resolution: "@fragments/organization-card@workspace:app/fragments/organization-card"
   dependencies:
@@ -3026,6 +3061,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@ui/background@workspace:*, @ui/background@workspace:ui/background":
+  version: 0.0.0-use.local
+  resolution: "@ui/background@workspace:ui/background"
+  dependencies:
+    "@emotion/react": "npm:11.11.4"
+    "@emotion/styled": "npm:11.11.5"
+    "@types/react": "npm:18.3.3"
+    "@types/react-dom": "npm:18.3.0"
+    "@ui/layout": "workspace:*"
+    "@ui/theme": "workspace:*"
+    react: "npm:18.3.1"
+    react-dom: "npm:18.3.1"
+  peerDependencies:
+    "@emotion/react": "*"
+    "@emotion/styled": "*"
+    react: "*"
+    react-dom: "*"
+  languageName: unknown
+  linkType: soft
+
 "@ui/button@workspace:*, @ui/button@workspace:ui/button":
   version: 0.0.0-use.local
   resolution: "@ui/button@workspace:ui/button"