@ssa-ui-kit/widgets 0.0.14-alpha → 0.0.16-alpha

package/src/components/Activity/Activity.tsx

@@ -1,83 +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>
-  );
-};
+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

@@ -1,38 +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;
+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

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

package/src/components/Activity/mockActivityRequest.ts

@@ -1,106 +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,
-    },
-  ],
-};
+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

@@ -1,12 +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;
-  }
-`;
+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

@@ -1,10 +1,10 @@
-export interface ActivityItemProps {
-  id?: string;
-  activity: string;
-  date: string;
-  day?: string;
-  max: number;
-  currentValue: number;
-}
-
-export type ActivityResp = { [key: string]: ActivityItemProps[] };
+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

@@ -1,39 +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');
-  });
-});
+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');
+  });
+});