feat: added new sign-in-modal

_templates/fsd-module/README.md

@@ -6,3 +6,7 @@ This generator creates a module using the
 --- 
 
 - new (General case)
+
+### Run
+
+`hygen fsd-module [method]`

apps/client/src/app/styles/app.styles.ts

@@ -18,6 +18,7 @@ export const GlobalStyles = createGlobalStyle`
     margin: 0;
   }
 
+
   ${customScrollbar('body')}
 
   .ant-popconfirm {

apps/client/src/entities/sign-in-modal-template/index.ts

@@ -0,0 +1 @@
+export { SignInModalTemplate } from './ui/sign-in-modal-template'

apps/client/src/entities/sign-in-modal-template/lib/helpers.ts

@@ -0,0 +1 @@
+export const getFormItemRules = () => [{ required: true, min: 6, max: 14 }]

apps/client/src/entities/sign-in-modal-template/ui/sign-in-modal-template.styles.ts

@@ -0,0 +1,26 @@
+import { Form } from 'antd'
+import styled from 'styled-components'
+
+import { ColorButton } from '$/client-shared'
+import { wh } from '$/styles'
+
+export const SignInModalStyles = styled(Form)`
+  width: 84%;
+  margin: 0 auto;
+`
+
+export const SubmitButton = styled(ColorButton)`
+  height: 40px;
+  width: 100%;
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.fz7};
+  margin: 0 auto;
+  margin-top: 80px;
+  display: block;
+`
+
+export const LogoWrapper = styled.img`
+  ${wh('68px', '92px')}
+  margin: 10px auto;
+  display: block;
+`

apps/client/src/entities/sign-in-modal-template/ui/sign-in-modal-template.tsx

@@ -0,0 +1,46 @@
+import { Form, Input } from 'antd'
+
+import { getFormItemRules } from '../lib/helpers'
+
+import {
+  LogoWrapper,
+  SignInModalStyles,
+  SubmitButton
+} from './sign-in-modal-template.styles'
+
+import { Logo } from '$/assets'
+import { ModalTitle } from '$/client-shared'
+
+interface SignInModalTemplateProps<T> {
+  onSubmit: (data: T) => void
+}
+
+export const SignInModalTemplate = <T,>({
+  onSubmit
+}: SignInModalTemplateProps<T>) => {
+  return (
+    <SignInModalStyles
+      name="sign-in-form"
+      autoComplete="off"
+      onFinish={onSubmit}>
+      <LogoWrapper src={Logo} />
+      <ModalTitle>CodeGear</ModalTitle>
+
+      <Form.Item name="username" rules={getFormItemRules()}>
+        <Input placeholder="Username" size="large" />
+      </Form.Item>
+
+      <Form.Item name="password" rules={getFormItemRules()}>
+        <Input.Password
+          placeholder="Password"
+          size="large"
+          style={{ marginTop: '10px' }}
+        />
+      </Form.Item>
+
+      <SubmitButton override="#38a886" type="primary" htmlType="submit">
+        Sign In
+      </SubmitButton>
+    </SignInModalStyles>
+  )
+}

apps/client/src/widgets/sign-in-modal/types.ts

@@ -0,0 +1,4 @@
+export interface SignInForm {
+  username: string
+  password: string
+}

apps/client/src/widgets/sign-in-modal/ui/sign-in-modal.tsx

@@ -1,3 +1,6 @@
+import { SignInModalTemplate } from '@/entities/sign-in-modal-template'
+import { SignInForm } from '@/widgets/sign-in-modal/types'
+
 import { Modal, VoidFunction } from '$/client-shared'
 
 interface SignInModalProps {
@@ -6,9 +9,13 @@ interface SignInModalProps {
 }
 
 export const SignInModal = ({ isOpen, onClose }: SignInModalProps) => {
+  const onSubmit = (data: SignInForm) => {
+    console.log(data)
+  }
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      test
+    <Modal isOpen={isOpen} onClose={onClose} width={37}>
+      <SignInModalTemplate<SignInForm> onSubmit={onSubmit} />
     </Modal>
   )
 }

apps/client/tsconfig.app.json

@@ -9,10 +9,11 @@
     "paths": {
       "@/*": ["./src/*"],
       "$/client-shared": ["../../libs/client-shared/src/index.ts"],
+      "$/assets": ["../../libs/client-shared/src/assets/index.ts"],
       "$/styles": ["../../libs/client-shared/src/styles/index.ts"],
       "$/editor": ["../../libs/editor/src/app/index.ts"],
       "react": ["../../node_modules/preact/compat"],
-      "react-dom": ["../../node_modules/preact/compat"]
+      "react-dom": ["../../node_modules/preact/compat"],
     }
   },
   "exclude": [

libs/client-shared/src/assets/index.ts

@@ -0,0 +1 @@
+export { default as Logo } from './logo.png'

libs/client-shared/src/ui/index.ts

@@ -1,4 +1,4 @@
 export { default as ColorButton } from './color-button/color-button'
-export { Modal } from './modal'
+export { Modal, ModalSeparator, ModalTitle } from './modal'
 export { Popover } from './popover'
 export { Select } from './select/select'

libs/client-shared/src/ui/modal/index.ts

@@ -1 +1,2 @@
 export { default as Modal } from './ui/modal'
+export { ModalSeparator, ModalTitle } from './ui/modal.styles'

libs/client-shared/src/ui/modal/ui/modal.styles.ts

@@ -1,6 +1,14 @@
 import styled from 'styled-components'
 
-import { absolute, color, customScrollbar, flex, shadow, wh } from '@/styles'
+import {
+  absolute,
+  br,
+  color,
+  customScrollbar,
+  flex,
+  shadow,
+  wh
+} from '@/styles'
 
 export const ModalBackground = styled.div`
   ${flex('center', 'center')};
@@ -13,10 +21,16 @@ export const ModalBackground = styled.div`
   z-index: 100;
 `
 
-export const ModalStyles = styled.div`
+interface ModalStylesProps {
+  readonly $width?: number
+  readonly $height?: number
+}
+
+export const ModalStyles = styled.div<ModalStylesProps>`
   display: grid;
   position: relative;
-  ${wh('50vw', '60vh')};
+  width: ${({ $width }) => $width ?? 50}vw;
+  height: ${({ $height }) => $height ?? 60}vh;
   background: ${color('grey')};
   border: 2px solid ${color('lightGrey')};
   min-height: 300px;
@@ -38,3 +52,18 @@ export const ModalContainer = styled.div`
     color: ${color('light')};
   }
 `
+
+export const ModalTitle = styled.h1`
+  text-align: center;
+  padding-bottom: 18px;
+  margin-bottom: 30px;
+  font-size: ${({ theme }) => theme.fz10};
+  border-bottom: ${br} ${color('lightGrey')};
+`
+
+export const ModalSeparator = styled.div`
+  background: ${color('lightGrey')};
+  ${wh('100%', '2px')};
+  margin-bottom: 30px;
+  margin-top: -8px;
+`

libs/client-shared/src/ui/modal/ui/modal.tsx

@@ -12,9 +12,17 @@ import { ModalBackground, ModalContainer, ModalStyles } from './modal.styles'
 type ModalProps = WithChildren<{
   isOpen: boolean
   onClose: () => void
+  width?: number
+  height?: number
 }>
 
-export const Modal = ({ onClose, isOpen, children }: ModalProps) => {
+export const Modal = ({
+  onClose,
+  isOpen,
+  children,
+  width,
+  height
+}: ModalProps) => {
   const { Spring, Gesture } = useAnimations()
   const { opacity, transform } = useModalTransitions()
 
@@ -65,7 +73,9 @@ export const Modal = ({ onClose, isOpen, children }: ModalProps) => {
                 style={{ ...modalStyle, x, y, scale }}
                 {...bind()}
                 onClick={stopPropagation}
-                as={Spring.a.div}>
+                as={Spring.a.div}
+                $width={width}
+                $height={height}>
                 <Scrollbar
                   damping={0.05}
                   syncCallbacks={true}

libs/editor/src/widgets/settings/ui/settings.styles.ts

@@ -30,17 +30,3 @@ export const SettingsText = styled.div`
   }
 `
 
-export const Separator = styled.div`
-  background: ${color('lightGrey')};
-  ${wh('100%', '2px')};
-  margin-bottom: 30px;
-  margin-top: -8px;
-`
-
-export const Title = styled.h1`
-  text-align: center;
-  padding-bottom: 18px;
-  margin-bottom: 30px;
-  font-size: ${({ theme }) => theme.fz10};
-  border-bottom: ${br} ${color('lightGrey')};
-`

libs/editor/src/widgets/settings/ui/settings.tsx

@@ -10,9 +10,9 @@ import { useActions, useModalsContext, useStore } from '@/shared/hooks'
 
 import { useColorCallback } from '../hooks'
 
-import { Separator, SettingsItem, SettingsText, Title } from './settings.styles'
+import { SettingsItem, SettingsText } from './settings.styles'
 
-import { Modal } from '$/client-shared'
+import { ModalSeparator, ModalTitle, Modal } from '$/client-shared'
 
 const Settings = observer(() => {
   const modalsContext = useModalsContext()
@@ -40,7 +40,7 @@ const Settings = observer(() => {
 
   return (
     <Modal isOpen={isOpen} onClose={closeSettings}>
-      <Title>Editor settings</Title>
+      <ModalTitle>Editor settings</ModalTitle>
       <SettingsItem>
         <SettingsText>
           <h4>Editor Theme</h4>
@@ -69,7 +69,7 @@ const Settings = observer(() => {
         </SettingsText>
         <TabSizeSwitcher />
       </SettingsItem>
-      <Separator />
+      <ModalSeparator />
       <SettingsItem>
         <SettingsText>
           <h4>Custom Editor Background</h4>
@@ -94,7 +94,7 @@ const Settings = observer(() => {
           size="large"
         />
       </SettingsItem>
-      <Separator />
+      <ModalSeparator />
       <SettingsItem>
         <SettingsText>
           <h4>Save editor settings to Local Storage</h4>
@@ -106,9 +106,9 @@ const Settings = observer(() => {
           style={{ marginRight: 15, marginTop: 0 }}
         />
       </SettingsItem>
-      <Title>Key buildings</Title>
+      <ModalTitle>Key buildings</ModalTitle>
       <KeyBuildings />
-      <Separator />
+      <ModalSeparator />
     </Modal>
   )
 })