@ssa-ui-kit/widgets 0.0.11-alpha → 0.0.13-alpha

package/src/components/LinksTabBar/LinksTabBarBase.tsx

@@ -1,36 +1,36 @@
-import styled from '@emotion/styled';
-import { styleUtils } from '@ssa-ui-kit/core';
-
-export const LinksTabBarBase = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  a {
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding: 8px 4px;
-    font-size: 14px;
-    text-decoration: none;
-    color: ${({ theme }) => theme.colors.greyDropdownFocused};
-  }
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    a {
-      font-size: 18px;
-    }
-  }
-
-  a.active {
-    font-weight: 700;
-    color: ${({ theme }) => theme.colors.greyDarker};
-    text-decoration: underline solid #2f6ce3;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 8px;
-  }
-
-  a:focus-visible::before {
-    ${({ theme }) => styleUtils.outlineStyles(theme, 'grey40', '6px', 'dashed')}
-  }
-`;
+import styled from '@emotion/styled';
+import { styleUtils } from '@ssa-ui-kit/core';
+
+export const LinksTabBarBase = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  a {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 8px 4px;
+    font-size: 14px;
+    text-decoration: none;
+    color: ${({ theme }) => theme.colors.greyDropdownFocused};
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    a {
+      font-size: 18px;
+    }
+  }
+
+  a.active {
+    font-weight: 700;
+    color: ${({ theme }) => theme.colors.greyDarker};
+    text-decoration: underline solid #2f6ce3;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 8px;
+  }
+
+  a:focus-visible::before {
+    ${({ theme }) => styleUtils.outlineStyles(theme, 'grey40', '6px', 'dashed')}
+  }
+`;

package/src/components/LinksTabBar/index.ts

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

package/src/components/LinksTabBar/stories/decorators.tsx

@@ -1,34 +1,34 @@
-import { MemoryRouter, Route, Routes, Outlet } from 'react-router-dom';
-import { links } from './mockData';
-
-export const RoutePlaceholder = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => <div>Current route: {children}</div>;
-
-export const MemoryRouterDecorator = (Component: React.ElementType) => (
-  <div style={{ width: '591px', padding: '10px' }}>
-    <MemoryRouter initialEntries={[links[0].to]}>
-      <Routes>
-        <Route
-          element={
-            <div>
-              <Component />
-              <div style={{ marginTop: '25px' }}>
-                <Outlet />
-              </div>
-            </div>
-          }>
-          {links.map((link, index) => (
-            <Route
-              key={index}
-              path={link.to}
-              element={<RoutePlaceholder>{link.children}</RoutePlaceholder>}
-            />
-          ))}
-        </Route>
-      </Routes>
-    </MemoryRouter>
-  </div>
-);
+import { MemoryRouter, Route, Routes, Outlet } from 'react-router-dom';
+import { links } from './mockData';
+
+export const RoutePlaceholder = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <div>Current route: {children}</div>;
+
+export const MemoryRouterDecorator = (Component: React.ElementType) => (
+  <div style={{ width: '591px', padding: '10px' }}>
+    <MemoryRouter initialEntries={[links[0].to]}>
+      <Routes>
+        <Route
+          element={
+            <div>
+              <Component />
+              <div style={{ marginTop: '25px' }}>
+                <Outlet />
+              </div>
+            </div>
+          }>
+          {links.map((link, index) => (
+            <Route
+              key={index}
+              path={link.to}
+              element={<RoutePlaceholder>{link.children}</RoutePlaceholder>}
+            />
+          ))}
+        </Route>
+      </Routes>
+    </MemoryRouter>
+  </div>
+);

package/src/components/LinksTabBar/stories/mockData.ts

@@ -1,27 +1,27 @@
-export const links = [
-  {
-    id: 'information',
-    to: '/information',
-    children: 'Information',
-  },
-  {
-    id: 'configuration',
-    to: '/configuration',
-    children: 'Configuration',
-  },
-  {
-    id: 'logs',
-    to: '/logs',
-    children: 'Logs',
-  },
-  {
-    id: 'history',
-    to: '/history',
-    children: 'History',
-  },
-  {
-    id: 'monitor',
-    to: '/monitor',
-    children: 'Monitor',
-  },
-];
+export const links = [
+  {
+    id: 'information',
+    to: '/information',
+    children: 'Information',
+  },
+  {
+    id: 'configuration',
+    to: '/configuration',
+    children: 'Configuration',
+  },
+  {
+    id: 'logs',
+    to: '/logs',
+    children: 'Logs',
+  },
+  {
+    id: 'history',
+    to: '/history',
+    children: 'History',
+  },
+  {
+    id: 'monitor',
+    to: '/monitor',
+    children: 'Monitor',
+  },
+];

package/src/components/LinksTabBar/types.ts

@@ -1,12 +1,12 @@
-import { SerializedStyles } from '@emotion/react';
-import type { NavLinkProps } from 'react-router-dom';
-import { CommonProps } from '@ssa-ui-kit/core';
-
-export interface TabBarLink extends NavLinkProps {
-  id: string;
-  css?: SerializedStyles;
-}
-
-export interface LinksTabBarProps extends CommonProps {
-  links: Array<TabBarLink>;
-}
+import { SerializedStyles } from '@emotion/react';
+import type { NavLinkProps } from 'react-router-dom';
+import { CommonProps } from '@ssa-ui-kit/core';
+
+export interface TabBarLink extends NavLinkProps {
+  id: string;
+  css?: SerializedStyles;
+}
+
+export interface LinksTabBarProps extends CommonProps {
+  links: Array<TabBarLink>;
+}

package/src/components/ListGoals/ListGoals.spec.tsx

@@ -1,82 +1,82 @@
-import type { MainColors } from '@ssa-ui-kit/core';
-import { screen } from '../../../customTest';
-
-import ListGoals from './index';
-
-describe('ListGoals', () => {
-  it('Render component', async () => {
-    render(
-      <ListGoals
-        goals={[
-          {
-            id: 'lifting_weights',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
-            title: 'Lifting weights',
-            details: 'Goal 25 kg | 20 kg',
-            completion: 79,
-            color: 'yellow' as keyof MainColors,
-          },
-          {
-            id: 'running',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
-            title: 'Running',
-            details: 'Goal 25 km | 19,7 km',
-            completion: 79,
-            color: 'pink' as keyof MainColors,
-          },
-        ]}
-      />,
-    );
-
-    const list = await screen.findAllByRole('listitem');
-    const itemA = await screen.findByText('Lifting weights');
-    const itemB = await screen.findByText('Running');
-
-    expect(list.length).toBe(2);
-    expect(itemA).toBeInTheDocument();
-    expect(itemB).toBeInTheDocument();
-  });
-
-  it('Render using default props values', async () => {
-    const mockData = [
-      {
-        id: 'lifting_weights',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
-        title: 'Lifting weights',
-        details: 'Goal 25 kg | 20 kg',
-      },
-      {
-        id: 'running',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
-        title: 'Running',
-        details: 'Goal 25 km | 19,7 km',
-      },
-    ];
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    render(<ListGoals goals={mockData} />);
-
-    const list = await screen.findAllByRole('listitem');
-    const itemA = await screen.findByText('Lifting weights');
-    const itemB = await screen.findByText('Running');
-
-    expect(list.length).toBe(2);
-    expect(itemA).toBeInTheDocument();
-    expect(itemB).toBeInTheDocument();
-  });
-
-  it('should not render a list if no data', async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    render(<ListGoals goals={null} />);
-
-    const list = await screen.queryAllByRole('listitem');
-
-    expect(list.length).toBe(0);
-  });
-});
+import type { MainColors } from '@ssa-ui-kit/core';
+import { screen } from '../../../customTest';
+
+import ListGoals from './index';
+
+describe('ListGoals', () => {
+  it('Render component', async () => {
+    render(
+      <ListGoals
+        goals={[
+          {
+            id: 'lifting_weights',
+            image:
+              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
+            title: 'Lifting weights',
+            details: 'Goal 25 kg | 20 kg',
+            completion: 79,
+            color: 'yellow' as keyof MainColors,
+          },
+          {
+            id: 'running',
+            image:
+              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
+            title: 'Running',
+            details: 'Goal 25 km | 19,7 km',
+            completion: 79,
+            color: 'pink' as keyof MainColors,
+          },
+        ]}
+      />,
+    );
+
+    const list = await screen.findAllByRole('listitem');
+    const itemA = await screen.findByText('Lifting weights');
+    const itemB = await screen.findByText('Running');
+
+    expect(list.length).toBe(2);
+    expect(itemA).toBeInTheDocument();
+    expect(itemB).toBeInTheDocument();
+  });
+
+  it('Render using default props values', async () => {
+    const mockData = [
+      {
+        id: 'lifting_weights',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
+        title: 'Lifting weights',
+        details: 'Goal 25 kg | 20 kg',
+      },
+      {
+        id: 'running',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
+        title: 'Running',
+        details: 'Goal 25 km | 19,7 km',
+      },
+    ];
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    render(<ListGoals goals={mockData} />);
+
+    const list = await screen.findAllByRole('listitem');
+    const itemA = await screen.findByText('Lifting weights');
+    const itemB = await screen.findByText('Running');
+
+    expect(list.length).toBe(2);
+    expect(itemA).toBeInTheDocument();
+    expect(itemB).toBeInTheDocument();
+  });
+
+  it('should not render a list if no data', async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    render(<ListGoals goals={null} />);
+
+    const list = await screen.queryAllByRole('listitem');
+
+    expect(list.length).toBe(0);
+  });
+});

package/src/components/ListGoals/ListGoals.stories.tsx

@@ -1,58 +1,58 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MainColors } from '@ssa-ui-kit/core';
-
-import { ListGoals } from './ListGoals';
-
-export default {
-  title: 'Widgets/ListGoals',
-  component: ListGoals,
-} as Meta<typeof ListGoals>;
-
-export const Default: StoryObj<typeof ListGoals> = () => {
-  const goals = [
-    {
-      id: 'lifting_weights',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
-      title: 'Lifting weights',
-      details: 'Goal 25 kg | 20 kg',
-      completion: 79,
-      color: 'yellow' as keyof MainColors,
-    },
-    {
-      id: 'running',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
-      title: 'Running',
-      details: 'Goal 25 km | 19,7 km',
-      completion: 79,
-      color: 'pink' as keyof MainColors,
-    },
-    {
-      id: 'sleeping',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmoon%2Fmoon_42.png?alt=media&token=b279625d-091d-4dc2-9f0f-e670e1072174',
-      title: 'Sleeping',
-      details: 'Goal 8 hrs | 6 hrs',
-      completion: 60,
-      color: 'blue' as keyof MainColors,
-    },
-    {
-      id: 'weight_loss',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fscales%2Fscales_42.png?alt=media&token=4f4c198b-7120-4e2f-a4b4-5602243eb732',
-      title: 'Weight Loss',
-      details: 'Goal 10 kg | 4 kg',
-      completion: 40,
-      color: 'purple' as keyof MainColors,
-    },
-  ];
-
-  return (
-    <div style={{ background: '#f1f1f1', padding: 20 }}>
-      <ListGoals goals={goals} />
-    </div>
-  );
-};
-
-Default.storyName = 'ListGoals';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MainColors } from '@ssa-ui-kit/core';
+
+import { ListGoals } from './ListGoals';
+
+export default {
+  title: 'Widgets/ListGoals',
+  component: ListGoals,
+} as Meta<typeof ListGoals>;
+
+export const Default: StoryObj<typeof ListGoals> = () => {
+  const goals = [
+    {
+      id: 'lifting_weights',
+      image:
+        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
+      title: 'Lifting weights',
+      details: 'Goal 25 kg | 20 kg',
+      completion: 79,
+      color: 'yellow' as keyof MainColors,
+    },
+    {
+      id: 'running',
+      image:
+        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
+      title: 'Running',
+      details: 'Goal 25 km | 19,7 km',
+      completion: 79,
+      color: 'pink' as keyof MainColors,
+    },
+    {
+      id: 'sleeping',
+      image:
+        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmoon%2Fmoon_42.png?alt=media&token=b279625d-091d-4dc2-9f0f-e670e1072174',
+      title: 'Sleeping',
+      details: 'Goal 8 hrs | 6 hrs',
+      completion: 60,
+      color: 'blue' as keyof MainColors,
+    },
+    {
+      id: 'weight_loss',
+      image:
+        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fscales%2Fscales_42.png?alt=media&token=4f4c198b-7120-4e2f-a4b4-5602243eb732',
+      title: 'Weight Loss',
+      details: 'Goal 10 kg | 4 kg',
+      completion: 40,
+      color: 'purple' as keyof MainColors,
+    },
+  ];
+
+  return (
+    <div style={{ background: '#f1f1f1', padding: 20 }}>
+      <ListGoals goals={goals} />
+    </div>
+  );
+};
+
+Default.storyName = 'ListGoals';

package/src/components/ListGoals/ListGoals.tsx

@@ -1,29 +1,29 @@
-import CardList from '@components/CardList';
-
-import { ListGoalsCard } from './ListGoalsCard';
-
-import { IListGoalsProps } from './types';
-
-/**
- *
- * UI Component that uses CardList to render a list of goals
- */
-export const ListGoals = ({ goals }: IListGoalsProps) => {
-  return (
-    <CardList
-      title="Goals"
-      items={goals}
-      renderItem={(goal) => (
-        <ListGoalsCard
-          image={goal.image}
-          title={goal.title}
-          details={goal.details}
-          progressProps={{
-            currentValue: goal.completion,
-            color: goal.color,
-          }}
-        />
-      )}
-    />
-  );
-};
+import CardList from '@components/CardList';
+
+import { ListGoalsCard } from './ListGoalsCard';
+
+import { IListGoalsProps } from './types';
+
+/**
+ *
+ * UI Component that uses CardList to render a list of goals
+ */
+export const ListGoals = ({ goals }: IListGoalsProps) => {
+  return (
+    <CardList
+      title="Goals"
+      items={goals}
+      renderItem={(goal) => (
+        <ListGoalsCard
+          image={goal.image}
+          title={goal.title}
+          details={goal.details}
+          progressProps={{
+            currentValue: goal.completion,
+            color: goal.color,
+          }}
+        />
+      )}
+    />
+  );
+};