Frontend folder structure (#19631)
* moved folders * moved [2] * step # * Fix * Moved Auto translate * Ops * fix LGTMpull/19746/head
Guilherme Gazzo
5 years ago
committed by
GitHub
parent
4b6ec7d984
commit
13bf9508cc
@ -0,0 +1,34 @@ |
||||
# How does the folder structure work in the frontend? |
||||
|
||||
|
||||
## The folder structure should follow rocketchat's html 'semantics' like: |
||||
``` |
||||
main -> room |
||||
-> header |
||||
... |
||||
-> contextualbar |
||||
roominfo |
||||
... |
||||
-> sidebar |
||||
-> Header |
||||
-> search |
||||
-> actions |
||||
... |
||||
-> list |
||||
... |
||||
-> footer |
||||
... |
||||
``` |
||||
each folder is composed by: |
||||
index.jsx |
||||
ContainerComponent.jsx |
||||
contexts (optional) |
||||
providers (optional) |
||||
components (optional) |
||||
hooks (optional) |
||||
libs (optional) |
||||
|
||||
We strongly suggest that you start developing your components/hooks/libs inside the folder where they will be directly used. If you ever find that you will use them in more than one place, then you should "promote" the code to an upper level, where it can be commonly accessed by all others |
||||
|
||||
|
||||
we have being moving code from blaze to react, but sometimes we will need render under blaze enviroment, to do that use `createTemplateForComponent` |
||||
@ -1,145 +0,0 @@ |
||||
import React from 'react'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import RoomInfo from '../../components/basic/RoomInfo'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserRoom } from '../../contexts/UserContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import DeleteChannelWarning from '../../components/DeleteChannelWarning'; |
||||
import { useSetModal } from '../../contexts/ModalContext'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import { useRoute } from '../../contexts/RouterContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { roomTypes, UiTextContext } from '../../../app/utils'; |
||||
import { RoomManager } from '../../../app/ui-utils/client/lib/RoomManager'; |
||||
import { usePermission } from '../../contexts/AuthorizationContext'; |
||||
import WarningModal from '../../admin/apps/WarningModal'; |
||||
import MarkdownText from '../../components/basic/MarkdownText'; |
||||
|
||||
const retentionPolicyMaxAge = { |
||||
c: 'RetentionPolicy_MaxAge_Channels', |
||||
p: 'RetentionPolicy_MaxAge_Groups', |
||||
d: 'RetentionPolicy_MaxAge_DMs', |
||||
}; |
||||
|
||||
const retentionPolicyAppliesTo = { |
||||
c: 'RetentionPolicy_AppliesToChannels', |
||||
p: 'RetentionPolicy_AppliesToGroups', |
||||
d: 'RetentionPolicy_AppliesToDMs', |
||||
}; |
||||
|
||||
export default ({ |
||||
openEditing, |
||||
rid, |
||||
tabBar, |
||||
}) => { |
||||
const onClickClose = useMutableCallback(() => tabBar && tabBar.close()); |
||||
const t = useTranslation(); |
||||
|
||||
const room = useUserRoom(rid); |
||||
room.type = room.t; |
||||
room.rid = rid; |
||||
const { type, name, broadcast, archived, joined = true } = room; // TODO implement joined
|
||||
|
||||
const retentionPolicyEnabled = useSetting('RetentionPolicy_Enabled'); |
||||
const retentionPolicy = { |
||||
retentionPolicyEnabled, |
||||
maxAgeDefault: useSetting(retentionPolicyMaxAge[room.t]) || 30, |
||||
retentionEnabledDefault: useSetting(retentionPolicyAppliesTo[room.t]), |
||||
excludePinnedDefault: useSetting('RetentionPolicy_DoNotPrunePinned'), |
||||
filesOnlyDefault: useSetting('RetentionPolicy_FilesOnly'), |
||||
}; |
||||
|
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
const setModal = useSetModal(); |
||||
const closeModal = useMutableCallback(() => setModal()); |
||||
const deleteRoom = useMethod('eraseRoom'); |
||||
const hideRoom = useMethod('hideRoom'); |
||||
const leaveRoom = useMethod('leaveRoom'); |
||||
const router = useRoute('home'); |
||||
|
||||
const canDelete = usePermission(type === 'c' ? 'delete-c' : 'delete-p', rid); |
||||
|
||||
const canEdit = usePermission('edit-room', rid); |
||||
|
||||
const canLeave = usePermission(type === 'c' ? 'leave-c' : 'leave-p') && room.cl !== false && joined; |
||||
|
||||
const handleDelete = useMutableCallback(() => { |
||||
const onConfirm = async () => { |
||||
try { |
||||
await deleteRoom(rid); |
||||
router.push({}); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
closeModal(); |
||||
}; |
||||
|
||||
setModal(<DeleteChannelWarning onConfirm={onConfirm} onCancel={closeModal} />); |
||||
}); |
||||
|
||||
const handleLeave = useMutableCallback(() => { |
||||
const leave = async () => { |
||||
try { |
||||
await leaveRoom(rid); |
||||
router.push({}); |
||||
RoomManager.close(rid); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
closeModal(); |
||||
}; |
||||
|
||||
const warnText = roomTypes.getConfig(type).getUiText(UiTextContext.LEAVE_WARNING); |
||||
|
||||
setModal(<WarningModal |
||||
text={t(warnText, name)} |
||||
confirmText={t('Leave_room')} |
||||
close={closeModal} |
||||
cancel={closeModal} |
||||
cancelText={t('Cancel')} |
||||
confirm={leave} |
||||
/>); |
||||
}); |
||||
|
||||
const handleHide = useMutableCallback(async () => { |
||||
const hide = async () => { |
||||
try { |
||||
await hideRoom(rid); |
||||
router.push({}); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
closeModal(); |
||||
}; |
||||
|
||||
const warnText = roomTypes.getConfig(type).getUiText(UiTextContext.HIDE_WARNING); |
||||
|
||||
setModal(<WarningModal |
||||
text={t(warnText, name)} |
||||
confirmText={t('Yes_hide_it')} |
||||
close={closeModal} |
||||
cancel={closeModal} |
||||
cancelText={t('Cancel')} |
||||
confirm={hide} |
||||
/>); |
||||
}); |
||||
|
||||
return ( |
||||
<RoomInfo |
||||
archived={archived} |
||||
broadcast={broadcast} |
||||
icon={room.t === 'p' ? 'lock' : 'hashtag'} |
||||
retentionPolicy={retentionPolicyEnabled && retentionPolicy} |
||||
onClickEdit={canEdit && openEditing} |
||||
onClickClose={onClickClose} |
||||
onClickDelete={canDelete && handleDelete} |
||||
onClickLeave={canLeave && handleLeave} |
||||
onClickHide={joined && handleHide} |
||||
{...room} |
||||
announcement={room.announcement && <MarkdownText content={room.announcement}/>} |
||||
description={room.description && <MarkdownText content={room.description}/>} |
||||
topic={room.topic && <MarkdownText content={room.topic}/>} |
||||
/> |
||||
); |
||||
}; |
||||
@ -1,9 +0,0 @@ |
||||
import React from 'react'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import KeyboardShortcuts from '../../components/basic/KeyboardShortcuts'; |
||||
|
||||
export default React.memo(({ tabBar }) => { |
||||
const handleClose = useMutableCallback(() => tabBar && tabBar.close()); |
||||
return <KeyboardShortcuts handleClose={handleClose}/>; |
||||
}); |
||||
@ -1,92 +0,0 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import { UserInfo } from '../../components/basic/UserInfo'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import { ReactiveUserStatus } from '../../components/basic/UserStatus'; |
||||
import UserCard from '../../components/basic/UserCard'; |
||||
import { FormSkeleton } from '../../admin/users/Skeleton'; |
||||
import VerticalBar from '../../components/basic/VerticalBar'; |
||||
import UserActions from './actions/UserActions'; |
||||
import { useRolesDescription } from '../../contexts/AuthorizationContext'; |
||||
import { useEndpointData } from '../../hooks/useEndpointData'; |
||||
import { AsyncStatePhase } from '../../hooks/useAsyncState'; |
||||
|
||||
export const UserInfoWithData = React.memo(function UserInfoWithData({ uid, username, tabBar, rid, onClose, video, showBackButton, ...props }) { |
||||
const t = useTranslation(); |
||||
|
||||
const getRoles = useRolesDescription(); |
||||
|
||||
const showRealNames = useSetting('UI_Use_Real_Name'); |
||||
|
||||
const { value: data, phase: state, error } = useEndpointData( |
||||
'users.info', |
||||
useMemo( |
||||
() => ({ ...uid && { userId: uid }, ...username && { username } }), |
||||
[uid, username], |
||||
), |
||||
); |
||||
|
||||
const user = useMemo(() => { |
||||
const { user } = data || { user: {} }; |
||||
const { |
||||
_id, |
||||
name, |
||||
username, |
||||
roles = [], |
||||
status = null, |
||||
statusText, |
||||
bio, |
||||
utcOffset, |
||||
lastLogin, |
||||
nickname, |
||||
} = user; |
||||
return { |
||||
name: showRealNames ? name : username, |
||||
username, |
||||
lastLogin, |
||||
roles: roles && getRoles(roles).map((role, index) => ( |
||||
<UserCard.Role key={index}>{role}</UserCard.Role> |
||||
)), |
||||
bio, |
||||
phone: user.phone, |
||||
customFields: user.customFields, |
||||
email: user.emails?.find(({ address }) => !!address), |
||||
utcOffset, |
||||
createdAt: user.createdAt, |
||||
// localTime: <LocalTime offset={utcOffset} />,
|
||||
status: status && <ReactiveUserStatus uid={_id} presence={status} />, |
||||
customStatus: statusText, |
||||
nickname, |
||||
}; |
||||
}, [data, showRealNames, getRoles]); |
||||
|
||||
return ( |
||||
<VerticalBar> |
||||
<VerticalBar.Header> |
||||
{t('User_Info')} |
||||
{onClose && <VerticalBar.Close onClick={onClose} />} |
||||
</VerticalBar.Header> |
||||
|
||||
{ |
||||
(error && <VerticalBar.Content> |
||||
<Box mbs='x16'>{t('User_not_found')}</Box> |
||||
</VerticalBar.Content>) |
||||
|| (state === AsyncStatePhase.LOADING && <VerticalBar.Content> |
||||
<FormSkeleton /> |
||||
</VerticalBar.Content>) |
||||
|| <UserInfo |
||||
{...user} |
||||
data={data.user} |
||||
// onChange={onChange}
|
||||
actions={<UserActions user={data.user} rid={rid}/>} |
||||
{...props} |
||||
p='x24' |
||||
/> |
||||
} |
||||
</VerticalBar> |
||||
); |
||||
}); |
||||
|
||||
export default UserInfoWithData; |
||||
@ -1,8 +1,8 @@ |
||||
import React, { useMemo, useState } from 'react'; |
||||
import { AutoComplete, Option } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useEndpointData } from '../../hooks/useEndpointData'; |
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
import { useEndpointData } from '../hooks/useEndpointData'; |
||||
|
||||
export const AutoCompleteAgent = React.memo((props) => { |
||||
const t = useTranslation(); |
||||
@ -1,8 +1,8 @@ |
||||
import React, { useMemo, useState } from 'react'; |
||||
import { AutoComplete, Option } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useEndpointData } from '../../hooks/useEndpointData'; |
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
import { useEndpointData } from '../hooks/useEndpointData'; |
||||
|
||||
export const AutoCompleteDepartment = React.memo((props) => { |
||||
const t = useTranslation(); |
||||
@ -1,6 +1,6 @@ |
||||
import React from 'react'; |
||||
|
||||
import { renderEmoji } from '../../../app/emoji/client/index'; |
||||
import { renderEmoji } from '../../app/emoji/client/index'; |
||||
|
||||
function Emoji({ emojiHandle }) { |
||||
const markup = { __html: `${ renderEmoji(emojiHandle) }` }; |
||||
@ -1,11 +1,11 @@ |
||||
import { Button, ButtonGroup, Tile } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { fullHeightDecorator } from '../../../.storybook/decorators'; |
||||
import { fullHeightDecorator } from '../../.storybook/decorators'; |
||||
import Page from './Page'; |
||||
|
||||
export default { |
||||
title: 'components/basic/Page', |
||||
title: 'components/Page', |
||||
component: Page, |
||||
}; |
||||
|
||||
@ -1,8 +1,8 @@ |
||||
import { Box, Icon, Button, Scrollable } from '@rocket.chat/fuselage'; |
||||
import React, { useCallback } from 'react'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../contexts/ToastMessagesContext'; |
||||
|
||||
const Wrapper = (text) => <Box |
||||
fontFamily='mono' |
||||
@ -1,7 +1,7 @@ |
||||
import React from 'react'; |
||||
|
||||
import { useTimezoneTime } from '../../hooks/useTimezoneTime'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useTimezoneTime } from '../hooks/useTimezoneTime'; |
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
|
||||
const useUTCClock = (utcOffset) => { |
||||
const time = useTimezoneTime(utcOffset, 10000); |
||||
@ -1,7 +1,7 @@ |
||||
import React, { memo } from 'react'; |
||||
|
||||
import BaseAvatar from './BaseAvatar'; |
||||
import { useRoomAvatarPath } from '../../../contexts/AvatarUrlContext'; |
||||
import { useRoomAvatarPath } from '../../contexts/AvatarUrlContext'; |
||||
|
||||
function RoomAvatar({ room, ...rest }) { |
||||
const getRoomPathAvatar = useRoomAvatarPath(); |
||||
@ -1,7 +1,7 @@ |
||||
import React, { memo } from 'react'; |
||||
|
||||
import BaseAvatar from './BaseAvatar'; |
||||
import { useUserAvatarPath } from '../../../contexts/AvatarUrlContext'; |
||||
import { useUserAvatarPath } from '../../contexts/AvatarUrlContext'; |
||||
|
||||
function UserAvatar({ username, etag, ...rest }) { |
||||
const getUserAvatarPath = useUserAvatarPath(); |
||||
@ -1,8 +1,8 @@ |
||||
import React, { useState, useCallback } from 'react'; |
||||
import { Box, Button, Icon, TextInput, Margins, Avatar } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useFileInput } from '../../../hooks/useFileInput'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useFileInput } from '../../hooks/useFileInput'; |
||||
import UserAvatar from './UserAvatar'; |
||||
|
||||
function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource, disabled, ...props }) { |
||||
@ -1,40 +0,0 @@ |
||||
import React from 'react'; |
||||
import { FieldGroup, Field, ToggleSwitch, Select } from '@rocket.chat/fuselage'; |
||||
|
||||
import VerticalBar from './VerticalBar'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
|
||||
const AutoTranslate = ({ |
||||
language, |
||||
languages, |
||||
handleSwitch, |
||||
translateEnable, |
||||
handleChangeLanguage, |
||||
handleClose, |
||||
}) => { |
||||
const t = useTranslation(); |
||||
|
||||
return <> |
||||
<VerticalBar.Header> |
||||
<VerticalBar.Icon name='language'/> |
||||
<VerticalBar.Text>{ t('Auto_Translate') }</VerticalBar.Text> |
||||
{handleClose && <VerticalBar.Close onClick={handleClose}/>} |
||||
</VerticalBar.Header> |
||||
|
||||
<VerticalBar.ScrollableContent> |
||||
<FieldGroup> |
||||
<Field.Label htmlFor='automatic-translation'>{ t('Automatic_Translation') }</Field.Label> |
||||
<Field.Row> |
||||
<ToggleSwitch id='automatic-translation' onChange={handleSwitch} defaultChecked={translateEnable}/> |
||||
</Field.Row> |
||||
|
||||
<Field.Label htmlFor='language'>{ t('Language') }</Field.Label> |
||||
<Field.Row verticalAlign='middle'> |
||||
<Select id='language' value={language} disabled={!translateEnable} onChange={handleChangeLanguage} options={languages} /> |
||||
</Field.Row> |
||||
</FieldGroup> |
||||
</VerticalBar.ScrollableContent> |
||||
</>; |
||||
}; |
||||
|
||||
export default AutoTranslate; |
||||
@ -1,122 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Box, Margins, Icon, Button, ButtonGroup, Divider, Callout } from '@rocket.chat/fuselage'; |
||||
import { css } from '@rocket.chat/css-in-js'; |
||||
|
||||
import RoomAvatar from './avatar/RoomAvatar'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import UserCard from './UserCard'; |
||||
import VerticalBar from './VerticalBar'; |
||||
|
||||
const wordBreak = css` |
||||
word-break: break-word !important; |
||||
`;
|
||||
|
||||
const Label = (props) => <Box fontScale='p2' color='default' {...props} />; |
||||
const Info = ({ className, ...props }) => <UserCard.Info className={[className, wordBreak]} flexShrink={0} {...props}/>; |
||||
|
||||
export const RoomInfoIcon = ({ name }) => <Icon name={name} size='x22' />; |
||||
|
||||
export const Title = (props) => <UserCard.Username {...props}/>; |
||||
|
||||
export const RoomInfo = function RoomInfo({ |
||||
name, |
||||
description, |
||||
archived, |
||||
broadcast, |
||||
announcement, |
||||
topic, |
||||
type, |
||||
rid, |
||||
icon, |
||||
retentionPolicy = {}, |
||||
onClickHide, |
||||
onClickClose, |
||||
onClickLeave, |
||||
onClickEdit, |
||||
onClickDelete, |
||||
}) { |
||||
const t = useTranslation(); |
||||
|
||||
const { |
||||
retentionPolicyEnabled, |
||||
filesOnlyDefault, |
||||
excludePinnedDefault, |
||||
maxAgeDefault, |
||||
} = retentionPolicy; |
||||
|
||||
return ( |
||||
<> |
||||
<VerticalBar.Header> |
||||
<VerticalBar.Icon name='info-circled'/> |
||||
<VerticalBar.Text>{t('Room_Info')}</VerticalBar.Text> |
||||
{ onClickClose && <VerticalBar.Close onClick={onClickClose} /> } |
||||
</VerticalBar.Header> |
||||
|
||||
<VerticalBar.ScrollableContent p='x24'> |
||||
<Box flexGrow={1}> |
||||
<Margins block='x4'> |
||||
<Box pbe='x24'> |
||||
<RoomAvatar size={'x332'} room={{ _id: rid, type, t: type } } /> |
||||
</Box> |
||||
|
||||
{ archived && <Box pbe='x24'> |
||||
<Callout type='warning'> |
||||
{t('Room_archived')} |
||||
</Callout> |
||||
</Box>} |
||||
|
||||
<Box pbe='x24'> |
||||
<RoomInfo.Title name={name} status={<RoomInfo.Icon name={icon} />}>{name}</RoomInfo.Title> |
||||
</Box> |
||||
|
||||
{broadcast && broadcast !== '' && <Box pbe='x16'> |
||||
<Label><b>{t('Broadcast_channel')}</b> {t('Broadcast_channel_Description')}</Label> |
||||
</Box>} |
||||
|
||||
{description && description !== '' && <Box pbe='x16'> |
||||
<Label>{t('Description')}</Label> |
||||
<Info withTruncatedText={false}>{description}</Info> |
||||
</Box>} |
||||
|
||||
{announcement && announcement !== '' && <Box pbe='x16'> |
||||
<Label>{t('Announcement')}</Label> |
||||
<Info withTruncatedText={false}>{announcement}</Info> |
||||
</Box>} |
||||
|
||||
{topic && topic !== '' && <Box pbe='x16'> |
||||
<Label>{t('Topic')}</Label> |
||||
<Info withTruncatedText={false}>{topic}</Info> |
||||
</Box>} |
||||
|
||||
{retentionPolicyEnabled && ( |
||||
<Callout type='warning'> |
||||
{filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_FilesOnly', { time: maxAgeDefault })}</p>} |
||||
{filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_UnpinnedFilesOnly', { time: maxAgeDefault })}</p>} |
||||
{!filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning', { time: maxAgeDefault })}</p>} |
||||
{!filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_Unpinned', { time: maxAgeDefault })}</p>} |
||||
</Callout> |
||||
)} |
||||
</Margins> |
||||
</Box> |
||||
</VerticalBar.ScrollableContent> |
||||
<VerticalBar.Footer> |
||||
<ButtonGroup stretch> |
||||
{ onClickHide && <Button width='50%' onClick={onClickHide}><Box is='span' mie='x4'><Icon name='eye-off' size='x20' /></Box>{t('Hide')}</Button> } |
||||
{ onClickLeave && <Button width='50%' onClick={onClickLeave} danger><Box is='span' mie='x4'><Icon name='sign-out' size='x20' /></Box>{t('Leave')}</Button> } |
||||
</ButtonGroup> |
||||
{ (onClickEdit || onClickDelete) && <> |
||||
<Divider /> |
||||
<ButtonGroup stretch> |
||||
{ onClickEdit && <Button width='50%' onClick={onClickEdit}><Box is='span' mie='x4'><Icon name='edit' size='x20' /></Box>{t('Edit')}</Button> } |
||||
{ onClickDelete && <Button width='50%' onClick={onClickDelete} danger><Box is='span' mie='x4'><Icon name='trash' size='x20' /></Box>{t('Delete')}</Button>} |
||||
</ButtonGroup> |
||||
</>} |
||||
</VerticalBar.Footer> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
RoomInfo.Title = Title; |
||||
RoomInfo.Icon = RoomInfoIcon; |
||||
|
||||
export default React.memo(RoomInfo); |
||||
@ -1,11 +1,11 @@ |
||||
import React from 'react'; |
||||
|
||||
import { centeredDecorator } from '../../../../.storybook/decorators'; |
||||
import { useAutoToggle } from '../../../../.storybook/hooks'; |
||||
import { centeredDecorator } from '../../../.storybook/decorators'; |
||||
import { useAutoToggle } from '../../../.storybook/hooks'; |
||||
import BurgerIcon from './BurgerIcon'; |
||||
|
||||
export default { |
||||
title: 'components/basic/burger/BurgerIcon', |
||||
title: 'components/burger/BurgerIcon', |
||||
component: BurgerIcon, |
||||
decorators: [ |
||||
centeredDecorator, |
||||
@ -1,11 +1,11 @@ |
||||
import { action } from '@storybook/addon-actions'; |
||||
import React from 'react'; |
||||
|
||||
import { centeredDecorator } from '../../../../.storybook/decorators'; |
||||
import { centeredDecorator } from '../../../.storybook/decorators'; |
||||
import BurgerMenuButton from './BurgerMenuButton'; |
||||
|
||||
export default { |
||||
title: 'components/basic/burger/BurgerMenuButton', |
||||
title: 'components/burger/BurgerMenuButton', |
||||
component: BurgerMenuButton, |
||||
decorators: [ |
||||
centeredDecorator, |
||||
@ -1,13 +1,13 @@ |
||||
import React, { useMemo, useCallback } from 'react'; |
||||
import { Box, Select, Field, Button } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useReactiveValue } from '../hooks/useReactiveValue'; |
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
import { useMethod } from '../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../contexts/ToastMessagesContext'; |
||||
import { WebdavAccounts } from '../../app/models'; |
||||
import { useForm } from '../hooks/useForm'; |
||||
import Page from '../components/basic/Page'; |
||||
import { useReactiveValue } from '../../hooks/useReactiveValue'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { WebdavAccounts } from '../../../app/models'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import Page from '../../components/Page'; |
||||
|
||||
const getWebdavAccounts = () => WebdavAccounts.find().fetch(); |
||||
|
||||
@ -1,10 +1,10 @@ |
||||
import React, { useEffect } from 'react'; |
||||
|
||||
import { SideNav } from '../../app/ui-utils'; |
||||
import { useSetting } from '../contexts/SettingsContext'; |
||||
import { usePermission } from '../contexts/AuthorizationContext'; |
||||
import { useRouteParameter, useRoute } from '../contexts/RouterContext'; |
||||
import NotAuthorizedPage from '../components/NotAuthorizedPage'; |
||||
import { SideNav } from '../../../app/ui-utils'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import { usePermission } from '../../contexts/AuthorizationContext'; |
||||
import { useRouteParameter, useRoute } from '../../contexts/RouterContext'; |
||||
import NotAuthorizedPage from '../../components/NotAuthorizedPage'; |
||||
import AccountProfilePage from './AccountProfilePage'; |
||||
import AccountIntegrationsPage from './AccountIntegrationsPage'; |
||||
import AccountPreferencesPage from './preferences/AccountPreferencesPage'; |
||||
@ -1,11 +1,11 @@ |
||||
import React, { memo, useCallback, useEffect } from 'react'; |
||||
import { useSubscription } from 'use-subscription'; |
||||
|
||||
import { menu, SideNav, Layout } from '../../app/ui-utils/client'; |
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
import { useRoutePath, useCurrentRoute } from '../contexts/RouterContext'; |
||||
import Sidebar from '../components/basic/Sidebar'; |
||||
import SettingsProvider from '../providers/SettingsProvider'; |
||||
import { menu, SideNav, Layout } from '../../../app/ui-utils/client'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useRoutePath, useCurrentRoute } from '../../contexts/RouterContext'; |
||||
import Sidebar from '../../components/Sidebar'; |
||||
import SettingsProvider from '../../providers/SettingsProvider'; |
||||
import { itemsSubscription } from './sidebarItems'; |
||||
|
||||
const AccountSidebar = () => { |
||||
@ -1,7 +1,7 @@ |
||||
import { ButtonGroup, Button, Box, Icon, PasswordInput, TextInput, Modal } from '@rocket.chat/fuselage'; |
||||
import React, { useState, useCallback, FC } from 'react'; |
||||
|
||||
import { useTranslation } from '../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
|
||||
type ActionConfirmModalProps = { |
||||
title: string; |
||||
@ -1,11 +1,11 @@ |
||||
import React, { useState, useCallback, useRef } from 'react'; |
||||
import { ButtonGroup, Button, Box, Accordion } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import Page from '../../components/basic/Page'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext'; |
||||
import { useSetting } from '../../../contexts/SettingsContext'; |
||||
import { useMethod } from '../../../contexts/ServerContext'; |
||||
import Page from '../../../components/Page'; |
||||
import PreferencesLocalizationSection from './PreferencesLocalizationSection'; |
||||
import PreferencesUserPresenceSection from './PreferencesUserPresenceSection'; |
||||
import PreferencesNotificationsSection from './PreferencesNotificationsSection'; |
||||
@ -1,7 +1,7 @@ |
||||
import React, { FC } from 'react'; |
||||
import { ButtonGroup, Button, Icon, Box, Modal } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
|
||||
type MyDataModalProps = { |
||||
onCancel: () => void; |
||||
@ -1,9 +1,9 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
|
||||
const PreferencesGlobalSection = ({ onChange, ...props }) => { |
||||
const t = useTranslation(); |
||||
@ -1,9 +1,9 @@ |
||||
import React from 'react'; |
||||
import { Accordion, Field, FieldGroup, TextAreaInput } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
|
||||
const PreferencesHighlightsSection = ({ onChange, ...props }) => { |
||||
const t = useTranslation(); |
||||
@ -1,9 +1,9 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Accordion, Field, Select, FieldGroup } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useLanguages, useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useLanguages, useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
|
||||
const PreferencesLocalizationSection = ({ onChange, ...props }) => { |
||||
const t = useTranslation(); |
||||
@ -1,10 +1,10 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Accordion, Field, Select, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useSetting } from '../../../contexts/SettingsContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
|
||||
const PreferencesMessagesSection = ({ onChange, ...props }) => { |
||||
const t = useTranslation(); |
||||
@ -1,10 +1,10 @@ |
||||
import React, { useCallback } from 'react'; |
||||
import { Accordion, Field, FieldGroup, ButtonGroup, Button, Icon, Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useSetModal } from '../../contexts/ModalContext'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext'; |
||||
import { useMethod } from '../../../contexts/ServerContext'; |
||||
import { useSetModal } from '../../../contexts/ModalContext'; |
||||
import MyDataModal from './MyDataModal'; |
||||
|
||||
const PreferencesMyDataSection = ({ onChange, ...props }) => { |
||||
@ -1,11 +1,11 @@ |
||||
import React, { useCallback, useEffect, useState, useMemo } from 'react'; |
||||
import { Accordion, Field, Select, FieldGroup, ToggleSwitch, Button, Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import { KonchatNotification } from '../../../app/ui'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import { KonchatNotification } from '../../../../app/ui'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
import { useSetting } from '../../../contexts/SettingsContext'; |
||||
|
||||
const notificationOptionsLabelMap = { |
||||
all: 'All_messages', |
||||
@ -1,10 +1,10 @@ |
||||
import React, { useMemo, useCallback } from 'react'; |
||||
import { Accordion, Field, Select, FieldGroup, ToggleSwitch, Tooltip, Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { CustomSounds } from '../../../app/custom-sounds/client'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
import { CustomSounds } from '../../../../app/custom-sounds/client'; |
||||
|
||||
const useCustomSoundsOptions = () => useMemo(() => CustomSounds && CustomSounds.getList && CustomSounds.getList().map(({ _id, name }) => [_id, name]), []); |
||||
|
||||
@ -1,9 +1,9 @@ |
||||
import React, { useCallback } from 'react'; |
||||
import { Accordion, Field, NumberInput, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../contexts/UserContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserPreference } from '../../../contexts/UserContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
|
||||
const PreferencesUserPresenceSection = ({ onChange, ...props }) => { |
||||
const t = useTranslation(); |
||||
@ -1,10 +1,10 @@ |
||||
import React from 'react'; |
||||
import { Box, Accordion } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useSetting } from '../../contexts/SettingsContext'; |
||||
import Page from '../../components/basic/Page'; |
||||
import NotAuthorizedPage from '../../components/NotAuthorizedPage'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useSetting } from '../../../contexts/SettingsContext'; |
||||
import Page from '../../../components/Page'; |
||||
import NotAuthorizedPage from '../../../components/NotAuthorizedPage'; |
||||
import TwoFactorTOTP from './TwoFactorTOTP'; |
||||
import TwoFactorEmail from './TwoFactorEmail'; |
||||
import EndToEnd from './EndToEnd'; |
||||
@ -1,8 +1,8 @@ |
||||
import React, { FC, useMemo } from 'react'; |
||||
import { Box, Button, Icon, ButtonGroup, Modal } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import TextCopy from '../../components/basic/TextCopy'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import TextCopy from '../../../components/TextCopy'; |
||||
|
||||
type BackupCodesModalProps = { |
||||
codes: string[]; |
||||
@ -1,9 +1,9 @@ |
||||
import React, { useCallback } from 'react'; |
||||
import { Box, Button, Margins } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUser } from '../../contexts/UserContext'; |
||||
import { useEndpointAction } from '../../hooks/useEndpointAction'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUser } from '../../../contexts/UserContext'; |
||||
import { useEndpointAction } from '../../../hooks/useEndpointAction'; |
||||
|
||||
const TwoFactorEmail = (props) => { |
||||
const t = useTranslation(); |
||||
@ -1,8 +1,8 @@ |
||||
import React, { FC, useCallback, useEffect, useRef } from 'react'; |
||||
import { Box, Button, TextInput, Icon, ButtonGroup, Modal } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useForm } from '../../../hooks/useForm'; |
||||
|
||||
type VerifyCodeModalProps = { |
||||
onVerify: (code: string) => void; |
||||
@ -1,9 +1,9 @@ |
||||
import { HTML } from 'meteor/htmljs'; |
||||
|
||||
import { hasPermission } from '../../app/authorization/client'; |
||||
import { createTemplateForComponent } from '../reactAdapters'; |
||||
import { settings } from '../../app/settings'; |
||||
import { createSidebarItems } from '../lib/createSidebarItems'; |
||||
import { hasPermission } from '../../../app/authorization/client'; |
||||
import { createTemplateForComponent } from '../../reactAdapters'; |
||||
import { settings } from '../../../app/settings'; |
||||
import { createSidebarItems } from '../../lib/createSidebarItems'; |
||||
|
||||
createTemplateForComponent('accountFlex', () => import('./AccountSidebar'), { |
||||
renderContainerView: () => HTML.DIV({ style: 'height: 100%; position: relative;' }), // eslint-disable-line new-cap
|
||||
@ -1,10 +1,10 @@ |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import Page from '../../components/basic/Page'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import Page from '../../../components/Page'; |
||||
import AccountTokensTable from './AccountTokensTable'; |
||||
import AddToken from './AddToken'; |
||||
import { useEndpointData } from '../../hooks/useEndpointData'; |
||||
import { useEndpointData } from '../../../hooks/useEndpointData'; |
||||
|
||||
const AccountTokensPage = () => { |
||||
const t = useTranslation(); |
||||
@ -1,8 +1,8 @@ |
||||
import { Button, ButtonGroup, Icon, Table } from '@rocket.chat/fuselage'; |
||||
import React, { useCallback, FC } from 'react'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime'; |
||||
|
||||
type AccountTokensRowProps = { |
||||
bypassTwoFactor: unknown; |
||||
@ -1,13 +1,13 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React, { useMemo, useCallback, useState } from 'react'; |
||||
|
||||
import GenericTable from '../../components/GenericTable'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useResizeInlineBreakpoint } from '../../hooks/useResizeInlineBreakpoint'; |
||||
import { useSetModal } from '../../contexts/ModalContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useUserId } from '../../contexts/UserContext'; |
||||
import GenericTable from '../../../components/GenericTable'; |
||||
import { useMethod } from '../../../contexts/ServerContext'; |
||||
import { useResizeInlineBreakpoint } from '../../../hooks/useResizeInlineBreakpoint'; |
||||
import { useSetModal } from '../../../contexts/ModalContext'; |
||||
import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useUserId } from '../../../contexts/UserContext'; |
||||
import InfoModal from './InfoModal'; |
||||
import AccountTokensRow from './AccountTokensRow'; |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue