feat: ProgressIndicator clone

#60

Author: semnil5202

packages/web-domains/src/relay-question/features/select-relay-question/components/ProgressIndicator/index.tsx

@@ -0,0 +1,44 @@
+import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
+
+import { progressIndicatorCss, stepCss } from './styles';
+
+export interface ProgressIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+  mode?: 'horizontal' | 'vertical';
+  totalStep: number;
+  currentStep: number;
+}
+
+export const ProgressIndicator = forwardRef<HTMLDivElement, PropsWithChildren<ProgressIndicatorProps>>(
+  ({ mode = 'horizontal', totalStep, currentStep, children, ...rest }, ref) => {
+    const flexDirection = mode === 'horizontal' ? 'row' : 'column';
+    const currentStepIndex = Math.min(totalStep, currentStep) - 1;
+    const basis = 100 / totalStep;
+
+    return (
+      <div ref={ref} {...rest} css={progressIndicatorCss({ flexDirection })}>
+        {Array.from({ length: totalStep }).map((_, index) => (
+          <ProgressIndicator.Step key={index} isCurrent={index === currentStepIndex} basis={basis} />
+        ))}
+        {children}
+      </div>
+    );
+  },
+) as React.ForwardRefExoticComponent<ProgressIndicatorProps> & { Step: typeof Step };
+
+export interface StepProps extends HTMLAttributes<HTMLSpanElement> {
+  basis: number;
+  isCurrent: boolean;
+}
+
+const Step = ({ isCurrent, basis, ...rest }: StepProps) => {
+  let color = '#E1E1E1';
+
+  if (isCurrent) {
+    color = '#FF7664';
+  }
+
+  return <span {...rest} css={stepCss({ basis, color })} />;
+};
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+ProgressIndicator.Step = Step;

packages/web-domains/src/relay-question/features/select-relay-question/components/ProgressIndicator/styles.ts

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+import { ProgressIndicatorCssArgs, StepCssArgs } from './type';
+
+export const progressIndicatorCss = ({ flexDirection }: ProgressIndicatorCssArgs) =>
+  css({ width: '100%', display: 'flex', flexWrap: 'nowrap', flexDirection });
+
+export const stepCss = ({ basis, color }: StepCssArgs) =>
+  css({
+    boxSizing: 'border-box',
+    flex: `${basis}% 1 1`,
+    height: '4px',
+    backgroundColor: color,
+    borderRadius: '8px',
+    margin: '2px',
+  });

packages/web-domains/src/relay-question/features/select-relay-question/components/ProgressIndicator/type.ts

@@ -0,0 +1,8 @@
+export type ProgressIndicatorCssArgs = {
+  flexDirection: 'row' | 'column';
+};
+
+export type StepCssArgs = {
+  color: string;
+  basis: number;
+};