@100mslive/roomkit-react 0.4.2 → 0.4.3-alpha.1

package/src/Pagination/StyledPagination.stories.tsx

@@ -1,80 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
-import { StyledPagination } from '.';
-
-type PaginationProps = {
-  page: number;
-  setPage: (page: number) => void;
-  numPages: number;
-};
-
-const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages }: PaginationProps) => {
-  const [page, setPage] = useState(propsPage);
-
-  const disableLeft = page === 0;
-  const disableRight = page === numPages - 1;
-
-  const handlePageChange = useCallback(
-    (page: number) => {
-      setPage(page);
-      propsSetPage(page);
-    },
-    [propsSetPage],
-  );
-
-  const nextPage = () => {
-    handlePageChange(Math.min(page + 1, numPages - 1));
-  };
-
-  const prevPage = () => {
-    handlePageChange(Math.max(page - 1, 0));
-  };
-
-  useEffect(() => {
-    handlePageChange(propsPage);
-  }, [propsPage, handlePageChange]);
-
-  return (
-    <StyledPagination.Root>
-      <StyledPagination.Chevron
-        disabled={disableLeft}
-        onClick={prevPage}
-        type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
-      >
-        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-      <StyledPagination.Dots>
-        {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot key={i} active={page === i} onClick={() => handlePageChange(i)} type="button" />
-        ))}
-      </StyledPagination.Dots>
-      <StyledPagination.Chevron
-        disabled={disableRight}
-        onClick={nextPage}
-        type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
-      >
-        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-    </StyledPagination.Root>
-  );
-};
-
-export default {
-  title: 'UI Components/Pagination',
-  component: PaginationComponent,
-  argTypes: {
-    setPage: { action: { type: 'click' } },
-    page: { control: { type: 'number' }, defaultValue: 0 },
-    numPages: { control: { type: 'number' }, defaultValue: 5 },
-  },
-} as ComponentMeta<typeof PaginationComponent>;
-
-const Template: ComponentStory<typeof PaginationComponent> = args => {
-  return <PaginationComponent {...args} />;
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Pagination';

package/src/Popover/Popover.mdx

@@ -1,9 +0,0 @@
-## Popover
-
-Displays rich content in a portal, triggered by a button.
-
-- [Example](#example)
-
-### Example
-
-<Story id="button--example" />

package/src/Popover/Popover.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { Popover } from './index';
-import PopoverDocs from './Popover.mdx';
-
-export default {
-  title: 'UI Components/Popover',
-  component: Popover.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  args: {
-    css: {},
-  },
-  parameters: {
-    docs: {
-      page: PopoverDocs,
-    },
-  },
-} as ComponentMeta<typeof Popover.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Popover.Root> = () => (
-  <Flex css={{ w: '$80' }} justify="center">
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <Button
-          variant="standard"
-          css={{
-            aspectRatio: '1',
-            r: '$round',
-            p: '$2 $2',
-            bg: '$background_default',
-            '&:hover': { bg: '$background_dim !important' },
-          }}
-        >
-          <Box css={{ w: '$10', h: '$10', c: '$on_primary_high' }}>
-            <VerticalMenuIcon />
-          </Box>
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align="center" side="bottom" sideOffset={10}>
-        <Flex css={{ flexDirection: 'column', gap: 10 }} justify="center" align="center">
-          <Flex direction="row" justify="between" css={{ width: '100%' }}>
-            <Text as="div" variant="caption" css={{ color: '$on_surface_medium' }}>
-              Dimensions
-            </Text>
-            <Box css={{ color: '$on_surface_medium' }}>
-              <CrossIcon width="0.75rem" height="0.75rem" />
-            </Box>
-          </Flex>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="width" asChild>
-              <Text as="span" variant="sub2">
-                Width
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="maxWidth" asChild>
-              <Text as="span" variant="sub2">
-                Max. width
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="height" asChild>
-              <Text as="span" variant="sub2">
-                Height
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="maxHeight" asChild>
-              <Text as="span" variant="sub2">
-                Max. height
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-        </Flex>
-      </Popover.Content>
-    </Popover.Root>
-  </Flex>
-);
-export const Example = Template.bind({});
-Example.storyName = 'Popover';

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { HMSPrebuilt, HMSPrebuiltOptions, HMSPrebuiltProps } from '.';
-
-export default {
-  title: 'UI Components/Prebuilt',
-  component: HMSPrebuilt,
-  argTypes: {
-    roomCode: { control: { type: 'text' }, defaultValue: '' },
-    logo: { control: { type: 'object' }, defaultValue: null },
-    typography: { control: { type: 'object' }, defaultValue: 'Roboto' },
-    options: { control: { type: 'object' }, defaultValue: {} },
-  },
-} as Meta<typeof HMSPrebuilt>;
-
-const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({
-  roomCode = '',
-  logo,
-  themes,
-  typography,
-  options,
-}: HMSPrebuiltProps) => {
-  return <HMSPrebuilt roomCode={roomCode} logo={logo} options={options} themes={themes} typography={typography} />;
-};
-
-export const Example = PrebuiltRoomCodeStory.bind({});
-const endpoints: HMSPrebuiltOptions['endpoints'] = {
-  roomLayout: process.env.STORYBOOK_ROOM_LAYOUT_ENDPOINT,
-  tokenByRoomCode: process.env.STORYBOOK_TOKEN_BY_ROOM_CODE_ENDPOINT,
-  init: process.env.STORYBOOK_INIT_API_ENDPOINT,
-  event: process.env.STORYBOOK_EVENT_API_ENDPOINT,
-};
-
-const hasEndpoints = Object.values(endpoints).some(val => !!val);
-
-Example.args = {
-  roomCode: process.env.STORYBOOK_SAMPLE_ROOM_CODE,
-  options: {
-    userName: '',
-    userId: '',
-    endpoints: hasEndpoints ? endpoints : undefined,
-  },
-  typography: {
-    font_family: 'Roboto',
-  },
-};

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { MicIcon } from '@100mslive/react-icons';
-import { Box } from '../../../Layout';
-import { Text } from '../../../Text';
-import { IconButtonWithOptions } from './IconButtonWithOptions';
-
-export default {
-  title: 'Components/IconButtonWithOptions',
-  component: IconButtonWithOptions,
-  argTypes: {
-    tooltipMessage: { control: 'text' },
-    icon: { control: 'object' },
-    options: { control: 'object' },
-    active: { control: 'boolean' },
-    onClick: { control: 'function' },
-    key: { control: 'string' },
-  },
-} as Meta;
-
-const Template = args => (
-  <Box css={{ ml: '$20', bg: '$background_dim', p: '$8' }}>
-    <IconButtonWithOptions {...args} />
-  </Box>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  tooltipMessage: 'Click me!',
-  icon: <MicIcon height={32} width={32} />,
-  options: [
-    { title: 'Option 1', content: <Text>Some content</Text> },
-    { title: 'Option 2', content: <Text>Some more content</Text> },
-  ],
-  active: true,
-  onClick: () => {
-    return;
-  },
-  key: '',
-};

package/src/QRCode/QRCode.mdx

@@ -1,9 +0,0 @@
-## QRCode
-
-QRCode component displays a scannable QR code for the given value.
-
-## Usage
-
-```jsx
-<QRCode value="pass any string here" />
-```

package/src/QRCode/QRCode.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import { QRCode } from './QRCode';
-import QRCodeDocs from './QRCode.mdx';
-
-export default {
-  title: 'UI Components/QRCode',
-  id: 'qr-code',
-  component: QRCode,
-  args: {
-    value: 'https://100ms.live',
-    size: 128,
-  },
-  parameters: {
-    docs: {
-      page: QRCodeDocs,
-    },
-  },
-} as ComponentMeta<typeof QRCode>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof QRCode> = ({ ...args }) => (
-  <Flex css={{ w: '$80' }} justify="center">
-    <QRCode {...args} />
-  </Flex>
-);
-export const Example = Template.bind({});
-Example.storyName = 'QRCode';

package/src/RadioGroup/RadioGroup.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Label } from '../Label';
-import { Flex } from '../Layout';
-import { RadioGroup } from './RadioGroup';
-
-export default {
-  title: 'UI Components/RadioGroup',
-  component: RadioGroup.Root,
-  argTypes: {},
-} as ComponentMeta<typeof RadioGroup.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof RadioGroup.Root> = args => (
-  <RadioGroup.Root {...args} css={{ flexDirection: 'column', alignItems: 'flex-start' }}>
-    <Flex align="center" css={{ my: '$4' }} gap="2">
-      <RadioGroup.Item value="grid" id="gridView">
-        <RadioGroup.Indicator />
-      </RadioGroup.Item>
-      <Label htmlFor="gridView">Grid View</Label>
-    </Flex>
-    <Flex align="center" css={{ cursor: 'pointer' }} gap="2">
-      <RadioGroup.Item value="activespeaker" id="activeSpeaker">
-        <RadioGroup.Indicator />
-      </RadioGroup.Item>
-      <Label htmlFor="activeSpeaker">Active Speaker</Label>
-    </Flex>
-  </RadioGroup.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'RadioGroup';

package/src/ReactSelect/ReactSelect.stories.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { Select } from './ReactSelect';
-
-export default {
-  title: 'UI Components/ReactSelect',
-  component: Select.Root,
-} as ComponentMeta<typeof Select.Root>;
-
-const data: {
-  [key: string]: { id: string; name: string }[];
-} = {
-  FRUITS: [
-    { id: 'apple', name: 'Apple' },
-    { id: 'banana', name: 'Banana' },
-    { id: 'blueberry', name: 'Blueberry' },
-    { id: 'grapes', name: 'Grapes' },
-    { id: 'pineapple', name: 'Pineapple' },
-  ],
-  VEGETABLES: [
-    { id: 'aubergine', name: 'Aubergine' },
-    { id: 'broccoli', name: 'Broccoli' },
-    { id: 'carrot', name: 'Carrot' },
-    { id: 'courgette', name: 'Courgette' },
-  ],
-  MEATS: [
-    { id: 'beef', name: 'Beef' },
-    { id: 'chicken', name: 'Chicken' },
-    { id: 'lamb', name: 'Lamb' },
-    { id: 'pork', name: 'Pork' },
-  ],
-};
-
-const Template: ComponentStory<typeof Select.Root> = () => {
-  return (
-    <Select.Root defaultValue="blueberry">
-      <Select.Trigger css={{ bg: '$background_dim' }}>
-        <Select.Value />
-        <Flex css={{ color: '$on_primary_high' }}>
-          <ChevronDownIcon />
-        </Flex>
-      </Select.Trigger>
-      <Select.Content>
-        <Select.ScrollUpButton css={{ color: '$on_primary_high' }}>
-          <ChevronUpIcon />
-        </Select.ScrollUpButton>
-        <Select.Viewport>
-          {Object.keys(data).map((item: string, index: number) => (
-            <>
-              <Select.Group>
-                <Select.Label>
-                  <Text variant="xs" css={{ color: '$on_primary_medium' }}>
-                    {item}
-                  </Text>
-                </Select.Label>
-                {data[item].map((type: { id: string; name: string }) => (
-                  <Select.Item value={type?.id}>
-                    <Select.ItemText>
-                      <Text variant="md">{type?.name}</Text>
-                    </Select.ItemText>
-                    <Select.ItemIndicator css={{ color: '$on_primary_high' }}>
-                      <CheckIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                ))}
-              </Select.Group>
-              {index < Object.keys(data).length - 1 && <Select.Separator css={{ bg: '$border_default' }} />}
-            </>
-          ))}
-        </Select.Viewport>
-        <Select.ScrollDownButton css={{ color: '$on_primary_high' }}>
-          <ChevronDownIcon />
-        </Select.ScrollDownButton>
-      </Select.Content>
-    </Select.Root>
-  );
-};
-
-export const WithGroup = Template.bind({});
-WithGroup.storyName = 'ReactSelect';

package/src/Select/Select.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select } from './Select';
-
-export default {
-  title: 'UI Components/Select',
-  component: Select.Root,
-} as ComponentMeta<typeof Select.Root>;
-
-const Template: ComponentStory<typeof Select.Root> = () => {
-  return (
-    <Select.Root css={{ width: '70%' }}>
-      <Select.DefaultDownIcon />
-      <Select.Select css={{ width: '100%' }}>
-        <option value="orange" key="orange">
-          Orange
-        </option>
-        <option value="orange" key="apple">
-          Apple
-        </option>
-        <option value="orange" key="banana">
-          Banana
-        </option>
-        <option value="orange" key="grapes">
-          Grapes
-        </option>
-      </Select.Select>
-    </Select.Root>
-  );
-};
-
-export const Single = Template.bind({});
-Single.storyName = 'Select';

package/src/Sheet/Sheet.mdx

@@ -1,19 +0,0 @@
-# Replacing DocsPage with custom `MDX` content
-
-This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
-
-It can be further expanded with your own code snippets and include specific information related to your stories.
-
-For example:
-
-import { Story } from '@storybook/addon-docs';
-
-## Sheet
-
-Sheet is an hover component used to have a focus-mode like UI for users.
-
-- [Example](#example)
-
-### Example
-
-<Story id="sheet--example" />

package/src/Sheet/Sheet.stories.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, InfoIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { HorizontalDivider } from '../Divider';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { Sheet } from './Sheet';
-import SheetDocs from './Sheet.mdx';
-
-export default {
-  title: 'UI Components/Sheet',
-  component: Sheet.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  parameters: {
-    docs: {
-      page: SheetDocs,
-    },
-  },
-} as ComponentMeta<typeof Sheet.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Sheet.Root> = () => (
-  <Sheet.Root>
-    <Sheet.Trigger asChild>
-      <Button variant="standard">Open Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content>
-      <Sheet.Title css={{ p: '$10' }}>
-        <Flex direction="row" justify="between" css={{ w: '100%' }}>
-          <Flex justify="start" align="center" gap="3">
-            <InfoIcon />
-            <Text variant="h5">Sheet Heading</Text>
-          </Flex>
-          <Sheet.Close css={{ color: 'white' }}>
-            <CrossIcon />
-          </Sheet.Close>
-        </Flex>
-      </Sheet.Title>
-      <HorizontalDivider />
-      <Box as="div" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-      </Box>
-    </Sheet.Content>
-  </Sheet.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'Sheet';

package/src/Slider/Slider.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '..';
-import { Slider } from './Slider';
-
-export default {
-  title: 'UI Components/Slider',
-  component: Slider,
-} as ComponentMeta<typeof Slider>;
-
-const Template: ComponentStory<typeof Slider> = () => {
-  const [volume, setVolume] = React.useState<number>(25);
-  return (
-    <Box css={{ width: '$80' }}>
-      <Slider defaultValue={[25]} step={1} value={[volume]} onValueChange={e => setVolume(e[0])} />
-    </Box>
-  );
-};
-
-export const Primary = Template.bind({});
-Primary.storyName = 'Slider';

package/src/Switch/Switch.mdx

@@ -1,11 +0,0 @@
-import { Story } from '@storybook/addon-docs';
-
-## Switch
-
-Switch is the primary component. It has 2 possible states i.e. on and off. It accepts states as checked prop and event listener of onCheckedChange.
-
-- [Index](#index)
-
-### Index
-
-<Story id="Switch--index" />

package/src/Switch/Switch.stories.tsx

@@ -1,46 +0,0 @@
-import React, { useEffect } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import { Switch } from './Switch';
-import SwitchDocs from './Switch.mdx';
-
-export default {
-  title: 'UI Components/Switch',
-  component: Switch,
-  argTypes: {
-    asChild: { control: false },
-  },
-  args: {
-    disabled: false,
-    checked: true,
-    required: false,
-  },
-  parameters: {
-    docs: {
-      page: SwitchDocs,
-    },
-  },
-} as ComponentMeta<typeof Switch>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Switch> = ({ checked: initialChecked, ...args }) => {
-  const [checked, onCheckedChange] = React.useState(false);
-  useEffect(() => {
-    onCheckedChange(!!initialChecked);
-  }, [initialChecked]);
-  return (
-    <Flex align="center" justify="center" css={{ w: '$20', h: '$20' }}>
-      <Switch checked={checked} {...args} onCheckedChange={onCheckedChange} />
-    </Flex>
-  );
-};
-
-export const Playground = Template.bind({});
-
-Playground.storyName = 'Switch';
-Playground.args = {
-  checked: false,
-  onCheckedChange: () => {
-    return;
-  },
-};