@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

package/src/components/PieChart/PieChart.stories.tsx

@@ -1,129 +1,129 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { css, useTheme } from '@emotion/react';
-import { MainColors, Typography } from '@ssa-ui-kit/core';
-
-import { PieChart, PieChartLegend, pieChartPalettes } from './index';
-import { fitnessData, accountData } from './stories/fixtures';
-
-export default {
-  title: 'Widgets/PieChart',
-  component: PieChart,
-} as Meta<typeof PieChart>;
-
-export const FitnessExample: StoryObj<typeof PieChart> = () => {
-  const theme = useTheme();
-  const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
-    keyof MainColors
-  >;
-  const pieChartColors = [
-    theme.colors.blueLighter,
-    theme.colors.turquoise,
-  ] as unknown as string[];
-
-  return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={fitnessData}
-        colors={pieChartColors}
-        animate={false}
-        title={
-          <Typography
-            variant="body2"
-            weight="regular"
-            color={theme.colors.greyDarker60}
-            css={css`
-              font-size: 16px;
-              line-height: 16px;
-              margin-top: -5px;
-            `}>
-            Total
-            <Typography
-              variant="body2"
-              weight="bold"
-              color={theme.colors.greyDarker}
-              css={css`
-                font-size: 27.65px;
-                line-height: 35px;
-              `}>
-              143
-              <Typography
-                variant="body2"
-                weight="regular"
-                as="span"
-                color={theme.colors.greyDarker60}
-                css={css`
-                  font-size: 16px;
-                  font-weight: 600;
-                  margin-left: 3px;
-                `}>
-                hrs
-              </Typography>
-            </Typography>
-          </Typography>
-        }>
-        <PieChartLegend data={fitnessData} colors={colorNames} />
-      </PieChart>
-    </div>
-  );
-};
-FitnessExample.args = {};
-
-export const AccountExample: StoryObj<typeof PieChart> = () => {
-  const theme = useTheme();
-  const { legendColorNames, pieChartColors } =
-    pieChartPalettes.getBalancePalette(theme);
-
-  return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={accountData}
-        colors={pieChartColors}
-        animate={false}
-        title={
-          <Typography
-            variant="body2"
-            weight="bold"
-            color={theme.colors.greyDarker}
-            css={css`
-              font-size: 20px;
-              line-height: 25px;
-            `}>
-            147358 &nbsp;
-            <Typography
-              variant="body2"
-              weight="regular"
-              as="span"
-              color={theme.colors.greyDarker80}
-              css={css`
-                font-size: 14px;
-              `}>
-              USD
-            </Typography>
-          </Typography>
-        }>
-        <PieChartLegend
-          data={accountData}
-          colors={legendColorNames}
-          renderValue={({ value, label }) =>
-            label === 'Other' ? value + ' USD' : value + ' ' + label
-          }
-          markerStyles={css`
-            width: 10px;
-            height: 10px;
-          `}
-          labelListStyles={css`
-            h6 {
-              font-weight: 700;
-            }
-          `}
-          valueListStyles={css`
-            h6 {
-              color: ${theme.colors.greyDarker80};
-            }
-          `}
-        />
-      </PieChart>
-    </div>
-  );
-};
-AccountExample.args = {};
+import type { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import { MainColors, Typography } from '@ssa-ui-kit/core';
+
+import { PieChart, PieChartLegend, pieChartPalettes } from './index';
+import { fitnessData, accountData } from './stories/fixtures';
+
+export default {
+  title: 'Widgets/PieChart',
+  component: PieChart,
+} as Meta<typeof PieChart>;
+
+export const FitnessExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+    keyof MainColors
+  >;
+  const pieChartColors = [
+    theme.colors.blueLighter,
+    theme.colors.turquoise,
+  ] as unknown as string[];
+
+  return (
+    <div style={{ width: '400px' }}>
+      <PieChart
+        data={fitnessData}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <Typography
+            variant="body2"
+            weight="regular"
+            color={theme.colors.greyDarker60}
+            css={css`
+              font-size: 16px;
+              line-height: 16px;
+              margin-top: -5px;
+            `}>
+            Total
+            <Typography
+              variant="body2"
+              weight="bold"
+              color={theme.colors.greyDarker}
+              css={css`
+                font-size: 27.65px;
+                line-height: 35px;
+              `}>
+              143
+              <Typography
+                variant="body2"
+                weight="regular"
+                as="span"
+                color={theme.colors.greyDarker60}
+                css={css`
+                  font-size: 16px;
+                  font-weight: 600;
+                  margin-left: 3px;
+                `}>
+                hrs
+              </Typography>
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend data={fitnessData} colors={colorNames} />
+      </PieChart>
+    </div>
+  );
+};
+FitnessExample.args = {};
+
+export const AccountExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const { legendColorNames, pieChartColors } =
+    pieChartPalettes.getBalancePalette(theme);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <PieChart
+        data={accountData}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <Typography
+            variant="body2"
+            weight="bold"
+            color={theme.colors.greyDarker}
+            css={css`
+              font-size: 20px;
+              line-height: 25px;
+            `}>
+            147358 &nbsp;
+            <Typography
+              variant="body2"
+              weight="regular"
+              as="span"
+              color={theme.colors.greyDarker80}
+              css={css`
+                font-size: 14px;
+              `}>
+              USD
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend
+          data={accountData}
+          colors={legendColorNames}
+          renderValue={({ value, label }) =>
+            label === 'Other' ? value + ' USD' : value + ' ' + label
+          }
+          markerStyles={css`
+            width: 10px;
+            height: 10px;
+          `}
+          labelListStyles={css`
+            h6 {
+              font-weight: 700;
+            }
+          `}
+          valueListStyles={css`
+            h6 {
+              color: ${theme.colors.greyDarker80};
+            }
+          `}
+        />
+      </PieChart>
+    </div>
+  );
+};
+AccountExample.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -1,40 +1,40 @@
-import { ResponsivePie } from '@nivo/pie';
-import { PieChartProps } from './types';
-
-import { PieChartBase, PieChartTextBase } from './PieChartBases';
-
-export const PieChart = ({
-  data,
-  as,
-  className,
-  title,
-  children,
-  ...chartProps
-}: PieChartProps) => {
-  return (
-    <PieChartBase as={as} className={className}>
-      <div className="pie-chart-wrapper">
-        <ResponsivePie
-          data={data}
-          isInteractive={false}
-          innerRadius={0.8}
-          enableArcLinkLabels={false}
-          enableArcLabels={false}
-          padAngle={2}
-          cornerRadius={16}
-          activeOuterRadiusOffset={8}
-          colors={{ datum: 'data.color' }}
-          arcLinkLabelsSkipAngle={10}
-          arcLinkLabelsTextColor="#333333"
-          arcLinkLabelsThickness={2}
-          arcLinkLabelsColor={{ from: 'color' }}
-          arcLabelsSkipAngle={10}
-          layers={['arcs']}
-          {...chartProps}
-        />
-        {title && <PieChartTextBase>{title}</PieChartTextBase>}
-      </div>
-      {children}
-    </PieChartBase>
-  );
-};
+import { ResponsivePie } from '@nivo/pie';
+import { PieChartProps } from './types';
+
+import { PieChartBase, PieChartTextBase } from './PieChartBases';
+
+export const PieChart = ({
+  data,
+  as,
+  className,
+  title,
+  children,
+  ...chartProps
+}: PieChartProps) => {
+  return (
+    <PieChartBase as={as} className={className}>
+      <div className="pie-chart-wrapper">
+        <ResponsivePie
+          data={data}
+          isInteractive={false}
+          innerRadius={0.8}
+          enableArcLinkLabels={false}
+          enableArcLabels={false}
+          padAngle={2}
+          cornerRadius={16}
+          activeOuterRadiusOffset={8}
+          colors={{ datum: 'data.color' }}
+          arcLinkLabelsSkipAngle={10}
+          arcLinkLabelsTextColor="#333333"
+          arcLinkLabelsThickness={2}
+          arcLinkLabelsColor={{ from: 'color' }}
+          arcLabelsSkipAngle={10}
+          layers={['arcs']}
+          {...chartProps}
+        />
+        {title && <PieChartTextBase>{title}</PieChartTextBase>}
+      </div>
+      {children}
+    </PieChartBase>
+  );
+};

package/src/components/PieChart/PieChartBases.tsx

@@ -1,26 +1,26 @@
-import styled from '@emotion/styled';
-
-export const PieChartBase = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  & > .pie-chart-wrapper {
-    position: relative;
-    width: 160px;
-    height: 160px;
-  }
-`;
-
-export const PieChartTextBase = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-`;
+import styled from '@emotion/styled';
+
+export const PieChartBase = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  & > .pie-chart-wrapper {
+    position: relative;
+    width: 160px;
+    height: 160px;
+  }
+`;
+
+export const PieChartTextBase = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;

package/src/components/PieChart/PieChartLegend.tsx

@@ -1,51 +1,51 @@
-import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
-import { Typography } from '@ssa-ui-kit/core';
-
-import { PieChartLegendMarker } from './PieChartLegendMarker';
-import { PieChartLegendList } from './PieChartLegendList';
-import { PieChartLegendProps } from './types';
-
-export const PieChartLegend = ({
-  data,
-  colors,
-  renderLabel,
-  renderValue,
-  markerStyles,
-  labelListStyles,
-  valueListStyles,
-}: PieChartLegendProps) => {
-  const theme = useTheme();
-  return (
-    <Fragment>
-      <PieChartLegendList css={labelListStyles}>
-        {data.map((item, index) => {
-          const { id, label } = item;
-          return (
-            <li key={`tag-${id}`}>
-              <PieChartLegendMarker
-                color={colors[index] || 'purple'}
-                as={'span'}
-                css={markerStyles}
-              />
-              <Typography variant="h6">
-                {typeof renderLabel === 'function' ? renderLabel(item) : label}
-              </Typography>
-            </li>
-          );
-        })}
-      </PieChartLegendList>
-      <PieChartLegendList css={valueListStyles}>
-        {data.map((item) => (
-          <li key={`subtitle-${item.id}`}>
-            <Typography variant="subtitle" color={theme.colors.greyDarker60}>
-              {typeof renderValue === 'function'
-                ? renderValue(item)
-                : item.value}
-            </Typography>
-          </li>
-        ))}
-      </PieChartLegendList>
-    </Fragment>
-  );
-};
+import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
+import { Typography } from '@ssa-ui-kit/core';
+
+import { PieChartLegendMarker } from './PieChartLegendMarker';
+import { PieChartLegendList } from './PieChartLegendList';
+import { PieChartLegendProps } from './types';
+
+export const PieChartLegend = ({
+  data,
+  colors,
+  renderLabel,
+  renderValue,
+  markerStyles,
+  labelListStyles,
+  valueListStyles,
+}: PieChartLegendProps) => {
+  const theme = useTheme();
+  return (
+    <Fragment>
+      <PieChartLegendList css={labelListStyles}>
+        {data.map((item, index) => {
+          const { id, label } = item;
+          return (
+            <li key={`tag-${id}`}>
+              <PieChartLegendMarker
+                color={colors[index] || 'purple'}
+                as={'span'}
+                css={markerStyles}
+              />
+              <Typography variant="h6">
+                {typeof renderLabel === 'function' ? renderLabel(item) : label}
+              </Typography>
+            </li>
+          );
+        })}
+      </PieChartLegendList>
+      <PieChartLegendList css={valueListStyles}>
+        {data.map((item) => (
+          <li key={`subtitle-${item.id}`}>
+            <Typography variant="subtitle" color={theme.colors.greyDarker60}>
+              {typeof renderValue === 'function'
+                ? renderValue(item)
+                : item.value}
+            </Typography>
+          </li>
+        ))}
+      </PieChartLegendList>
+    </Fragment>
+  );
+};

package/src/components/PieChart/PieChartLegendList.tsx

@@ -1,19 +1,19 @@
-import styled from '@emotion/styled';
-
-export const PieChartLegendList = styled.ul`
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  list-style: none;
-
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  gap: 14px;
-
-  li {
-    display: flex;
-    align-items: center;
-    height: 20px;
-  }
-`;
+import styled from '@emotion/styled';
+
+export const PieChartLegendList = styled.ul`
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  list-style: none;
+
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  gap: 14px;
+
+  li {
+    display: flex;
+    align-items: center;
+    height: 20px;
+  }
+`;

package/src/components/PieChart/PieChartLegendMarker.tsx

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

package/src/components/PieChart/colorPalettes.ts

@@ -1,28 +1,28 @@
-import { Theme } from '@emotion/react';
-import { MainColors } from '@ssa-ui-kit/core';
-
-export const getBalancePalette = (theme: Theme) => {
-  const legendColorNames = [
-    'yellow',
-    'blue',
-    'green',
-    'yellowWarm',
-    'blueLight',
-    'turquoise',
-    'pink',
-    'purple',
-  ] as unknown as Array<keyof MainColors>;
-
-  const pieChartColors = [
-    theme.colors.yellow,
-    theme.colors.blue,
-    theme.colors.green,
-    theme.colors.yellowLighter,
-    theme.colors.blueLight,
-    theme.colors.turquoise,
-    theme.colors.pink,
-    theme.colors.purple,
-  ] as unknown as string[];
-
-  return { legendColorNames, pieChartColors };
-};
+import { Theme } from '@emotion/react';
+import { MainColors } from '@ssa-ui-kit/core';
+
+export const getBalancePalette = (theme: Theme) => {
+  const legendColorNames = [
+    'yellow',
+    'blue',
+    'green',
+    'yellowWarm',
+    'blueLight',
+    'turquoise',
+    'pink',
+    'purple',
+  ] as unknown as Array<keyof MainColors>;
+
+  const pieChartColors = [
+    theme.colors.yellow,
+    theme.colors.blue,
+    theme.colors.green,
+    theme.colors.yellowLighter,
+    theme.colors.blueLight,
+    theme.colors.turquoise,
+    theme.colors.pink,
+    theme.colors.purple,
+  ] as unknown as string[];
+
+  return { legendColorNames, pieChartColors };
+};

package/src/components/PieChart/index.ts

@@ -1,4 +1,4 @@
-export * from './PieChart';
-export * from './PieChartLegend';
-export * as pieChartPalettes from './colorPalettes';
-export * from './types';
+export * from './PieChart';
+export * from './PieChartLegend';
+export * as pieChartPalettes from './colorPalettes';
+export * from './types';