storybook cleaning (#695)

.storybook/preview.jsx

@@ -50,4 +50,7 @@ export const parameters = {
       },
     ],
   },
+  options: {
+    storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })),
+  },
 }

src/components/NoConnectionIndicator/NoConnectionIndicator.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Story, Meta } from '@storybook/react'
 import NoConnectionIndicator, { NoConnectionIndicatorProps } from './NoConnectionIndicator'
-import { ConnectionStatusProvider } from '@/hooks'
+import { ConnectionStatusProvider, SnackbarProvider } from '@/hooks'
 
 export default {
   title: 'General/NoConnectionIndicator',
@@ -11,9 +11,11 @@ export default {
   },
   decorators: [
     (Story) => (
-      <ConnectionStatusProvider>
-        <Story />
-      </ConnectionStatusProvider>
+      <SnackbarProvider>
+        <ConnectionStatusProvider>
+          <Story />
+        </ConnectionStatusProvider>
+      </SnackbarProvider>
     ),
   ],
 } as Meta

src/components/Topbar/TopbarBase.stories.tsx

@@ -4,7 +4,7 @@ import TopbarBase, { TopbarBaseProps } from './TopbarBase'
 import { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Shared/TopbarBase',
+  title: 'Shared/T/TopbarBase',
   component: TopbarBase,
   argTypes: {
     variant: {

src/shared/components/ActionBar/ActionBar.stories.tsx

@@ -5,7 +5,7 @@ import ActionBarTransaction, { ActionBarTransactionProps } from './ActionBarTran
 import { SvgGlyphInfo } from '@/shared/icons'
 
 export default {
-  title: 'Shared/ActionBar',
+  title: 'Shared/A/ActionBar',
   component: ActionBar,
   args: {
     primaryText: 'Fee: 0.2 Joy',
@@ -16,6 +16,7 @@ export default {
     primaryButtonText: 'Edit the channel',
     secondaryButtonText: 'Cancel',
     fee: 1,
+    isActive: true,
   },
 } as Meta
 

src/shared/components/Avatar/Avatar.stories.tsx

@@ -3,7 +3,7 @@ import Avatar, { AvatarProps } from './Avatar'
 import React from 'react'
 
 export default {
-  title: 'Shared/Avatar',
+  title: 'Shared/A/Avatar',
   component: Avatar,
   argTypes: {
     size: {

src/shared/components/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'
 import { SvgGlyphAddVideo } from '@/shared/icons'
 
 export default {
-  title: 'Shared/Button',
+  title: 'Shared/B/Button',
   component: Button,
   argTypes: {
     size: { table: { disable: true } },

src/shared/components/Carousel/Carousel.stories.tsx

@@ -5,7 +5,7 @@ import { colors } from '@/shared/theme'
 import styled from '@emotion/styled'
 
 export default {
-  title: 'Shared/Carousel',
+  title: 'Shared/C/Carousel',
   component: Carousel,
 } as Meta
 

src/shared/components/ChannelCover/ChannelCover.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import ChannelCover, { ChannelCoverProps } from './ChannelCover'
 
 export default {
-  title: 'Shared/ChannelCover',
+  title: 'Shared/C/ChannelCover',
   component: ChannelCover,
   argTypes: {
     editable: {

src/shared/components/ChannelPreviewBase/ChannelPreview.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'
 import { BrowserRouter } from 'react-router-dom'
 
 export default {
-  title: 'Shared/ChannelPreview',
+  title: 'Shared/C/ChannelPreview',
   component: ChannelPreviewBase,
   argTypes: {
     className: { table: { disable: true } },

src/shared/components/Checkbox/Checkbox.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/react'
 import Checkbox, { CheckboxProps } from './Checkbox'
 
 export default {
-  title: 'Shared/Checkbox',
+  title: 'Shared/C/Checkbox',
   component: Checkbox,
   argTypes: {
     label: {

src/shared/components/Checkout/Checkout.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'
 import { WithValue } from '../../../../.storybook/WithValue'
 
 export default {
-  title: 'Shared/Checkout',
+  title: 'Shared/C/Checkout',
   component: Checkout,
   argTypes: {},
 } as Meta

src/shared/components/CircularProgressbar/CircularProgressbar.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'
 import { css } from '@emotion/react'
 
 export default {
-  title: 'Shared/CircularProgressbar',
+  title: 'Shared/C/CircularProgressbar',
   component: CircularProgressbar,
   argTypes: {},
 } as Meta

src/shared/components/ContextMenu/ContextMenu.stories.tsx

@@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/react'
 import { SvgGlyphCopy, SvgGlyphEdit, SvgGlyphTrash } from '@/shared/icons'
 
 export default {
-  title: 'Shared/ContextMenu',
+  title: 'Shared/C/ContextMenu',
   component: ContextMenu,
   decorators: [
     (Story) => (

src/shared/components/Datepicker/Datepicker.stories.tsx

@@ -4,7 +4,7 @@ import Datepicker, { DatepickerProps } from './Datepicker'
 import { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Shared/Datepicker',
+  title: 'Shared/D/Datepicker',
   component: Datepicker,
   args: {
     helperText: 'Lorem ipsum dolor sit amet...',

src/shared/components/DismissibleMessage/DismissibleMessage.stories.tsx

@@ -5,7 +5,7 @@ import Button from '../Button'
 import DismissibleMessage, { DismissibleMessageProps } from './DismissibleMessage'
 
 export default {
-  title: 'Shared/DismissibleMessage',
+  title: 'Shared/D/DismissibleMessage',
   component: DismissibleMessage,
   argTypes: {
     id: {

src/shared/components/FileSelect/FileSelect.stories..tsx → src/shared/components/FileSelect/FileSelect.stories.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import FileSelect, { FileSelectProps } from './FileSelect'
 
 export default {
-  title: 'Shared/FileSelect',
+  title: 'Shared/F/FileSelect',
   component: FileSelect,
   argTypes: {
     fileType: {

src/shared/components/FileStep/FileStep.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import FileStep, { FileStepProps } from './FileStep'
 
 export default {
-  title: 'Shared/FileStep',
+  title: 'Shared/F/FileStep',
   component: FileStep,
   argTypes: {
     step: {

src/shared/components/FormField/FormField.stories.tsx

@@ -7,7 +7,7 @@ import TextField from '../TextField'
 import FormField, { FormFieldProps } from './FormField'
 
 export default {
-  title: 'Shared/FormField',
+  title: 'Shared/F/FormField',
   component: FormField,
   argTypes: {
     className: {

src/shared/components/HamburgerButton/HamburgerButton.stories.tsx

@@ -5,7 +5,7 @@ import HamburgerButton, { HamburgerButtonProps } from './HamburgerButton'
 import { colors } from '@/shared/theme'
 
 export default {
-  title: 'Shared/HamburgerButton',
+  title: 'Shared/H/HamburgerButton',
   component: HamburgerButton,
   argTypes: {
     active: { table: { disable: true } },

src/shared/components/HeaderTextField/HeaderTextField.stories.tsx

@@ -3,7 +3,7 @@ import HeaderTextField, { HeaderTextFieldProps } from './HeaderTextField'
 import { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Shared/HeaderTextField',
+  title: 'Shared/H/HeaderTextField',
   component: HeaderTextField,
   argTypes: {
     helperText: { control: 'text', defaultValue: 'Channel title must be at least 2 character' },

src/shared/components/HelperText/HelperText.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import HelperText, { HelperTextProps } from './HelperText'
 
 export default {
-  title: 'Shared/HelperText',
+  title: 'Shared/H/HelperText',
   component: HelperText,
   argTypes: {
     helperText: { defaultValue: 'some helper text' },

src/shared/components/IconButton/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import IconButton, { IconButtonProps } from '.'
 import { SvgGlyphAddVideo } from '@/shared/icons'
 
 export default {
-  title: 'Shared/IconButton',
+  title: 'Shared/I/IconButton',
   component: IconButton,
   argTypes: {
     size: { table: { disable: true } },

src/shared/components/MultiFileSelect/MultiFileSelect.stories.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import MultiFileSelect, { MultiFileSelectProps, InputFilesState } from './MultiFileSelect'
 
 export default {
-  title: 'Shared/MultiFileSelect',
+  title: 'Shared/M/MultiFileSelect',
   component: MultiFileSelect,
   decorators: [
     (Story) => (

src/shared/components/NavButton/NavButon.stories.tsx

@@ -3,7 +3,7 @@ import NavButton, { NavButtonProps } from './NavButton'
 import { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Shared/NavButton',
+  title: 'Shared/N/NavButton',
   component: NavButton,
   argTypes: {
     outerCss: {

src/shared/components/Pagination/Pagination.stories.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import Pagination, { PaginationProps } from './Pagination'
 
 export default {
-  title: 'Shared/Pagination',
+  title: 'Shared/P/Pagination',
   component: Pagination,
   argTypes: {
     itemsPerPage: {

src/shared/components/RadioButton/RadioButton.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'
 import RadioButton from './RadioButton'
 
 export default {
-  title: 'Shared/RadioButton',
+  title: 'Shared/R/RadioButton',
   component: RadioButton,
   args: {
     label: 'Hello there',

src/shared/components/Select/Select.stories.tsx

@@ -10,7 +10,7 @@ const items: SelectItem[] = [
 ]
 
 export default {
-  title: 'Shared/Select',
+  title: 'Shared/S/Select',
   component: Select,
   args: {
     items,

src/shared/components/Slider/Slider.stories.tsx

@@ -5,7 +5,7 @@ import { WithValue } from '../../../../.storybook/WithValue'
 import styled from '@emotion/styled'
 
 export default {
-  title: 'Shared/Slider',
+  title: 'Shared/S/Slider',
   component: Slider,
   args: {
     min: 0,

src/shared/components/Snackbar/Snackbar.stories.tsx

@@ -5,7 +5,7 @@ import Button from '../Button'
 import { SnackbarProvider, useSnackbar, DisplaySnackbarArgs } from '@/hooks/useSnackbar/useSnackbar'
 
 export default {
-  title: 'Shared/Snackbar',
+  title: 'Shared/S/Snackbar',
   component: Snackbar,
   argTypes: {
     title: { defaultValue: 'Lorem ipsul dolor' },

src/shared/components/Spinner/Spinner.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Shared/Spinner',
+  title: 'Shared/S/Spinner',
   component: Spinner,
   argTypes: {
     size: {

src/shared/components/Tabs/Tabs.stories.tsx

@@ -3,11 +3,18 @@ import Tabs, { TabsProps } from './Tabs'
 import React from 'react'
 
 export default {
-  title: 'Shared/Tabs',
+  title: 'Shared/T/Tabs',
   component: Tabs,
   argTypes: {
     tabs: {
-      defaultValue: ['one', 'two', 'three', 'four', 'five', 'six'],
+      defaultValue: [
+        { name: 'one', badgeNumber: 1 },
+        { name: 'two', badgeNumber: 2 },
+        { name: 'three', badgeNumber: 3 },
+        { name: 'four', badgeNumber: 4 },
+        { name: 'five', badgeNumber: 5 },
+        { name: 'six', badgeNumber: 6 },
+      ],
     },
   },
 } as Meta

src/shared/components/Text/Text.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'
 import { css } from '@emotion/react'
 
 export default {
-  title: 'Shared/Text',
+  title: 'Shared/T/Text',
   component: Text,
 } as Meta
 

src/shared/components/TextArea/TextArea.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '..'
 import { css } from '@emotion/react'
 
 export default {
-  title: 'Shared/TextArea',
+  title: 'Shared/T/TextArea',
   component: TextArea,
   argTypes: {
     value: { table: { disable: true } },

src/shared/components/TextField/TextField.stories.tsx

@@ -6,7 +6,7 @@ import Button from '../Button'
 import { css } from '@emotion/react'
 
 export default {
-  title: 'Shared/TextField',
+  title: 'Shared/T/TextField',
   component: TextField,
   args: {
     label: 'label text',

src/shared/components/ToggleButton/ToggleButton.stories.tsx

@@ -3,7 +3,7 @@ import ToggleButton, { ToggleButtonProps } from './ToggleButton'
 import { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Shared/ToggleButton',
+  title: 'Shared/T/ToggleButton',
   component: ToggleButton,
   argTypes: {
     onClick: {

src/shared/components/Tooltip/Tooltip.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/react'
 import { BrowserRouter } from 'react-router-dom'
 
 export default {
-  title: 'Shared/Tooltip',
+  title: 'Shared/T/Tooltip',
   component: Tooltip,
   argTypes: {
     text: { defaultValue: 'Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet!' },

src/shared/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled'
 import { colors } from '@/shared/theme'
 
 export default {
-  title: 'Shared/VideoPlayer',
+  title: 'Shared/V/VideoPlayer',
   component: VideoPlayer,
 } as Meta
 

src/shared/components/VideoPreviewBase/VideoPreview.stories.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from 'react-router-dom'
 import { OverlayManagerProvider } from '@/hooks'
 
 export default {
-  title: 'Shared/VideoPreview',
+  title: 'Shared/V/VideoPreview',
   component: VideoPreviewBase,
   argTypes: {
     createdAt: { control: 'date' },

src/views/studio/MyUploadsView/AssetsGroupUploadBar/AssetsGroupUploadBar.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { Meta, Story } from '@storybook/react'
-import AssetsGroupUploadBar, { AssetsGroupBarUploadProps } from './AssetsGroupUploadBar'
-import { LiaisonJudgement } from '@/api/queries/__generated__/baseTypes.generated'
-
-export default {
-  title: 'General/AssetsGroupUploadBar',
-  component: AssetsGroupUploadBar,
-  argTypes: {
-    uploadData: {
-      defaultValue: [
-        {
-          id: '768dad7c-6fea-4496-ae90-3a1ee4281bd4',
-          type: 'avatar',
-          progress: 100,
-          size: 178400,
-          imageCropData: {
-            top: 0,
-            left: 0,
-            width: 360,
-            height: 420,
-          },
-          parentObject: {
-            type: 'channel',
-            id: '1',
-          },
-          lastStatus: 'completed',
-          liaisonJudgement: LiaisonJudgement.Accepted,
-        },
-        {
-          id: '0c2672ff-8d19-43df-975f-5c089aed5dde',
-          type: 'cover',
-          progress: 60,
-          imageCropData: {
-            top: 0,
-            left: 0,
-            width: 1300,
-            height: 230,
-          },
-          size: 500400,
-          parentObject: {
-            type: 'channel',
-            id: '1',
-          },
-          lastStatus: 'inProgress',
-          liaisonJudgement: LiaisonJudgement.Accepted,
-        },
-      ],
-    },
-  },
-} as Meta
-
-const Template: Story<AssetsGroupBarUploadProps> = (args) => <AssetsGroupUploadBar {...args} />
-
-export const Default = Template.bind({})