@ssa-ui-kit/widgets 1.0.12 → 1.1.55-canary-79b6b0d-20250224

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

@@ -1,37 +0,0 @@
-import { useState, useEffect } from 'react';
-import type { Meta } from '@storybook/react';
-
-import { MealNutrients } from './index';
-import { MealNutrientsProps } from './types';
-
-import { mockStaticApi } from './mockMealNutrientsRequest';
-const { getData, getOptions } = mockStaticApi;
-
-export default {
-  title: 'Fitness/MealNutrients',
-  component: MealNutrients,
-} as Meta<typeof MealNutrients>;
-
-export const Default = () => {
-  const [options, setOptions] = useState<MealNutrientsProps['options']>([]);
-  const [data, setData] = useState<MealNutrientsProps['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 +0,0 @@
-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 { MealNutrientsProps, UseChartConfig, OptionType } from './types';
-
-/**
- *
- * UI Component that shows the nutrients consumed by the user
- */
-export const MealNutrients = ({
-  caption = 'Meal Nutrients',
-  options,
-  data,
-  onOptionChange,
-}: MealNutrientsProps) => {
-  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,89 +0,0 @@
-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: {
-            axis: {
-              ticks: {
-                text: {
-                  fontSize: '0.833rem',
-                  fontWeight: 500,
-                  fill: theme.colors.greyDarker,
-                },
-              },
-            },
-            grid: {
-              line: {
-                stroke: theme.colors.greyLighter,
-                strokeWidth: 1,
-                strokeDasharray: '8 8',
-              },
-            },
-            text: {
-              fontFamily: "'Manrope', sans-serif",
-            },
-          },
-        },
-      ),
-    [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 +0,0 @@
-import { ProgressChartTooltip } from '@ssa-ui-kit/core';
-import type { MapIconsType } from '@ssa-ui-kit/core';
-
-import { MealNutrientsTooltipProps } from './types';
-
-const capitalize = (str: string) =>
-  `${str[0].toUpperCase()}${str.substring(1)}`;
-
-export const MealNutrientsTooltip = ({
-  colorName,
-  point,
-}: MealNutrientsTooltipProps) => {
-  const caption = capitalize(String(point.serieId));
-  const {
-    data: { y, comp, unit },
-  } = point;
-  const iconName =
-    ((comp && `arrow-${comp > 0 ? 'up' : 'down'}`) as keyof MapIconsType) ||
-    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 +0,0 @@
-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 +0,0 @@
-export { MealNutrients } from './MealNutrients';
-export * from './types';