feat(Timer): create component (#1130)

playroom/snippets.tsx

@@ -2833,11 +2833,73 @@ const ProgressBlockSnippets = [
     },
 ];
 
+const timerSnippets: Array<Snippet> = [
+    {
+        group: 'TextTimer',
+        name: 'No Label',
+        code: `
+          <TextTimer
+            endTimestamp={Date.now() + 1000 * 60 * 60 * 24}
+            minTimeUnit="seconds"
+            maxTimeUnit="days"
+          />
+        `,
+    },
+    {
+        group: 'TextTimer',
+        name: 'Short Label',
+        code: `
+          <TextTimer
+            endTimestamp={Date.now() + 1000 * 60 * 60 * 24}
+            minTimeUnit="seconds"
+            maxTimeUnit="days"
+            labelType="short"
+          />
+        `,
+    },
+    {
+        group: 'TextTimer',
+        name: 'Long Label',
+        code: `
+          <TextTimer
+            endTimestamp={Date.now() + 1000 * 60 * 60 * 24}
+            minTimeUnit="seconds"
+            maxTimeUnit="days"
+            labelType="long"
+          />
+        `,
+    },
+    {
+        group: 'Timer',
+        name: 'default',
+        code: `
+          <Timer
+            endTimestamp={Date.now() + 1000 * 60 * 60 * 24}
+            minTimeUnit="seconds"
+            maxTimeUnit="days"
+          />
+        `,
+    },
+    {
+        group: 'Timer',
+        name: 'boxed',
+        code: `
+          <Timer
+            endTimestamp={Date.now() + 1000 * 60 * 60 * 24}
+            minTimeUnit="seconds"
+            maxTimeUnit="days"
+            boxed
+          />
+        `,
+    },
+];
+
 export default [
     ...buttonSnippets,
     ...formSnippets,
     ...feedbackSnippets,
     ...skeletonSnippets,
+    ...timerSnippets,
     {group: 'Feedbacks', name: 'Snackbar', code: '<Snackbar message="Some message here" />'},
     ...layoutSnippets,
     {

src/__acceptance_tests__/__ssr_pages__/timer.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import {Timer} from '../../..';
+
+const TimerTest = (): JSX.Element => <Timer minTimeUnit="seconds" maxTimeUnit="hours" endTimestamp={0} />;
+
+export default TimerTest;

src/__acceptance_tests__/timer-ssr-acceptance-test.tsx

@@ -0,0 +1,5 @@
+import {openSSRPage} from '../test-utils';
+
+test('ssr timer', async () => {
+    await openSSRPage({name: 'timer'});
+});

src/__private_stories__/skin-components-story.tsx

@@ -43,6 +43,7 @@ import {
     Title3,
     IconButton,
     Hero,
+    Timer,
 } from '..';
 import {InternalIconButton} from '../icon-button';
 import avatarImg from '../__stories__/images/avatar.jpg';
@@ -396,6 +397,12 @@ export const Default: StoryComponent<Args> = ({variant}) => {
                         button={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
                         buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
                     />
+
+                    {/** Timer */}
+                    <Inline space={16}>
+                        <Timer endTimestamp={0} minTimeUnit="seconds" maxTimeUnit="days" />
+                        <Timer endTimestamp={0} minTimeUnit="seconds" maxTimeUnit="days" boxed />
+                    </Inline>
                 </Stack>
             </Box>
         </ResponsiveLayout>

src/__screenshot_tests__/timer-screenshot-test.tsx

@@ -0,0 +1,85 @@
+import {openStoryPage, screen, setRootFontSize} from '../test-utils';
+
+const DEVICE = ['DESKTOP', 'MOBILE_IOS'] as const;
+
+test.each`
+    minTimeUnit  | maxTimeUnit
+    ${'seconds'} | ${'hours'}
+    ${'minutes'} | ${'days'}
+    ${'seconds'} | ${'days'}
+    ${'minutes'} | ${'days'}
+    ${'seconds'} | ${'seconds'}
+`(
+    'TextTimer - minTimeUnit = $minTimeUnit, maxTimeUnit = $maxTimeUnit',
+    async ({minTimeUnit, maxTimeUnit}) => {
+        await openStoryPage({
+            id: 'components-timer--text-timer-story',
+            args: {minTimeUnit, maxTimeUnit},
+        });
+
+        const timer = await screen.findByTestId('timer');
+
+        const image = await timer.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);
+
+test.each`
+    minTimeUnit  | maxTimeUnit
+    ${'seconds'} | ${'hours'}
+    ${'minutes'} | ${'days'}
+    ${'seconds'} | ${'days'}
+    ${'minutes'} | ${'days'}
+    ${'seconds'} | ${'seconds'}
+`('Timer - minTimeUnit = $minTimeUnit, maxTimeUnit = $maxTimeUnit', async ({minTimeUnit, maxTimeUnit}) => {
+    await openStoryPage({
+        id: 'components-timer--timer-story',
+        args: {minTimeUnit, maxTimeUnit},
+    });
+
+    const timer = await screen.findByTestId('timer');
+
+    const image = await timer.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(DEVICE)('Timer - boxed (%s)', async (device) => {
+    await openStoryPage({
+        id: 'components-timer--timer-story',
+        device,
+        args: {minTimeUnit: 'seconds', maxTimeUnit: 'days', boxed: true},
+    });
+
+    const timer = await screen.findByTestId('timer');
+
+    const image = await timer.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Timer - boxed with big fontSize', async () => {
+    await openStoryPage({
+        id: 'components-timer--timer-story',
+        args: {minTimeUnit: 'seconds', maxTimeUnit: 'days', boxed: true},
+    });
+
+    await setRootFontSize(32);
+
+    const timer = await screen.findByTestId('timer');
+
+    const image = await timer.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Timer - wraps if needed', async () => {
+    await openStoryPage({
+        id: 'components-timer--timer-story',
+        args: {minTimeUnit: 'seconds', maxTimeUnit: 'days', boxed: true},
+    });
+
+    await setRootFontSize(72);
+
+    const timer = await screen.findByTestId('timer');
+
+    const image = await timer.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__stories__/timer-story.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import {ResponsiveLayout, Box, Text3, Timer, TextTimer, Stack, Title1, Text2} from '..';
+import {isEqual} from '../utils/helpers';
+
+import type {RemainingTime, TimeUnit} from '../timer';
+import type {Variant} from '../theme-variant-context';
+
+export default {
+    title: 'Components/Timer',
+    parameters: {fullScreen: true},
+};
+
+interface BaseArgs {
+    themeVariant: Variant;
+    minTimeUnit: TimeUnit;
+    maxTimeUnit: TimeUnit;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+
+const baseArgs: BaseArgs = {
+    themeVariant: 'default',
+    minTimeUnit: 'seconds',
+    maxTimeUnit: 'hours',
+    days: 1,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+};
+
+const baseArgTypes = {
+    themeVariant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
+    minTimeUnit: {
+        options: ['undefined', 'seconds', 'minutes', 'hours', 'days'],
+        control: {type: 'select'},
+    },
+    maxTimeUnit: {
+        options: ['undefined', 'seconds', 'minutes', 'hours', 'days'],
+        control: {type: 'select'},
+    },
+};
+
+type TextTimerArgs = BaseArgs & {labelType: 'none' | 'short' | 'long'};
+
+export const TextTimerStory: StoryComponent<TextTimerArgs> = ({
+    labelType,
+    themeVariant,
+    minTimeUnit,
+    maxTimeUnit,
+    days,
+    hours,
+    minutes,
+    seconds,
+}) => {
+    const [remainingTime, setRemainingTime] = React.useState<RemainingTime>();
+    const [endTimestamp, setEndTimestamp] = React.useState(
+        Date.now() + DAY * days + HOUR * hours + MINUTE * minutes + SECOND * seconds
+    );
+
+    React.useEffect(() => {
+        setEndTimestamp(Date.now() + DAY * days + HOUR * hours + MINUTE * minutes + SECOND * seconds);
+    }, [days, hours, minutes, seconds]);
+
+    return (
+        <ResponsiveLayout fullWidth variant={themeVariant}>
+            <Box padding={16}>
+                <Stack space={16}>
+                    <Text3 regular>
+                        <TextTimer
+                            dataAttributes={{testid: 'timer'}}
+                            endTimestamp={endTimestamp}
+                            labelType={labelType}
+                            minTimeUnit={minTimeUnit}
+                            maxTimeUnit={maxTimeUnit}
+                            onProgress={(currentValue) => {
+                                if (!isEqual(currentValue, remainingTime)) {
+                                    setRemainingTime(currentValue);
+                                }
+                            }}
+                        />
+                    </Text3>
+                    <Stack space={8}>
+                        <Title1 as="h2">onProgress callback value</Title1>
+                        {remainingTime && (
+                            <Text2 regular as="pre">
+                                {JSON.stringify(remainingTime, null, 2)}
+                            </Text2>
+                        )}
+                        <div style={{width: '1ch', height: '1ch', border: '1px solid red'}} />
+                    </Stack>
+                </Stack>
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+TextTimerStory.storyName = 'TextTimer';
+TextTimerStory.args = {
+    labelType: 'none',
+    ...baseArgs,
+};
+TextTimerStory.argTypes = {
+    ...baseArgTypes,
+    labelType: {
+        options: ['none', 'short', 'long'],
+        control: {type: 'select'},
+    },
+};
+
+type TimerArgs = BaseArgs & {boxed: boolean};
+
+export const TimerStory: StoryComponent<TimerArgs> = ({
+    themeVariant,
+    minTimeUnit,
+    maxTimeUnit,
+    days,
+    hours,
+    minutes,
+    seconds,
+    boxed,
+}) => {
+    const [remainingTime, setRemainingTime] = React.useState<RemainingTime>();
+    const [endTimestamp, setEndTimestamp] = React.useState(
+        Date.now() + DAY * days + HOUR * hours + MINUTE * minutes + SECOND * seconds
+    );
+
+    React.useEffect(() => {
+        setEndTimestamp(Date.now() + DAY * days + HOUR * hours + MINUTE * minutes + SECOND * seconds);
+    }, [days, hours, minutes, seconds]);
+
+    return (
+        <ResponsiveLayout fullWidth variant={themeVariant}>
+            <Box padding={16}>
+                <Stack space={16}>
+                    <Timer
+                        dataAttributes={{testid: 'timer'}}
+                        endTimestamp={endTimestamp}
+                        minTimeUnit={minTimeUnit}
+                        maxTimeUnit={maxTimeUnit}
+                        boxed={boxed}
+                        onProgress={(currentValue) => {
+                            if (!isEqual(currentValue, remainingTime)) {
+                                setRemainingTime(currentValue);
+                            }
+                        }}
+                    />
+
+                    <Stack space={8}>
+                        <Title1 as="h2">onProgress callback value</Title1>
+                        {remainingTime && (
+                            <Text2 regular as="pre">
+                                {JSON.stringify(remainingTime, null, 2)}
+                            </Text2>
+                        )}
+                    </Stack>
+                </Stack>
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+TimerStory.storyName = 'Timer';
+TimerStory.args = {
+    ...baseArgs,
+    boxed: false,
+};
+TimerStory.argTypes = {
+    ...baseArgTypes,
+};