@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/ProgressInfo/ProgressInfoTotals.tsx

@@ -0,0 +1,60 @@
+import { Typography } from '@ssa-ui-kit/core';
+import { withTheme, css } from '@emotion/react';
+
+import { ProgressInfoTotalsProps } from './types';
+
+export const ProgressInfoTotals = withTheme(
+  ({ theme, total }: ProgressInfoTotalsProps) => {
+    return (
+      <Typography
+        variant="body2"
+        weight="regular"
+        color={theme.colors.greyDarker60}
+        css={css`
+          font-size: 13px;
+          line-height: 16px;
+          margin-top: -5px;
+
+          ${theme.mediaQueries.md} {
+            font-size: 16px;
+            font-weight: 700;
+          }
+        `}>
+        Total
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          as={'span'}
+          css={css`
+            font-size: 19px;
+            line-height: 23px;
+            display: block;
+
+            ${theme.mediaQueries.md} {
+              font-size: 27.65px;
+              line-height: 35px;
+            }
+          `}>
+          {total}
+          <Typography
+            variant="body2"
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker60}
+            css={css`
+              font-size: 13px;
+              font-weight: 600;
+              margin-left: 3px;
+
+              ${theme.mediaQueries.md} {
+                font-size: 16px;
+              }
+            `}>
+            hrs
+          </Typography>
+        </Typography>
+      </Typography>
+    );
+  },
+);

package/src/components/ProgressInfo/index.ts

@@ -0,0 +1,3 @@
+export { ProgressInfo as default } from './ProgressInfo';
+export { ProgressInfoTotals } from './ProgressInfoTotals';
+export * from './types';

package/src/components/ProgressInfo/mockProgressInfoRequest.ts

@@ -0,0 +1,166 @@
+import { ProgressInfoResp } from './types';
+
+export const progressInfoData: ProgressInfoResp = {
+  weekly: {
+    stretching: [
+      {
+        // cspell:disable-next-line
+        id: 'XlyNrZpVvNp2Z9LqloS6',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-05-03T23:00:00.000Z',
+        value: 88,
+        label: 'stretching',
+      },
+    ],
+    cardio: [
+      {
+        // cspell:disable-next-line
+        id: 'YthvgItFS3W0Sa3mRW0X',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-05-03T23:00:00.000Z',
+        value: 55,
+        label: 'cardio',
+      },
+    ],
+  },
+  monthly: {
+    cardio: [
+      {
+        // cspell:disable-next-line
+        id: '5MI8tTgF1PNFs7Cx7gOC',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-04-26T23:00:00.000Z',
+        value: 76,
+        label: 'cardio',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'YthvgItFS3W0Sa3mRW0X',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-05-03T23:00:00.000Z',
+        value: 55,
+        label: 'cardio',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'eaSQG2w0TkXhbg5dkSmo',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-04-16T23:00:00.000Z',
+        value: 56,
+        label: 'cardio',
+      },
+    ],
+    stretching: [
+      {
+        // cspell:disable-next-line
+        id: 'FdMmyq45pj9M0VVP01EN',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-04-26T23:00:00.000Z',
+        value: 78,
+        label: 'stretching',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'TAFnTPs8kOeAy9uTn502',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-04-16T23:00:00.000Z',
+        value: 88,
+        label: 'stretching',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'XlyNrZpVvNp2Z9LqloS6',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-05-03T23:00:00.000Z',
+        value: 88,
+        label: 'stretching',
+      },
+    ],
+  },
+  yearly: {
+    cardio: [
+      {
+        // cspell:disable-next-line
+        id: '5MI8tTgF1PNFs7Cx7gOC',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-04-26T23:00:00.000Z',
+        value: 76,
+        label: 'cardio',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'YthvgItFS3W0Sa3mRW0X',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-05-03T23:00:00.000Z',
+        value: 55,
+        label: 'cardio',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'eaSQG2w0TkXhbg5dkSmo',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-04-16T23:00:00.000Z',
+        value: 56,
+        label: 'cardio',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'ym7TO7GOoB7NhtFrzT4Y',
+        color: 'rgba(65, 187, 187, 1)',
+        colorTag: 'turquoise',
+        date: '2023-02-17T00:00:00.000Z',
+        value: 23,
+        label: 'cardio',
+      },
+    ],
+    stretching: [
+      {
+        // cspell:disable-next-line
+        id: 'FdMmyq45pj9M0VVP01EN',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-04-26T23:00:00.000Z',
+        value: 78,
+        label: 'stretching',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'TAFnTPs8kOeAy9uTn502',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-04-16T23:00:00.000Z',
+        value: 88,
+        label: 'stretching',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'XlyNrZpVvNp2Z9LqloS6',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-05-03T23:00:00.000Z',
+        value: 88,
+        label: 'stretching',
+      },
+      {
+        // cspell:disable-next-line
+        id: 'twtiFqUQ1yZpv3pcTkCp',
+        color: 'rgba(117, 153, 222, 1)',
+        colorTag: 'blueLight',
+        date: '2023-02-17T00:00:00.000Z',
+        value: 12,
+        label: 'stretching',
+      },
+    ],
+  },
+};

package/src/components/ProgressInfo/styles.ts

@@ -0,0 +1,20 @@
+import { css, Theme } from '@emotion/react';
+
+export const getPieChartStyles = (theme: Theme) => css`
+  width: 100%;
+  height: 100%;
+
+  max-width: 380px;
+
+  div:nth-of-type(1) {
+    width: 120px;
+    height: 120px;
+  }
+
+  ${theme.mediaQueries.md} {
+    div:nth-of-type(1) {
+      width: 160px;
+      height: 160px;
+    }
+  }
+`;

package/src/components/ProgressInfo/types.ts

@@ -0,0 +1,29 @@
+import { Theme } from '@emotion/react';
+import { MainColors } from '@ssa-ui-kit/core';
+
+export type ProgressInfoItemProps = {
+  id: string;
+  date: string;
+  label: string;
+  value: number;
+  color: string;
+  colorTag: keyof MainColors | undefined;
+};
+
+export type ProgressInfoResp = {
+  [key: string]: { [key: string]: ProgressInfoItemProps[] };
+};
+
+export interface IProgressInfoProps {
+  data: ProgressInfoResp;
+  className?: string;
+}
+
+export interface ProgressInfoTotalsProps {
+  theme: Theme;
+  total: number;
+}
+
+export type PeriodOption = { value: string; id: string };
+
+export type Period = 'daily' | 'weekly' | 'monthly' | 'yearly';

package/src/components/SearchBox/SearchBox.e2e.ts

@@ -0,0 +1,37 @@
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-searchbox--default&viewMode=story',
+  );
+};
+
+test('Widgets: SearchBox should be opened correctly', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await gotoPage(page);
+  await page.waitForSelector('#formElement-search');
+
+  const inputElement = await page.getByPlaceholder('Search by name');
+  expect(inputElement).toBeVisible();
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-searchbox--search-icon__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('Widgets: SearchBox - cross icon should be shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+
+  const inputElement = await page.getByPlaceholder('Search by name');
+  await inputElement.type('test');
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-searchbox--cross-icon__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});

package/src/components/SearchBox/SearchBox.spec.tsx

@@ -0,0 +1,77 @@
+import { fireEvent } from '@testing-library/dom';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('SearchBox', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.spyOn(global, 'setTimeout');
+    jest.spyOn(global, 'clearTimeout');
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it('should be correctly rendered', () => {
+    const { getByPlaceholderText, getByTestId, queryByTestId } = render(
+      <StoryComponent />,
+    );
+    getByTestId('search-icon');
+    getByPlaceholderText('Search by name');
+    expect(queryByTestId('cross-icon')).not.toBeInTheDocument();
+  });
+
+  it('should change value and icon', () => {
+    const { getByPlaceholderText, getByTestId } = render(<StoryComponent />);
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+
+    const crossIcon = getByTestId('cross-icon');
+    fireEvent.click(crossIcon);
+
+    expect((inputElement as HTMLInputElement).value).toBe('');
+  });
+
+  it('should be cleared by pressing the cross icon', () => {
+    const { getByPlaceholderText, getByTestId, queryByTestId } = render(
+      <StoryComponent />,
+    );
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+
+    getByTestId('cross-icon');
+    expect((inputElement as HTMLInputElement).value).toBe('test');
+    expect(queryByTestId('search-icon')).not.toBeInTheDocument();
+  });
+
+  it('should call the callback', () => {
+    const { getByPlaceholderText } = render(<StoryComponent />);
+
+    const consoleLogMock = jest.spyOn(console, 'log').mockImplementation();
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+    jest.runAllTimers();
+    expect(consoleLogMock.mock.calls).toEqual([
+      ['Searching for the term...', 'test'],
+    ]);
+    consoleLogMock.mockRestore();
+  });
+
+  it('should call the callback by pressing the Enter key', () => {
+    const handleCallback = jest.fn();
+    const { getByPlaceholderText } = render(
+      <StoryComponent handleCallback={handleCallback} />,
+    );
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+    fireEvent.keyUp(inputElement, {
+      key: 'Enter',
+    });
+    expect(handleCallback.mock.calls).toEqual([['test']]);
+  });
+});

package/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,68 @@
+import { KeyboardEvent, useEffect, useRef } from 'react';
+import { useWatch } from 'react-hook-form';
+import { Icon } from '@ssa-ui-kit/core';
+import { debounce } from '@ssa-ui-kit/utils';
+import { SearchBoxWrapper } from './SearchBoxWrapper';
+import { SearchBoxInput } from './SearchBoxInput';
+import { SearchBoxCrossIcon } from '.';
+import { SearchBoxProps } from './types';
+
+export const SearchBox = ({
+  name,
+  placeholder = 'Search by name',
+  control,
+  callbackDelay = 500,
+  autoSearchTrigger = true,
+  register,
+  resetField,
+  callback,
+  ...rest
+}: SearchBoxProps) => {
+  const watchResult = useWatch({ control });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceThrottled = useRef(debounce(callback, callbackDelay));
+  const [debouncedFn, cancel] = debounceThrottled.current;
+
+  useEffect(() => {
+    const searchTerm = watchResult[name];
+    if (autoSearchTrigger && searchTerm !== undefined) {
+      debouncedFn(searchTerm);
+    }
+  }, [watchResult]);
+
+  const crossIconHandler = () => {
+    resetField(name);
+    inputRef.current?.focus();
+  };
+
+  const EndElement = !watchResult[name] ? (
+    <div data-testid="search-icon">
+      <Icon name="search" size={15} color="#55575A" />
+    </div>
+  ) : (
+    <SearchBoxCrossIcon onClick={crossIconHandler} />
+  );
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      cancel();
+      callback(watchResult[name]);
+    }
+  };
+
+  return (
+    <SearchBoxWrapper>
+      <SearchBoxInput
+        name={name}
+        endElement={EndElement}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+        status="custom"
+        onKeyUp={onKeyUp}
+        {...rest}
+        ref={inputRef}
+      />
+    </SearchBoxWrapper>
+  );
+};

package/src/components/SearchBox/SearchBoxCrossIcon.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from '@emotion/react';
+import { Button, Icon } from '@ssa-ui-kit/core';
+
+export const SearchBoxCrossIcon = ({
+  onClick,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const theme = useTheme();
+  return (
+    <Button
+      onClick={onClick}
+      variant="custom"
+      data-testid="cross-icon"
+      css={{
+        padding: 0,
+        background: 'none',
+        '& svg path': {
+          strokeWidth: 1,
+          stroke: theme.colors.greyFilterIcon,
+        },
+      }}>
+      <Icon name="cross" size={15} color="#55575A" />
+    </Button>
+  );
+};

package/src/components/SearchBox/SearchBoxInput.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { Input } from '@ssa-ui-kit/core';
+
+export const SearchBoxInput = styled(Input)`
+  height: 40px;
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.colors.greyLighter};
+  border: 1px solid #dee0e8;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  &::placeholder {
+    color: #55575a;
+    font-weight: 500;
+  }
+  &:hover {
+    border: ${({ theme }) => `1px solid ${theme.colors.greyDropdownFocused}`};
+  }
+  & + div {
+    right: 23px;
+  }
+`;

package/src/components/SearchBox/SearchBoxWrapper.tsx

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const SearchBoxWrapper = styled.div`
+  width: 180px;
+  height: 40px;
+`;

package/src/components/SearchBox/index.ts

@@ -0,0 +1,4 @@
+export { SearchBox } from './SearchBox';
+export { SearchBoxCrossIcon } from './SearchBoxCrossIcon';
+export { SearchBoxInput } from './SearchBoxInput';
+export { SearchBoxWrapper } from './SearchBoxWrapper';

package/src/components/SearchBox/stories/SearchBox.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SearchBox } from '..';
+import { StoryComponent } from './StoryComponent';
+
+type SearchBoxType = typeof SearchBox;
+
+export default {
+  title: 'Widgets/SearchBox',
+  component: SearchBox,
+  argTypes: {},
+} as Meta<SearchBoxType>;
+
+export const Default: StoryObj<SearchBoxType> = () => <StoryComponent />;
+
+Default.args = {};

package/src/components/SearchBox/stories/StoryComponent.tsx

@@ -0,0 +1,25 @@
+import { FieldValues, useForm } from 'react-hook-form';
+
+import { SearchBox } from '..';
+
+export const StoryComponent = ({
+  handleCallback,
+}: {
+  handleCallback?: (searchTerm: string) => void;
+}) => {
+  const { register, control, resetField } = useForm<FieldValues>();
+
+  const onCallback = (searchTerm: string) => {
+    console.log('Searching for the term...', searchTerm);
+  };
+
+  return (
+    <SearchBox
+      register={register}
+      control={control}
+      resetField={resetField}
+      callback={handleCallback || onCallback}
+      name={'search'}
+    />
+  );
+};

package/src/components/SearchBox/types.ts

@@ -0,0 +1,9 @@
+import { InputProps } from '@ssa-ui-kit/core/dist/components/Input/types';
+import { UseFormReturn } from 'react-hook-form';
+
+export type SearchBoxProps = InputProps &
+  Pick<UseFormReturn, 'control' | 'resetField'> & {
+    callback: (searchTerm: string) => void;
+    callbackDelay?: number;
+    autoSearchTrigger?: boolean;
+  };

package/src/components/StepsCounter/StepsCounter.spec.tsx

@@ -0,0 +1,14 @@
+import { screen } from '../../../customTest';
+import StepsCounter from './index';
+
+describe('StepsCounter', () => {
+  it('Render component with correct %', () => {
+    render(<StepsCounter max={3000} currentValue={2500} />);
+
+    const progressBar = screen.getByRole('progressbar');
+    const label = screen.getByText(/83% of your goals/i);
+
+    expect(label).toBeInTheDocument();
+    expect(progressBar).toHaveStyle('width: 83%;');
+  });
+});

package/src/components/StepsCounter/StepsCounter.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/react';
+
+import { StepsCounter } from './StepsCounter';
+
+export default {
+  title: 'Widgets/StepsCounter',
+  component: StepsCounter,
+} as Meta<typeof StepsCounter>;
+
+export const Default = {
+  args: {
+    max: 3000,
+    currentValue: 2500,
+    unit: 'L',
+  },
+};

package/src/components/StepsCounter/StepsCounter.tsx

@@ -0,0 +1,74 @@
+import { css, useTheme } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  ProgressBar,
+  Typography,
+  ResponsiveImage,
+} from '@ssa-ui-kit/core';
+
+import { StepsCounterProps } from './types';
+
+/**
+ *
+ * UI Component with a Card that shows the steps count of the user
+ */
+export const StepsCounter = ({ max, currentValue }: StepsCounterProps) => {
+  const theme = useTheme();
+  const percentage = Math.round((currentValue / max) * 100);
+
+  return (
+    <Card
+      css={css`
+        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
+        border-radius: 20px;
+      `}>
+      <CardHeader
+        icon={
+          <ResponsiveImage
+            css={{ filter: `drop-shadow(0 5px 5px ${theme.colors.grey})` }}
+            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_64.png?alt=media&token=22d59e48-da19-448a-98e3-25f396108243 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7 48w"
+            sizes="(min-width: 1440px) 64px, 48px"
+            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7"
+            alt="Steps"
+          />
+        }>
+        <Typography variant="h6" weight="bold">
+          Steps
+        </Typography>
+      </CardHeader>
+
+      <CardContent
+        style={{
+          flexWrap: 'wrap',
+        }}>
+        <div>
+          <span
+            css={css`
+              font-size: 33px;
+              font-weight: bold;
+            `}>
+            {currentValue}
+          </span>
+          <span>Steps</span>
+        </div>
+        <div
+          css={css`
+            width: 100%;
+            margin: 10px 0;
+          `}>
+          <ProgressBar percentage={percentage} color="green" />
+        </div>
+        <Typography
+          variant="body1"
+          css={css`
+            color: ${theme.colors.greyDarker60};
+          `}>
+          {!Number.isNaN(percentage) && `${percentage}% of your goals`}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};