Chore: Storybook organization and errors (#21923)
Douglas Fabris
5 years ago
committed by
GitHub
parent
9869118f08
commit
62d3733b87
@ -1,7 +1,10 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC, CSSProperties } from 'react'; |
||||
|
||||
const Body = ({ children, flexDirection = 'row' }) => ( |
||||
const Body: FC<{ flexDirection: CSSProperties['flexDirection'] }> = ({ |
||||
children, |
||||
flexDirection = 'row', |
||||
}) => ( |
||||
<Box mb='x8' display='flex' flexDirection={flexDirection} flexGrow={1}> |
||||
{children} |
||||
</Box> |
||||
@ -1,7 +1,7 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const Card = ({ children, ...props }) => ( |
||||
const Card: FC = ({ children, ...props }) => ( |
||||
<Box |
||||
display='flex' |
||||
flexDirection='column' |
||||
@ -1,6 +0,0 @@ |
||||
import { Divider } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
const CardDivider = () => <Divider width='x1' mi='x24' mb='none' alignSelf='stretch' />; |
||||
|
||||
export default CardDivider; |
||||
@ -0,0 +1,6 @@ |
||||
import { Divider } from '@rocket.chat/fuselage'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const CardDivider: FC = () => <Divider width='x1' mi='x24' mb='none' alignSelf='stretch' />; |
||||
|
||||
export default CardDivider; |
||||
@ -1,7 +1,7 @@ |
||||
import { Box, Icon } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const CardIcon = ({ name, children, ...props }) => ( |
||||
const CardIcon: FC<{ name: string }> = ({ name, children, ...props }) => ( |
||||
<Box |
||||
minWidth='x16' |
||||
display='inline-flex' |
||||
@ -1,7 +1,7 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const Col = ({ children }) => ( |
||||
const Col: FC = ({ children }) => ( |
||||
<Box display='flex' alignSelf='stretch' w='x228' flexDirection='column' fontScale='c1'> |
||||
{children} |
||||
</Box> |
||||
@ -1,7 +1,7 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const ColSection = ({ children }) => ( |
||||
const ColSection: FC = ({ children }) => ( |
||||
<Box mb='x8' color='info'> |
||||
{children} |
||||
</Box> |
||||
@ -1,7 +1,7 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const ColTitle = ({ children }) => ( |
||||
const ColTitle: FC = ({ children }) => ( |
||||
<Box fontScale='c2' m='none'> |
||||
{children} |
||||
</Box> |
||||
@ -1,6 +0,0 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
const Footer = ({ children }) => <Box mb='x8'>{children}</Box>; |
||||
|
||||
export default Footer; |
||||
@ -0,0 +1,6 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const Footer: FC = ({ children }) => <Box mb='x8'>{children}</Box>; |
||||
|
||||
export default Footer; |
||||
@ -1,7 +1,7 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
const Title = ({ children }) => ( |
||||
const Title: FC = ({ children }) => ( |
||||
<Box mb='x8' fontScale='p2'> |
||||
{children} |
||||
</Box> |
||||
@ -1,7 +1,7 @@ |
||||
import { Margins } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { ChannelsTab } from '.'; |
||||
import ChannelsTab from '.'; |
||||
|
||||
export default { |
||||
title: 'admin/enterprise/engagement/ChannelsTab', |
||||
@ -1,9 +1,7 @@ |
||||
import React from 'react'; |
||||
|
||||
import { TableSection } from './TableSection'; |
||||
import TableSection from './TableSection'; |
||||
|
||||
export function ChannelsTab() { |
||||
return <> |
||||
<TableSection /> |
||||
</>; |
||||
} |
||||
const ChannelsTab = () => <TableSection />; |
||||
|
||||
export default ChannelsTab; |
||||
|
||||
@ -1,7 +1,7 @@ |
||||
import { Margins } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { MessagesTab } from '.'; |
||||
import MessagesTab from '.'; |
||||
|
||||
export default { |
||||
title: 'admin/enterprise/engagement/MessagesTab', |
||||
@ -1,13 +1,13 @@ |
||||
import { Divider } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import { Divider } from '@rocket.chat/fuselage'; |
||||
|
||||
import MessagesSentSection from './MessagesSentSection'; |
||||
import MessagesPerChannelSection from './MessagesPerChannelSection'; |
||||
|
||||
import { MessagesSentSection } from './MessagesSentSection'; |
||||
import { MessagesPerChannelSection } from './MessagesPerChannelSection'; |
||||
const MessagesTab = () => <> |
||||
<MessagesSentSection /> |
||||
<Divider /> |
||||
<MessagesPerChannelSection /> |
||||
</>; |
||||
|
||||
export function MessagesTab() { |
||||
return <> |
||||
<MessagesSentSection /> |
||||
<Divider /> |
||||
<MessagesPerChannelSection /> |
||||
</>; |
||||
} |
||||
export default MessagesTab; |
||||
|
||||
@ -0,0 +1,119 @@ |
||||
import { |
||||
Box, |
||||
Field, |
||||
TextInput, |
||||
ButtonGroup, |
||||
Button, |
||||
Margins, |
||||
Tabs, |
||||
Flex, |
||||
} from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
import React from 'react'; |
||||
|
||||
import Page from '../../../client/components/Page'; |
||||
import { useTranslation } from '../../../client/contexts/TranslationContext'; |
||||
import DateRangePicker from './DateRangePicker'; |
||||
import Result from './Result'; |
||||
import ChannelTab from './Tabs/ChannelTab'; |
||||
import DirectTab from './Tabs/DirectTab'; |
||||
import UsersTab from './Tabs/UsersTab'; |
||||
import VisitorsTab from './Tabs/VisitorsTab'; |
||||
|
||||
// TODO: create more stories for the tabs
|
||||
export const AuditPageBase = ({ |
||||
type, |
||||
handleType, |
||||
msg, |
||||
handleMsg, |
||||
handleDateRange, |
||||
errors, |
||||
rid, |
||||
handleRid, |
||||
users, |
||||
handleUsers, |
||||
onChangeUsers, |
||||
visitor, |
||||
handleVisitor, |
||||
agent, |
||||
handleAgent, |
||||
apply, |
||||
setData, |
||||
}) => { |
||||
const t = useTranslation(); |
||||
|
||||
const useHandleType = (type) => |
||||
useMutableCallback(() => { |
||||
handleVisitor(''); |
||||
handleAgent(); |
||||
handleRid(''); |
||||
handleUsers([]); |
||||
handleType(type); |
||||
}); |
||||
|
||||
return ( |
||||
<Page> |
||||
<Page.Header title={t('Message_auditing')} /> |
||||
<Tabs> |
||||
<Tabs.Item selected={type === ''} onClick={useHandleType('')}> |
||||
{t('Channels')} |
||||
</Tabs.Item> |
||||
<Tabs.Item selected={type === 'u'} onClick={useHandleType('u')}> |
||||
{t('Users')} |
||||
</Tabs.Item> |
||||
<Tabs.Item selected={type === 'd'} onClick={useHandleType('d')}> |
||||
{t('Direct_Messages')} |
||||
</Tabs.Item> |
||||
<Tabs.Item selected={type === 'l'} onClick={useHandleType('l')}> |
||||
{t('Omnichannel')} |
||||
</Tabs.Item> |
||||
</Tabs> |
||||
<Page.ScrollableContentWithShadow mb='neg-x4'> |
||||
<Margins block='x4'> |
||||
<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'> |
||||
<Margins inline='x4'> |
||||
<Flex.Item shrink={1}> |
||||
<Field> |
||||
<Field.Label>{t('Message')}</Field.Label> |
||||
<Field.Row> |
||||
<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')} /> |
||||
</Field.Row> |
||||
</Field> |
||||
<Field> |
||||
<Field.Label>{t('Date')}</Field.Label> |
||||
<Field.Row> |
||||
<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1} /> |
||||
</Field.Row> |
||||
</Field> |
||||
</Flex.Item> |
||||
</Margins> |
||||
</Box> |
||||
<Box display='flex' flexDirection='row' alignItems='flex-end'> |
||||
<Flex.Item shrink={1}> |
||||
{type === '' && <ChannelTab errors={errors} rid={rid} handleRid={handleRid} />} |
||||
{type === 'u' && ( |
||||
<UsersTab errors={errors} users={users} onChangeUsers={onChangeUsers} /> |
||||
)} |
||||
{type === 'd' && <DirectTab />} |
||||
{type === 'l' && ( |
||||
<VisitorsTab |
||||
errors={errors} |
||||
visitor={visitor} |
||||
handleVisitor={handleVisitor} |
||||
agent={agent} |
||||
handleAgent={handleAgent} |
||||
/> |
||||
)} |
||||
<ButtonGroup mis='x8' align='end'> |
||||
<Button primary onClick={apply}> |
||||
{t('Apply')} |
||||
</Button> |
||||
</ButtonGroup> |
||||
</Flex.Item> |
||||
</Box> |
||||
{setData && <Result setDataRef={setData} />} |
||||
</Margins> |
||||
</Page.ScrollableContentWithShadow> |
||||
</Page> |
||||
); |
||||
}; |
||||
@ -0,0 +1,26 @@ |
||||
import { Field } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../../client/contexts/TranslationContext'; |
||||
import RoomAutoComplete from '../RoomAutoComplete'; |
||||
|
||||
const ChannelTab = ({ errors, rid, handleRid }) => { |
||||
const t = useTranslation(); |
||||
|
||||
return ( |
||||
<Field> |
||||
<Field.Label>{t('Channel_name')}</Field.Label> |
||||
<Field.Row> |
||||
<RoomAutoComplete |
||||
error={errors.rid} |
||||
value={rid} |
||||
onChange={handleRid} |
||||
placeholder={t('Channel_Name_Placeholder')} |
||||
/> |
||||
</Field.Row> |
||||
{errors.rid && <Field.Error>{errors.rid}</Field.Error>} |
||||
</Field> |
||||
); |
||||
}; |
||||
|
||||
export default ChannelTab; |
||||
@ -0,0 +1,26 @@ |
||||
import { Field } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../../client/contexts/TranslationContext'; |
||||
import UserAutoCompleteMultiple from '../UserAutoCompleteMultiple'; |
||||
|
||||
const DirectTab = ({ errors, users, onChangeUsers }) => { |
||||
const t = useTranslation(); |
||||
|
||||
return ( |
||||
<Field> |
||||
<Field.Label>{t('Users')}</Field.Label> |
||||
<Field.Row> |
||||
<UserAutoCompleteMultiple |
||||
error={errors.users} |
||||
value={users} |
||||
onChange={onChangeUsers} |
||||
placeholder={t('Username_Placeholder')} |
||||
/> |
||||
</Field.Row> |
||||
{errors.users && <Field.Error>{errors.users}</Field.Error>} |
||||
</Field> |
||||
); |
||||
}; |
||||
|
||||
export default DirectTab; |
||||
@ -0,0 +1,26 @@ |
||||
import { Field } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../../client/contexts/TranslationContext'; |
||||
import UserAutoCompleteMultiple from '../UserAutoCompleteMultiple'; |
||||
|
||||
const UsersTab = ({ errors, users, onChangeUsers }) => { |
||||
const t = useTranslation(); |
||||
|
||||
return ( |
||||
<Field> |
||||
<Field.Label>{t('Users')}</Field.Label> |
||||
<Field.Row> |
||||
<UserAutoCompleteMultiple |
||||
error={errors.users} |
||||
value={users} |
||||
onChange={onChangeUsers} |
||||
placeholder={t('Username_Placeholder')} |
||||
/> |
||||
</Field.Row> |
||||
{errors.users && <Field.Error>{errors.users}</Field.Error>} |
||||
</Field> |
||||
); |
||||
}; |
||||
|
||||
export default UsersTab; |
||||
@ -0,0 +1,41 @@ |
||||
import { Field, Margins } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import AutoCompleteAgent from '../../../../client/components/AutoCompleteAgent'; |
||||
import { useTranslation } from '../../../../client/contexts/TranslationContext'; |
||||
import VisitorAutoComplete from '../VisitorAutoComplete'; |
||||
|
||||
const VisitorsTab = ({ errors, visitor, handleVisitor, agent, handleAgent }) => { |
||||
const t = useTranslation(); |
||||
|
||||
return ( |
||||
<Margins inline='x4'> |
||||
<Field> |
||||
<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label> |
||||
<Field.Row> |
||||
<VisitorAutoComplete |
||||
error={errors.visitor} |
||||
value={visitor} |
||||
onChange={handleVisitor} |
||||
placeholder={t('Username_Placeholder')} |
||||
/> |
||||
</Field.Row> |
||||
{errors.visitor && <Field.Error>{errors.visitor}</Field.Error>} |
||||
</Field> |
||||
<Field> |
||||
<Field.Label flexGrow={0}>{t('Agent')}</Field.Label> |
||||
<Field.Row> |
||||
<AutoCompleteAgent |
||||
error={errors.agent} |
||||
value={agent} |
||||
onChange={handleAgent} |
||||
placeholder={t('Username_Placeholder')} |
||||
/> |
||||
</Field.Row> |
||||
{errors.agent && <Field.Error>{errors.agent}</Field.Error>} |
||||
</Field> |
||||
</Margins> |
||||
); |
||||
}; |
||||
|
||||
export default VisitorsTab; |
||||
Loading…
Reference in new issue