Implement Slider component

package.json

@@ -53,5 +53,8 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@radix-ui/react-slider": "0.1.4"
+  }
 }

packages/bezier-react/src/components/Forms/Inputs/Slider/Slider.stories.tsx

@@ -0,0 +1,90 @@
+/* External dependencies */
+import React from 'react'
+import base from 'paths.macro'
+import {
+  type Meta,
+  type Story,
+} from '@storybook/react'
+
+/* Internal dependencies */
+import {
+  getTitle,
+} from 'Utils/storyUtils'
+import Slider from './Slider'
+import type SliderProps from './Slider.types'
+
+export default {
+  title: getTitle(base),
+  component: Slider,
+  argTypes: {
+    width: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    min: {
+      control: {
+        type: 'number',
+      },
+    },
+    max: {
+      control: {
+        type: 'number',
+      },
+    },
+    step: {
+      control: {
+        type: 'number',
+      },
+    },
+  },
+} as Meta
+
+const Template: Story<SliderProps> = (args) => <Slider {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {
+  width: '36',
+  defaultValue: [5],
+  disabled: false,
+  min: 0,
+  max: 10,
+  step: 1,
+}
+
+export const Uncontrolled = Template.bind({})
+Uncontrolled.args = {
+  width: '285',
+  defaultValue: [5],
+  disabled: false,
+  min: 0,
+  max: 10,
+  step: 1,
+}
+
+export const Controlled = Template.bind({})
+Controlled.args = {
+  width: '285',
+  defaultValue: [5],
+  value: [5],
+  disabled: false,
+  min: 0,
+  max: 10,
+  step: 1,
+}
+
+export const WithGuide = Template.bind({})
+WithGuide.args = {
+  width: '285',
+  defaultValue: [5],
+  guide: [0, 1, 2, 3, 4, 5, 10],
+  disabled: false,
+  min: 0,
+  max: 10,
+  step: 1,
+}

packages/bezier-react/src/components/Forms/Inputs/Slider/Slider.styled.ts

@@ -0,0 +1,104 @@
+/* External dependencies */
+import {
+  Root as RootPrimitive,
+  Track as TrackPrimitive,
+  Range as RangePrimitive,
+  Thumb as ThumbPrimitive,
+} from '@radix-ui/react-slider'
+
+/* Internal dependencies */
+import { styled } from 'Foundation'
+import { toLength } from 'Utils/styleUtils'
+import { focusedInputWrapperStyle } from 'Components/Forms/Inputs/mixins'
+import type SliderProps from './Slider.types'
+
+const SLIDER_TRACK_RANGE_HEIGHT = 6
+const SLIDER_THUMB_SIZE = 20
+
+interface SliderRootProps extends SliderProps {
+  width: NonNullable<SliderProps['width']>
+}
+
+export const SliderRoot = styled(RootPrimitive)<SliderRootProps>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+
+  width: ${({ width }) => toLength(width, '36px')};
+  height: ${SLIDER_THUMB_SIZE}px;
+
+  ${({ interpolation }) => interpolation}
+`
+
+interface SliderTrackProps extends SliderProps {}
+
+export const SliderTrack = styled(TrackPrimitive)<SliderTrackProps>`
+  position: relative;
+  flex: 1;
+  height: ${SLIDER_TRACK_RANGE_HEIGHT}px;
+
+  ${({ foundation }) => foundation?.rounding?.round3}
+  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};
+
+  ${({ interpolation }) => interpolation}
+`
+
+interface SliderRangeProps extends SliderProps {}
+
+export const SliderRange = styled(RangePrimitive)<SliderRangeProps>`
+  position: absolute;
+  height: 100%;
+
+  ${({ foundation }) => foundation?.rounding?.round3}
+  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};
+
+  ${({ interpolation }) => interpolation}
+`
+
+interface SliderGuideProps extends SliderProps {
+  min: NonNullable<SliderProps['min']>
+  max: NonNullable<SliderProps['max']>
+  guideValue: number
+}
+
+export const SliderGuide = styled.div<SliderGuideProps>`
+  position: absolute;
+  bottom: calc(8px + (8px / 2) + 3px);
+  // TODO (@aru): FIXME
+  left: calc(${({ min, max, guideValue }) => (guideValue / (max - min)) * 100}% - 1px + ${({ min, max, guideValue }) => (((((max + min) / 2) - guideValue)) * (SLIDER_THUMB_SIZE / ((max - min))))}px);
+
+  width: 2px;
+  height: 8px;
+
+  ${({ foundation }) => foundation?.rounding?.round1}
+  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-light']};
+
+  ${({ interpolation }) => interpolation}
+`
+
+interface SliderThumbProps extends SliderProps {}
+
+export const SliderThumb = styled(ThumbPrimitive)<SliderThumbProps>`
+  all: unset;
+  display: block;
+
+  width: ${SLIDER_THUMB_SIZE}px;
+  height: ${SLIDER_THUMB_SIZE}px;
+
+  ${({ foundation }) => foundation?.rounding?.round12}
+  ${({ foundation }) => foundation?.elevation?.ev2()}
+  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
+
+  &:hover {
+    ${({ foundation }) => foundation?.elevation?.ev3()}
+    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
+  }
+  &:focus {
+    ${focusedInputWrapperStyle}
+  }
+
+  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}
+  ${({ interpolation }) => interpolation}
+`

packages/bezier-react/src/components/Forms/Inputs/Slider/Slider.tsx

@@ -0,0 +1,53 @@
+/* External dependencies */
+import React, { forwardRef } from 'react'
+
+/* Internal dependencies */
+import SliderProps from './Slider.types'
+import * as Styled from './Slider.styled'
+
+function Slider(
+  {
+    width = 36,
+    guide = [5],
+    // TODO (@aru): Tooltip
+    // showTooltip = true,
+    defaultValue = [5],
+    value,
+    disabled = false,
+    min = 0,
+    max = 10,
+    step = 1,
+    onValueChange,
+    ...rest
+  }: SliderProps,
+  forwardedRef: React.Ref<any>, // TODO: resolve any
+) {
+  return (
+    <Styled.SliderRoot
+      width={width}
+      defaultValue={defaultValue}
+      value={value}
+      disabled={disabled}
+      min={min}
+      max={max}
+      step={step}
+      onValueChange={onValueChange}
+      ref={forwardedRef}
+      {...rest}
+    >
+      <Styled.SliderTrack>
+        <Styled.SliderRange />
+      </Styled.SliderTrack>
+      { guide?.map((guideValue) => (
+        <Styled.SliderGuide
+          min={min}
+          max={max}
+          guideValue={guideValue}
+        />
+      )) }
+      <Styled.SliderThumb />
+    </Styled.SliderRoot>
+  )
+}
+
+export default forwardRef(Slider)

packages/bezier-react/src/components/Forms/Inputs/Slider/Slider.types.ts

@@ -0,0 +1,17 @@
+/* External dependencies */
+import type { SliderProps as SliderPrimitiveProps } from '@radix-ui/react-slider'
+
+/* Internal dependencies */
+import type { BezierComponentProps } from 'Types/ComponentProps'
+
+interface SliderOptions {
+  // TODO (@aru): add jsdoc
+  width?: number | string
+  guide?: number[]
+  showTooltip?: boolean
+}
+
+export default interface SliderProps extends
+  BezierComponentProps,
+  SliderPrimitiveProps,
+  SliderOptions {}

packages/bezier-react/src/components/Forms/Inputs/Slider/index.ts

@@ -0,0 +1,8 @@
+/* Internal dependencies */
+import Slider from './Slider'
+import type SliderProps from './Slider.types'
+
+export {
+  Slider,
+  type SliderProps,
+}

packages/bezier-react/src/foundation/Rounding/index.ts

@@ -7,6 +7,7 @@ const DefaultRoundStyle = css`
 `
 
 export enum RoundAbsoluteNumber {
+  R1 = 1,
   R3 = 3,
   R4 = 4,
   R6 = 6,
@@ -17,6 +18,11 @@ export enum RoundAbsoluteNumber {
   R32 = 32,
 }
 
+const round1 = css`
+  ${DefaultRoundStyle};
+  border-radius: ${RoundAbsoluteNumber.R1}px;
+`
+
 const round3 = css`
   ${DefaultRoundStyle};
   border-radius: ${RoundAbsoluteNumber.R3}px;
@@ -59,6 +65,7 @@ const round32 = css`
 
 export const Rounding = {
   DefaultRoundStyle,
+  round1,
   round3,
   round4,
   round6,

packages/bezier-react/src/index.ts

@@ -22,6 +22,7 @@ export * from 'Components/Forms/Inputs/mixins'
 export * from 'Components/Forms/Inputs/Select'
 export * from 'Components/Forms/Inputs/TextArea'
 export * from 'Components/Forms/Inputs/TextField'
+export * from 'Components/Forms/Inputs/Slider'
 export * from 'Components/Forms/Radio'
 export * from 'Components/Forms/SegmentedControl'
 export * from 'Components/Forms/Switch'