From 3d9557f9e6f781485ff7d4a92c61a721b8bbb6a2 Mon Sep 17 00:00:00 2001 From: mbauchet Date: Sun, 30 Jul 2023 16:15:27 +0200 Subject: [PATCH 1/5] add number of months --- src/stories/input-elements/DateRangePicker.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/stories/input-elements/DateRangePicker.stories.tsx b/src/stories/input-elements/DateRangePicker.stories.tsx index 2cfadc7b0..424e98482 100644 --- a/src/stories/input-elements/DateRangePicker.stories.tsx +++ b/src/stories/input-elements/DateRangePicker.stories.tsx @@ -199,3 +199,8 @@ UncontrolledWithoutAllowClear.args = { defaultValue: { from: new Date(2022, 10, 1), to: new Date() }, enableClear: false, }; + +export const WithNumberOfMonths = UncontrolledTemplate.bind({}); +WithNumberOfMonths.args = { + numberOfMonths: 2 +}; \ No newline at end of file From 75a94273f81ee65450e0b103ffcc913c697ecdc0 Mon Sep 17 00:00:00 2001 From: mbauchet Date: Sun, 30 Jul 2023 16:15:54 +0200 Subject: [PATCH 2/5] add number of mnths --- .../input-elements/DateRangePicker/DateRangePicker.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx index b32bdda26..f792d5a14 100644 --- a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx +++ b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx @@ -48,6 +48,7 @@ export interface DateRangePickerProps locale?: Locale; enableClear?: boolean; enableYearNavigation?: boolean; + numberOfMonths?: number; children?: React.ReactElement[] | React.ReactElement; } @@ -67,6 +68,7 @@ const DateRangePicker = React.forwardRef(( children, className, enableYearNavigation = false, + numberOfMonths = 1, ...other } = props; @@ -242,6 +244,7 @@ const DateRangePicker = React.forwardRef(( from: selectedStartDate, to: selectedEndDate, }} + numberOfMonths={numberOfMonths ?? 1} onSelect={ ((v: DateRange) => { onValueChange?.({ from: v?.from, to: v?.to }); From 81b6fa133a808f8c235aaf57c80ff6f148d33019 Mon Sep 17 00:00:00 2001 From: mbauchet Date: Wed, 13 Sep 2023 17:37:33 +0200 Subject: [PATCH 3/5] remove number of month --- .../input-elements/DateRangePicker/DateRangePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx index 5aad14d55..6fdba43b3 100644 --- a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx +++ b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx @@ -259,7 +259,6 @@ const DateRangePicker = React.forwardRef(( from: selectedStartDate, to: selectedEndDate, }} - numberOfMonths={1} onSelect={ ((v: DateRange) => { onValueChange?.({ from: v?.from, to: v?.to }); From ec8fe90027595f14ebd699f187e1c3300890e67a Mon Sep 17 00:00:00 2001 From: mbauchet Date: Sat, 11 Nov 2023 22:42:09 +0100 Subject: [PATCH 4/5] add radix slider --- package.json | 3 +- .../input-elements/Slider/Slider.tsx | 133 ++++++++++++++++++ src/components/input-elements/Slider/index.ts | 2 + src/components/input-elements/index.ts | 1 + src/stories/input-elements/Slider.stories.tsx | 69 +++++++++ .../input-elements/helpers/SimpleSlider.tsx | 13 ++ 6 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 src/components/input-elements/Slider/Slider.tsx create mode 100644 src/components/input-elements/Slider/index.ts create mode 100644 src/stories/input-elements/Slider.stories.tsx create mode 100644 src/stories/input-elements/helpers/SimpleSlider.tsx diff --git a/package.json b/package.json index 845a84a17..36d481da5 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@floating-ui/react": "^0.19.1", "@headlessui/react": "^1.7.14", "@headlessui/tailwindcss": "^0.1.3", + "@radix-ui/react-slider": "^1.1.2", "date-fns": "^2.28.0", "react-day-picker": "^8.7.1", "react-transition-group": "^4.4.5", @@ -143,4 +144,4 @@ "@semantic-release/github" ] } -} \ No newline at end of file +} diff --git a/src/components/input-elements/Slider/Slider.tsx b/src/components/input-elements/Slider/Slider.tsx new file mode 100644 index 000000000..d7400cbf8 --- /dev/null +++ b/src/components/input-elements/Slider/Slider.tsx @@ -0,0 +1,133 @@ +import { useInternalState } from "hooks"; +import * as SliderPrimitive from "@radix-ui/react-slider"; +import { + Color, + ValueFormatter, + colorPalette, + // defaultValueFormatter, + getColorClassNames, + makeClassName, + tremorTwMerge, +} from "lib"; + +import React from "react"; + +const makeSliderClassName = makeClassName("Slider"); + +const getSliderColors = (color?: Color) => { + return { + bgColor: color + ? getColorClassNames(color, colorPalette.background).bgColor + : "bg-tremor-brand dark:bg-dark-tremor-brand", + lightBackgroundColor: color + ? getColorClassNames(color, colorPalette.lightBorder).bgColor + : "bg-tremor-brand-muted dark:bg-dark-tremor-brand-muted", + ringColor: color + ? getColorClassNames(color, colorPalette.ring).ringColor + : "focus:ring-tremor-brand-muted focus:dark:ring-dark-tremor-brand-muted", + }; +}; + +type SliderValue = [number] | [number, number]; + +export interface SliderProps extends SliderPrimitive.SliderProps { + min?: number; + max?: number; + step?: number; + color?: Color; + value?: SliderValue; + defaultValue?: SliderValue; + onValueChange?(value: SliderValue): void; + range?: boolean; + showTootlip?: boolean; + valueFormatter?: ValueFormatter; + disabled?: boolean; +} + +const Slider = React.forwardRef((props, ref) => { + const { + min = 0, + max = 100, + step = 1, + defaultValue = [0], + value: inputValue, + onValueChange, + color, + showTootlip = true, + // valueFormatter = defaultValueFormatter, + disabled = false, + ...other + } = props; + const sliderColorStyles = getSliderColors(color); + const [value, setValue] = useInternalState(defaultValue, inputValue); + + return ( + { + const formatedValue = val as SliderValue; + setValue(formatedValue); + onValueChange?.(formatedValue); + }} + min={min} + max={max} + step={step} + disabled={disabled} + aria-label="value" + className={tremorTwMerge( + makeSliderClassName("root"), + //common + "relative flex h-5 w-full touch-none items-center", + "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:flex-col", + )} + > + {showTootlip && value ? ( + //TBD (with new custom tooltip? @chris @sev) + <> + ) : null} + + + + {value?.map((_, index) => { + return ( + + ); + })} + + ); +}); + +Slider.displayName = "Slider"; + +export default Slider; diff --git a/src/components/input-elements/Slider/index.ts b/src/components/input-elements/Slider/index.ts new file mode 100644 index 000000000..4dc0417ed --- /dev/null +++ b/src/components/input-elements/Slider/index.ts @@ -0,0 +1,2 @@ +export { default as Slider } from "./Slider"; +export type { SliderProps } from "./Slider"; diff --git a/src/components/input-elements/index.ts b/src/components/input-elements/index.ts index 411be10be..5e6545087 100644 --- a/src/components/input-elements/index.ts +++ b/src/components/input-elements/index.ts @@ -8,3 +8,4 @@ export * from "./Select"; export * from "./Tabs"; export * from "./TextInput"; export * from "./Switch"; +export * from "./Slider"; diff --git a/src/stories/input-elements/Slider.stories.tsx b/src/stories/input-elements/Slider.stories.tsx new file mode 100644 index 000000000..94ceedf11 --- /dev/null +++ b/src/stories/input-elements/Slider.stories.tsx @@ -0,0 +1,69 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Slider } from "components"; +import { SimpleSlider } from "./helpers/SimpleSlider"; + +const meta: Meta = { + title: "Components/Input/Slider", + component: Slider, +}; + +export default meta; +type Story = StoryObj; + +export const Uncontrolled: Story = { + args: {}, +}; + +export const WithValue: Story = { + args: { + value: [50], + }, +}; + +export const Controlled: Story = { + render: SimpleSlider, +}; + +export const WithDefaultValue: Story = { + args: { + defaultValue: [50], + }, +}; + +export const Disabled: Story = { + args: { + defaultValue: [50], + disabled: true, + }, +}; + +export const WithRange: Story = { + args: { + defaultValue: [50, 75], + }, +}; + +export const CustomColor: Story = { + args: { + color: "emerald", + }, +}; + +export const WithStep: Story = { + args: { + step: 10, + }, +}; + +export const Vertical: Story = { + render: SimpleSlider, + args: { + orientation: "vertical", + }, +}; + +export const Inverted: Story = { + args: { + inverted: true, + }, +}; diff --git a/src/stories/input-elements/helpers/SimpleSlider.tsx b/src/stories/input-elements/helpers/SimpleSlider.tsx new file mode 100644 index 000000000..24303db4d --- /dev/null +++ b/src/stories/input-elements/helpers/SimpleSlider.tsx @@ -0,0 +1,13 @@ +import { Card, Slider } from "components"; +import React from "react"; + +export const SimpleSlider = (args: any) => { + const [value, setValue] = React.useState([10]); + + return ( + + + {value} + + ); +}; From e2029a0e43d5c361d5925bdb5f74515049981af9 Mon Sep 17 00:00:00 2001 From: Maxime BAUCHET Date: Wed, 27 Dec 2023 16:21:47 +0100 Subject: [PATCH 5/5] fix story --- src/stories/input-elements/Slider.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/input-elements/Slider.stories.tsx b/src/stories/input-elements/Slider.stories.tsx index 94ceedf11..7ce077390 100644 --- a/src/stories/input-elements/Slider.stories.tsx +++ b/src/stories/input-elements/Slider.stories.tsx @@ -3,7 +3,7 @@ import { Slider } from "components"; import { SimpleSlider } from "./helpers/SimpleSlider"; const meta: Meta = { - title: "Components/Input/Slider", + title: "UI/Input/Slider", component: Slider, };