@ssa-ui-kit/core 0.0.15-alpha → 0.0.17-alpha

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,68 +1,68 @@
-import {
-  pink,
-  yellow,
-  green,
-  turquoise,
-  purple,
-  blue,
-  blueLight,
-  yellowWarm,
-} from '@styles/global';
-
-import { ProgressBarProps } from './types';
-import { wrapper, bar } from './styles';
-
-const mapColors: MainColors = {
-  pink,
-  yellow,
-  green,
-  turquoise,
-  purple,
-  blue,
-  blueLight,
-  yellowWarm,
-};
-
-export const ProgressBar = ({
-  percentage,
-  color = 'green',
-  vertical = false,
-  bgColor = 'rgba(238, 241, 247, 1)',
-  size = 12,
-}: ProgressBarProps) => {
-  const mapBarWrapper = {
-    horizontal: {
-      height: size,
-      width: '100%',
-    },
-    vertical: {
-      height: '100%',
-      width: size,
-    },
-  };
-  const mapBarContainer = {
-    horizontal: {
-      width: `${percentage}%`,
-      height: size,
-    },
-    vertical: {
-      width: size,
-      height: `${percentage}%`,
-    },
-  };
-
-  return (
-    <div
-      css={[wrapper, { backgroundColor: bgColor }]}
-      style={{
-        ...mapBarWrapper[vertical ? 'vertical' : 'horizontal'],
-      }}>
-      <span
-        role="progressbar"
-        css={[bar, mapColors[color]]}
-        style={mapBarContainer[vertical ? 'vertical' : 'horizontal']}></span>
-    </div>
-  );
-};
-
-export default ProgressBar;
+import {
+  pink,
+  yellow,
+  green,
+  turquoise,
+  purple,
+  blue,
+  blueLight,
+  yellowWarm,
+} from '@styles/global';
+
+import { ProgressBarProps } from './types';
+import { wrapper, bar } from './styles';
+
+const mapColors: MainColors = {
+  pink,
+  yellow,
+  green,
+  turquoise,
+  purple,
+  blue,
+  blueLight,
+  yellowWarm,
+};
+
+export const ProgressBar = ({
+  percentage,
+  color = 'green',
+  vertical = false,
+  bgColor = 'rgba(238, 241, 247, 1)',
+  size = 12,
+}: ProgressBarProps) => {
+  const mapBarWrapper = {
+    horizontal: {
+      height: size,
+      width: '100%',
+    },
+    vertical: {
+      height: '100%',
+      width: size,
+    },
+  };
+  const mapBarContainer = {
+    horizontal: {
+      width: `${percentage}%`,
+      height: size,
+    },
+    vertical: {
+      width: size,
+      height: `${percentage}%`,
+    },
+  };
+
+  return (
+    <div
+      css={[wrapper, { backgroundColor: bgColor }]}
+      style={{
+        ...mapBarWrapper[vertical ? 'vertical' : 'horizontal'],
+      }}>
+      <span
+        role="progressbar"
+        css={[bar, mapColors[color]]}
+        style={mapBarContainer[vertical ? 'vertical' : 'horizontal']}></span>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/index.ts

@@ -1 +1 @@
-export { default } from './ProgressBar';
+export { default } from './ProgressBar';

package/src/components/ProgressBar/styles.ts

@@ -1,15 +1,15 @@
-import { css, Theme } from '@emotion/react';
-
-export const wrapper = (theme: Theme) => css`
-  position: relative;
-  background-color: ${theme.colors.greyLighter};
-  border-radius: 12px;
-  box-shadow: inset 0 -1px 1px ${theme.colors.white30};
-`;
-
-export const bar = () => css`
-  position: absolute;
-  display: block;
-  bottom: 0;
-  border-radius: 12px;
-`;
+import { css, Theme } from '@emotion/react';
+
+export const wrapper = (theme: Theme) => css`
+  position: relative;
+  background-color: ${theme.colors.greyLighter};
+  border-radius: 12px;
+  box-shadow: inset 0 -1px 1px ${theme.colors.white30};
+`;
+
+export const bar = () => css`
+  position: absolute;
+  display: block;
+  bottom: 0;
+  border-radius: 12px;
+`;

package/src/components/ProgressBar/types.ts

@@ -1,7 +1,7 @@
-export interface ProgressBarProps {
-  percentage: number;
-  color?: keyof MainColors;
-  vertical?: boolean;
-  bgColor?: string;
-  size?: number;
-}
+export interface ProgressBarProps {
+  percentage: number;
+  color?: keyof MainColors;
+  vertical?: boolean;
+  bgColor?: string;
+  size?: number;
+}

package/src/components/ProgressCircle/ProgressCircle.spec.tsx

@@ -1,37 +1,37 @@
-import { screen } from '../../../customTest';
-
-import theme from '@themes/main';
-
-import ProgressCircle from './index';
-
-describe('ProgressCircle', () => {
-  it('Render ProgressCircle', () => {
-    render(<ProgressCircle max={100} currentValue={50} />);
-
-    const ProgressBar = screen.getByRole('progressbar');
-    const svg = ProgressBar.querySelectorAll(
-      'svg',
-    )[0] as unknown as HTMLElement;
-
-    const [colorInit, colorEnd] = svg.querySelectorAll('stop');
-
-    expect(colorInit).toHaveAttribute('stop-color', theme.colors.green);
-    expect(colorEnd).toHaveAttribute('stop-color', theme.colors.greenLighter);
-    expect(svg).toHaveAttribute('viewBox', '0 0 160 160');
-  });
-
-  it('Render ProgressCircle smaller', () => {
-    render(<ProgressCircle max={100} currentValue={50} size={100} />);
-
-    const ProgressBar = screen.getByRole('progressbar');
-    const svg = ProgressBar.querySelectorAll(
-      'svg',
-    )[0] as unknown as HTMLElement;
-
-    const [colorInit, colorEnd] = svg.querySelectorAll('stop');
-
-    expect(colorInit).toHaveAttribute('stop-color', theme.colors.green);
-    expect(colorEnd).toHaveAttribute('stop-color', theme.colors.greenLighter);
-    expect(svg).toHaveAttribute('viewBox', '0 0 100 100');
-  });
-});
+import { screen } from '../../../customTest';
+
+import theme from '@themes/main';
+
+import ProgressCircle from './index';
+
+describe('ProgressCircle', () => {
+  it('Render ProgressCircle', () => {
+    render(<ProgressCircle max={100} currentValue={50} />);
+
+    const ProgressBar = screen.getByRole('progressbar');
+    const svg = ProgressBar.querySelectorAll(
+      'svg',
+    )[0] as unknown as HTMLElement;
+
+    const [colorInit, colorEnd] = svg.querySelectorAll('stop');
+
+    expect(colorInit).toHaveAttribute('stop-color', theme.colors.green);
+    expect(colorEnd).toHaveAttribute('stop-color', theme.colors.greenLighter);
+    expect(svg).toHaveAttribute('viewBox', '0 0 160 160');
+  });
+
+  it('Render ProgressCircle smaller', () => {
+    render(<ProgressCircle max={100} currentValue={50} size={100} />);
+
+    const ProgressBar = screen.getByRole('progressbar');
+    const svg = ProgressBar.querySelectorAll(
+      'svg',
+    )[0] as unknown as HTMLElement;
+
+    const [colorInit, colorEnd] = svg.querySelectorAll('stop');
+
+    expect(colorInit).toHaveAttribute('stop-color', theme.colors.green);
+    expect(colorEnd).toHaveAttribute('stop-color', theme.colors.greenLighter);
+    expect(svg).toHaveAttribute('viewBox', '0 0 100 100');
+  });
+});

package/src/components/ProgressCircle/ProgressCircle.stories.tsx

@@ -1,96 +1,96 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { HeaderTitle, GridWrapper, colors } from '@components/Badge/helpers';
-
-import ProgressCircle from './index';
-
-type Args = Parameters<typeof ProgressCircle>[0];
-
-export default {
-  title: 'Components/Progress/Circle',
-  component: ProgressCircle,
-  argTypes: {
-    infoContent: {
-      table: {
-        type: {
-          summary: 'string | element',
-        },
-      },
-      type: { name: 'string' },
-    },
-    color: {
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-      options: [
-        'pink',
-        'yellow',
-        'green',
-        'turquoise',
-        'purple',
-        'blueLight',
-        'blue',
-      ],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-} as Meta<typeof ProgressCircle>;
-
-export const Default = {
-  args: {
-    max: 100,
-    currentValue: 50,
-    color: 'purple',
-    infoContent: '50% done',
-    size: 180,
-  },
-};
-
-const sizes = [80, 130, 180];
-
-export const SizesAndColors: StoryObj<typeof ProgressCircle> = (args: Args) => (
-  <GridWrapper>
-    <HeaderTitle>Color</HeaderTitle>
-    <HeaderTitle>Size: 80</HeaderTitle>
-    <HeaderTitle>Size: 130</HeaderTitle>
-    <HeaderTitle>Size: 180</HeaderTitle>
-    {colors.map((color) => (
-      <React.Fragment key={color}>
-        <HeaderTitle css={{ width: 80 }}>{color}</HeaderTitle>
-        {sizes.map((size) => (
-          <ProgressCircle
-            color={color}
-            size={size}
-            key={color + size}
-            {...args}
-          />
-        ))}
-      </React.Fragment>
-    ))}
-  </GridWrapper>
-);
-
-SizesAndColors.args = {
-  max: 100,
-  currentValue: 50,
-  infoContent: '50%',
-};
-
-SizesAndColors.argTypes = {
-  color: {
-    control: false,
-  },
-  size: {
-    control: false,
-  },
-  currentValue: {
-    control: false,
-  },
-  max: {
-    control: false,
-  },
-};
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HeaderTitle, GridWrapper, colors } from '@components/Badge/helpers';
+
+import ProgressCircle from './index';
+
+type Args = Parameters<typeof ProgressCircle>[0];
+
+export default {
+  title: 'Components/Progress/Circle',
+  component: ProgressCircle,
+  argTypes: {
+    infoContent: {
+      table: {
+        type: {
+          summary: 'string | element',
+        },
+      },
+      type: { name: 'string' },
+    },
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<typeof ProgressCircle>;
+
+export const Default = {
+  args: {
+    max: 100,
+    currentValue: 50,
+    color: 'purple',
+    infoContent: '50% done',
+    size: 180,
+  },
+};
+
+const sizes = [80, 130, 180];
+
+export const SizesAndColors: StoryObj<typeof ProgressCircle> = (args: Args) => (
+  <GridWrapper>
+    <HeaderTitle>Color</HeaderTitle>
+    <HeaderTitle>Size: 80</HeaderTitle>
+    <HeaderTitle>Size: 130</HeaderTitle>
+    <HeaderTitle>Size: 180</HeaderTitle>
+    {colors.map((color) => (
+      <React.Fragment key={color}>
+        <HeaderTitle css={{ width: 80 }}>{color}</HeaderTitle>
+        {sizes.map((size) => (
+          <ProgressCircle
+            color={color}
+            size={size}
+            key={color + size}
+            {...args}
+          />
+        ))}
+      </React.Fragment>
+    ))}
+  </GridWrapper>
+);
+
+SizesAndColors.args = {
+  max: 100,
+  currentValue: 50,
+  infoContent: '50%',
+};
+
+SizesAndColors.argTypes = {
+  color: {
+    control: false,
+  },
+  size: {
+    control: false,
+  },
+  currentValue: {
+    control: false,
+  },
+  max: {
+    control: false,
+  },
+};

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,60 +1,60 @@
-import { useTheme } from '@emotion/react';
-import { ColorsKeys } from '@global-types/emotion';
-import { v4 as uuidv4 } from 'uuid';
-
-import { ProgressCircleBase } from './ProgressCircleBase';
-import { ProgressCircleOuter } from './ProgressCircleOuter';
-import { ProgressCircleInner } from './ProgressCircleInner';
-import { ProgressCircleProps } from './types';
-
-const ProgressCircle = ({
-  max,
-  currentValue,
-  color = 'green',
-  size = 160,
-  infoContent,
-}: ProgressCircleProps) => {
-  const theme = useTheme();
-
-  const gradientId = `gradient-${uuidv4()}`;
-  const barStroke = size / 10 / 2;
-  const currentPercentage = (currentValue / max) * 100;
-  const fullStroke = 2 * (22 / 7) * (size / 2 - barStroke);
-  const svgOffset =
-    fullStroke -
-    (((2 * 22) / 7) * (size / 2 - barStroke) * currentPercentage) / 100;
-  const colorName = `${color}Lighter` as ColorsKeys;
-  const colorValue = theme.colors[colorName] || theme.colors[color];
-
-  return (
-    <ProgressCircleBase
-      gradientId={gradientId}
-      role="progressbar"
-      fullStroke={fullStroke}
-      svgOffset={svgOffset}
-      color={color}
-      size={size}>
-      <ProgressCircleOuter size={size}>
-        <ProgressCircleInner size={size}>{infoContent}</ProgressCircleInner>
-      </ProgressCircleOuter>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        viewBox={`0 0 ${size} ${size}`}
-        preserveAspectRatio="xMinYMin slice"
-        width="100%"
-        height="100%">
-        <defs>
-          <linearGradient id={gradientId}>
-            <stop offset="0%" stopColor={theme.colors[color]} />
-            <stop offset="100%" stopColor={colorValue} />
-          </linearGradient>
-        </defs>
-        <circle cx={size / 2} cy={size / 2} r={size / 2 - barStroke} />
-      </svg>
-    </ProgressCircleBase>
-  );
-};
-
-export default ProgressCircle;
+import { useTheme } from '@emotion/react';
+import { ColorsKeys } from '@global-types/emotion';
+import { v4 as uuidv4 } from 'uuid';
+
+import { ProgressCircleBase } from './ProgressCircleBase';
+import { ProgressCircleOuter } from './ProgressCircleOuter';
+import { ProgressCircleInner } from './ProgressCircleInner';
+import { ProgressCircleProps } from './types';
+
+const ProgressCircle = ({
+  max,
+  currentValue,
+  color = 'green',
+  size = 160,
+  infoContent,
+}: ProgressCircleProps) => {
+  const theme = useTheme();
+
+  const gradientId = `gradient-${uuidv4()}`;
+  const barStroke = size / 10 / 2;
+  const currentPercentage = (currentValue / max) * 100;
+  const fullStroke = 2 * (22 / 7) * (size / 2 - barStroke);
+  const svgOffset =
+    fullStroke -
+    (((2 * 22) / 7) * (size / 2 - barStroke) * currentPercentage) / 100;
+  const colorName = `${color}Lighter` as ColorsKeys;
+  const colorValue = theme.colors[colorName] || theme.colors[color];
+
+  return (
+    <ProgressCircleBase
+      gradientId={gradientId}
+      role="progressbar"
+      fullStroke={fullStroke}
+      svgOffset={svgOffset}
+      color={color}
+      size={size}>
+      <ProgressCircleOuter size={size}>
+        <ProgressCircleInner size={size}>{infoContent}</ProgressCircleInner>
+      </ProgressCircleOuter>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox={`0 0 ${size} ${size}`}
+        preserveAspectRatio="xMinYMin slice"
+        width="100%"
+        height="100%">
+        <defs>
+          <linearGradient id={gradientId}>
+            <stop offset="0%" stopColor={theme.colors[color]} />
+            <stop offset="100%" stopColor={colorValue} />
+          </linearGradient>
+        </defs>
+        <circle cx={size / 2} cy={size / 2} r={size / 2 - barStroke} />
+      </svg>
+    </ProgressCircleBase>
+  );
+};
+
+export default ProgressCircle;

package/src/components/ProgressCircle/ProgressCircleBase.tsx

@@ -1,45 +1,45 @@
-import styled from '@emotion/styled';
-import { ColorsKeys } from '../..';
-
-export const ProgressCircleBase = styled.div<{
-  gradientId: string;
-  fullStroke: number;
-  svgOffset: number;
-  color: string;
-  size: number;
-}>`
-  width: ${({ size }) => size}px;
-  height: ${({ size }) => size}px;
-
-  position: relative;
-
-  svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    filter: ${({ theme, color }) =>
-      `drop-shadow(3px 5px 10px ${
-        theme.colors[`${color}Lighter40` as ColorsKeys] ||
-        theme.colors[color as ColorsKeys]
-      })`};
-  }
-
-  circle {
-    fill: none;
-
-    stroke: url(#${({ gradientId }) => gradientId});
-    stroke-width: ${({ size }) => size / 10}px;
-    stroke-linecap: round;
-    stroke-dasharray: ${({ fullStroke }) => fullStroke};
-    stroke-dashoffset: ${({ fullStroke }) => fullStroke};
-
-    animation: ${({ gradientId }) => gradientId} 1s linear forwards;
-  }
-
-  @keyframes ${({ gradientId }) => gradientId} {
-    100% {
-      stroke-dashoffset: ${(props) => props.svgOffset};
-    }
-  }
-`;
+import styled from '@emotion/styled';
+import { ColorsKeys } from '../..';
+
+export const ProgressCircleBase = styled.div<{
+  gradientId: string;
+  fullStroke: number;
+  svgOffset: number;
+  color: string;
+  size: number;
+}>`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    filter: ${({ theme, color }) =>
+      `drop-shadow(3px 5px 10px ${
+        theme.colors[`${color}Lighter40` as ColorsKeys] ||
+        theme.colors[color as ColorsKeys]
+      })`};
+  }
+
+  circle {
+    fill: none;
+
+    stroke: url(#${({ gradientId }) => gradientId});
+    stroke-width: ${({ size }) => size / 10}px;
+    stroke-linecap: round;
+    stroke-dasharray: ${({ fullStroke }) => fullStroke};
+    stroke-dashoffset: ${({ fullStroke }) => fullStroke};
+
+    animation: ${({ gradientId }) => gradientId} 1s linear forwards;
+  }
+
+  @keyframes ${({ gradientId }) => gradientId} {
+    100% {
+      stroke-dashoffset: ${(props) => props.svgOffset};
+    }
+  }
+`;