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

package/src/components/MealNutrients/MealNutrients.stories.tsx

@@ -1,37 +1,37 @@
-import { useState, useEffect } from 'react';
-import type { Meta } from '@storybook/react';
-
-import { MealNutrients } from './index';
-import { IMealNutrientsProps } from './types';
-
-import { mockStaticApi } from './mockMealNutrientsRequest';
-const { getData, getOptions } = mockStaticApi;
-
-export default {
-  title: 'Widgets/MealNutrients',
-  component: MealNutrients,
-} as Meta<typeof MealNutrients>;
-
-export const Default = () => {
-  const [options, setOptions] = useState<IMealNutrientsProps['options']>([]);
-  const [data, setData] = useState<IMealNutrientsProps['data']>([]);
-
-  useEffect(() => {
-    getOptions()
-      .then((respOptions) => {
-        setOptions(respOptions);
-        return getData(respOptions[0].value);
-      })
-      .then(setData);
-  }, []);
-
-  return (
-    <MealNutrients
-      data={data}
-      options={options}
-      onOptionChange={({ value }) => {
-        getData(String(value) as 'd' | 'w' | 'm').then(setData);
-      }}
-    />
-  );
-};
+import { useState, useEffect } from 'react';
+import type { Meta } from '@storybook/react';
+
+import { MealNutrients } from './index';
+import { IMealNutrientsProps } from './types';
+
+import { mockStaticApi } from './mockMealNutrientsRequest';
+const { getData, getOptions } = mockStaticApi;
+
+export default {
+  title: 'Widgets/MealNutrients',
+  component: MealNutrients,
+} as Meta<typeof MealNutrients>;
+
+export const Default = () => {
+  const [options, setOptions] = useState<IMealNutrientsProps['options']>([]);
+  const [data, setData] = useState<IMealNutrientsProps['data']>([]);
+
+  useEffect(() => {
+    getOptions()
+      .then((respOptions) => {
+        setOptions(respOptions);
+        return getData(respOptions[0].value);
+      })
+      .then(setData);
+  }, []);
+
+  return (
+    <MealNutrients
+      data={data}
+      options={options}
+      onOptionChange={({ value }) => {
+        getData(String(value) as 'd' | 'w' | 'm').then(setData);
+      }}
+    />
+  );
+};

package/src/components/MealNutrients/MealNutrients.tsx

@@ -1,84 +1,84 @@
-import { useState, useEffect, useRef } from 'react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Typography,
-  Dropdown,
-  DropdownOption,
-} from '@ssa-ui-kit/core';
-
-import { MealNutrientsLineChart } from './MealNutrientsLineChart';
-import useChartConfig from './useChartConfig';
-import { IMealNutrientsProps, UseChartConfig, OptionType } from './types';
-
-/**
- *
- * UI Component that shows the nutrients consumed by the user
- */
-export const MealNutrients = ({
-  caption = 'Meal Nutrients',
-  options,
-  data,
-  onOptionChange,
-}: IMealNutrientsProps) => {
-  const [selectedOption, setSelectedOption] = useState<OptionType>();
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const chartConfig = useChartConfig(
-    containerRef,
-    data,
-    selectedOption?.precision as Parameters<UseChartConfig>[2],
-  );
-
-  useEffect(() => {
-    if (options?.length > 0 && selectedOption == null) {
-      handleChange(options[0]);
-    }
-  }, [options]);
-
-  const handleChange = (e: OptionType) => {
-    const item = options.filter((item) => item.value === e.value)[0];
-
-    setSelectedOption(item);
-    onOptionChange && onOptionChange(item);
-  };
-
-  return (
-    <div ref={containerRef}>
-      <CardHeader transparent>
-        <Typography variant="h4" weight="bold" css={{ lineHeight: 'normal' }}>
-          {caption}
-        </Typography>
-
-        {options?.length > 0 && (
-          <Dropdown selectedItem={options[0]} onChange={handleChange}>
-            {options.map((item) => (
-              <DropdownOption
-                key={item.value}
-                value={item.value}
-                label={item.label}
-              />
-            ))}
-          </Dropdown>
-        )}
-      </CardHeader>
-      <Card>
-        <CardContent direction="column" css={{ width: '100%' }}>
-          <div
-            css={{
-              height: '227px',
-              svg: {
-                overflow: 'visible',
-              },
-            }}>
-            {data?.length > 0 && (
-              <MealNutrientsLineChart data={data} {...chartConfig} />
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
+import { useState, useEffect, useRef } from 'react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Dropdown,
+  DropdownOption,
+} from '@ssa-ui-kit/core';
+
+import { MealNutrientsLineChart } from './MealNutrientsLineChart';
+import useChartConfig from './useChartConfig';
+import { IMealNutrientsProps, UseChartConfig, OptionType } from './types';
+
+/**
+ *
+ * UI Component that shows the nutrients consumed by the user
+ */
+export const MealNutrients = ({
+  caption = 'Meal Nutrients',
+  options,
+  data,
+  onOptionChange,
+}: IMealNutrientsProps) => {
+  const [selectedOption, setSelectedOption] = useState<OptionType>();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const chartConfig = useChartConfig(
+    containerRef,
+    data,
+    selectedOption?.precision as Parameters<UseChartConfig>[2],
+  );
+
+  useEffect(() => {
+    if (options?.length > 0 && selectedOption == null) {
+      handleChange(options[0]);
+    }
+  }, [options]);
+
+  const handleChange = (e: OptionType) => {
+    const item = options.filter((item) => item.value === e.value)[0];
+
+    setSelectedOption(item);
+    onOptionChange && onOptionChange(item);
+  };
+
+  return (
+    <div ref={containerRef}>
+      <CardHeader transparent>
+        <Typography variant="h4" weight="bold" css={{ lineHeight: 'normal' }}>
+          {caption}
+        </Typography>
+
+        {options?.length > 0 && (
+          <Dropdown selectedItem={options[0]} onChange={handleChange}>
+            {options.map((item) => (
+              <DropdownOption
+                key={item.value}
+                value={item.value}
+                label={item.label}
+              />
+            ))}
+          </Dropdown>
+        )}
+      </CardHeader>
+      <Card>
+        <CardContent direction="column" css={{ width: '100%' }}>
+          <div
+            css={{
+              height: '227px',
+              svg: {
+                overflow: 'visible',
+              },
+            }}>
+            {data?.length > 0 && (
+              <MealNutrientsLineChart data={data} {...chartConfig} />
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/MealNutrients/MealNutrientsLineChart.tsx

@@ -1,87 +1,87 @@
-import { useMemo } from 'react';
-import { ResponsiveLine, LineSvgProps, LineProps } from '@nivo/line';
-import { useTheme } from '@emotion/react';
-import type { ColorsKeys, MainColors } from '@ssa-ui-kit/core';
-
-import { defaults } from './chartDefaultConfig';
-import { MealNutrientsTooltip } from './MealNutrientsTooltip';
-
-const colorPalette = ['pink', 'purple', 'turquoise', 'yellow', 'green', 'blue'];
-
-export const MealNutrientsLineChart = ({ data, ...props }: LineSvgProps) => {
-  const theme = useTheme();
-
-  const defaultColorMapping = useMemo(
-    () =>
-      colorPalette.reduce<Record<string, keyof MainColors>>(
-        (res, colorName) => {
-          const colorValue = theme.colors[
-            `${colorName}Lighter` as ColorsKeys
-          ] as string;
-          res[colorValue] = colorName as keyof MainColors;
-          return res;
-        },
-        {},
-      ),
-    [theme.colors],
-  );
-
-  const defaultSettings = useMemo(
-    () =>
-      Object.assign<Omit<LineProps, 'data'>, Omit<LineProps, 'data'>>(
-        defaults,
-        {
-          colors: colorPalette.map(
-            (color) => theme.colors[`${color}Lighter` as ColorsKeys] as string,
-          ),
-          tooltip: ({ point }) => {
-            const color: keyof MainColors = defaultColorMapping[point.color];
-            return <MealNutrientsTooltip point={point} colorName={color} />;
-          },
-          theme: {
-            fontFamily: "'Manrope', sans-serif",
-            axis: {
-              ticks: {
-                text: {
-                  fontSize: '0.833rem',
-                  fontWeight: 500,
-                  fill: theme.colors.greyDarker,
-                },
-              },
-            },
-            grid: {
-              line: {
-                stroke: theme.colors.greyLighter,
-                strokeWidth: 1,
-                strokeDasharray: '8 8',
-              },
-            },
-          },
-        },
-      ),
-    [theme.colors, defaultColorMapping],
-  );
-
-  return (
-    <ResponsiveLine
-      data={data}
-      curve="catmullRom"
-      axisTop={null}
-      axisLeft={null}
-      enableGridX={false}
-      enableGridY={true}
-      lineWidth={1}
-      enablePoints={true}
-      pointSize={8}
-      pointBorderWidth={0}
-      pointLabelYOffset={-12}
-      enableArea={false}
-      areaOpacity={0.1}
-      enableCrosshair={false}
-      useMesh={true}
-      animate={false}
-      {...defaultSettings}
-      {...props}
-    />
-  );
-};
+import { useMemo } from 'react';
+import { ResponsiveLine, LineSvgProps, LineProps } from '@nivo/line';
+import { useTheme } from '@emotion/react';
+import type { ColorsKeys, MainColors } from '@ssa-ui-kit/core';
+
+import { defaults } from './chartDefaultConfig';
+import { MealNutrientsTooltip } from './MealNutrientsTooltip';
+
+const colorPalette = ['pink', 'purple', 'turquoise', 'yellow', 'green', 'blue'];
+
+export const MealNutrientsLineChart = ({ data, ...props }: LineSvgProps) => {
+  const theme = useTheme();
+
+  const defaultColorMapping = useMemo(
+    () =>
+      colorPalette.reduce<Record<string, keyof MainColors>>(
+        (res, colorName) => {
+          const colorValue = theme.colors[
+            `${colorName}Lighter` as ColorsKeys
+          ] as string;
+          res[colorValue] = colorName as keyof MainColors;
+          return res;
+        },
+        {},
+      ),
+    [theme.colors],
+  );
+
+  const defaultSettings = useMemo(
+    () =>
+      Object.assign<Omit<LineProps, 'data'>, Omit<LineProps, 'data'>>(
+        defaults,
+        {
+          colors: colorPalette.map(
+            (color) => theme.colors[`${color}Lighter` as ColorsKeys] as string,
+          ),
+          tooltip: ({ point }) => {
+            const color: keyof MainColors = defaultColorMapping[point.color];
+            return <MealNutrientsTooltip point={point} colorName={color} />;
+          },
+          theme: {
+            fontFamily: "'Manrope', sans-serif",
+            axis: {
+              ticks: {
+                text: {
+                  fontSize: '0.833rem',
+                  fontWeight: 500,
+                  fill: theme.colors.greyDarker,
+                },
+              },
+            },
+            grid: {
+              line: {
+                stroke: theme.colors.greyLighter,
+                strokeWidth: 1,
+                strokeDasharray: '8 8',
+              },
+            },
+          },
+        },
+      ),
+    [theme.colors, defaultColorMapping],
+  );
+
+  return (
+    <ResponsiveLine
+      data={data}
+      curve="catmullRom"
+      axisTop={null}
+      axisLeft={null}
+      enableGridX={false}
+      enableGridY={true}
+      lineWidth={1}
+      enablePoints={true}
+      pointSize={8}
+      pointBorderWidth={0}
+      pointLabelYOffset={-12}
+      enableArea={false}
+      areaOpacity={0.1}
+      enableCrosshair={false}
+      useMesh={true}
+      animate={false}
+      {...defaultSettings}
+      {...props}
+    />
+  );
+};

package/src/components/MealNutrients/MealNutrientsTooltip.tsx

@@ -1,30 +1,30 @@
-import { ProgressChartTooltip } from '@ssa-ui-kit/core';
-import type { IMapIcons } from '@ssa-ui-kit/core';
-
-import { IMealNutrientsTooltipProps } from './types';
-
-const capitalize = (str: string) =>
-  `${str[0].toUpperCase()}${str.substring(1)}`;
-
-export const MealNutrientsTooltip = ({
-  colorName,
-  point,
-}: IMealNutrientsTooltipProps) => {
-  const caption = capitalize(String(point.serieId));
-  const {
-    data: { y, comp, unit },
-  } = point;
-  const iconName =
-    ((comp && `arrow-${comp > 0 ? 'up' : 'down'}`) as keyof IMapIcons) ||
-    undefined;
-
-  return (
-    <ProgressChartTooltip
-      caption={caption}
-      value={y as number}
-      valueFormatted={`${comp}${unit}`}
-      iconName={iconName}
-      barProps={{ color: colorName }}
-    />
-  );
-};
+import { ProgressChartTooltip } from '@ssa-ui-kit/core';
+import type { IMapIcons } from '@ssa-ui-kit/core';
+
+import { IMealNutrientsTooltipProps } from './types';
+
+const capitalize = (str: string) =>
+  `${str[0].toUpperCase()}${str.substring(1)}`;
+
+export const MealNutrientsTooltip = ({
+  colorName,
+  point,
+}: IMealNutrientsTooltipProps) => {
+  const caption = capitalize(String(point.serieId));
+  const {
+    data: { y, comp, unit },
+  } = point;
+  const iconName =
+    ((comp && `arrow-${comp > 0 ? 'up' : 'down'}`) as keyof IMapIcons) ||
+    undefined;
+
+  return (
+    <ProgressChartTooltip
+      caption={caption}
+      value={y as number}
+      valueFormatted={`${comp}${unit}`}
+      iconName={iconName}
+      barProps={{ color: colorName }}
+    />
+  );
+};

package/src/components/MealNutrients/chartDefaultConfig.tsx

@@ -1,87 +1,87 @@
-import { LineProps } from '@nivo/line';
-import { DotsItem, useTheme as useNivoTheme } from '@nivo/core';
-
-import { dateFormatters } from '@ssa-ui-kit/utils';
-
-import { CustomPointLayerProps } from './types';
-
-const { formatDayOfWeek } = dateFormatters;
-
-const CustomPointLayer = ({
-  currentPoint,
-  pointSize,
-  pointBorderWidth,
-  ...props
-}: CustomPointLayerProps) => {
-  const theme = useNivoTheme();
-
-  if (!currentPoint) {
-    return;
-  }
-
-  const point = currentPoint;
-
-  return (
-    <g>
-      <DotsItem
-        key={point.id}
-        x={point.x}
-        y={point.y}
-        color={point.color}
-        borderColor={point.borderColor}
-        datum={point.data}
-        theme={theme}
-        size={pointSize || 0}
-        borderWidth={pointBorderWidth || 0}
-        {...props}
-      />
-    </g>
-  );
-};
-
-const tickValues = [0, 20, 40, 60, 80, 100];
-
-export const defaults: Omit<LineProps, 'data'> = {
-  margin: { top: 28, right: 50, bottom: 50, left: 5 },
-  xScale: { type: 'time', format: '%L', precision: 'day' },
-  yScale: {
-    type: 'linear',
-    min: 'auto',
-    max: 'auto',
-    stacked: false,
-    reverse: false,
-  },
-  axisRight: {
-    tickSize: 0,
-    tickPadding: 10,
-    tickRotation: 0,
-    tickValues,
-    format: (tick) => `${tick}%`,
-    legend: '',
-    legendOffset: 0,
-  },
-  axisBottom: {
-    tickSize: 0,
-    tickPadding: 30,
-    tickRotation: 0,
-    legend: '',
-    tickValues: 'every day',
-    format: formatDayOfWeek,
-  },
-  pointColor: { from: 'color', modifiers: [] },
-  pointBorderColor: { from: 'color', modifiers: [] },
-  legends: [],
-  gridYValues: tickValues,
-  layers: [
-    'grid',
-    'markers',
-    'axes',
-    'areas',
-    'crosshair',
-    'lines',
-    CustomPointLayer,
-    'slices',
-    'mesh',
-    'legends',
-  ],
-};
+import { LineProps } from '@nivo/line';
+import { DotsItem, useTheme as useNivoTheme } from '@nivo/core';
+
+import { dateFormatters } from '@ssa-ui-kit/utils';
+
+import { CustomPointLayerProps } from './types';
+
+const { formatDayOfWeek } = dateFormatters;
+
+const CustomPointLayer = ({
+  currentPoint,
+  pointSize,
+  pointBorderWidth,
+  ...props
+}: CustomPointLayerProps) => {
+  const theme = useNivoTheme();
+
+  if (!currentPoint) {
+    return;
+  }
+
+  const point = currentPoint;
+
+  return (
+    <g>
+      <DotsItem
+        key={point.id}
+        x={point.x}
+        y={point.y}
+        color={point.color}
+        borderColor={point.borderColor}
+        datum={point.data}
+        theme={theme}
+        size={pointSize || 0}
+        borderWidth={pointBorderWidth || 0}
+        {...props}
+      />
+    </g>
+  );
+};
+
+const tickValues = [0, 20, 40, 60, 80, 100];
+
+export const defaults: Omit<LineProps, 'data'> = {
+  margin: { top: 28, right: 50, bottom: 50, left: 5 },
+  xScale: { type: 'time', format: '%L', precision: 'day' },
+  yScale: {
+    type: 'linear',
+    min: 'auto',
+    max: 'auto',
+    stacked: false,
+    reverse: false,
+  },
+  axisRight: {
+    tickSize: 0,
+    tickPadding: 10,
+    tickRotation: 0,
+    tickValues,
+    format: (tick) => `${tick}%`,
+    legend: '',
+    legendOffset: 0,
+  },
+  axisBottom: {
+    tickSize: 0,
+    tickPadding: 30,
+    tickRotation: 0,
+    legend: '',
+    tickValues: 'every day',
+    format: formatDayOfWeek,
+  },
+  pointColor: { from: 'color', modifiers: [] },
+  pointBorderColor: { from: 'color', modifiers: [] },
+  legends: [],
+  gridYValues: tickValues,
+  layers: [
+    'grid',
+    'markers',
+    'axes',
+    'areas',
+    'crosshair',
+    'lines',
+    CustomPointLayer,
+    'slices',
+    'mesh',
+    'legends',
+  ],
+};

package/src/components/MealNutrients/index.tsx

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