@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.3-alpha

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');
+  });
+});

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

@@ -1,48 +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 = {};
+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

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

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

package/src/components/AddNewAccountCard/styles.ts

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

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