Skip to content

Commit

Permalink
feat: added new sign-in-modal
Browse files Browse the repository at this point in the history
  • Loading branch information
gearonix committed Jul 27, 2023
1 parent 28eacd0 commit 6bbccb2
Show file tree
Hide file tree
Showing 20 changed files with 148 additions and 33 deletions.
4 changes: 4 additions & 0 deletions _templates/fsd-module/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,7 @@ This generator creates a module using the
---

- new (General case)

### Run

`hygen fsd-module [method]`
1 change: 1 addition & 0 deletions apps/client/src/app/styles/app.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const GlobalStyles = createGlobalStyle`
margin: 0;
}
${customScrollbar('body')}
.ant-popconfirm {
Expand Down
1 change: 1 addition & 0 deletions apps/client/src/entities/sign-in-modal-template/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { SignInModalTemplate } from './ui/sign-in-modal-template'
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const getFormItemRules = () => [{ required: true, min: 6, max: 14 }]
Original file line number Diff line number Diff line change
@@ -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;
`
Original file line number Diff line number Diff line change
@@ -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>
)
}
Empty file.
4 changes: 4 additions & 0 deletions apps/client/src/widgets/sign-in-modal/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface SignInForm {
username: string
password: string
}

This file was deleted.

11 changes: 9 additions & 2 deletions apps/client/src/widgets/sign-in-modal/ui/sign-in-modal.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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>
)
}
3 changes: 2 additions & 1 deletion apps/client/tsconfig.app.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
1 change: 1 addition & 0 deletions libs/client-shared/src/assets/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Logo } from './logo.png'
Binary file added libs/client-shared/src/assets/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion libs/client-shared/src/ui/index.ts
Original file line number Diff line number Diff line change
@@ -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'
1 change: 1 addition & 0 deletions libs/client-shared/src/ui/modal/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { default as Modal } from './ui/modal'
export { ModalSeparator, ModalTitle } from './ui/modal.styles'
35 changes: 32 additions & 3 deletions libs/client-shared/src/ui/modal/ui/modal.styles.ts
Original file line number Diff line number Diff line change
@@ -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')};
Expand All @@ -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;
Expand All @@ -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;
`
14 changes: 12 additions & 2 deletions libs/client-shared/src/ui/modal/ui/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down Expand Up @@ -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}
Expand Down
14 changes: 0 additions & 14 deletions libs/editor/src/widgets/settings/ui/settings.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')};
`
14 changes: 7 additions & 7 deletions libs/editor/src/widgets/settings/ui/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -69,7 +69,7 @@ const Settings = observer(() => {
</SettingsText>
<TabSizeSwitcher />
</SettingsItem>
<Separator />
<ModalSeparator />
<SettingsItem>
<SettingsText>
<h4>Custom Editor Background</h4>
Expand All @@ -94,7 +94,7 @@ const Settings = observer(() => {
size="large"
/>
</SettingsItem>
<Separator />
<ModalSeparator />
<SettingsItem>
<SettingsText>
<h4>Save editor settings to Local Storage</h4>
Expand All @@ -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>
)
})
Expand Down

0 comments on commit 6bbccb2

Please sign in to comment.