@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.4-alpha

package/src/components/ProgressInfo/ProgressInfo.tsx

@@ -1,117 +1,117 @@
-import { useEffect, useState } from 'react';
-import { css, useTheme } from '@emotion/react';
-import {
-  Card,
-  CardHeader,
-  Typography,
-  IDropdownOption,
-  Dropdown,
-  DropdownOption,
-  MainColors,
-} from '@ssa-ui-kit/core';
-
-import { PieChart, PieChartLegend } from '@components/PieChart';
-import { ProgressInfoTotals } from './ProgressInfoTotals';
-
-import {
-  ProgressInfoItemProps,
-  Period,
-  IProgressInfoProps,
-  PeriodOption,
-} from './types';
-
-import { getPieChartStyles } from './styles';
-
-export const ProgressInfo = ({ data, className }: IProgressInfoProps) => {
-  const [options, setOptions] = useState<PeriodOption[]>([]);
-  const [selected, setSelected] = useState<PeriodOption>();
-  const [response, setResponse] = useState<ProgressInfoItemProps[]>([]);
-  const theme = useTheme();
-
-  useEffect(() => {
-    if (Object.keys(data).length > 0) {
-      const options: PeriodOption[] = [];
-
-      Object.keys(data).forEach((key) => {
-        Object.keys(data[key]).length > 0
-          ? options.push({ value: key, id: key })
-          : null;
-      });
-
-      setOptions(options);
-      setSelected(options[0]);
-
-      filterData(options[0].id as Period);
-    }
-  }, [data]);
-
-  const sumValues = (
-    acc: ProgressInfoItemProps,
-    cur: ProgressInfoItemProps,
-  ) => {
-    return {
-      ...acc,
-      value: acc.value + (cur?.value ? cur.value : 0),
-    };
-  };
-
-  const filterData = (e: Period) => {
-    const response: ProgressInfoItemProps[] = [];
-
-    Object.keys(data[e]).forEach((key) => {
-      const el = data[e][key].reduce(sumValues);
-
-      response.push(el);
-    });
-
-    setResponse(response);
-  };
-
-  const handleChange = (e: IDropdownOption) => {
-    filterData(e.value as Period);
-  };
-
-  return (
-    <Card
-      css={css`
-        border-radius: 20px;
-        padding-inline: 24px;
-        padding-block: 24px;
-      `}
-      className={className}>
-      <CardHeader>
-        <Typography variant="h3" weight="bold">
-          Progress
-        </Typography>
-
-        {Object.keys(options).length > 0 && (
-          <Dropdown selectedItem={selected} onChange={handleChange}>
-            {options.map((item, index) => (
-              <DropdownOption key={index} value={item.value} />
-            ))}
-          </Dropdown>
-        )}
-      </CardHeader>
-      {response.length > 0 ? (
-        <PieChart
-          data={response}
-          css={getPieChartStyles(theme)}
-          title={
-            <ProgressInfoTotals
-              theme={theme}
-              total={response.reduce((sum, { value }) => sum + value, 0)}
-            />
-          }>
-          <PieChartLegend
-            data={response}
-            colors={response.map(
-              ({ colorTag }) =>
-                colorTag || ('purple' as unknown as keyof MainColors),
-            )}
-            renderValue={({ value }) => value + ' hrs'}
-          />
-        </PieChart>
-      ) : null}
-    </Card>
-  );
-};
+import { useEffect, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import {
+  Card,
+  CardHeader,
+  Typography,
+  IDropdownOption,
+  Dropdown,
+  DropdownOption,
+  MainColors,
+} from '@ssa-ui-kit/core';
+
+import { PieChart, PieChartLegend } from '@components/PieChart';
+import { ProgressInfoTotals } from './ProgressInfoTotals';
+
+import {
+  ProgressInfoItemProps,
+  Period,
+  IProgressInfoProps,
+  PeriodOption,
+} from './types';
+
+import { getPieChartStyles } from './styles';
+
+export const ProgressInfo = ({ data, className }: IProgressInfoProps) => {
+  const [options, setOptions] = useState<PeriodOption[]>([]);
+  const [selected, setSelected] = useState<PeriodOption>();
+  const [response, setResponse] = useState<ProgressInfoItemProps[]>([]);
+  const theme = useTheme();
+
+  useEffect(() => {
+    if (Object.keys(data).length > 0) {
+      const options: PeriodOption[] = [];
+
+      Object.keys(data).forEach((key) => {
+        Object.keys(data[key]).length > 0
+          ? options.push({ value: key, id: key })
+          : null;
+      });
+
+      setOptions(options);
+      setSelected(options[0]);
+
+      filterData(options[0].id as Period);
+    }
+  }, [data]);
+
+  const sumValues = (
+    acc: ProgressInfoItemProps,
+    cur: ProgressInfoItemProps,
+  ) => {
+    return {
+      ...acc,
+      value: acc.value + (cur?.value ? cur.value : 0),
+    };
+  };
+
+  const filterData = (e: Period) => {
+    const response: ProgressInfoItemProps[] = [];
+
+    Object.keys(data[e]).forEach((key) => {
+      const el = data[e][key].reduce(sumValues);
+
+      response.push(el);
+    });
+
+    setResponse(response);
+  };
+
+  const handleChange = (e: IDropdownOption) => {
+    filterData(e.value as Period);
+  };
+
+  return (
+    <Card
+      css={css`
+        border-radius: 20px;
+        padding-inline: 24px;
+        padding-block: 24px;
+      `}
+      className={className}>
+      <CardHeader>
+        <Typography variant="h3" weight="bold">
+          Progress
+        </Typography>
+
+        {Object.keys(options).length > 0 && (
+          <Dropdown selectedItem={selected} onChange={handleChange}>
+            {options.map((item, index) => (
+              <DropdownOption key={index} value={item.value} />
+            ))}
+          </Dropdown>
+        )}
+      </CardHeader>
+      {response.length > 0 ? (
+        <PieChart
+          data={response}
+          css={getPieChartStyles(theme)}
+          title={
+            <ProgressInfoTotals
+              theme={theme}
+              total={response.reduce((sum, { value }) => sum + value, 0)}
+            />
+          }>
+          <PieChartLegend
+            data={response}
+            colors={response.map(
+              ({ colorTag }) =>
+                colorTag || ('purple' as unknown as keyof MainColors),
+            )}
+            renderValue={({ value }) => value + ' hrs'}
+          />
+        </PieChart>
+      ) : null}
+    </Card>
+  );
+};

package/src/components/ProgressInfo/ProgressInfoTotals.tsx

@@ -1,60 +1,60 @@
-import { Typography } from '@ssa-ui-kit/core';
-import { withTheme, css } from '@emotion/react';
-
-import { ProgressInfoTotalsProps } from './types';
-
-export const ProgressInfoTotals = withTheme(
-  ({ theme, total }: ProgressInfoTotalsProps) => {
-    return (
-      <Typography
-        variant="body2"
-        weight="regular"
-        color={theme.colors.greyDarker60}
-        css={css`
-          font-size: 13px;
-          line-height: 16px;
-          margin-top: -5px;
-
-          ${theme.mediaQueries.md} {
-            font-size: 16px;
-            font-weight: 700;
-          }
-        `}>
-        Total
-        <Typography
-          variant="body2"
-          weight="bold"
-          color={theme.colors.greyDarker}
-          as={'span'}
-          css={css`
-            font-size: 19px;
-            line-height: 23px;
-            display: block;
-
-            ${theme.mediaQueries.md} {
-              font-size: 27.65px;
-              line-height: 35px;
-            }
-          `}>
-          {total}
-          <Typography
-            variant="body2"
-            weight="regular"
-            as="span"
-            color={theme.colors.greyDarker60}
-            css={css`
-              font-size: 13px;
-              font-weight: 600;
-              margin-left: 3px;
-
-              ${theme.mediaQueries.md} {
-                font-size: 16px;
-              }
-            `}>
-            hrs
-          </Typography>
-        </Typography>
-      </Typography>
-    );
-  },
-);
+import { Typography } from '@ssa-ui-kit/core';
+import { withTheme, css } from '@emotion/react';
+
+import { ProgressInfoTotalsProps } from './types';
+
+export const ProgressInfoTotals = withTheme(
+  ({ theme, total }: ProgressInfoTotalsProps) => {
+    return (
+      <Typography
+        variant="body2"
+        weight="regular"
+        color={theme.colors.greyDarker60}
+        css={css`
+          font-size: 13px;
+          line-height: 16px;
+          margin-top: -5px;
+
+          ${theme.mediaQueries.md} {
+            font-size: 16px;
+            font-weight: 700;
+          }
+        `}>
+        Total
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          as={'span'}
+          css={css`
+            font-size: 19px;
+            line-height: 23px;
+            display: block;
+
+            ${theme.mediaQueries.md} {
+              font-size: 27.65px;
+              line-height: 35px;
+            }
+          `}>
+          {total}
+          <Typography
+            variant="body2"
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker60}
+            css={css`
+              font-size: 13px;
+              font-weight: 600;
+              margin-left: 3px;
+
+              ${theme.mediaQueries.md} {
+                font-size: 16px;
+              }
+            `}>
+            hrs
+          </Typography>
+        </Typography>
+      </Typography>
+    );
+  },
+);

package/src/components/ProgressInfo/index.ts

@@ -1,3 +1,3 @@
-export { ProgressInfo as default } from './ProgressInfo';
-export { ProgressInfoTotals } from './ProgressInfoTotals';
-export * from './types';
+export { ProgressInfo as default } from './ProgressInfo';
+export { ProgressInfoTotals } from './ProgressInfoTotals';
+export * from './types';