@ssa-ui-kit/widgets 0.0.8-alpha → 0.0.10-alpha

package/src/components/MealPlanner/MealPlannerCard.tsx

@@ -1,73 +1,73 @@
-import { css } from '@emotion/react';
-
-import { ProgressBar, Typography, Avatar, Wrapper } from '@ssa-ui-kit/core';
-
-import Marker from './MealPlannerBadge';
-import MealPlannerLegends from './MealPlannerLegends';
-import MealPlannerBars from './MealPlannerBars';
-
-import { MealPlannerCardProps } from './types';
-
-const markerColor = {
-  carbs: 'yellow',
-  protein: 'green',
-  fat: 'blue',
-};
-
-type MarkerColorKeys = keyof typeof markerColor;
-
-export const MealPlannerCard = ({
-  name,
-  image,
-  carbs,
-  protein,
-  fat,
-}: MealPlannerCardProps) => {
-  const listItems = { carbs, protein, fat };
-
-  return (
-    <Wrapper
-      css={{
-        marginTop: '5.6px',
-      }}>
-      <Avatar size={64} image={image} />
-
-      <div
-        css={css`
-          width: calc(100% - 64px);
-          padding-left: 15px;
-        `}>
-        <Typography variant="h6" weight="medium">
-          {name}
-        </Typography>
-
-        <MealPlannerLegends.List>
-          {Object.keys(listItems).map((item) => (
-            <MealPlannerLegends.Item key={item}>
-              <Marker color={markerColor[item as MarkerColorKeys]} />
-
-              <Typography variant="body1">
-                {listItems[item as MarkerColorKeys]}% {item}
-              </Typography>
-            </MealPlannerLegends.Item>
-          ))}
-        </MealPlannerLegends.List>
-
-        <MealPlannerBars>
-          {Object.keys(listItems).map((item) => (
-            <li
-              css={css`
-                width: ${listItems[item as MarkerColorKeys]}%;
-              `}
-              key={item}>
-              <ProgressBar
-                percentage={100}
-                color={markerColor[item as MarkerColorKeys]}
-              />
-            </li>
-          ))}
-        </MealPlannerBars>
-      </div>
-    </Wrapper>
-  );
-};
+import { css } from '@emotion/react';
+
+import { ProgressBar, Typography, Avatar, Wrapper } from '@ssa-ui-kit/core';
+
+import Marker from './MealPlannerBadge';
+import MealPlannerLegends from './MealPlannerLegends';
+import MealPlannerBars from './MealPlannerBars';
+
+import { MealPlannerCardProps } from './types';
+
+const markerColor = {
+  carbs: 'yellow',
+  protein: 'green',
+  fat: 'blue',
+};
+
+type MarkerColorKeys = keyof typeof markerColor;
+
+export const MealPlannerCard = ({
+  name,
+  image,
+  carbs,
+  protein,
+  fat,
+}: MealPlannerCardProps) => {
+  const listItems = { carbs, protein, fat };
+
+  return (
+    <Wrapper
+      css={{
+        marginTop: '5.6px',
+      }}>
+      <Avatar size={64} image={image} />
+
+      <div
+        css={css`
+          width: calc(100% - 64px);
+          padding-left: 15px;
+        `}>
+        <Typography variant="h6" weight="medium">
+          {name}
+        </Typography>
+
+        <MealPlannerLegends.List>
+          {Object.keys(listItems).map((item) => (
+            <MealPlannerLegends.Item key={item}>
+              <Marker color={markerColor[item as MarkerColorKeys]} />
+
+              <Typography variant="body1">
+                {listItems[item as MarkerColorKeys]}% {item}
+              </Typography>
+            </MealPlannerLegends.Item>
+          ))}
+        </MealPlannerLegends.List>
+
+        <MealPlannerBars>
+          {Object.keys(listItems).map((item) => (
+            <li
+              css={css`
+                width: ${listItems[item as MarkerColorKeys]}%;
+              `}
+              key={item}>
+              <ProgressBar
+                percentage={100}
+                color={markerColor[item as MarkerColorKeys]}
+              />
+            </li>
+          ))}
+        </MealPlannerBars>
+      </div>
+    </Wrapper>
+  );
+};

package/src/components/MealPlanner/MealPlannerLegends.tsx

@@ -1,22 +1,22 @@
-import styled from '@emotion/styled';
-
-const MealPlannerLegends = {
-  List: styled.ul`
-    display: flex;
-    justify-content: space-between;
-    list-style: none;
-
-    width: 100%;
-    height: 20px;
-
-    padding: 0;
-    margin: 0;
-    margin-bottom: 8px;
-  `,
-  Item: styled.li`
-    display: flex;
-    align-items: center;
-  `,
-};
-
-export default MealPlannerLegends;
+import styled from '@emotion/styled';
+
+const MealPlannerLegends = {
+  List: styled.ul`
+    display: flex;
+    justify-content: space-between;
+    list-style: none;
+
+    width: 100%;
+    height: 20px;
+
+    padding: 0;
+    margin: 0;
+    margin-bottom: 8px;
+  `,
+  Item: styled.li`
+    display: flex;
+    align-items: center;
+  `,
+};
+
+export default MealPlannerLegends;

package/src/components/MealPlanner/index.ts

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

package/src/components/MealPlanner/mockMealPlannerRequest.ts

@@ -1,70 +1,70 @@
-import { MealPlannerItem } from './types';
-type MealPlannerResp = { [key: string]: MealPlannerItem };
-
-export const mealPlannerData: MealPlannerResp = {
-  breakfast: {
-    time: '8:00 AM',
-    data: [
-      {
-        id: 1,
-        name: 'Avocado salad',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Favocado%2Favocado_64.png?alt=media&token=daa461dd-085c-4542-a5d4-c83a0a8efb4c',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-      {
-        id: 2,
-        name: 'Almond milk',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmilk%2Fmilk_64.png?alt=media&token=88ab4b5d-1c1f-43e5-849f-1dbf71c5dc8b',
-        calories: 300,
-        carbs: 40,
-        protein: 20,
-        fat: 40,
-      },
-      {
-        id: 3,
-        name: 'Blueberry',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fblueberry%2Fblueberry_64.png?alt=media&token=ab7c1d58-9743-478e-bcf8-aa7726ccbe78',
-        calories: 300,
-        carbs: 40,
-        protein: 30,
-        fat: 30,
-      },
-    ],
-  },
-  lunch: {
-    time: '1:00 PM',
-    data: [
-      {
-        id: 4,
-        name: 'Beef steak',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteak%2Fsteak_64.png?alt=media&token=44f02ad7-9a56-4839-aa00-e50ff44a14aa',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-    ],
-  },
-  dinner: {
-    time: '7:00 PM',
-    data: [
-      {
-        id: 5,
-        name: 'Soup',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsoup%2Fsoup_64.png?alt=media&token=fb2a8b51-a735-4669-8cdc-c2d52b23b114',
-        calories: 300,
-        carbs: 30,
-        protein: 30,
-        fat: 40,
-      },
-    ],
-  },
-};
+import { MealPlannerItem } from './types';
+type MealPlannerResp = { [key: string]: MealPlannerItem };
+
+export const mealPlannerData: MealPlannerResp = {
+  breakfast: {
+    time: '8:00 AM',
+    data: [
+      {
+        id: 1,
+        name: 'Avocado salad',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Favocado%2Favocado_64.png?alt=media&token=daa461dd-085c-4542-a5d4-c83a0a8efb4c',
+        calories: 300,
+        carbs: 10,
+        protein: 50,
+        fat: 40,
+      },
+      {
+        id: 2,
+        name: 'Almond milk',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmilk%2Fmilk_64.png?alt=media&token=88ab4b5d-1c1f-43e5-849f-1dbf71c5dc8b',
+        calories: 300,
+        carbs: 40,
+        protein: 20,
+        fat: 40,
+      },
+      {
+        id: 3,
+        name: 'Blueberry',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fblueberry%2Fblueberry_64.png?alt=media&token=ab7c1d58-9743-478e-bcf8-aa7726ccbe78',
+        calories: 300,
+        carbs: 40,
+        protein: 30,
+        fat: 30,
+      },
+    ],
+  },
+  lunch: {
+    time: '1:00 PM',
+    data: [
+      {
+        id: 4,
+        name: 'Beef steak',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteak%2Fsteak_64.png?alt=media&token=44f02ad7-9a56-4839-aa00-e50ff44a14aa',
+        calories: 300,
+        carbs: 10,
+        protein: 50,
+        fat: 40,
+      },
+    ],
+  },
+  dinner: {
+    time: '7:00 PM',
+    data: [
+      {
+        id: 5,
+        name: 'Soup',
+        image:
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsoup%2Fsoup_64.png?alt=media&token=fb2a8b51-a735-4669-8cdc-c2d52b23b114',
+        calories: 300,
+        carbs: 30,
+        protein: 30,
+        fat: 40,
+      },
+    ],
+  },
+};

package/src/components/MealPlanner/types.ts

@@ -1,21 +1,21 @@
-export interface MealPlannerCardProps {
-  name: string;
-  image: string;
-  calories: number;
-  carbs: number;
-  protein: number;
-  fat: number;
-}
-
-export type MealPlannerData = MealPlannerCardProps & { id: number };
-
-export interface MealPlannerItem {
-  time: string;
-  data: Array<MealPlannerData>;
-}
-
-export interface MealPlannerProps {
-  data: {
-    [mealName: string]: MealPlannerItem;
-  };
-}
+export interface MealPlannerCardProps {
+  name: string;
+  image: string;
+  calories: number;
+  carbs: number;
+  protein: number;
+  fat: number;
+}
+
+export type MealPlannerData = MealPlannerCardProps & { id: number };
+
+export interface MealPlannerItem {
+  time: string;
+  data: Array<MealPlannerData>;
+}
+
+export interface MealPlannerProps {
+  data: {
+    [mealName: string]: MealPlannerItem;
+  };
+}

package/src/components/NavBar/NavBar.e2e.ts

@@ -1,64 +1,64 @@
-import { test, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-test.describe.configure({ mode: 'serial' });
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-navbar-opened__`;
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?id=widgets-navbar--default&viewMode=story',
-  );
-};
-
-const clickAndWaitForAnimationEnd = async (page: Page) => {
-  await page.locator('#storybook-root div').nth(1).click();
-  await page
-    .locator('div[class*="NavBarWrapper"]')
-    .evaluate((element) =>
-      Promise.all(
-        element.getAnimations().map((animation) => animation.finished),
-      ),
-    );
-};
-
-test('[1920] Widgets: NavBar should be visible', async ({ page }) => {
-  await page.setViewportSize(SCREEN_SIZES[1920]);
-  await gotoPage(page);
-  await page.locator('nav ul');
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
-  });
-});
-
-test('[1440] Widgets: NavBar should be visible', async ({ page }) => {
-  await page.setViewportSize(SCREEN_SIZES[1440]);
-  await gotoPage(page);
-  await page.locator('nav ul');
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w1440px].png`,
-  });
-});
-
-test('[900] Widgets: NavBar should be visible after icon clicking', async ({
-  page,
-}) => {
-  await page.setViewportSize(SCREEN_SIZES[900]);
-  await gotoPage(page);
-  await clickAndWaitForAnimationEnd(page);
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w900px].png`,
-  });
-});
-
-test('[390] Widgets: NavBar should be visible after icon clicking', async ({
-  page,
-}) => {
-  await page.setViewportSize(SCREEN_SIZES[390]);
-  await gotoPage(page);
-  await clickAndWaitForAnimationEnd(page);
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w390px].png`,
-  });
-});
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+test.describe.configure({ mode: 'serial' });
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-navbar-opened__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?id=widgets-navbar--default&viewMode=story',
+  );
+};
+
+const clickAndWaitForAnimationEnd = async (page: Page) => {
+  await page.locator('#storybook-root div').nth(1).click();
+  await page
+    .locator('div[class*="NavBarWrapper"]')
+    .evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished),
+      ),
+    );
+};
+
+test('[1920] Widgets: NavBar should be visible', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await gotoPage(page);
+  await page.locator('nav ul');
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});
+
+test('[1440] Widgets: NavBar should be visible', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1440]);
+  await gotoPage(page);
+  await page.locator('nav ul');
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1440px].png`,
+  });
+});
+
+test('[900] Widgets: NavBar should be visible after icon clicking', async ({
+  page,
+}) => {
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await gotoPage(page);
+  await clickAndWaitForAnimationEnd(page);
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('[390] Widgets: NavBar should be visible after icon clicking', async ({
+  page,
+}) => {
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  await gotoPage(page);
+  await clickAndWaitForAnimationEnd(page);
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});