Skip to content

Commit 158c430

Browse files
ErioldDaniel Montoya
Eriold
and
Daniel Montoya
authored
feat(PDYE-598): se agrega alert y modal con documentacion uikit (#616)
Co-authored-by: Daniel Montoya <daniel.montoya@eclass.cl>
1 parent 22060ce commit 158c430

File tree

16 files changed

+1141
-569
lines changed

16 files changed

+1141
-569
lines changed

‎package-lock.json

Lines changed: 825 additions & 559 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
"match-sorter": "6.3.1",
102102
"prettier": "2.6.1",
103103
"react": "17.0.2",
104-
"react-code-blocks": "0.1.3",
104+
"react-code-blocks": "0.1.6",
105105
"react-dom": "17.0.2",
106106
"react-router-dom": "6.14.2",
107107
"semantic-release": "18.0.1",

‎src/documentation/components/Code.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Box } from '@chakra-ui/react'
2-
import { CopyBlock, atomOneDark } from 'react-code-blocks'
2+
import { CopyBlock, dracula } from 'react-code-blocks'
33

4+
// Se cambia atomOneDark por dracula, debido a que no detecta funciones en objetos
45
interface ICode {
56
text: string
67
language?: string
@@ -9,12 +10,11 @@ export const Code = ({ text, language = 'jsx' }: ICode): JSX.Element => {
910
return (
1011
<Box m="1rem 0">
1112
<CopyBlock
12-
theme={atomOneDark}
13-
// @ts-expect-error
14-
text={text}
1513
language={language}
16-
codeBlock
14+
text={text}
1715
showLineNumbers={false}
16+
theme={dracula}
17+
codeBlock
1818
/>
1919
</Box>
2020
)

‎src/documentation/components/Layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react'
2-
import { Box, useMediaQuery } from '@chakra-ui/react'
2+
import { Box, useMediaQuery, Center } from '@chakra-ui/react'
33
import { useLocation, Outlet } from 'react-router-dom'
44

55
import { CloseIcon } from './CloseIcon'
@@ -8,6 +8,7 @@ import { IRoute, routes } from '../utils/routes'
88
import { Logo } from './Logo'
99
import { Nav } from './Nav'
1010
import { vars } from '@/theme'
11+
import { version } from 'package.json'
1112

1213
export const Layout = (): JSX.Element => {
1314
const [showNav, setShowNav] = useState(false)
@@ -129,6 +130,7 @@ export const Layout = (): JSX.Element => {
129130
}}
130131
>
131132
<Logo />
133+
<Center>Ultima version: {version}</Center>
132134
{routes.map((route: IRoute) => {
133135
return <Nav key={route.label} route={route} />
134136
})}

‎src/documentation/components/Organisms/ModalAlertDoc/ModalAlertDoc.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from 'react'
2+
import { ModalAlert } from '@/organisms'
3+
import { BtnPrimary } from '@/molecules'
4+
import { ModalAlertProps } from '@/organisms/ModalAlert/types'
5+
6+
export function ModalAlertDoc(): JSX.Element {
7+
const [isOpen, setIsOpen] = useState(false)
8+
const optionsModal: ModalAlertProps = {
9+
showModal: isOpen,
10+
typeAlert: 'info',
11+
title: '¿Seguro que deseas borrar esta pregunta?',
12+
description: 'Por favor escoge otro horario.',
13+
optionsButton: [
14+
{
15+
id: '1',
16+
label: 'Opcion 1',
17+
action: () => {
18+
setIsOpen(false)
19+
},
20+
},
21+
{
22+
id: '2',
23+
label: 'Opcion 2',
24+
action: () => {
25+
setIsOpen(false)
26+
},
27+
},
28+
],
29+
}
30+
return (
31+
<>
32+
<BtnPrimary onClick={() => setIsOpen(true)}>Ejemplo modal</BtnPrimary>
33+
<ModalAlert {...optionsModal} />
34+
</>
35+
)
36+
}
37+
38+
export default ModalAlertDoc

‎src/documentation/components/Organisms/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './ModalAlertDoc/ModalAlertDoc'

‎src/documentation/pages/Organisms/Alerts.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,80 @@ export const ViewAlert = (): JSX.Element => {
9595
<Alert state="error" buttonLink buttonText="Click me" onClick={() => {}}> Texto </Alert>
9696
<Alert state="warning" buttonLink buttonText="Click me" onClick={() => {}}> Texto </Alert>'
9797
/>
98+
<MyTittle>Alertas con botón link y boton primario</MyTittle>
99+
<MyText>
100+
Esta alerta recibe un state de alerta entre: <code>warning, error, success, info </code>.
101+
Adicionalmente recibe un link al final del texto y un botón primario.
102+
</MyText>
103+
<ListComponent>
104+
<Alert
105+
state="info"
106+
buttonText="Ir al registro"
107+
onClick={() => {}}
108+
onClickLink={() => {}}
109+
endTextLink="visita el Centro de ayuda"
110+
>
111+
<b>Para realizar tus evaluaciones monitoreadas debes registrarte en SMOWL.</b>. Es
112+
importante que lo hagas <b>al menos 72 horas antes de tu primera evaluacion</b> para
113+
evitar problemas o contratiempos. Para mas informacion,
114+
</Alert>
115+
<Alert
116+
state="success"
117+
buttonText="Ir al registro"
118+
onClick={() => {}}
119+
onClickLink={() => {}}
120+
endTextLink="visita el Centro de ayuda"
121+
>
122+
<b>Para realizar tus evaluaciones monitoreadas debes registrarte en SMOWL.</b>. Es
123+
importante que lo hagas <b>al menos 72 horas antes de tu primera evaluacion</b> para
124+
evitar problemas o contratiempos. Para mas informacion,
125+
</Alert>
126+
<Alert
127+
state="error"
128+
buttonText="Ir al registro"
129+
onClick={() => {}}
130+
onClickLink={() => {}}
131+
endTextLink="visita el Centro de ayuda"
132+
>
133+
<b>Para realizar tus evaluaciones monitoreadas debes registrarte en SMOWL.</b>. Es
134+
importante que lo hagas <b>al menos 72 horas antes de tu primera evaluacion</b> para
135+
evitar problemas o contratiempos. Para mas informacion,
136+
</Alert>
137+
<Alert
138+
state="warning"
139+
buttonText="Ir al registro"
140+
onClick={() => {}}
141+
onClickLink={() => {}}
142+
endTextLink="visita el Centro de ayuda"
143+
fullWidth
144+
>
145+
<b>Para realizar tus evaluaciones monitoreadas debes registrarte en SMOWL.</b>. Es
146+
importante que lo hagas <b>al menos 72 horas antes de tu primera evaluacion</b> para
147+
evitar problemas o contratiempos. Para mas informacion,
148+
</Alert>
149+
</ListComponent>
150+
<MyTittle>Types de Alert</MyTittle>
151+
<MyText>Tipos implementados en el Alert</MyText>
152+
<Code
153+
text={`interface IAlertProps {
154+
children?: React.ReactChild | React.ReactChild[]
155+
canDismiss?: boolean // Muestra el botón para cerrar
156+
buttonText?: string // Texto del botón
157+
buttonIcon?: React.ReactElement // Ícono del botón
158+
buttonLink?: boolean // Boolean que determina si el botón es tipo link
159+
fullWidth?: boolean // Ancho al 100% del contenedot
160+
isFlash?: boolean // Para notificación flash
161+
162+
onClick?: () => void // Funcion del boton estandard
163+
// Estado que define color e ícono de la alerta
164+
state: 'error' | 'info' | 'success' | 'warning'
165+
m?: string // Margen
166+
167+
// agrega el link al final del texto
168+
endTextLink?: string
169+
onClickLink?: () => void
170+
}`}
171+
/>
98172
</>
99173
)
100174
}

‎src/documentation/pages/Organisms/ModalAlert.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
2+
import { ModalAlertDoc } from '@/documentation/components/Organisms'
3+
// import { ModalAlert } from '@/organisms'
4+
// ModalAlertDoc
5+
// import { dataFake } from '@/organisms/CourseList/utils'
6+
7+
export const ViewModalAlert = (): JSX.Element => {
8+
return (
9+
<>
10+
<MyHeading>ModalAlert</MyHeading>
11+
<MyText>
12+
Componente que muestra una alerta en forma de modal, se puede mostrar con un 1 o 2 botones y
13+
contiene 4 tipos de alertas:<code> warning, error, success e info</code>.
14+
<br />
15+
<br />
16+
El modal se pegara al provider de <code>Chakra-ui</code> de la aplicacion, de tal modo que
17+
hara el portal desde el root de la aplicacion, asegurando que siempre se muestre por encima
18+
de cualquier componente
19+
</MyText>
20+
<MyTittle>Types definidos</MyTittle>
21+
<MyText>La modal se comporta bajo los siguientes types:</MyText>
22+
<Code
23+
text={`//Propiedades del modal
24+
export interface ModalAlertProps {
25+
showModal: boolean // Muestra/Oculta el modal
26+
typeAlert: 'success' | 'error' | 'warning' | 'info' // Tipos de alerta
27+
title?: string // Titulo del modal
28+
description?: string // Mensaje del modal
29+
optionsButton: optionsButton[] // Boton del modal en array
30+
}
31+
// Propiedades del boton
32+
interface optionsButton {
33+
id: string // Identifica el boton para mostrar el divider
34+
label: string // Texto del boton
35+
action: () => void // Funcion que dispara el boton
36+
}
37+
`}
38+
/>
39+
El componente se importa de la siguiente manera:
40+
<Code text="import { ModalAlert } from '@eclass/ui-kit'" />
41+
<MyTittle>Modo de uso</MyTittle>
42+
<MyText>
43+
El modal tipo <code>info</code> con 2 opciones
44+
</MyText>
45+
<ModalAlertDoc />
46+
<Code
47+
text={`//Importar el modal
48+
import { ModalAlert, BtnPrimary } from '@eclass/ui-kit'
49+
import { useState } from 'react'
50+
import { Button } from '@chakra-ui/react'
51+
52+
export function ModalAlertDoc(){
53+
const [isOpen, setIsOpen] = useState(false)
54+
const optionsModal = {
55+
showModal: isOpen,
56+
typeAlert: 'info',
57+
title: '¿Seguro que deseas borrar esta pregunta?',
58+
description: 'Por favor escoge otro horario.',
59+
optionsButton: [{
60+
id: '1',
61+
label: 'Opcion 1',
62+
action: () => { setIsOpen(false) }
63+
},{
64+
id: '2',
65+
label: 'Opcion 2',
66+
action: () => { setIsOpen(false) }
67+
}],
68+
}
69+
return (<>
70+
<BtnPrimary onClick={() => setIsOpen(true)}>Open Modal</BtnPrimary>
71+
<ModalAlert {...optionsModal} />
72+
</>)}
73+
}`}
74+
/>
75+
</>
76+
)
77+
}
78+
79+
export default ViewModalAlert

‎src/documentation/utils/routes.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const FlashNotification = React.lazy(
2727
async () => await import('../pages/Organisms/FlashNotification')
2828
)
2929
const CourseList = React.lazy(async () => await import('../pages/Organisms/CourseList'))
30+
const ModalAlert = React.lazy(async () => await import('../pages/Organisms/ModalAlert'))
3031

3132
/**
3233
* Rutas que tiene el proyecto con el respectivo link en la navegación.
@@ -148,4 +149,9 @@ export const routes: IRoute[] = [
148149
label: 'CourseList',
149150
component: <CourseList />,
150151
},
152+
{
153+
path: '/molecules/modalalert',
154+
label: 'ModalAlert',
155+
component: <ModalAlert />,
156+
},
151157
]

‎src/molecules/Buttons/BtnLink.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export interface props {
88
onClick?: (e: React.MouseEvent<HTMLElement>) => void
99
id?: string
1010
href?: string
11+
textDecorationLine?: boolean
12+
fontSize?: string | '0.875rem'
1113
}
1214

1315
export function BtnLink({
@@ -17,6 +19,8 @@ export function BtnLink({
1719
id,
1820
as = 'button',
1921
href = '',
22+
textDecorationLine = true,
23+
fontSize = '0.875rem',
2024
}: props): JSX.Element {
2125
const typeButton = {
2226
button: {
@@ -40,9 +44,9 @@ export function BtnLink({
4044
fontFamily="Roboto"
4145
fontStyle="normal"
4246
fontWeight="500"
43-
fontSize=".875rem"
47+
fontSize={fontSize}
4448
lineHeight="1rem"
45-
textDecorationLine="underline"
49+
textDecorationLine={textDecorationLine ? 'underline' : 'none'}
4650
color={vars('colors-main-deepSkyBlue')}
4751
m={m}
4852
_hover={{

0 commit comments

Comments
 (0)