@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/atoms/metricInput/__stories__/DefaultMetric.story.tsx

@@ -7,9 +7,13 @@ export const defaultMetric = () => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label className="mr-5">No. of Days</Label>
+      <Label htmlFor="metric-input" className="mr-5">
+        No. of Days
+      </Label>
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
+          id="metric-input"
+          name="metric-input"
           size="regular"
           value={value}
           onChange={(e) => {
@@ -26,9 +30,11 @@ const customCode = `() => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label className="mr-5">No. of Days</Label>
+      <Label htmlFor="metric-input" className="mr-5">
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
+          id="metric-input"
+          name="metric-input"
           size="regular"
           value={value}
           onChange={e => { setValue(e.target.value); }}

package/core/components/atoms/metricInput/__stories__/WithPrefix.story.tsx

@@ -7,9 +7,12 @@ export const withPrefix = () => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label className="mr-5">Cost</Label>
+      <Label htmlFor="metric-input" className="mr-5">
+        Cost
+      </Label>
       <div style={{ width: 'var(--spacing-7)' }}>
         <MetricInput
+          id="metric-input"
           prefix="USD"
           value={value}
           onChange={(e) => {
@@ -26,9 +29,10 @@ const customCode = `() => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label className="mr-5">Cost</Label>
+      <Label htmlFor="metric-input" className="mr-5">Cost</Label>
       <div style={{ width: 'var(--spacing-7)' }}>
         <MetricInput
+          id="metric-input"
           prefix="USD"
           value={value}
           onChange={e => { setValue(e.target.value); }}

package/core/components/atoms/metricInput/__stories__/index.story.tsx

@@ -30,6 +30,7 @@ export const all = () => {
         onChange={action('on-change')}
         onClick={action('on-click')}
         placeholder={placeholder}
+        aria-label="Metric input example"
         prefix={prefix}
         suffix={suffix}
         size={size}

package/core/components/atoms/metricInput/__stories__/variants/Controlled.story.tsx

@@ -8,6 +8,7 @@ export const controlledMetricInput = () => {
   return (
     <div style={{ width: 'var(--spacing-6)' }}>
       <MetricInput
+        aria-label="Metric Input Label"
         value={value}
         onChange={(e) => {
           setValue(e.target.value);
@@ -23,6 +24,7 @@ const customCode = `() => {
   return (
     <div style={{ width: 'var(--spacing-6)' }}>
       <MetricInput
+        aria-label="Metric Input Label"
         value={value}
         onChange={(e) => { setValue(e.target.value) }}
       />

package/core/components/atoms/metricInput/__stories__/variants/Size.story.tsx

@@ -5,11 +5,11 @@ import { MetricInput, Text } from '@/index';
 export const size = () => (
   <div className="d-flex" style={{ width: 'var(--spacing-8)' }}>
     <div className="d-flex flex-column align-items-center mr-8">
-      <MetricInput size="regular" className="mb-3" />
+      <MetricInput aria-label="Metric input regular size" size="regular" className="mb-3" />
       <Text>Regular</Text>
     </div>
     <div className="d-flex flex-column align-items-center">
-      <MetricInput size="large" className="mb-3" />
+      <MetricInput aria-label="Metric input large size" size="large" className="mb-3" />
       <Text>Large</Text>
     </div>
   </div>

package/core/components/atoms/metricInput/__stories__/withSuffix.story.tsx

@@ -7,9 +7,12 @@ export const withSuffix = () => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label className="mr-5">Body Height</Label>
+      <Label htmlFor="metric-input" className="mr-5">
+        Body Height
+      </Label>
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
+          id="metric-input"
           suffix="in"
           value={value}
           onChange={(e) => {
@@ -26,9 +29,10 @@ const customCode = `() => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label className="mr-5">Body Height</Label>
+      <Label htmlFor="metric-input" className="mr-5">Body Height</Label>
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
+          id="metric-input"
           suffix="in"
           value={value}
           onChange={e => { setValue(e.target.value); }}

package/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
+      role="presentation"
     >
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -24,19 +25,22 @@ exports[`MetricInput component
       />
       <div
         class="MetricInput-arrowIcons"
-        tabindex="0"
       >
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
           data-test="DesignSystem-MetricInput--upIcon"
+          role="button"
           style="font-size: 12px; width: 12px;"
+          tabindex="0"
         >
           keyboard_arrow_up_round
         </i>
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
           data-test="DesignSystem-MetricInput--downIcon"
+          role="button"
           style="font-size: 12px; width: 12px;"
+          tabindex="0"
         >
           keyboard_arrow_down_round
         </i>
@@ -54,6 +58,7 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--regular MetricInput--error"
       data-test="DesignSystem-MetricInputWrapper"
+      role="presentation"
     >
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -70,19 +75,22 @@ exports[`MetricInput component
       />
       <div
         class="MetricInput-arrowIcons"
-        tabindex="0"
       >
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
           data-test="DesignSystem-MetricInput--upIcon"
+          role="button"
           style="font-size: 12px; width: 12px;"
+          tabindex="0"
         >
           keyboard_arrow_up_round
         </i>
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
           data-test="DesignSystem-MetricInput--downIcon"
+          role="button"
           style="font-size: 12px; width: 12px;"
+          tabindex="0"
         >
           keyboard_arrow_down_round
         </i>
@@ -100,6 +108,7 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--large"
       data-test="DesignSystem-MetricInputWrapper"
+      role="presentation"
     >
       <span
         class="Text Text--subtle Text--large mr-5"
@@ -122,19 +131,22 @@ exports[`MetricInput component
       </span>
       <div
         class="MetricInput-arrowIcons"
-        tabindex="0"
       >
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--large MetricInput-arrowIcon--up"
           data-test="DesignSystem-MetricInput--upIcon"
+          role="button"
           style="font-size: 16px; width: 16px;"
+          tabindex="0"
         >
           keyboard_arrow_up_round
         </i>
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--large MetricInput-arrowIcon--down"
           data-test="DesignSystem-MetricInput--downIcon"
+          role="button"
           style="font-size: 16px; width: 16px;"
+          tabindex="0"
         >
           keyboard_arrow_down_round
         </i>
@@ -152,6 +164,7 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
+      role="presentation"
     >
       <span
         class="Text Text--subtle Text--regular mr-4"
@@ -174,19 +187,22 @@ exports[`MetricInput component
       </span>
       <div
         class="MetricInput-arrowIcons"
-        tabindex="0"
       >
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
           data-test="DesignSystem-MetricInput--upIcon"
+          role="button"
           style="font-size: 12px; width: 12px;"
+          tabindex="0"
         >
           keyboard_arrow_up_round
         </i>
         <i
           class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
           data-test="DesignSystem-MetricInput--downIcon"
+          role="button"
           style="font-size: 12px; width: 12px;"
+          tabindex="0"
         >
           keyboard_arrow_down_round
         </i>

package/core/components/atoms/multiSlider/Handle.tsx

@@ -182,6 +182,8 @@ export class Handle extends React.Component<InternalHandleProps, HandleState> {
     });
 
     return (
+      // TODO(a11y): fix accessibility
+      /* eslint-disable */
       <>
         <div
           className={className}
@@ -195,6 +197,7 @@ export class Handle extends React.Component<InternalHandleProps, HandleState> {
           tabIndex={1}
           data-test="DesignSystem-MultiSlider-Handle"
         />
+        {/* eslint-enable  */}
         <div className={TooltipClass} style={style}>
           {label}
         </div>

package/core/components/atoms/multiSlider/SliderUtils.tsx

@@ -59,9 +59,6 @@ export function fillValues<T>(values: T[], startIndex: number, endIndex: number,
   }
 }
 
-export function isElementOfType<P = {}>(
-  element: any,
-  _ComponentType: React.ComponentType<P>
-): element is React.ReactElement<P> {
+export function isElementOfType(element: React.ReactElement) {
   return element != null && element.type != null;
 }

package/core/components/atoms/multiSlider/index.tsx

@@ -13,8 +13,7 @@ import {
   fillValues,
   isElementOfType,
 } from './SliderUtils';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 export interface MultiSliderProps extends BaseProps {
   /**
@@ -130,8 +129,8 @@ export class MultiSlider extends React.Component<InternalMultiSliderProps, Multi
   };
 
   getHandleValues = (props: React.PropsWithChildren<InternalMultiSliderProps>) => {
-    const maybeHandles = React.Children.map(props.children, (child) =>
-      isElementOfType(child, MultiSlider.Handle) ? child.props : null
+    const maybeHandles = React.Children.map(props.children as React.ReactElement, (child) =>
+      isElementOfType(child) ? child.props : null
     );
 
     let handles = maybeHandles != null ? maybeHandles : [];
@@ -322,6 +321,8 @@ export class MultiSlider extends React.Component<InternalMultiSliderProps, Multi
         }
       };
 
+      // TODO(a11y): fix accessibility
+      /* eslint-disable */
       labels.push(
         <div
           onClick={onClickHandler}
@@ -332,6 +333,7 @@ export class MultiSlider extends React.Component<InternalMultiSliderProps, Multi
           onMouseLeave={this.handleLabelMouseLeave}
           data-test="DesignSystem-MultiSlider-Label"
         >
+          {/* eslint-enable  */}
           <span className={'Slider-ticks'} />
           {labelRenderer !== false && (
             <Text size="small" appearance={active ? 'default' : 'disabled'}>
@@ -414,12 +416,15 @@ export class MultiSlider extends React.Component<InternalMultiSliderProps, Multi
       <div {...baseProps} className={SliderClass} data-test="DesignSystem-MultiSlider">
         {label && <Label withInput={true}>{label}</Label>}
         <div className={WrapperClass}>
+          {/* TODO(a11y): fix accessibility  */}
+          {/* eslint-disable */}
           <div
             className="Slider-track"
             ref={(ref) => (this.trackElement = ref)}
             onMouseDown={this.maybeHandleTrackClick}
             data-test="DesignSystem-MultiSlider-Slider-Track"
           >
+            {/* eslint-enable */}
             {this.renderTracks()}
           </div>
           <div className="Slider-axis">{this.renderLabels()}</div>

package/core/components/atoms/outsideClick/OutsideClick.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
 import classNames from 'classnames';
 
@@ -35,7 +34,7 @@ export const OutsideClick = React.forwardRef<HTMLDivElement, OutsideClickProps>(
       return;
     }
 
-    if (!ReactDOM.findDOMNode(element.current)!.contains(event.target as HTMLElement)) {
+    if (!element.current!.contains(event.target as HTMLElement)) {
       onOutsideClick(event);
     }
   }, []);

package/core/components/atoms/paragraph/Paragraph.tsx

@@ -3,7 +3,7 @@ import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
 
-export type Appearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled';
+export type ParagraphAppearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled';
 
 export interface ParagraphProps extends BaseProps, BaseHtmlProps<HTMLParagraphElement> {
   /**
@@ -14,7 +14,7 @@ export interface ParagraphProps extends BaseProps, BaseHtmlProps<HTMLParagraphEl
   /**
    * Color of `Paragraph`
    */
-  appearance: Appearance;
+  appearance: ParagraphAppearance;
 }
 
 export const Paragraph = (props: ParagraphProps) => {

package/core/components/atoms/paragraph/__stories__/variants/Appearance.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import Paragraph, { Appearance } from '../../index';
+import Paragraph, { ParagraphAppearance } from '../../index';
 import Text from '@/components/atoms/text';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
+  const appearances: ParagraphAppearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
   return (
     <div className="d-flex">
       {appearances.map((appear, ind) => {

package/core/components/atoms/paragraph/__tests__/Paragraph.test.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Paragraph, { ParagraphProps as Props, Appearance } from '../Paragraph';
+import Paragraph, { ParagraphProps as Props, ParagraphAppearance } from '../Paragraph';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const appearance: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
+const appearance: ParagraphAppearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
 
 const mapper = {
   appearance: valueHelper(appearance, { required: true, iterate: true }),

package/core/components/atoms/pills/Pills.tsx

@@ -1,23 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance =
-  | 'primary'
-  | 'secondary'
-  | 'alert'
-  | 'warning'
-  | 'success'
-  | 'accent1'
-  | 'accent2'
-  | 'accent3'
-  | 'accent4';
+import { AccentAppearance } from '@/common.type';
 
 export interface PillsProps extends BaseProps {
   /**
    * Color of the `Pills`
    */
-  appearance: Appearance;
+  appearance: AccentAppearance;
   /**
    * Makes `Pills` appearance subtle
    */

package/core/components/atoms/pills/__stories__/variants/Appearance.story.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Pills, { Appearance } from '../../Pills';
+import Pills from '../../Pills';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
@@ -10,7 +11,7 @@ export const appearance = () => {
 
   const children = text('children', 'Pills');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/pills/__stories__/variants/Subtle.story.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Pills, { Appearance } from '../../Pills';
+import Pills from '../../Pills';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const subtle = () => {
@@ -10,7 +11,7 @@ export const subtle = () => {
 
   const children = text('children', 'Pills');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/pills/__tests__/Pills.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Pills, { PillsProps as Props, Appearance } from '../Pills';
+import Pills, { PillsProps as Props } from '../Pills';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { AccentAppearance } from '@/common.type';
 
-const appearances: Appearance[] = [
+const appearances: AccentAppearance[] = [
   'primary',
   'alert',
   'warning',

package/core/components/atoms/placeholderImage/PlaceholderImage.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Size = 'small' | 'medium' | 'large';
+export type PlaceholderImageSize = 'small' | 'medium' | 'large';
 
 export interface PlaceholderImageProps extends BaseProps {
   /**
@@ -12,7 +12,7 @@ export interface PlaceholderImageProps extends BaseProps {
   /**
    * Specifies dimension of `Placeholder`
    */
-  size: Size;
+  size: PlaceholderImageSize;
 }
 
 export const PlaceholderImage = (props: PlaceholderImageProps) => {

package/core/components/atoms/placeholderImage/__stories__/variants/Size.story.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import PlaceholderImage, { Size } from '../../PlaceholderImage';
+import PlaceholderImage, { PlaceholderImageSize } from '../../PlaceholderImage';
 import Text from '@/components/atoms/text';
 
 export const size = () => {
   const round = boolean('round', false);
-  const sizes: Size[] = ['small', 'medium', 'large'];
+  const sizes: PlaceholderImageSize[] = ['small', 'medium', 'large'];
   const options = {
     round,
   };

package/core/components/atoms/placeholderParagraph/PlaceholderParagraph.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
 export type Length = 'small' | 'medium' | 'large';
-export type Size = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+export type PlaceholderParagraphSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
 export interface PlaceholderParagraphProps extends BaseProps {
   /**
@@ -31,7 +31,7 @@ export interface PlaceholderParagraphProps extends BaseProps {
    *
    * xxxl: `Heading` size: xxl
    */
-  size?: Size;
+  size?: PlaceholderParagraphSize;
 }
 
 export const PlaceholderParagraph = (props: PlaceholderParagraphProps) => {

package/core/components/atoms/placeholderParagraph/__stories__/variants/Size.story.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import PlaceholderParagraph, { Size } from '../../PlaceholderParagraph';
+import PlaceholderParagraph, { PlaceholderParagraphSize } from '../../PlaceholderParagraph';
 import Text from '@/components/atoms/text';
 
 export const size = () => {
-  const sizes: Size[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
+  const sizes: PlaceholderParagraphSize[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
 
   return (
     <div>

package/core/components/atoms/popperWrapper/PopperWrapper.tsx

@@ -142,7 +142,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     if (prevProps.open !== this.props.open) {
       this._throttleWait = false;
       if (this.props.open) {
-        const triggerElement = this.findDOMNode(this.triggerRef);
+        const triggerElement = this.triggerRef.current;
         const zIndex = this.getZIndexForLayer(triggerElement);
 
         this.setState({
@@ -216,12 +216,8 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     onToggle(newValue === undefined ? !open : newValue, type);
   };
 
-  findDOMNode = (ref: React.RefObject<HTMLElement>) => {
-    return ReactDOM.findDOMNode(ref.current!) as Element | null;
-  };
-
   doesEventContainsElement = (event: Event, ref: React.RefObject<any>) => {
-    const el = this.findDOMNode(ref);
+    const el = ref.current;
     return el && el.contains(event.target as HTMLElement);
   };
 

package/core/components/atoms/progressRing/ProgressRing.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Size = 'small' | 'regular';
+export type ProgressRingSize = 'small' | 'regular';
 
 export interface ProgressRingProps extends BaseProps {
   /**
    * Size of `Progress Ring`
    */
-  size: Size;
+  size: ProgressRingSize;
   /**
    * Specifies how much of the task that has been completed. Value should lie between 0 to max.
    */

package/core/components/atoms/progressRing/__stories__/variants/Size.story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ProgressRing, { Size } from '../../ProgressRing';
+import ProgressRing, { ProgressRingSize as Size } from '../../ProgressRing';
 import Text from '@/components/atoms/text';
 
 // CSF format story

package/core/components/atoms/radio/Radio.tsx

@@ -3,17 +3,16 @@ import classNames from 'classnames';
 import Text from '@/components/atoms/text';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 import uidGenerator from '@/utils/uidGenerator';
+import { ChangeEvent } from '@/common.type';
 
-export type Size = 'regular' | 'tiny';
-
-type MouseEvent = React.ChangeEvent<HTMLInputElement>;
+export type RadioSize = 'regular' | 'tiny';
 
 export interface RadioProps extends BaseProps, OmitNativeProps<HTMLInputElement, 'onChange'> {
   /**
    * Size of `Radio`
    * @default "regular"
    */
-  size?: Size;
+  size?: RadioSize;
   /**
    * Disables the `Radio`, making it unable to be pressed
    */
@@ -45,7 +44,7 @@ export interface RadioProps extends BaseProps, OmitNativeProps<HTMLInputElement,
   /**
    * Callback function called when user the selects an option
    */
-  onChange?: (event: MouseEvent) => void;
+  onChange?: (event: ChangeEvent) => void;
 }
 
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {

package/core/components/atoms/rangeSlider/RangeSlider.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import MultiSlider, { MultiSliderProps } from '@/components/atoms/multiSlider';
-
-export type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 enum RangeIndex {
   START = 0,

package/core/components/atoms/rangeSlider/__stories__/index.story.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { text, boolean, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import RangeSlider from '../RangeSlider';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 // CSF format story
 export const all = () => {

package/core/components/atoms/rangeSlider/__stories__/variants/Controlled.story.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RangeSlider } from '@/index';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 // CSF format story
 export const controlledSlider = () => {