@100mslive/roomkit-react 0.4.3-alpha.3 → 0.4.3-alpha.4

package/src/Diagnostics/ConnectivityTest.tsx

@@ -1,383 +0,0 @@
-import React, { useState } from 'react';
-import { ConnectivityCheckResult, ConnectivityState, DiagnosticsRTCStats } from '@100mslive/react-sdk';
-import { CheckCircleIcon, CrossCircleIcon, EyeCloseIcon, EyeOpenIcon, LinkIcon } from '@100mslive/react-icons';
-import { TestContainer, TestFooter } from './components';
-import { Button } from '../Button';
-import { Box, Flex } from '../Layout';
-import { Loading } from '../Loading';
-import { formatBytes } from '../Stats';
-import { Text } from '../Text';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-const Regions = {
-  in: 'India',
-  us: 'United States',
-};
-
-const ConnectivityStateMessage = {
-  [ConnectivityState.STARTING]: 'Fetching Init',
-  [ConnectivityState.INIT_FETCHED]: 'Connecting to signal server',
-  [ConnectivityState.SIGNAL_CONNECTED]: 'Establishing ICE connection',
-  [ConnectivityState.ICE_ESTABLISHED]: 'Capturing Media',
-  [ConnectivityState.MEDIA_CAPTURED]: 'Publishing Media',
-  [ConnectivityState.MEDIA_PUBLISHED]: 'Finishing Up',
-  [ConnectivityState.COMPLETED]: 'Completed',
-};
-
-export const ConnectivityTestStepResult = ({
-  title,
-  status = 'Connected',
-  success,
-  children,
-}: {
-  title: string;
-  status?: string;
-  success?: boolean;
-  children: React.ReactNode;
-}) => {
-  const [hideDetails, setHideDetails] = useState(true);
-
-  return (
-    <Box css={{ my: '$10', p: '$10', r: '$1', bg: '$surface_bright' }}>
-      <Text css={{ c: '$on_primary_medium', mb: '$6' }}>{title}</Text>
-      {success ? (
-        <Flex>
-          <Text css={{ c: '$alert_success' }}>
-            <CheckCircleIcon width="1.5rem" height="1.5rem" />
-          </Text>
-          <Text variant="lg" css={{ ml: '$4' }}>
-            {status}
-          </Text>
-        </Flex>
-      ) : (
-        <Flex>
-          <Text css={{ c: '$alert_error_bright' }}>
-            <CrossCircleIcon width="1.5rem" height="1.5rem" />
-          </Text>
-          <Text variant="lg" css={{ ml: '$4' }}>
-            Failed
-          </Text>
-        </Flex>
-      )}
-      <Flex
-        onClick={() => setHideDetails(!hideDetails)}
-        align="center"
-        gap="2"
-        css={{
-          color: '$primary_bright',
-        }}
-      >
-        {hideDetails ? <EyeOpenIcon /> : <EyeCloseIcon />}
-        <Text
-          variant="caption"
-          css={{
-            color: '$primary_bright',
-          }}
-        >
-          {hideDetails ? 'View' : 'Hide'} detailed information
-        </Text>
-      </Flex>
-      {!hideDetails ? <Box>{children}</Box> : null}
-    </Box>
-  );
-};
-
-const DetailedInfo = ({
-  title,
-  value,
-  Icon,
-}: {
-  title: string;
-  value: string;
-  Icon?: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
-}) => {
-  return (
-    <Box css={{ flex: '50%', mt: '$6' }}>
-      <Text variant="caption" css={{ fontWeight: '$semiBold', c: '$on_primary_medium' }}>
-        {title}
-      </Text>
-      <Flex css={{ mt: '$xs', alignItems: 'flex-start' }}>
-        {Icon && (
-          <Text css={{ mr: '$4' }}>
-            <Icon width="1rem" height="1rem" />
-          </Text>
-        )}
-        <Text variant="caption">{value}</Text>
-      </Flex>
-    </Box>
-  );
-};
-
-const MediaServerResult = ({ result }: { result?: ConnectivityCheckResult['mediaServerReport'] }) => {
-  return (
-    <ConnectivityTestStepResult
-      title="Media server connection test"
-      success={result?.isPublishICEConnected && result.isSubscribeICEConnected}
-    >
-      <Flex css={{ flexWrap: 'wrap' }}>
-        <DetailedInfo
-          title="Media Captured"
-          value={result?.stats?.audio.bytesSent ? 'Yes' : 'No'}
-          Icon={result?.stats?.audio.bytesSent ? CheckCircleIcon : CrossCircleIcon}
-        />
-        <DetailedInfo
-          title="Media Published"
-          value={result?.stats?.audio.bitrateSent ? 'Yes' : 'No'}
-          Icon={result?.stats?.audio.bytesSent ? CheckCircleIcon : CrossCircleIcon}
-        />
-        {result?.connectionQualityScore ? (
-          <DetailedInfo
-            title="Connection Quality Score (CQS)"
-            value={`${result.connectionQualityScore.toFixed(2)} (out of 5)`}
-          />
-        ) : null}
-      </Flex>
-    </ConnectivityTestStepResult>
-  );
-};
-
-const SignallingResult = ({ result }: { result?: ConnectivityCheckResult['signallingReport'] }) => {
-  return (
-    <ConnectivityTestStepResult title="Signalling server connection test" success={result?.isConnected}>
-      <Flex css={{ flexWrap: 'wrap' }}>
-        <DetailedInfo
-          title="Signalling Gateway"
-          value={result?.isConnected ? 'Reachable' : 'Unreachable'}
-          Icon={result?.isConnected ? CheckCircleIcon : CrossCircleIcon}
-        />
-        <DetailedInfo title="Websocket URL" value={result?.websocketUrl || 'N/A'} Icon={LinkIcon} />
-      </Flex>
-    </ConnectivityTestStepResult>
-  );
-};
-
-const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
-  return (
-    <ConnectivityTestStepResult title="Audio" status="Received" success={!!stats?.bytesSent}>
-      {stats && (
-        <Flex css={{ flexWrap: 'wrap' }}>
-          <DetailedInfo title="Bytes Sent" value={formatBytes(stats.bytesSent)} />
-          <DetailedInfo title="Bytes Received" value={formatBytes(stats.bytesReceived)} />
-          <DetailedInfo title="Packets Received" value={stats.packetsReceived.toString()} />
-          <DetailedInfo title="Packets Lost" value={stats.packetsLost.toString()} />
-          <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
-          <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
-          <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
-          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
-        </Flex>
-      )}
-    </ConnectivityTestStepResult>
-  );
-};
-
-const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
-  return (
-    <ConnectivityTestStepResult title="Video" status="Received" success={!!stats?.bytesSent}>
-      {stats && (
-        <Flex css={{ flexWrap: 'wrap' }}>
-          <DetailedInfo title="Bytes Sent" value={formatBytes(stats.bytesSent)} />
-          <DetailedInfo title="Bytes Received" value={formatBytes(stats.bytesReceived)} />
-          <DetailedInfo title="Packets Received" value={stats.packetsReceived.toString()} />
-          <DetailedInfo title="Packets Lost" value={stats.packetsLost.toString()} />
-          <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
-          <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
-          <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
-          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
-        </Flex>
-      )}
-    </ConnectivityTestStepResult>
-  );
-};
-
-const Footer = ({
-  error,
-  result,
-  restart,
-}: {
-  result?: ConnectivityCheckResult;
-  restart: () => void;
-  error?: Error;
-}) => {
-  return (
-    <TestFooter error={error}>
-      <Flex css={{ gap: '$8', '@lg': { flexDirection: 'column' } }}>
-        <Button variant="standard" onClick={restart}>
-          Restart Test
-        </Button>
-        <Button disabled={!result} onClick={() => result && downloadJson(result, 'hms_diagnostics_results')}>
-          Download Test Report
-        </Button>
-      </Flex>
-    </TestFooter>
-  );
-};
-
-const ConnectivityTestReport = ({
-  error,
-  result,
-  progress,
-  startTest,
-}: {
-  error?: Error;
-  result?: ConnectivityCheckResult;
-  progress?: ConnectivityState;
-  startTest: () => void;
-}) => {
-  if (error) {
-    return (
-      <>
-        <TestContainer css={{ textAlign: 'center' }}>
-          <Text css={{ c: '$alert_error_default', mb: '$4' }}>
-            <CrossCircleIcon />
-          </Text>
-          <Text variant="h6">Connectivity Test Failed</Text>
-          <Text variant="body2" css={{ c: '$on_primary_medium' }}>
-            {error.message}
-          </Text>
-        </TestContainer>
-        <Footer restart={startTest} error={error} />
-      </>
-    );
-  }
-
-  if (result) {
-    // for debugging and quick view of results
-    console.log(result);
-    return (
-      <>
-        <TestContainer>
-          <Text css={{ c: '$on_primary_medium' }}>Connectivity test has been completed.</Text>
-          <SignallingResult result={result?.signallingReport} />
-          <MediaServerResult result={result?.mediaServerReport} />
-          <AudioStats stats={result?.mediaServerReport?.stats?.audio} />
-          <VideoStats stats={result?.mediaServerReport?.stats?.video} />
-        </TestContainer>
-        <Footer result={result} restart={startTest} error={error} />
-      </>
-    );
-  }
-
-  if (progress !== undefined) {
-    return (
-      <TestContainer css={{ textAlign: 'center' }}>
-        <Text css={{ c: '$primary_bright', display: 'flex', justifyContent: 'center' }}>
-          <Loading size="3.5rem" color="currentColor" />
-        </Text>
-        <Text variant="h6" css={{ mt: '$8' }}>
-          Checking your connection...
-        </Text>
-        <Text
-          variant="body2"
-          css={{ c: '$on_primary_medium', mt: '$4' }}
-        >{`${ConnectivityStateMessage[progress]}...`}</Text>
-      </TestContainer>
-    );
-  }
-
-  return null;
-};
-
-const RegionSelector = ({
-  region,
-  setRegion,
-  startTest,
-}: {
-  region?: string;
-  startTest?: () => void;
-  setRegion: (region: string) => void;
-}) => {
-  return (
-    <TestContainer css={{ borderBottom: '1px solid $border_default' }}>
-      <Text variant="body1">Select a region</Text>
-      <Text variant="body2" css={{ c: '$on_secondary_low' }}>
-        Select the closest region for best results
-      </Text>
-      <Flex
-        justify="between"
-        css={{
-          mt: '$md',
-          '@lg': {
-            flexDirection: 'column',
-            gap: '$8',
-          },
-        }}
-      >
-        <Flex
-          css={{
-            gap: '$4',
-            '@lg': {
-              flexDirection: 'column',
-            },
-          }}
-        >
-          {Object.entries(Regions).map(([key, value]) => (
-            <Button
-              key={key}
-              outlined={region !== key}
-              variant={region === key ? 'primary' : 'standard'}
-              css={region === key ? { bg: '$primary_dim' } : {}}
-              onClick={() => setRegion(key)}
-            >
-              {value}
-            </Button>
-          ))}
-        </Flex>
-        <Flex css={{ '@lg': { flexDirection: 'column' } }}>
-          <Button variant="primary" onClick={startTest} disabled={!startTest}>
-            {startTest ? 'Start Test' : 'Testing...'}
-          </Button>
-        </Flex>
-      </Flex>
-    </TestContainer>
-  );
-};
-
-export const ConnectivityTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const [region, setRegion] = useState<string | undefined>(Object.keys(Regions)[0]);
-  const [error, setError] = useState<Error | undefined>();
-  const [progress, setProgress] = useState<ConnectivityState>();
-  const [result, setResult] = useState<ConnectivityCheckResult | undefined>();
-
-  const startTest = () => {
-    updateStep(DiagnosticsStep.CONNECTIVITY, { hasFailed: false, isCompleted: false });
-    setError(undefined);
-    setResult(undefined);
-    hmsDiagnostics
-      ?.startConnectivityCheck(
-        state => {
-          setProgress(state);
-        },
-        result => {
-          updateStep(DiagnosticsStep.CONNECTIVITY, { isCompleted: true });
-          setResult(result);
-        },
-        region,
-      )
-      .catch(error => {
-        updateStep(DiagnosticsStep.CONNECTIVITY, { hasFailed: true });
-        setError(error);
-      });
-  };
-
-  return (
-    <>
-      <RegionSelector
-        region={region}
-        setRegion={setRegion}
-        startTest={progress === undefined || progress === ConnectivityState.COMPLETED ? startTest : undefined}
-      />
-      <ConnectivityTestReport error={error} result={result} progress={progress} startTest={startTest} />
-    </>
-  );
-};
-
-const downloadJson = (obj: object, fileName: string) => {
-  const a = document.createElement('a');
-  const file = new Blob([JSON.stringify(obj, null, 2)], {
-    type: 'application/json',
-  });
-  a.href = URL.createObjectURL(file);
-  a.download = `${fileName}.json`;
-  a.click();
-};

package/src/Diagnostics/DeviceSelector.jsx

@@ -1,71 +0,0 @@
-import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown } from '../Dropdown';
-import { Box, Flex } from '../Layout';
-import { DialogDropdownTrigger } from '../Prebuilt/primitives/DropdownTrigger';
-import { Text } from '../Text';
-
-export const DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  return (
-    <Box css={{ mb: '$6' }}>
-      <Text css={{ mb: '$4' }}>{title}</Text>
-      <Flex
-        align="center"
-        css={{
-          gap: '$4',
-          '@md': {
-            flexDirection: children ? 'column' : 'row',
-            alignItems: children ? 'start' : 'center',
-          },
-        }}
-      >
-        <Dropdown.Root open={open} onOpenChange={setOpen}>
-          <DialogDropdownTrigger
-            ref={ref}
-            icon={icon}
-            title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}
-            open={open}
-          />
-          <Dropdown.Portal>
-            <Dropdown.Content
-              align="start"
-              sideOffset={8}
-              css={{
-                w:
-                  // @ts-ignore
-                  ref.current?.clientWidth,
-                zIndex: 1001,
-              }}
-            >
-              {devices.map(device => {
-                return (
-                  <Dropdown.Item
-                    key={device.label}
-                    onSelect={() => onChange(device.deviceId)}
-                    css={{
-                      px: '$9',
-                    }}
-                  >
-                    {device.label}
-                  </Dropdown.Item>
-                );
-              })}
-            </Dropdown.Content>
-          </Dropdown.Portal>
-        </Dropdown.Root>
-        {children}
-      </Flex>
-    </Box>
-  );
-};
-
-DeviceSelector.propTypes = {
-  title: PropTypes.string.isRequired,
-  devices: PropTypes.array.isRequired,
-  selection: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  icon: PropTypes.node,
-  children: PropTypes.node,
-};

package/src/Diagnostics/Diagnostics.tsx

@@ -1,190 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { HMSRoomProvider, useHMSActions } from '@100mslive/react-sdk';
-import {
-  CheckCircleIcon,
-  ConnectivityIcon,
-  CrossCircleIcon,
-  GlobeIcon,
-  MicOnIcon,
-  VideoOnIcon,
-} from '@100mslive/react-icons';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { HMSThemeProvider } from '../Theme';
-import { AudioTest } from './AudioTest';
-import { BrowserTest } from './BrowserTest';
-import { ConnectivityTest } from './ConnectivityTest';
-import {
-  DiagnosticsContext,
-  DiagnosticsStep,
-  DiagnosticsStepInfo,
-  initialSteps,
-  useDiagnostics,
-} from './DiagnosticsContext';
-import { VideoTest } from './VideoTest';
-
-const DiagnosticsStepIcon: Record<DiagnosticsStep, React.ReactNode> = {
-  [DiagnosticsStep.VIDEO]: <VideoOnIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.AUDIO]: <MicOnIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.BROWSER]: <GlobeIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.CONNECTIVITY]: <ConnectivityIcon width="2rem" height="2rem" />,
-};
-
-const Container = ({ children }: { children: React.ReactNode }) => (
-  <Box
-    css={{
-      px: '120px',
-      pt: '120px',
-      pb: '24px',
-      bg: '$background_dim',
-      lineHeight: '1.5',
-      '-webkit-text-size-adjust': '100%',
-      position: 'relative',
-      h: '100%',
-      '@lg': {
-        p: '$12',
-      },
-      overflowY: 'auto',
-      boxSizing: 'border-box',
-      '& *': {
-        boxSizing: 'border-box',
-      },
-      '::-webkit-scrollbar-track': {
-        WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
-        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
-        backgroundColor: 'transparent',
-      },
-      '::-webkit-scrollbar': {
-        width: '6px',
-        height: '6px',
-        backgroundColor: 'transparent',
-      },
-      '::-webkit-scrollbar-thumb': {
-        backgroundColor: '#657080',
-        borderRadius: '5px',
-      },
-    }}
-  >
-    {children}
-  </Box>
-);
-
-const DiagnosticsStepTest = () => {
-  const { activeStepIndex } = useDiagnostics();
-
-  let TestComponent = () => <></>;
-
-  if (activeStepIndex === DiagnosticsStep.AUDIO) {
-    TestComponent = AudioTest;
-  } else if (activeStepIndex === DiagnosticsStep.VIDEO) {
-    TestComponent = VideoTest;
-  } else if (activeStepIndex === DiagnosticsStep.BROWSER) {
-    TestComponent = BrowserTest;
-  } else if (activeStepIndex === DiagnosticsStep.CONNECTIVITY) {
-    TestComponent = ConnectivityTest;
-  }
-
-  return <TestComponent key={activeStepIndex} />;
-};
-
-const DiagnosticsStepHeader = () => {
-  const { activeStepIndex, activeStep } = useDiagnostics();
-  return (
-    <Flex css={{ py: '$8', px: '$10', alignItems: 'center', borderBottom: '1px solid $border_default' }}>
-      <Text css={{ c: '$primary_bright', mt: '$xs' }}>{DiagnosticsStepIcon[activeStepIndex]}</Text>
-      <Text css={{ fontSize: '$h6', ml: '$9' }}>{activeStep.name}</Text>
-    </Flex>
-  );
-};
-
-const DiagnosticsStepContainer = () => {
-  return (
-    <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', maxWidth: '65rem', '@lg': { w: '100%' } }}>
-      <DiagnosticsStepHeader />
-      <DiagnosticsStepTest />
-    </Box>
-  );
-};
-
-const DiagnosticsStepsList = () => {
-  const { activeStepIndex, activeStep, steps } = useDiagnostics();
-
-  return (
-    <Box css={{ w: '25%', '@lg': { display: 'none' } }}>
-      {Object.keys(DiagnosticsStep)
-        .filter(key => !isNaN(Number(key)))
-        .map(key => {
-          const keyIndex = Number(key);
-          const step = steps[keyIndex as DiagnosticsStep];
-          const isStepCompleted = activeStepIndex > keyIndex || activeStep.isCompleted;
-
-          let color = '$on_primary_low';
-          let icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
-
-          if (activeStepIndex === keyIndex) {
-            color = '$on_primary_high';
-            icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
-          }
-          if (isStepCompleted) {
-            color = '$primary_bright';
-            icon = <CheckCircleIcon width="1rem" height="1rem" />;
-          }
-          if (step.hasFailed) {
-            color = '$alert_error_default';
-            icon = <CrossCircleIcon width="1rem" height="1rem" />;
-          }
-
-          return (
-            <Flex key={key} css={{ mb: '$10', c: color, gap: '$4', alignItems: 'center' }}>
-              {icon}
-              <Text css={{ c: color }}>{step.name}</Text>
-            </Flex>
-          );
-        })}
-    </Box>
-  );
-};
-
-const DiagnosticsProvider = () => {
-  const actions = useHMSActions();
-  const [activeStep, setActiveStep] = useState(0);
-  const [steps, setSteps] = useState(initialSteps);
-  const diagnosticsRef = useRef(actions.initDiagnostics());
-
-  const updateStep = useCallback((step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => {
-    setSteps(prevSteps => ({ ...prevSteps, [step]: { ...prevSteps[step], ...value } }));
-  }, []);
-
-  return (
-    <DiagnosticsContext.Provider
-      value={{
-        hmsDiagnostics: diagnosticsRef.current,
-        activeStepIndex: activeStep,
-        setActiveStep,
-        steps,
-        updateStep,
-      }}
-    >
-      <Container>
-        <Text variant="h4">Pre-call Test</Text>
-        <Text variant="md" css={{ c: '$on_primary_medium' }}>
-          Make sure your devices and network are good to go, let's get started.
-        </Text>
-        <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
-          <DiagnosticsStepsList />
-          <DiagnosticsStepContainer />
-        </Flex>
-      </Container>
-    </DiagnosticsContext.Provider>
-  );
-};
-
-export const Diagnostics = () => {
-  return (
-    <HMSRoomProvider>
-      <HMSThemeProvider themeType="default">
-        <DiagnosticsProvider />
-      </HMSThemeProvider>
-    </HMSRoomProvider>
-  );
-};

package/src/Diagnostics/DiagnosticsContext.ts

@@ -1,46 +0,0 @@
-import React, { useContext } from 'react';
-import { HMSDiagnosticsInterface } from '@100mslive/react-sdk';
-
-export enum DiagnosticsStep {
-  BROWSER,
-  VIDEO,
-  AUDIO,
-  CONNECTIVITY,
-}
-
-export const initialSteps = {
-  [DiagnosticsStep.BROWSER]: { name: 'Browser Support' },
-  [DiagnosticsStep.VIDEO]: { name: 'Test Video' },
-  [DiagnosticsStep.AUDIO]: { name: 'Test Audio' },
-  [DiagnosticsStep.CONNECTIVITY]: { name: 'Connection Quality' },
-};
-
-export interface DiagnosticsStepInfo {
-  name: string;
-  hasFailed?: boolean;
-  isCompleted?: boolean;
-}
-
-export const DiagnosticsContext = React.createContext<{
-  hmsDiagnostics?: HMSDiagnosticsInterface;
-  activeStepIndex: DiagnosticsStep;
-  setActiveStep: React.Dispatch<React.SetStateAction<DiagnosticsStep>>;
-  steps: Record<DiagnosticsStep, DiagnosticsStepInfo>;
-  updateStep: (step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => void;
-}>({
-  activeStepIndex: 0,
-  setActiveStep: () => {
-    return;
-  },
-  steps: initialSteps,
-  updateStep: () => {
-    return;
-  },
-});
-
-export const useDiagnostics = () => {
-  const context = useContext(DiagnosticsContext);
-  const activeStep = context.steps[context.activeStepIndex];
-
-  return { ...context, activeStep };
-};