@ssa-ui-kit/widgets 0.0.5-alpha → 0.0.7-alpha

package/src/components/MealNutrients/types.ts

@@ -1,37 +1,37 @@
-import { Point, LineSvgProps, CustomLayerProps } from '@nivo/line';
-import { ScaleTimeSpec } from '@nivo/scales';
-import { MainColors, IDropdownOption } from '@ssa-ui-kit/core';
-
-export interface OptionType extends IDropdownOption {
-  value: 'd' | 'w' | 'm';
-  label: string;
-  precision: string;
-}
-
-export interface IMealNutrientsProps {
-  caption?: string;
-  options: OptionType[];
-  data: LineSvgProps['data'];
-  onOptionChange?: (option: OptionType) => void;
-}
-
-export interface IMealNutrientsTooltipProps {
-  colorName: keyof MainColors;
-  point: Exclude<Point, 'data'> & {
-    data: Point['data'] & { comp?: number; unit?: string };
-  };
-}
-
-export type UseChartConfig = (
-  ref: React.RefObject<HTMLElement>,
-  data: LineSvgProps['data'],
-  precision: ScaleTimeSpec['precision'] | 'week',
-) => Pick<LineSvgProps, 'xScale' | 'axisBottom'>;
-
-// ScaleSpec is not exported from @nivo/line
-export type ScaleSpec = LineSvgProps['xScale'];
-
-// `CustomLayerProps` doesn't have `currentPoint` defined  on it even
-// though this property is passed to a custom layer:
-// https://github.com/plouc/nivo/blob/408d46f7de205d391ab19cf34321e7b40d5cebad/packages/line/src/Line.js#L318
-export type CustomPointLayerProps = CustomLayerProps & { currentPoint?: Point };
+import { Point, LineSvgProps, CustomLayerProps } from '@nivo/line';
+import { ScaleTimeSpec } from '@nivo/scales';
+import { MainColors, IDropdownOption } from '@ssa-ui-kit/core';
+
+export interface OptionType extends IDropdownOption {
+  value: 'd' | 'w' | 'm';
+  label: string;
+  precision: string;
+}
+
+export interface IMealNutrientsProps {
+  caption?: string;
+  options: OptionType[];
+  data: LineSvgProps['data'];
+  onOptionChange?: (option: OptionType) => void;
+}
+
+export interface IMealNutrientsTooltipProps {
+  colorName: keyof MainColors;
+  point: Exclude<Point, 'data'> & {
+    data: Point['data'] & { comp?: number; unit?: string };
+  };
+}
+
+export type UseChartConfig = (
+  ref: React.RefObject<HTMLElement>,
+  data: LineSvgProps['data'],
+  precision: ScaleTimeSpec['precision'] | 'week',
+) => Pick<LineSvgProps, 'xScale' | 'axisBottom'>;
+
+// ScaleSpec is not exported from @nivo/line
+export type ScaleSpec = LineSvgProps['xScale'];
+
+// `CustomLayerProps` doesn't have `currentPoint` defined  on it even
+// though this property is passed to a custom layer:
+// https://github.com/plouc/nivo/blob/408d46f7de205d391ab19cf34321e7b40d5cebad/packages/line/src/Line.js#L318
+export type CustomPointLayerProps = CustomLayerProps & { currentPoint?: Point };

package/src/components/MealNutrients/useChartConfig.ts

@@ -1,69 +1,69 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
-import { dateFormatters, throttle } from '@ssa-ui-kit/utils';
-import { UseChartConfig } from './types';
-
-const { formatTime, formatDayOfWeek, formatDate } = dateFormatters;
-
-const MAX_ITEMS_ON_SMALL_SCREENS = 7;
-const MIN_WIDTH = 600;
-const THROTTLE_DELAY_MS = 50;
-
-const useChartConfig: UseChartConfig = (elRef, data, precision = 'day') => {
-  const [width, setWidth] = useState(0);
-  const throttledRef = useRef(
-    throttle((entries) => {
-      setWidth(entries[0].contentRect.width);
-    }, THROTTLE_DELAY_MS),
-  );
-
-  const observerRef = useRef(new ResizeObserver(throttledRef?.current?.[0]));
-
-  useEffect(() => {
-    const currentRef = elRef.current;
-
-    if (observerRef.current && currentRef) {
-      observerRef.current.observe(currentRef);
-    }
-
-    return () => {
-      if (observerRef.current && currentRef) {
-        observerRef.current.unobserve(currentRef);
-      }
-    };
-  }, [elRef, observerRef]);
-
-  useEffect(() => {
-    return () => {
-      if (throttledRef.current) {
-        const [, cancel] = throttledRef.current;
-        cancel();
-      }
-    };
-  }, [throttledRef]);
-
-  return useMemo(
-    () => ({
-      xScale: {
-        type: 'time',
-        format: '%L',
-        precision: precision === 'week' ? 'day' : precision,
-      },
-      axisBottom: {
-        tickSize: 0,
-        tickPadding: 30,
-        legend: '',
-        tickValues: width < MIN_WIDTH ? MAX_ITEMS_ON_SMALL_SCREENS : undefined,
-        tickRotation: width < MIN_WIDTH ? 30 : 0,
-        format:
-          precision === 'hour'
-            ? formatTime
-            : precision === 'week'
-            ? formatDayOfWeek
-            : formatDate,
-      },
-    }),
-    [data, width, precision],
-  );
-};
-
-export default useChartConfig;
+import { useEffect, useState, useMemo, useRef } from 'react';
+import { dateFormatters, throttle } from '@ssa-ui-kit/utils';
+import { UseChartConfig } from './types';
+
+const { formatTime, formatDayOfWeek, formatDate } = dateFormatters;
+
+const MAX_ITEMS_ON_SMALL_SCREENS = 7;
+const MIN_WIDTH = 600;
+const THROTTLE_DELAY_MS = 50;
+
+const useChartConfig: UseChartConfig = (elRef, data, precision = 'day') => {
+  const [width, setWidth] = useState(0);
+  const throttledRef = useRef(
+    throttle((entries) => {
+      setWidth(entries[0].contentRect.width);
+    }, THROTTLE_DELAY_MS),
+  );
+
+  const observerRef = useRef(new ResizeObserver(throttledRef?.current?.[0]));
+
+  useEffect(() => {
+    const currentRef = elRef.current;
+
+    if (observerRef.current && currentRef) {
+      observerRef.current.observe(currentRef);
+    }
+
+    return () => {
+      if (observerRef.current && currentRef) {
+        observerRef.current.unobserve(currentRef);
+      }
+    };
+  }, [elRef, observerRef]);
+
+  useEffect(() => {
+    return () => {
+      if (throttledRef.current) {
+        const [, cancel] = throttledRef.current;
+        cancel();
+      }
+    };
+  }, [throttledRef]);
+
+  return useMemo(
+    () => ({
+      xScale: {
+        type: 'time',
+        format: '%L',
+        precision: precision === 'week' ? 'day' : precision,
+      },
+      axisBottom: {
+        tickSize: 0,
+        tickPadding: 30,
+        legend: '',
+        tickValues: width < MIN_WIDTH ? MAX_ITEMS_ON_SMALL_SCREENS : undefined,
+        tickRotation: width < MIN_WIDTH ? 30 : 0,
+        format:
+          precision === 'hour'
+            ? formatTime
+            : precision === 'week'
+            ? formatDayOfWeek
+            : formatDate,
+      },
+    }),
+    [data, width, precision],
+  );
+};
+
+export default useChartConfig;

package/src/components/MealPlanner/MealPlanner.spec.tsx

@@ -1,77 +1,77 @@
-import userEvent from '@testing-library/user-event';
-
-import { screen, within } from '../../../customTest';
-
-import { MealPlannerItem } from './types';
-import MealPlanner from './index';
-
-const data: { [key: string]: MealPlannerItem } = {
-  breakfast: {
-    time: '8:00 AM',
-    data: [
-      {
-        id: 1,
-        name: 'Avocado salad',
-        image: 'https://via.placeholder.com/64x64',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-    ],
-  },
-  lunch: {
-    time: '1:00 pm',
-    data: [
-      {
-        id: 4,
-        name: 'Beef steak',
-        image: 'https://via.placeholder.com/64x64',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-    ],
-  },
-};
-
-describe('MealPlanner', () => {
-  it('Render recipes and update then when change the dropdown', async () => {
-    const user = userEvent.setup();
-
-    render(<MealPlanner data={data} />);
-
-    const recipeBreakfast = screen.getByText(/Avocado salad/i);
-    const progressBars = screen.getAllByRole('progressbar');
-
-    expect(recipeBreakfast).toBeInTheDocument();
-    expect(progressBars).toHaveLength(3);
-
-    const dropdownEl = screen.getByTestId('dropdown');
-    const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
-
-    await user.click(dropdownToggleEl);
-
-    const listItemEls = within(screen.getByRole('listbox')).getAllByRole(
-      'button',
-    );
-
-    await user.click(listItemEls[1]);
-
-    const recipeLunch = screen.getByText(/Beef steak/i);
-
-    expect(recipeLunch).toBeInTheDocument();
-    expect(recipeBreakfast).not.toBeInTheDocument();
-  });
-
-  it("don't render if not data or wrong typeof data", async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    render(<MealPlanner data={'data'} />);
-
-    const recipeBreakfast = await screen.queryByText(/Avocado salad/i);
-
-    expect(recipeBreakfast).not.toBeInTheDocument();
-  });
-});
+import userEvent from '@testing-library/user-event';
+
+import { screen, within } from '../../../customTest';
+
+import { MealPlannerItem } from './types';
+import MealPlanner from './index';
+
+const data: { [key: string]: MealPlannerItem } = {
+  breakfast: {
+    time: '8:00 AM',
+    data: [
+      {
+        id: 1,
+        name: 'Avocado salad',
+        image: 'https://via.placeholder.com/64x64',
+        calories: 300,
+        carbs: 10,
+        protein: 50,
+        fat: 40,
+      },
+    ],
+  },
+  lunch: {
+    time: '1:00 pm',
+    data: [
+      {
+        id: 4,
+        name: 'Beef steak',
+        image: 'https://via.placeholder.com/64x64',
+        calories: 300,
+        carbs: 10,
+        protein: 50,
+        fat: 40,
+      },
+    ],
+  },
+};
+
+describe('MealPlanner', () => {
+  it('Render recipes and update then when change the dropdown', async () => {
+    const user = userEvent.setup();
+
+    render(<MealPlanner data={data} />);
+
+    const recipeBreakfast = screen.getByText(/Avocado salad/i);
+    const progressBars = screen.getAllByRole('progressbar');
+
+    expect(recipeBreakfast).toBeInTheDocument();
+    expect(progressBars).toHaveLength(3);
+
+    const dropdownEl = screen.getByTestId('dropdown');
+    const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    await user.click(dropdownToggleEl);
+
+    const listItemEls = within(screen.getByRole('listbox')).getAllByRole(
+      'button',
+    );
+
+    await user.click(listItemEls[1]);
+
+    const recipeLunch = screen.getByText(/Beef steak/i);
+
+    expect(recipeLunch).toBeInTheDocument();
+    expect(recipeBreakfast).not.toBeInTheDocument();
+  });
+
+  it("don't render if not data or wrong typeof data", async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    render(<MealPlanner data={'data'} />);
+
+    const recipeBreakfast = await screen.queryByText(/Avocado salad/i);
+
+    expect(recipeBreakfast).not.toBeInTheDocument();
+  });
+});

package/src/components/MealPlanner/MealPlanner.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta } from '@storybook/react';
-
-import { mealPlannerData as data } from './mockMealPlannerRequest';
-
-import MealPlanner from './index';
-
-export default {
-  title: 'Widgets/MealPlanner',
-  component: MealPlanner,
-  args: {
-    data,
-  },
-} as Meta<typeof MealPlanner>;
-
-export const Default = {};
+import type { Meta } from '@storybook/react';
+
+import { mealPlannerData as data } from './mockMealPlannerRequest';
+
+import MealPlanner from './index';
+
+export default {
+  title: 'Widgets/MealPlanner',
+  component: MealPlanner,
+  args: {
+    data,
+  },
+} as Meta<typeof MealPlanner>;
+
+export const Default = {};

package/src/components/MealPlanner/MealPlanner.tsx

@@ -1,100 +1,100 @@
-import { useState, useEffect } from 'react';
-import { css } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Typography,
-  Dropdown,
-  DropdownOption,
-  IDropdownOption,
-} from '@ssa-ui-kit/core';
-
-import { MealPlannerCard } from './MealPlannerCard';
-
-import { MealPlannerProps, MealPlannerData } from './types';
-import styled from '@emotion/styled';
-
-const CustomOption = styled(DropdownOption)`
-  text-align: left;
-  line-height: 18px;
-  font-size: 11px;
-`;
-
-export const MealPlanner = ({ data }: MealPlannerProps) => {
-  const [selectedOption, setSelectedOption] = useState<string | null>(null);
-  const [options, setOptions] = useState<IDropdownOption[]>([]);
-
-  const handleChange = (e: IDropdownOption) => {
-    const value = e.value.toString().toLowerCase();
-
-    setSelectedOption(value);
-  };
-
-  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)}`,
-        label: `${item.charAt(0).toUpperCase()}${item.slice(1)} | ${
-          data[item].time
-        }`,
-        extraVal: data[item].time,
-      })),
-    );
-  }, [data]);
-
-  useEffect(() => {
-    if (options?.length > 0 && selectedOption == null) {
-      handleChange(options[0]);
-    }
-  }, [options]);
-
-  return (
-    <div>
-      <CardHeader transparent>
-        <Typography variant="h4" weight="bold" css={{ lineHeight: 'normal' }}>
-          Meal Planner
-        </Typography>
-
-        {options?.length > 0 && (
-          <Dropdown selectedItem={options[0]} onChange={handleChange}>
-            {options.map((item, index) => (
-              <CustomOption
-                key={index}
-                value={item.value}
-                label={item.label.toString()}>
-                <span style={{ fontSize: 13, fontWeight: 500 }}>
-                  {item.value}
-                </span>
-                &nbsp;|&nbsp;
-                <span style={{ fontSize: 11, fontWeight: 500 }}>
-                  {item.extraVal}
-                </span>
-              </CustomOption>
-            ))}
-          </Dropdown>
-        )}
-      </CardHeader>
-      <Card>
-        <CardContent
-          css={css`
-            flex-direction: column;
-            width: 100%;
-          `}>
-          {selectedOption &&
-            data[selectedOption].data.map(
-              ({ id, ...props }: MealPlannerData) => (
-                <MealPlannerCard key={id} {...props} />
-              ),
-            )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
+import { useState, useEffect } from 'react';
+import { css } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Dropdown,
+  DropdownOption,
+  IDropdownOption,
+} from '@ssa-ui-kit/core';
+
+import { MealPlannerCard } from './MealPlannerCard';
+
+import { MealPlannerProps, MealPlannerData } from './types';
+import styled from '@emotion/styled';
+
+const CustomOption = styled(DropdownOption)`
+  text-align: left;
+  line-height: 18px;
+  font-size: 11px;
+`;
+
+export const MealPlanner = ({ data }: MealPlannerProps) => {
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [options, setOptions] = useState<IDropdownOption[]>([]);
+
+  const handleChange = (e: IDropdownOption) => {
+    const value = e.value.toString().toLowerCase();
+
+    setSelectedOption(value);
+  };
+
+  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)}`,
+        label: `${item.charAt(0).toUpperCase()}${item.slice(1)} | ${
+          data[item].time
+        }`,
+        extraVal: data[item].time,
+      })),
+    );
+  }, [data]);
+
+  useEffect(() => {
+    if (options?.length > 0 && selectedOption == null) {
+      handleChange(options[0]);
+    }
+  }, [options]);
+
+  return (
+    <div>
+      <CardHeader transparent>
+        <Typography variant="h4" weight="bold" css={{ lineHeight: 'normal' }}>
+          Meal Planner
+        </Typography>
+
+        {options?.length > 0 && (
+          <Dropdown selectedItem={options[0]} onChange={handleChange}>
+            {options.map((item, index) => (
+              <CustomOption
+                key={index}
+                value={item.value}
+                label={item.label.toString()}>
+                <span style={{ fontSize: 13, fontWeight: 500 }}>
+                  {item.value}
+                </span>
+                &nbsp;|&nbsp;
+                <span style={{ fontSize: 11, fontWeight: 500 }}>
+                  {item.extraVal}
+                </span>
+              </CustomOption>
+            ))}
+          </Dropdown>
+        )}
+      </CardHeader>
+      <Card>
+        <CardContent
+          css={css`
+            flex-direction: column;
+            width: 100%;
+          `}>
+          {selectedOption &&
+            data[selectedOption].data.map(
+              ({ id, ...props }: MealPlannerData) => (
+                <MealPlannerCard key={id} {...props} />
+              ),
+            )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/MealPlanner/MealPlannerBadge.tsx

@@ -1,15 +1,15 @@
-import styled from '@emotion/styled';
-
-import { Badge } from '@ssa-ui-kit/core';
-
-const Marker = styled(Badge)`
-  display: inline-block;
-
-  padding: 0;
-  margin-right: 5px;
-
-  width: 4px;
-  height: 4px;
-`;
-
-export default Marker;
+import styled from '@emotion/styled';
+
+import { Badge } from '@ssa-ui-kit/core';
+
+const Marker = styled(Badge)`
+  display: inline-block;
+
+  padding: 0;
+  margin-right: 5px;
+
+  width: 4px;
+  height: 4px;
+`;
+
+export default Marker;

package/src/components/MealPlanner/MealPlannerBars.tsx

@@ -1,19 +1,19 @@
-import styled from '@emotion/styled';
-
-const MealPlannerBars = styled.ul`
-  display: flex;
-
-  list-style: none;
-
-  width: 100%;
-  height: 20px;
-
-  padding: 0;
-  margin: 0;
-
-  & > li:nth-of-type(2n):not(:last-child) {
-    margin: 0 5px;
-  }
-`;
-
-export default MealPlannerBars;
+import styled from '@emotion/styled';
+
+const MealPlannerBars = styled.ul`
+  display: flex;
+
+  list-style: none;
+
+  width: 100%;
+  height: 20px;
+
+  padding: 0;
+  margin: 0;
+
+  & > li:nth-of-type(2n):not(:last-child) {
+    margin: 0 5px;
+  }
+`;
+
+export default MealPlannerBars;