diff --git a/package.json b/package.json index 7b9e9ee07..cbe851e0a 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,6 @@ "emotion-theming": "^10.3.0", "framer-motion": "^10.11.4", "ramda": "^0.28.0", - "rc-slider": "^10.1.0", - "rc-tooltip": "^4.2.3", "react-datepicker": "4.10.0", "react-spring": "^8.0.27", "rebass": "^4.0.7" diff --git a/src/components/picker/container/index.tsx b/src/components/picker/container/index.tsx deleted file mode 100644 index a0fa24932..000000000 --- a/src/components/picker/container/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { FC } from 'react'; -import { Box, Flex } from 'rebass'; -import SingleRangeSlider from '../single-range-slider'; -import MultiRangeSlider from '../multi-range-slider'; -import styles from './picker.styles'; - -export interface PickerProps { - min: number; - max: number; - value: number[]; - step: number; - handleChange?: (e: number | number[]) => void; -} - -const Picker: FC = ({ - min, - max, - value, - step = 0.01, - handleChange, - ...props -}: PickerProps) => { - if (!value.length) return null; - - return ( - - - {value.length > 1 ? ( - - ) : ( - - )} - - - ); -}; - -export default Picker; diff --git a/src/components/picker/container/picker.styles.ts b/src/components/picker/container/picker.styles.ts deleted file mode 100644 index 8768f1a96..000000000 --- a/src/components/picker/container/picker.styles.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { SxStyleProp } from 'rebass'; - -export default { - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - - '> div': { - flexGrow: 1, - }, -} as SxStyleProp; diff --git a/src/components/picker/handler/index.tsx b/src/components/picker/handler/index.tsx deleted file mode 100644 index a5e6350f0..000000000 --- a/src/components/picker/handler/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useContext, useEffect } from 'react'; -import TooltipWrapper from '../tooltip'; -import PickerContext from '../picker.context'; - -const PickerHandler = React.forwardRef((props: any) => { - const { value, dragging, index, ...restProps } = props; - - const [context, setContext] = useContext(PickerContext); - - useEffect(() => { - if (dragging) { - setContext((v: any) => ({ - ...v, - isDraggable: dragging, - activeHandlerId: index, - })); - } - }, [dragging, index, setContext]); - - return ( - -
-
-
- - ); -}); - -export default PickerHandler; diff --git a/src/components/picker/img/lsb.svg b/src/components/picker/img/lsb.svg deleted file mode 100644 index 6bed1af04..000000000 --- a/src/components/picker/img/lsb.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/picker/img/rsb.svg b/src/components/picker/img/rsb.svg deleted file mode 100644 index 42af69126..000000000 --- a/src/components/picker/img/rsb.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/picker/multi-range-slider/index.tsx b/src/components/picker/multi-range-slider/index.tsx deleted file mode 100644 index bdb31f861..000000000 --- a/src/components/picker/multi-range-slider/index.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React, { FC, useCallback, useContext, useMemo } from 'react'; -import { Box } from 'rebass'; -import RcSclider from 'rc-slider'; -import { useTheme } from '../../../theme/theme'; -import PickerHandler from '../handler'; -import styles from './multi-range-slider.styles'; -import 'rc-slider/assets/index.css'; -import PickerProvider from '../picker.provider'; -import PickerContext, { - IPickerContext, - PickerContextDefault, -} from '../picker.context'; - -export interface MultiRangeSliderProps { - value: number[]; - min: number; - max: number; - step?: number; - handleChange?: (e: number[]) => void; -} - -const MultiRangeSlider: FC = ({ - min, - max, - value, - step = 0.01, - handleChange, - ...props -}: MultiRangeSliderProps) => { - const [context, setContext] = useContext(PickerContext); - const theme = useTheme(); - const trackStyle = useMemo(() => { - return value.reduce((curr: any, _item, index) => { - const val = - index % 2 === 0 ? {} : { backgroundColor: theme.colors.grayShade2 }; - - return [...curr, val]; - }, []); - }, [theme.colors.grayShade2, value]); - - const boxProps = useMemo(() => { - const { activeHandlerId: ahId, isDraggable, isHover } = context; - const trackId = ahId % 2 === 0 ? ahId + 1 : ahId; - - return { - sliderTrackStyles: { - [`.rc-slider-track-${trackId}`]: { - bg: isDraggable || isHover ? 'primary' : 'bg', - }, - }, - }; - }, [context]); - - const handleMouseHover = useCallback( - (index: number, isHover: boolean): void => { - setContext((v: IPickerContext) => ({ - ...v, - activeHandlerId: index, - isHover, - })); - }, - [setContext], - ); - - return ( - - void} - // eslint-disable-next-line react/no-unstable-nested-components - handleRender={({ props: { tabIndex: index, ...restProps } }: any) => ( - handleMouseHover(index, true)} - onMouseLeave={() => handleMouseHover(index, false)} - {...restProps} - value={value} - index={index} - /> - )} - onAfterChange={() => setContext(PickerContextDefault)} - range - /> - - ); -}; - -const MultiRangeSliderWrapped = (props: MultiRangeSliderProps) => ( - - - -); - -export default MultiRangeSliderWrapped; diff --git a/src/components/picker/multi-range-slider/multi-range-slider.styles.ts b/src/components/picker/multi-range-slider/multi-range-slider.styles.ts deleted file mode 100644 index 7f5d768ff..000000000 --- a/src/components/picker/multi-range-slider/multi-range-slider.styles.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { SxStyleProp } from 'rebass'; - -export default ({ sliderTrackStyles }: any) => { - return { - '.rc-slider': { - '.rc-slider-track': { - borderRadius: 0, - height: '2px', - bg: 'black', - - ':focus': { - bg: 'green', - }, - }, - ...sliderTrackStyles, - - '.rc-slider-handle': { - height: '12px', - width: '3px', - boxShadow: 'none', - border: 'none', - borderRadius: '0px', - bg: 'transparent', - - ':nth-of-type(even)': { - '.icon': { - backgroundImage: `url("data:image/svg+xml,%3Csvg width='3' height='12' viewBox='0 0 3 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11L0.999999 11L1 1L3 1' stroke='black'/%3E%3C/svg%3E%0A")`, - height: '12px', - }, - }, - ':nth-of-type(odd)': { - '.icon': { - backgroundImage: `url("data:image/svg+xml,%3Csvg width='3' height='12' viewBox='0 0 3 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1H2V11H0' stroke='black'/%3E%3C/svg%3E")`, - height: '12px', - }, - }, - - ':hover,:active': { - marginTop: '-4px', - - '.icon': { - backgroundImage: 'none', - height: '10px', - width: '10px', - bg: 'grayShade3', - borderRadius: '0px', - boxShadow: 'none', - borderStyle: 'solid', - borderWidth: '1px', - borderColor: 'labels.green', - marginTop: '0px', - marginLeft: '-4px', - - ':after': { - content: '""', - position: 'absolute', - zIndex: 1, - top: '2px', - bottom: '4px', - left: '50%', - transform: 'translate(-50%)', - borderRadius: '0px', - borderLeftStyle: 'solid', - borderLeftWidth: '1px', - borderLeftColor: 'gray', - }, - }, - }, - }, - }, - } as SxStyleProp; -}; diff --git a/src/components/picker/picker.context.ts b/src/components/picker/picker.context.ts deleted file mode 100644 index 276ee4f28..000000000 --- a/src/components/picker/picker.context.ts +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -export interface IPickerContext { - isDraggable: boolean; - isHover: boolean; - activeHandlerId: number; -} - -export const PickerContextDefault = [ - { - isDraggable: false, - isHover: false, - activeHandlerId: 0, - }, - () => {}, -]; - -const PickerContext = - React.createContext>(PickerContextDefault); - -export default PickerContext; diff --git a/src/components/picker/picker.provider.tsx b/src/components/picker/picker.provider.tsx deleted file mode 100644 index 53fa839dd..000000000 --- a/src/components/picker/picker.provider.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { FC, useState } from 'react'; -import PickerContext, { PickerContextDefault } from './picker.context'; - -export interface CategoriesProviderProps { - children: React.ReactNode; -} - -const PickerProvider: FC = ({ - children, -}: CategoriesProviderProps) => { - const state = useState(PickerContextDefault); - - return ( - {children} - ); -}; - -export default PickerProvider; diff --git a/src/components/picker/picker.stories.tsx b/src/components/picker/picker.stories.tsx deleted file mode 100644 index 1193569e7..000000000 --- a/src/components/picker/picker.stories.tsx +++ /dev/null @@ -1,265 +0,0 @@ -import React, { useState } from 'react'; -import { Story, Meta } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import { Box } from 'rebass'; -import Picker, { PickerProps } from './container'; -import SingleRangeSlider, { - SingleRangeSliderProps, -} from './single-range-slider'; - -import MultiRangeSlider, { MultiRangeSliderProps } from './multi-range-slider'; - -export default { - title: 'Quartz/Picker', - component: Picker, -} as Meta; - -export const Container: Story = (props) => ( - - - -); - -Container.args = { - min: -1, - max: 70, - value: [30], - step: 0.01, - handleChange: action('OnChange'), -}; -Container.argTypes = { - min: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - max: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - value: { - control: { - type: 'array', - }, - type: { - required: true, - summary: 'array of integers', - }, - }, - step: { - control: { - type: 'number', - }, - type: { - summary: 'integer', - }, - defaultValue: { summary: 0.01 }, - }, - handleChange: { - control: { - type: 'object', - disable: true, - }, - type: { - summary: 'function', - }, - }, -}; - -export const SingleRange: Story = (props) => { - const [value, setValue] = useState(10); - return ( - - - - ); -}; - -SingleRange.args = { - min: -1, - max: 70, - value: 30, - step: 0.01, - handleChange: action('OnChange'), -}; -SingleRange.argTypes = { - min: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - max: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - value: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - step: { - control: { - type: 'number', - }, - type: { - summary: 'integer', - }, - defaultValue: { summary: 0.01 }, - }, - handleChange: { - control: { - type: 'object', - disable: true, - }, - type: { - summary: 'function', - }, - }, -}; - -export const DoubleRange: Story = (props) => { - const [value, setValue] = useState([-0.55, 0.1]); - return ( - - - - ); -}; - -DoubleRange.args = { - min: -1, - max: 1, - step: 0.01, - handleChange: action('OnChange'), -}; -DoubleRange.argTypes = { - min: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - max: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - value: { - control: { - type: 'array', - }, - type: { - required: true, - summary: 'array of integers', - }, - }, - step: { - control: { - type: 'number', - }, - type: { - summary: 'integer', - }, - defaultValue: { summary: 0.01 }, - }, - handleChange: { - control: { - type: 'object', - disable: true, - }, - type: { - summary: 'function', - }, - }, -}; - -export const MultiRange: Story = (props) => { - const [value, setValue] = useState([-1, -0.55, 0.1, 1]); - return ( - - - - ); -}; - -MultiRange.args = { - min: -1, - max: 1, - step: 0.01, -}; -MultiRange.argTypes = { - min: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - max: { - control: { - type: 'number', - }, - type: { - required: true, - summary: 'integer', - }, - }, - value: { - control: { - type: 'array', - }, - type: { - required: true, - summary: 'array of integers', - }, - }, - step: { - control: { - type: 'number', - }, - type: { - summary: 'integer', - }, - defaultValue: { summary: 0.01 }, - }, - handleChange: { - control: { - type: 'object', - disable: true, - }, - type: { - summary: 'function', - }, - }, -}; diff --git a/src/components/picker/single-range-slider/index.tsx b/src/components/picker/single-range-slider/index.tsx deleted file mode 100644 index 56a9de8b9..000000000 --- a/src/components/picker/single-range-slider/index.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { FC, useCallback, useContext, useMemo } from 'react'; -import { Box } from 'rebass'; -import Slider from 'rc-slider'; -import { useTheme } from '../../../theme/theme'; -import PickerHandler from '../handler'; -import PickerProvider from '../picker.provider'; -import PickerContext, { - IPickerContext, - PickerContextDefault, -} from '../picker.context'; -import styles from './single-range-slider.styles'; -import 'rc-slider/assets/index.css'; - -export interface SingleRangeSliderProps { - min: number; - max: number; - value: number; - step?: number; - handleChange?: (e: number) => void; -} - -const SingleRangeSlider: FC = ({ - min, - max, - value, - step = 0.01, - handleChange, - ...props -}: SingleRangeSliderProps) => { - const [context, setContext] = useContext(PickerContext); - const theme = useTheme(); - - const boxProps = useMemo(() => { - return { - sliderTrackStyles: { - '.rc-slider-track': { - bg: context.isDraggable || context.isHover ? 'primary' : 'bg', - }, - }, - }; - }, [context]); - - const handleMouseHover = useCallback( - (index: number, isHover: boolean): void => { - setContext((v: IPickerContext) => ({ - ...v, - activeHandlerId: index, - isHover, - })); - }, - [setContext], - ); - - return ( - - ( - handleMouseHover(index, true)} - onMouseLeave={() => handleMouseHover(index, false)} - /> - )} - onChange={handleChange as (e: number | number[]) => void} - onAfterChange={() => setContext(PickerContextDefault)} - /> - - ); -}; - -const SingleRangeSliderWrapped = (props: SingleRangeSliderProps) => ( - - - -); - -export default SingleRangeSliderWrapped; diff --git a/src/components/picker/single-range-slider/single-range-slider.styles.ts b/src/components/picker/single-range-slider/single-range-slider.styles.ts deleted file mode 100644 index cdfdee6eb..000000000 --- a/src/components/picker/single-range-slider/single-range-slider.styles.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { SxStyleProp } from 'rebass'; - -export default ({ sliderTrackStyles }: any) => { - return { - '.rc-slider': { - ...sliderTrackStyles, - }, - - '.rc-slider-track': { - borderRadius: 0, - height: '2px', - bg: 'black', - }, - - '.rc-slider-handle': { - height: '10px', - width: '10px', - bg: 'grayShade3', - boxShadow: 'none', - borderRadius: '0px', - borderStyle: 'solid', - borderWidth: '1px', - borderColor: 'black', - marginTop: '-4px', - - ':after': { - content: '""', - position: 'absolute', - zIndex: -1, - top: '1px', - bottom: '1px', - left: '50%', - transform: 'translate(-50%)', - borderLeftStyle: 'solid', - borderLeftWidth: '1px', - borderLeftColor: 'gray', - }, - - ':hover, :active': { - boxShadow: 'none', - borderStyle: 'solid', - borderWidth: '1px', - borderColor: 'labels.green', - }, - }, - } as SxStyleProp; -}; diff --git a/src/components/picker/tooltip/index.tsx b/src/components/picker/tooltip/index.tsx deleted file mode 100644 index 891589165..000000000 --- a/src/components/picker/tooltip/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { FC, Fragment } from 'react'; -import { css, Global } from '@emotion/core'; -import Tooltip from 'rc-tooltip'; -import { useTheme } from '../../../theme/theme'; -import Value from '../../typography/value'; - -interface ITooltipWrapperProps { - value: number; - index: number; - dragging: boolean; - children: React.ReactElement; - visible: boolean; -} - -const TooltipWrapper: FC = ({ - value, - index, - children, - visible, -}) => { - const theme = useTheme(); - - return ( - - - {value}} - placement="top" - key={index} - > - {children} - - - ); -}; - -export default TooltipWrapper; diff --git a/src/components/range-slider/range-slider.stories.tsx b/src/components/range-slider/range-slider.stories.tsx index 2a36ded1a..b115685f2 100644 --- a/src/components/range-slider/range-slider.stories.tsx +++ b/src/components/range-slider/range-slider.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; import { Box } from 'rebass'; import RangeSlider, { Props } from './range-slider'; @@ -7,49 +7,49 @@ import Divider from '../divider'; import Labeling from '../typography/labeling'; export default { - title: 'Quartz/RangeSlider', + title: 'RangeSlider', component: RangeSlider, } as Meta; -export const DefaultSlider: Story> = ( - props, -) => { - const [value, setValue] = useState([2, 4]); +type Story = StoryObj; - return ( - - - - Current value: - [{value.join(', ')}] - - ); -}; +export const DefaultSlider: Story = { + args: { + label: 'CPU cores', + step: 1, + range: [0, 10], + }, + render: (props) => { + const [value, setValue] = useState([2, 4]); -DefaultSlider.args = { - label: 'CPU cores', - step: 1, - range: [0, 10], + return ( + + + + Current value: + [{value.join(', ')}] + + ); + }, }; -export const WithCustomDisplayValue: Story< - Pick -> = (props) => { - const [value, setValue] = useState([128, 256]); - - return ( - - - - Current value: - [{value.join(', ')}] - - ); -}; +export const WithCustomDisplayValue: Story = { + args: { + label: 'RAM', + step: 128, + range: [0, 1024], + formatDisplayValue: (value) => `${value} MB`, + }, + render: (props) => { + const [value, setValue] = useState([128, 256]); -WithCustomDisplayValue.args = { - label: 'RAM', - step: 128, - range: [0, 1024], - formatDisplayValue: (value) => `${value} MB`, + return ( + + + + Current value: + [{value.join(', ')}] + + ); + }, }; diff --git a/src/components/range-slider/range-slider.tsx b/src/components/range-slider/range-slider.tsx index 2737dec98..f5d04d014 100644 --- a/src/components/range-slider/range-slider.tsx +++ b/src/components/range-slider/range-slider.tsx @@ -1,43 +1,33 @@ +import { + RangeSlider as ChakraRangeSlider, + RangeSliderFilledTrack, + RangeSliderProps, + RangeSliderThumb, + RangeSliderTrack, +} from '@chakra-ui/react'; import React from 'react'; -import RCRangeSlider from 'rc-slider'; -import { FlexProps, Flex } from 'rebass'; -import { useTheme } from '../../theme/theme'; +import { Flex } from 'rebass'; import Labeling from '../typography/labeling'; import Value from '../typography/value'; -export interface Props extends Omit { +export interface Props extends RangeSliderProps { label: string; - value: number[]; range: number[]; - step: number; disabled?: boolean; - onChange: (value: number[]) => void; formatDisplayValue?: (value: number) => string; } -const buildHandleStyle = (color: string) => ({ - borderColor: color, - boxShadow: `0 0 5px ${color}`, -}); - const RangeSlider = ({ label, - defaultValue, value, - onChange, range, - step, disabled, formatDisplayValue = (displayValue) => displayValue.toString(), - ...flexProps + ...props }: Props) => { - const theme = useTheme(); - - const handleStyle = buildHandleStyle(theme.colors.primary); - return ( - - + + {label} @@ -48,29 +38,24 @@ const RangeSlider = ({ sx={{ borderRadius: '2px' }} > - {value.map(formatDisplayValue).join('-')} + {value?.map(formatDisplayValue).join(', ')} - void} min={range[0]} max={range[1]} - step={step} - railStyle={{ - backgroundColor: theme.colors.grayShade2, - }} - trackStyle={[ - { - backgroundColor: theme.colors.primary, - }, - ]} - // we have two handles, so we need two styles for that - handleStyle={[handleStyle, handleStyle]} - range - /> + aria-label={range.map(String)} + isDisabled={disabled} + {...props} + > + + + + + + ); }; diff --git a/src/components/slider/slider.stories.tsx b/src/components/slider/slider.stories.tsx index bd9a8ec2b..a14989ad3 100644 --- a/src/components/slider/slider.stories.tsx +++ b/src/components/slider/slider.stories.tsx @@ -1,46 +1,48 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; import { Box } from 'rebass'; import Slider, { Props } from './slider'; -export default { - title: 'Quartz/Slider', +const meta: Meta = { + title: 'Slider', component: Slider, -} as Meta; - -export const DefaultSlider: Story> = ( - props, -) => { - const [value, setValue] = useState(0); - - return ( - - - - ); + args: { + label: 'CPU cores', + step: 1, + range: [0, 10], + }, }; -DefaultSlider.args = { - label: 'CPU cores', - step: 1, - range: [0, 10], -}; +export default meta; -export const WithCustomDisplayValue: Story< - Pick -> = (props) => { - const [value, setValue] = useState(0); +type Story = StoryObj; - return ( - - - - ); +export const DefaultSlider: Story = { + render: (props) => { + const [value, setValue] = useState(0); + + return ( + + + + ); + }, }; -WithCustomDisplayValue.args = { - label: 'RAM', - step: 128, - range: [0, 1024], - formatDisplayValue: (value) => `${value} MB`, +export const WithCustomDisplayValue: Story = { + args: { + label: 'RAM', + step: 128, + range: [0, 1024], + formatDisplayValue: (value) => `${value} MB`, + }, + render: (props) => { + const [value, setValue] = useState(0); + + return ( + + + + ); + }, }; diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx index 0c14854b7..ff351f224 100644 --- a/src/components/slider/slider.tsx +++ b/src/components/slider/slider.tsx @@ -1,37 +1,35 @@ +import { + Slider as ChakraSlider, + SliderFilledTrack, + SliderProps, + SliderThumb, + SliderTrack, +} from '@chakra-ui/react'; import React from 'react'; -import RcSlider from 'rc-slider'; -import { FlexProps, Flex } from 'rebass'; -import { useTheme } from '../../theme/theme'; +import { Flex } from 'rebass'; import Labeling from '../typography/labeling'; import Value from '../typography/value'; -export interface Props extends Omit { +export interface Props extends SliderProps { label: string; value: number; range: [number, number]; step: number; disabled?: boolean; - onChange: (value: number) => void; - // eslint-disable-next-line react/require-default-props formatDisplayValue?: (value: number) => string; } const Slider = ({ label, - defaultValue, value, - onChange, range, - step, disabled, formatDisplayValue = (displayValue) => displayValue.toString(), - ...flexProps + ...props }: Props) => { - const theme = useTheme(); - return ( - - + + {label} @@ -44,24 +42,18 @@ const Slider = ({ {formatDisplayValue(value)} - void} min={range[0]} max={range[1]} - step={step} - railStyle={{ - backgroundColor: theme.colors.grayShade2, - }} - trackStyle={{ - backgroundColor: theme.colors.primary, - }} - handleStyle={{ - borderColor: theme.colors.primary, - boxShadow: `0 0 5px ${theme.colors.primary}`, - }} - /> + isDisabled={disabled} + {...props} + > + + + + + ); }; diff --git a/src/index.ts b/src/index.ts index 4caf53902..9078ff51c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -79,11 +79,6 @@ import RowGroup from './components/row/group'; import RowItem from './components/row/item'; import RowButton from './components/row/button'; -// Picker -import Picker from './components/picker/container'; -import SingleRangeSlider from './components/picker/single-range-slider'; -import MultiRangeSlider from './components/picker/multi-range-slider'; - // Table import Table from './components/table'; import HolyTable from './components/holy-table'; @@ -133,6 +128,8 @@ export * from './components/badge'; export * from './components/text-value-badge'; export * from './components/project-badge'; export * from './components/freshness-bar'; +export * from './components/range-slider'; +export * from './components/slider'; export * from './theme/useColorMode'; @@ -212,10 +209,6 @@ export { RowGroup, RowItem, RowButton, - // Picker - Picker, - SingleRangeSlider, - MultiRangeSlider, // Table Table, EditableTable, diff --git a/src/theme-chakra/theme/components/slider.ts b/src/theme-chakra/theme/components/slider.ts new file mode 100644 index 000000000..585c672bb --- /dev/null +++ b/src/theme-chakra/theme/components/slider.ts @@ -0,0 +1,31 @@ +import { sliderAnatomy as parts } from '@chakra-ui/anatomy'; +import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; + +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys); + +const baseStyle = definePartsStyle({ + thumb: { + bg: 'white', + opacity: 0.8, + borderWidth: '2px', + borderColor: 'primary._light', + _dark: { + borderColor: 'primary._dark', + }, + }, + filledTrack: { + bg: 'primary._light', // change the background of the filled track to blue.600 + _dark: { + bg: 'primary._dark', + }, + }, + track: { + bg: 'grayShade2._light', + _dark: { + bg: 'grayShade2._dark', + }, + }, +}); + +export const sliderTheme = defineMultiStyleConfig({ baseStyle }); diff --git a/src/theme-chakra/theme/index.ts b/src/theme-chakra/theme/index.ts index 48f6facf7..d9f19370f 100644 --- a/src/theme-chakra/theme/index.ts +++ b/src/theme-chakra/theme/index.ts @@ -4,6 +4,7 @@ import { extendTheme } from '@chakra-ui/react'; import { colors, darkThemeColors } from '../../theme/theme'; import { modalTheme } from './components/modal'; import { drawerTheme } from './components/drawer'; +import { sliderTheme } from './components/slider'; const createColors = (c: any, d: any): any => R.mapObjIndexed((color: any, key: any) => { @@ -36,5 +37,5 @@ export const chakraTheme = extendTheme({ }, }, colors: themeColors, - components: { Modal: modalTheme, Drawer: drawerTheme }, + components: { Modal: modalTheme, Drawer: drawerTheme, Slider: sliderTheme }, }); diff --git a/yarn.lock b/yarn.lock index 6936d2796..27749732d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1467,7 +1467,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.21.5, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.21.5, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.21.5 resolution: "@babel/runtime@npm:7.21.5" dependencies: @@ -4592,8 +4592,6 @@ __metadata: playwright: ^1.31.2 prettier: ^2.5.1 ramda: ^0.28.0 - rc-slider: ^10.1.0 - rc-tooltip: ^4.2.3 react: ^18.2.0 react-datepicker: 4.10.0 react-dom: ^18.2.0 @@ -9764,7 +9762,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.2.6": +"classnames@npm:^2.2.6": version: 2.3.2 resolution: "classnames@npm:2.3.2" checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e @@ -11363,13 +11361,6 @@ __metadata: languageName: node linkType: hard -"dom-align@npm:^1.7.0": - version: 1.12.4 - resolution: "dom-align@npm:1.12.4" - checksum: ff5cfdb6e9c9e03e6d67a61b4633f25845f2385f67b1bd84a28aa2cb2c6b58eea53fde347b0d2439f0ba49cd6b80a7463f98569731cb14ec2542ecdeef19d165 - languageName: node - linkType: hard - "dom-serializer@npm:0": version: 0.2.2 resolution: "dom-serializer@npm:0.2.2" @@ -20537,15 +20528,6 @@ __metadata: languageName: node linkType: hard -"raf@npm:^3.4.1": - version: 3.4.1 - resolution: "raf@npm:3.4.1" - dependencies: - performance-now: ^2.1.0 - checksum: 50ba284e481c8185dbcf45fc4618ba3aec580bb50c9121385d5698cb6012fe516d2015b1df6dd407a7b7c58d44be8086108236affbce1861edd6b44637c8cd52 - languageName: node - linkType: hard - "ramda@npm:^0.28.0": version: 0.28.0 resolution: "ramda@npm:0.28.0" @@ -20572,88 +20554,6 @@ __metadata: languageName: node linkType: hard -"rc-align@npm:^4.0.0": - version: 4.0.15 - resolution: "rc-align@npm:4.0.15" - dependencies: - "@babel/runtime": ^7.10.1 - classnames: 2.x - dom-align: ^1.7.0 - rc-util: ^5.26.0 - resize-observer-polyfill: ^1.5.1 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: dfb7d3bfaa8d4b9ead4dbd8d84d4033fbd7a3f2232e7797ab1f86545c043cbe3952575fcfa63361045e2d1fa3a07c54545e442d60b08e753f4d581dcd5da186e - languageName: node - linkType: hard - -"rc-motion@npm:^1.0.0": - version: 1.1.2 - resolution: "rc-motion@npm:1.1.2" - dependencies: - "@babel/runtime": ^7.11.1 - classnames: ^2.2.1 - raf: ^3.4.1 - rc-util: ^5.0.6 - peerDependencies: - react: ^16.0.0 - react-dom: ^16.0.0 - checksum: 987bd0cb5239a5a5e994d3125b89a7dc1996456930b511f395f18c398f8d8bea6c1f36cad79fd730d5e037304b8a8b5af46bb8bb7e7ecaf5f83cd26b5081a71c - languageName: node - linkType: hard - -"rc-slider@npm:^10.1.0": - version: 10.1.1 - resolution: "rc-slider@npm:10.1.1" - dependencies: - "@babel/runtime": ^7.10.1 - classnames: ^2.2.5 - rc-util: ^5.27.0 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: 8df66142f1be00d31aaa45f3cf266fa30d03b70c74c734502389bbfacdb6741e149cd36dc1d3557d9dbb0194ed2733748366d888651d1120098338086419ba2c - languageName: node - linkType: hard - -"rc-tooltip@npm:^4.2.3": - version: 4.2.3 - resolution: "rc-tooltip@npm:4.2.3" - dependencies: - "@babel/runtime": ^7.11.2 - rc-trigger: ^4.2.1 - checksum: 018ea77b908202db5521cbdf492d18065e8390ced46743ffa9ddbef071c963234fe23f6e1d64d591a19416b506cd9d087fefc524ab5c42c45e1dbff629997df4 - languageName: node - linkType: hard - -"rc-trigger@npm:^4.2.1": - version: 4.4.3 - resolution: "rc-trigger@npm:4.4.3" - dependencies: - "@babel/runtime": ^7.11.2 - classnames: ^2.2.6 - raf: ^3.4.1 - rc-align: ^4.0.0 - rc-motion: ^1.0.0 - rc-util: ^5.0.1 - checksum: cf96b4cfccfc7a61a2a2c5f1aba25d5f7b0d42d89217dc2ebc79af186a913a6489cb238a886de547b4697299d0411cd0956d21b5383be16c164f8e8d1e9363b1 - languageName: node - linkType: hard - -"rc-util@npm:^5.0.1, rc-util@npm:^5.0.6, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0": - version: 5.30.0 - resolution: "rc-util@npm:5.30.0" - dependencies: - "@babel/runtime": ^7.18.3 - react-is: ^16.12.0 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: d7bf508bd3236cbb2abebbf16d271c50ab05be12cd3be46981979608b0b6d304735cc081650ab2f967f99a144c23189a6f682d52956c0eb4b6e4f41064b8a4ae - languageName: node - linkType: hard - "rc@npm:^1.2.8": version: 1.2.8 resolution: "rc@npm:1.2.8" @@ -20804,7 +20704,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0": +"react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -21466,13 +21366,6 @@ __metadata: languageName: node linkType: hard -"resize-observer-polyfill@npm:^1.5.1": - version: 1.5.1 - resolution: "resize-observer-polyfill@npm:1.5.1" - checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094 - languageName: node - linkType: hard - "resolve-cwd@npm:^3.0.0": version: 3.0.0 resolution: "resolve-cwd@npm:3.0.0"