@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/Activity/Activity.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Wrapper,
+  IDropdownOption,
+} from '@ssa-ui-kit/core';
+
+import { ActivityResp } from './types';
+import { contentWrapper } from './styles';
+
+import ActivityItem from './ActivityItem';
+import { DropdownOption } from '@ssa-ui-kit/core';
+import { Dropdown } from '@ssa-ui-kit/core';
+
+export const Activity = ({ data }: { data: ActivityResp }) => {
+  const [selected, setSelected] = useState<string>('');
+  const [options, setOptions] = useState<IDropdownOption[]>([]);
+
+  useEffect(() => {
+    if (data == null || typeof data !== 'object') {
+      return;
+    }
+
+    setOptions(
+      Object.keys(data).map((item, index) => ({
+        id: index,
+        value: `${item.charAt(0).toUpperCase()}${item.slice(1)}`,
+      })),
+    );
+  }, [data]);
+
+  useEffect(() => {
+    if (options?.length > 0 && !selected) {
+      handleChange(options[0]);
+    }
+  }, [options]);
+
+  const handleChange = (e: IDropdownOption) => {
+    const value = e.value.toString().toLowerCase();
+
+    setSelected(value);
+  };
+
+  return (
+    <Card
+      css={css`
+        border-radius: 20px;
+        padding-inline: 24px;
+        padding-block: 24px;
+      `}>
+      <CardHeader>
+        <Typography variant="h3" weight="bold">
+          Activity
+        </Typography>
+
+        {options?.length > 0 && (
+          <Dropdown selectedItem={options[0]} onChange={handleChange}>
+            {options.map((item, index) => (
+              <DropdownOption key={index} value={item.value} />
+            ))}
+          </Dropdown>
+        )}
+      </CardHeader>
+      <CardContent
+        css={css`
+          width: 100%;
+          flex-direction: column;
+        `}>
+        <Wrapper css={contentWrapper}>
+          {Array.isArray(data[selected]) &&
+            data[selected].map((item, index) => (
+              <ActivityItem key={index} {...item} />
+            ))}
+        </Wrapper>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/Activity/ActivityItem.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+
+import { Typography, ProgressBar, ProgressVertical } from '@ssa-ui-kit/core';
+
+import { dateFormatters } from '@ssa-ui-kit/utils';
+
+import { ActivityItemProps } from './types';
+
+const { printDayOfTheWeek } = dateFormatters;
+
+const container = css`
+  display: flex;
+
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  height: 162px;
+  gap: 10px;
+
+  font-size: 11px;
+`;
+
+const ActivityItem = ({ currentValue, date }: ActivityItemProps) => {
+  return (
+    <div css={container}>
+      <ProgressVertical>
+        <ProgressBar percentage={currentValue} color="yellow" />
+      </ProgressVertical>
+
+      <Typography variant="subtitle">
+        {printDayOfTheWeek(new Date(date).getDay())}
+      </Typography>
+    </div>
+  );
+};
+
+export default ActivityItem;

package/src/components/Activity/index.tsx

@@ -0,0 +1,2 @@
+export { Activity as default } from './Activity';
+export * from './types';

package/src/components/Activity/mockActivityRequest.ts

@@ -0,0 +1,106 @@
+import { ActivityResp } from './types';
+
+export const mealActivityData: ActivityResp = {
+  walking: [
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Sun',
+      max: 100,
+      currentValue: 83,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Mon',
+      max: 100,
+      currentValue: 53,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Tue',
+      max: 100,
+      currentValue: 54,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Wed',
+      max: 100,
+      currentValue: 49,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Thu',
+      max: 100,
+      currentValue: 70,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Fri',
+      max: 100,
+      currentValue: 8,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Sat',
+      max: 100,
+      currentValue: 90,
+    },
+  ],
+  cycling: [
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Sun',
+      max: 100,
+      currentValue: 38,
+    },
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Mon',
+      max: 100,
+      currentValue: 35,
+    },
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Tue',
+      max: 100,
+      currentValue: 45,
+    },
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Wed',
+      max: 100,
+      currentValue: 94,
+    },
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Thu',
+      max: 100,
+      currentValue: 7,
+    },
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Fri',
+      max: 100,
+      currentValue: 30,
+    },
+    {
+      activity: 'cycling',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Sat',
+      max: 100,
+      currentValue: 55,
+    },
+  ],
+};

package/src/components/Activity/styles.ts

@@ -0,0 +1,12 @@
+import { Theme, css } from '@emotion/react';
+
+export const contentWrapper = (theme: Theme) => css`
+  justify-content: center;
+  gap: 20px;
+  flex-direction: row;
+  max-width: 380px;
+
+  ${theme.mediaQueries.md} {
+    gap: 30px;
+  }
+`;

package/src/components/Activity/types.ts

@@ -0,0 +1,10 @@
+export interface ActivityItemProps {
+  id?: string;
+  activity: string;
+  date: string;
+  day?: string;
+  max: number;
+  currentValue: number;
+}
+
+export type ActivityResp = { [key: string]: ActivityItemProps[] };

package/src/components/AddNewAccountCard/AddNewAccountCard.spec.tsx

@@ -0,0 +1,39 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { AddNewAccountCard } from './AddNewAccountCard';
+
+describe('AddNewAccountCard', () => {
+  it('Renders with onClick and button element', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole } = render(
+      <AddNewAccountCard onClick={mockOnClick}>Text</AddNewAccountCard>,
+    );
+
+    const buttonEl = getByRole('button', {
+      name: new RegExp('Text', 'i'),
+    });
+
+    await user.click(buttonEl);
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('Renders with link element', () => {
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={<AddNewAccountCard link="/link">Text</AddNewAccountCard>}
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const linkEl = getByRole('link', {
+      name: new RegExp('Text', 'i'),
+    });
+
+    expect(linkEl).toHaveAttribute('href', '/link');
+  });
+});

package/src/components/AddNewAccountCard/AddNewAccountCard.stories.tsx

@@ -0,0 +1,48 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { AddNewAccountCard } from './AddNewAccountCard';
+import { Icon, mainTheme } from '@ssa-ui-kit/core';
+
+export default {
+  title: 'Widgets/AddNewAccountCard',
+  component: AddNewAccountCard,
+} as Meta<typeof AddNewAccountCard>;
+
+export const Default: StoryObj<typeof AddNewAccountCard> = () => {
+  return (
+    <div css={{ width: '100%', maxWidth: '500px' }}>
+      <AddNewAccountCard onClick={() => alert('Clicked!')}>
+        <Icon name="plus" size={12} color={mainTheme.colors.blueRoyal} />
+        Add new account
+      </AddNewAccountCard>
+    </div>
+  );
+};
+
+Default.args = {};
+
+export const WithLink: StoryObj<typeof AddNewAccountCard> = () => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <div css={{ width: '100%', maxWidth: '500px' }}>
+              <AddNewAccountCard link="/link">
+                <Icon
+                  name="plus"
+                  size={12}
+                  color={mainTheme.colors.blueRoyal}
+                />
+                Add new account
+              </AddNewAccountCard>
+            </div>
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {};

package/src/components/AddNewAccountCard/AddNewAccountCard.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import { Card } from '@ssa-ui-kit/core';
+import { AddNewAccountCardProps } from './types';
+import { AccountCard } from './styles';
+
+export const AddNewAccountCard = ({
+  children,
+  link,
+  onClick,
+}: AddNewAccountCardProps) => {
+  return link ? (
+    <Link css={{ textDecoration: 'none' }} to={link} onClick={onClick}>
+      <Card css={AccountCard} noShadow>
+        {children}
+      </Card>
+    </Link>
+  ) : (
+    <Card css={AccountCard} noShadow onClick={onClick}>
+      {children}
+    </Card>
+  );
+};

package/src/components/AddNewAccountCard/index.ts

@@ -0,0 +1,2 @@
+export { AddNewAccountCard } from './AddNewAccountCard';
+export * from './types';

package/src/components/AddNewAccountCard/styles.ts

@@ -0,0 +1,29 @@
+import { Theme, css } from '@emotion/react';
+
+export const AccountCard = (theme: Theme) => css`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 21px 10px;
+  color: ${theme.colors.blueRoyal};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0;
+  border-radius: 20px;
+  padding: 21px 0;
+  background: ${theme.colors.greyLighter};
+  border: 1px solid ${theme.colors.white};
+  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
+  transition: 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid ${theme.colors.white};
+    background: ${theme.colors.greyLighter};
+    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
+  }
+`;

package/src/components/AddNewAccountCard/types.ts

@@ -0,0 +1,7 @@
+import { To } from 'react-router-dom';
+
+export interface AddNewAccountCardProps {
+  children: React.ReactNode;
+  link?: To;
+  onClick?: () => void;
+}

package/src/components/Bmi/Bmi.spec.tsx

@@ -0,0 +1,68 @@
+import { screen } from '../../../customTest';
+import Bmi from './index';
+
+describe('BMI', () => {
+  it('Render BMI with default values', () => {
+    render(<Bmi />);
+
+    const calculation = screen.queryByRole('heading', { name: /21.6/i });
+    const info = screen.queryByRole('heading', { name: /you're healthy/i });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 40%;');
+  });
+
+  it('BMI status healthy', () => {
+    render(<Bmi height={180} weight={66} />);
+
+    const calculation = screen.queryByRole('heading', { name: /20.4/i });
+    const info = screen.queryByRole('heading', { name: /you're healthy/i });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 40%;');
+  });
+
+  it('BMI status under weight', () => {
+    render(<Bmi height={175} weight={46} />);
+
+    const calculation = screen.queryByRole('heading', { name: /18.5/ });
+    const info = screen.queryByRole('heading', {
+      name: /you're under weight/i,
+    });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 10%;');
+  });
+
+  it('BMI status overweight', () => {
+    render(<Bmi height={175} weight={86} />);
+
+    const calculation = screen.queryByRole('heading', { name: /28.1/i });
+    const info = screen.queryByRole('heading', {
+      name: /you're overweight/i,
+    });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 70%;');
+  });
+
+  it('BMI status obese', () => {
+    render(<Bmi height={175} weight={106} />);
+
+    const calculation = screen.queryByRole('heading', { name: /34.6/i });
+    const info = screen.queryByRole('heading', { name: /you're obese/i });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 90%;');
+  });
+});

package/src/components/Bmi/Bmi.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta } from '@storybook/react';
+
+import Bmi from './index';
+
+export default {
+  title: 'Widgets/BMI',
+  component: Bmi,
+} as Meta<typeof Bmi>;
+
+export const Default = {};

package/src/components/Bmi/Bmi.tsx

@@ -0,0 +1,96 @@
+import { Fragment, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+
+import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
+
+import { BmiHeatbar } from './BmiHeatbar';
+import { BmiPointer } from './BmiPointer';
+import { BmiInfo } from './BmiInfo';
+import { BmiLabels } from './BmiLabels';
+
+import { ContentWrapper, TitleWrapper } from './styles';
+import { BmiProps } from './types';
+
+/**
+ *
+ * UI Component that calculates the Body Mass Index of the user
+ */
+export const Bmi = ({ height = 175, weight = 66 }: BmiProps) => {
+  const [info, setInfo] = useState('');
+  const [pointer, setPointer] = useState(0);
+
+  const bmi = Number(((weight / (height * height)) * 10000).toFixed(1));
+
+  const setInfos = {
+    underWeight: () => {
+      setInfo('Under Weight');
+      setPointer(10);
+    },
+    healthy: () => {
+      setInfo('Healthy');
+      setPointer(40);
+    },
+    overweight: () => {
+      setInfo('Overweight');
+      setPointer(70);
+    },
+    obese: () => {
+      setInfo('Obese');
+      setPointer(90);
+    },
+  };
+
+  useEffect(() => {
+    if (bmi < 18.5) {
+      setInfos.underWeight();
+    } else if (bmi > 18.5 && bmi <= 24.9) {
+      setInfos.healthy();
+    } else if (bmi > 24.9 && bmi < 30) {
+      setInfos.overweight();
+    } else {
+      setInfos.obese();
+    }
+  }, [bmi]);
+
+  return (
+    <Fragment>
+      <CardHeader transparent>
+        <div css={TitleWrapper}>
+          <Typography variant="h5" weight="bold">
+            BMI{' '}
+          </Typography>
+          <Typography variant="h6">Body Mass Index</Typography>
+        </div>
+      </CardHeader>
+
+      <Card
+        css={css`
+          box-shadow: 0 10px 40px rgba(29, 22, 23, 0.07);
+          border-radius: 16px;
+          padding-bottom: 40px;
+        `}>
+        <CardHeader>
+          <Typography variant="h2" weight="medium">
+            {bmi}
+          </Typography>
+          <BmiInfo>
+            <Typography variant="subtitle" weight="lighter">
+              You&apos;re {info}
+            </Typography>
+          </BmiInfo>
+        </CardHeader>
+
+        <CardContent
+          css={css`
+            width: 100%;
+          `}>
+          <div css={ContentWrapper}>
+            <BmiPointer data-testid="bmi-pointer" percentage={pointer} />
+            <BmiHeatbar />
+            <BmiLabels />
+          </div>
+        </CardContent>
+      </Card>
+    </Fragment>
+  );
+};

package/src/components/Bmi/BmiHeatbar.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export const BmiHeatbar = styled.div`
+  width: 100%;
+  height: 14px;
+
+  background: linear-gradient(
+    90deg,
+    #8b60f4 0%,
+    #658fdf 16.67%,
+    #69cdd0 35.42%,
+    #88e4c3 51.04%,
+    #edba5d 68.23%,
+    #ed8f66 84.38%,
+    #f28689 100%
+  );
+  border-radius: 21px;
+`;

package/src/components/Bmi/BmiInfo.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const BmiInfo = styled.div`
+  display: flex;
+
+  padding: 8px 16px;
+  background: ${({ theme }) => theme.colors.greyLighter};
+  border-radius: 12px;
+
+  align-items: center;
+`;

package/src/components/Bmi/BmiLabel.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+import { Typography } from '@ssa-ui-kit/core';
+
+export const BmiLabel = styled(Typography)`
+  position: absolute;
+
+  left: 65%;
+`;

package/src/components/Bmi/BmiLabels.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+
+import { BmiLabel } from './BmiLabel';
+
+export const BmiLabels = () => (
+  <div
+    css={css`
+      position: relative;
+      margin-top: 5px;
+    `}>
+    <BmiLabel
+      variant={'subtitle'}
+      css={css`
+        left: 20%;
+      `}>
+      18.5
+    </BmiLabel>
+    <BmiLabel
+      variant={'subtitle'}
+      css={css`
+        left: 60%;
+      `}>
+      25
+    </BmiLabel>
+    <BmiLabel
+      variant={'subtitle'}
+      css={css`
+        left: 80%;
+      `}>
+      30
+    </BmiLabel>
+  </div>
+);

package/src/components/Bmi/BmiPointer.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const BmiPointer = styled.div<{ percentage: number }>`
+  position: absolute;
+
+  left: ${({ percentage }) => percentage}%;
+  top: 0;
+
+  width: 14px;
+  height: 14px;
+
+  background: #2b2d31;
+  box-shadow: -4px 4px 10px rgba(42, 48, 57, 0.2);
+  border-radius: 19px;
+`;

package/src/components/Bmi/index.tsx

@@ -0,0 +1,2 @@
+export { Bmi as default } from './Bmi';
+export * from './types';