Chore: Recover and update Storybook (#20047)
Tasso Evangelista
5 years ago
committed by
GitHub
parent
c32cdc6a3b
commit
510f4d0574
|
After Width: | Height: | Size: 7.1 KiB |
@ -0,0 +1,17 @@ |
||||
import colorTokens from '@rocket.chat/fuselage-tokens/colors'; |
||||
import { addons } from '@storybook/addons'; |
||||
import { create } from '@storybook/theming/create'; |
||||
|
||||
import manifest from '../package.json'; |
||||
import logo from './logo.svg'; |
||||
|
||||
addons.setConfig({ |
||||
theme: create({ |
||||
base: 'light', |
||||
brandTitle: manifest.name, |
||||
brandImage: logo, |
||||
brandUrl: manifest.homepage, |
||||
colorPrimary: colorTokens.n500, |
||||
colorSecondary: colorTokens.b500, |
||||
}), |
||||
}); |
||||
@ -1,13 +1,24 @@ |
||||
import { withKnobs } from '@storybook/addon-knobs'; |
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; |
||||
import { addDecorator, addParameters } from '@storybook/react'; |
||||
|
||||
import { rocketChatDecorator } from './decorators'; |
||||
|
||||
addDecorator(rocketChatDecorator); |
||||
addDecorator(withKnobs); |
||||
|
||||
addParameters({ |
||||
backgrounds: { |
||||
grid: { |
||||
cellSize: 4, |
||||
cellAmount: 4, |
||||
opacity: 0.5, |
||||
}, |
||||
}, |
||||
docs: { |
||||
container: DocsContainer, |
||||
page: DocsPage, |
||||
}, |
||||
options: { |
||||
showRoots: true, |
||||
storySort: ([, a], [, b]) => |
||||
a.kind.localeCompare(b.kind), |
||||
}, |
||||
}); |
||||
|
||||
@ -1,41 +0,0 @@ |
||||
import { Box, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React, { useMemo } from 'react'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import CounterSet from '../../components/data/CounterSet'; |
||||
import { usePolledMethodData } from '../../hooks/usePolledMethodData'; |
||||
import { AsyncStatePhase } from '../../hooks/useAsyncState'; |
||||
|
||||
function OverviewSection() { |
||||
const t = useTranslation(); |
||||
const { value: overviewData, phase: overviewStatus } = usePolledMethodData('federation:getOverviewData', useMemo(() => [], []), 10000); |
||||
|
||||
const eventCount = (overviewStatus === AsyncStatePhase.LOADING && <Skeleton variant='text' />) |
||||
|| (overviewStatus === AsyncStatePhase.REJECTED && <Box color='danger'>Error</Box>) |
||||
|| overviewData?.data[0]?.value; |
||||
const userCount = (overviewStatus === AsyncStatePhase.LOADING && <Skeleton variant='text' />) |
||||
|| (overviewStatus === AsyncStatePhase.REJECTED && <Box color='danger'>Error</Box>) |
||||
|| overviewData?.data[1]?.value; |
||||
const serverCount = (overviewStatus === AsyncStatePhase.LOADING && <Skeleton variant='text' />) |
||||
|| (overviewStatus === AsyncStatePhase.REJECTED && <Box color='danger'>Error</Box>) |
||||
|| overviewData?.data[2]?.value; |
||||
|
||||
return <CounterSet |
||||
counters={[ |
||||
{ |
||||
count: eventCount, |
||||
description: t('Number_of_events'), |
||||
}, |
||||
{ |
||||
count: userCount, |
||||
description: t('Number_of_federated_users'), |
||||
}, |
||||
{ |
||||
count: serverCount, |
||||
description: t('Number_of_federated_servers'), |
||||
}, |
||||
]} |
||||
/>; |
||||
} |
||||
|
||||
export default OverviewSection; |
||||
@ -1,143 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Button, ButtonGroup, FieldGroup, Icon } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import { useForm } from '../../../hooks/useForm'; |
||||
import { useUserSubscription, useUser } from '../../../contexts/UserContext'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useCustomSound } from '../../../contexts/CustomSoundContext'; |
||||
import { useEndpointActionExperimental } from '../../../hooks/useEndpointAction'; |
||||
import VerticalBar from '../../../components/VerticalBar'; |
||||
import { Preferences } from './components/Preferences'; |
||||
import { NotificationByDevice } from './components/NotificationByDevice'; |
||||
import { NotificationToogle } from './components/NotificationToogle'; |
||||
|
||||
|
||||
export const NotificationPreferences = ({ |
||||
handleClose, |
||||
formValues, |
||||
formHandlers, |
||||
formHasUnsavedChanges, |
||||
handlePlaySound, |
||||
handleOptions, |
||||
handleSaveButton, |
||||
handleCancelButton, |
||||
}) => { |
||||
const t = useTranslation(); |
||||
return <> |
||||
<VerticalBar.Header> |
||||
<VerticalBar.Icon name='bell'/> |
||||
<VerticalBar.Text>{t('Notifications_Preferences')}</VerticalBar.Text> |
||||
{handleClose && <VerticalBar.Close onClick={handleClose}/>} |
||||
</VerticalBar.Header> |
||||
<VerticalBar.ScrollableContent> |
||||
<NotificationToogle label={t('Turn_ON')} description={t('Receive_alerts')} onChange={formHandlers.handleTurnOn} defaultChecked={formValues.turnOn}/> |
||||
<NotificationToogle label={t('Mute_Group_Mentions')} onChange={formHandlers.handleMuteGroupMentions} defaultChecked={formValues.muteGroupMentions}/> |
||||
<NotificationToogle label={t('Show_counter')} description={t('Display_unread_counter')} onChange={formHandlers.handleShowCounter} defaultChecked={formValues.showCounter} /> |
||||
<FieldGroup> |
||||
<NotificationByDevice device={t('Desktop')} icon={'computer'}> |
||||
<Preferences id={'DesktopAlert'} onChange={formHandlers.handleDesktopAlert} name={t('Alerts')} options={handleOptions.alerts} optionDefault={formValues.desktopAlert} /> |
||||
<Preferences id={'DesktopAudio'} onChange={formHandlers.handleDesktopAudio} name={t('Audio')} options={handleOptions.audio} optionDefault={formValues.desktopAudio} /> |
||||
<Preferences id={'DesktopSound'} onChange={formHandlers.handleDesktopSound} name={t('Sound')} options={handleOptions.sound} optionDefault={formValues.desktopSound}> |
||||
<Button mis='x4' square ghost onClick={handlePlaySound}> |
||||
<Icon name='play' size='x18' /> |
||||
</Button> |
||||
</Preferences> |
||||
</NotificationByDevice> |
||||
<NotificationByDevice device={t('Mobile')} icon={'mobile'}> |
||||
<Preferences id={'MobileAlert'} onChange={formHandlers.handleMobileAlert} name={t('Alerts')} options={handleOptions.alerts} optionDefault={formValues.mobileAlert} /> |
||||
</NotificationByDevice> |
||||
<NotificationByDevice device={t('Email')} icon={'mail'}> |
||||
<Preferences id={'EmailAlert'} onChange={formHandlers.handleEmailAlert} name={t('Alerts')} options={handleOptions.alerts} optionDefault={formValues.emailAlert} /> |
||||
</NotificationByDevice> |
||||
</FieldGroup> |
||||
</VerticalBar.ScrollableContent> |
||||
<VerticalBar.Footer> |
||||
<ButtonGroup stretch> |
||||
<Button onClick={handleCancelButton}>{t('Cancel')}</Button> |
||||
<Button primary disabled={!formHasUnsavedChanges} onClick={handleSaveButton}>{t('Save')}</Button> |
||||
</ButtonGroup> |
||||
</VerticalBar.Footer> |
||||
</>; |
||||
}; |
||||
|
||||
export default React.memo(({ tabBar, rid }) => { |
||||
const t = useTranslation(); |
||||
|
||||
const subscription = useUserSubscription(rid); |
||||
const userSettingsPreferences = useUser().settings.preferences; |
||||
|
||||
const customSound = useCustomSound(); |
||||
|
||||
const handleClose = useMutableCallback(() => tabBar && tabBar.close()); |
||||
const saveSettings = useEndpointActionExperimental('POST', 'rooms.saveNotification'); |
||||
|
||||
const { values, handlers, hasUnsavedChanges, commit, reset } = useForm( |
||||
{ |
||||
turnOn: !subscription.disableNotifications, |
||||
muteGroupMentions: subscription.muteGroupMentions, |
||||
showCounter: !subscription.hideUnreadStatus, |
||||
desktopAlert: subscription.desktopNotifications || userSettingsPreferences.desktopNotifications, |
||||
desktopAudio: subscription.audioNotifications || userSettingsPreferences.audioNotifications, |
||||
desktopSound: subscription.audioNotificationValue || userSettingsPreferences.newMessageNotification, |
||||
mobileAlert: subscription.mobilePushNotifications || userSettingsPreferences.mobileNotifications, |
||||
emailAlert: subscription.emailNotifications || userSettingsPreferences.emailNotificationMode, |
||||
}, |
||||
); |
||||
|
||||
|
||||
const defaultOption = [ |
||||
['default', t('Default')], |
||||
['all', t('All_messages')], |
||||
['mentions', t('Mentions')], |
||||
['nothing', t('Nothing')], |
||||
]; |
||||
|
||||
const customSoundAsset = Object.entries(customSound.list.get()).map((value) => [value[0], value[1].name]); |
||||
|
||||
const handleOptions = { |
||||
alerts: defaultOption, |
||||
audio: defaultOption, |
||||
sound: [ |
||||
['none None', t('None')], |
||||
['0 default', t('Default')], |
||||
...customSoundAsset, |
||||
], |
||||
}; |
||||
|
||||
const handlePlaySound = () => customSound.play(values.desktopSound); |
||||
|
||||
const handleSaveButton = useMutableCallback(() => { |
||||
const notifications = {}; |
||||
|
||||
notifications.disableNotifications = values.turnOn ? '0' : '1'; |
||||
notifications.muteGroupMentions = values.muteGroupMentions ? '1' : '0'; |
||||
notifications.hideUnreadStatus = values.showCounter ? '0' : '1'; |
||||
notifications.desktopNotifications = values.desktopAlert; |
||||
notifications.audioNotifications = values.desktopAudio; |
||||
notifications.audioNotificationValue = values.desktopSound; |
||||
notifications.mobilePushNotifications = values.mobileAlert; |
||||
notifications.emailNotifications = values.emailAlert; |
||||
|
||||
saveSettings({ |
||||
roomId: rid, |
||||
notifications, |
||||
}); |
||||
|
||||
commit(); |
||||
}); |
||||
|
||||
|
||||
return ( |
||||
<NotificationPreferences |
||||
handleClose={handleClose} |
||||
formValues={values} |
||||
formHandlers={handlers} |
||||
formHasUnsavedChanges={hasUnsavedChanges} |
||||
handlePlaySound={handlePlaySound} |
||||
handleOptions={handleOptions} |
||||
handleSaveButton={handleSaveButton} |
||||
handleCancelButton={reset} |
||||
/> |
||||
); |
||||
}); |
||||
@ -1,68 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import VerticalBar from '../../../components/VerticalBar'; |
||||
|
||||
import { NotificationsPreferences } from '.'; |
||||
|
||||
export default { |
||||
title: 'components/basic/NotificationsPreferences', |
||||
component: NotificationsPreferences, |
||||
}; |
||||
|
||||
const handleOn = { |
||||
turnOn: true, |
||||
muteGroupMentions: false, |
||||
showCounter: true, |
||||
}; |
||||
|
||||
const handleSwitch = { |
||||
turnOn: () => {}, |
||||
muteGroupMentions: () => {}, |
||||
showCounter: () => {}, |
||||
}; |
||||
|
||||
const defaultOption = [ |
||||
['default', 'Default'], |
||||
['all', 'All_messages'], |
||||
['mentions', 'Mentions'], |
||||
['nothing', 'Nothing'], |
||||
]; |
||||
|
||||
const handleOptions = { |
||||
alerts: defaultOption, |
||||
audio: defaultOption, |
||||
sound: [ |
||||
['none None', 'None'], |
||||
['0 default', 'Default'], |
||||
['chime', 'Chime'], |
||||
], |
||||
}; |
||||
|
||||
const handleSelect = { desktop: {}, mobile: {}, email: {} }; |
||||
|
||||
handleSelect.desktop.alert = 'default'; |
||||
handleSelect.desktop.audio = 'default'; |
||||
handleSelect.desktop.sound = 'chime'; |
||||
|
||||
handleSelect.mobile.alert = 'mentions'; |
||||
|
||||
handleSelect.email.alert = 'nothing'; |
||||
|
||||
export const Default = () => <Box height='600px'> |
||||
<VerticalBar> |
||||
<NotificationsPreferences |
||||
handleOn={handleOn} |
||||
handleSwitch={handleSwitch} |
||||
handleOptions={handleOptions} |
||||
handleSelect={handleSelect} |
||||
handleChangeOption={{ |
||||
desktopAlert: () => {}, |
||||
desktopAudio: () => {}, |
||||
mobileAlert: () => {}, |
||||
emailAlert: () => {}, |
||||
}} |
||||
handleSoundChange={{ desktopSound: () => {} }} |
||||
/> |
||||
</VerticalBar> |
||||
</Box>; |
||||
@ -1,13 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Box, Accordion, Icon, FieldGroup } from '@rocket.chat/fuselage'; |
||||
|
||||
export const NotificationByDevice = React.memo(({ device, icon, children }) => ( |
||||
<Accordion.Item title={<Box display='flex' alignItems='center'> |
||||
<Icon name={icon} size='x18' /> |
||||
<Box fontScale='p2' mi='x16'>{device}</Box> |
||||
</Box>}> |
||||
<FieldGroup> |
||||
{children} |
||||
</FieldGroup> |
||||
</Accordion.Item> |
||||
)); |
||||
@ -1,17 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Box, Field, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage'; |
||||
import { useUniqueId } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
export const NotificationToogle = React.memo(({ label, description, onChange, defaultChecked }) => { |
||||
const id = useUniqueId(); |
||||
|
||||
return <FieldGroup> |
||||
<Box display='flex' justifyContent='space-between' alignItems='start'> |
||||
<Box display='flex' flexDirection='column'> |
||||
<Field.Label for={id}>{label}</Field.Label> |
||||
<Field.Description>{description}</Field.Description> |
||||
</Box> |
||||
<ToggleSwitch id={id} onChange={onChange} defaultChecked={defaultChecked} /> |
||||
</Box> |
||||
</FieldGroup>; |
||||
}); |
||||
@ -1,14 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Field, Select } from '@rocket.chat/fuselage'; |
||||
|
||||
export const Preferences = ({ name, options, onChange, optionDefault, children, ...props }) => ( |
||||
<Field {...props}> |
||||
<Field.Label> |
||||
{name} |
||||
</Field.Label> |
||||
<Field.Row> |
||||
<Select onChange={onChange} options={options} value={optionDefault} /> |
||||
{children} |
||||
</Field.Row> |
||||
</Field> |
||||
); |
||||
@ -1,3 +0,0 @@ |
||||
import NotificationPreferences from './NotificationPreferences'; |
||||
|
||||
export default NotificationPreferences; |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue