-
Notifications
You must be signed in to change notification settings - Fork 100
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
78d6fc6
commit bdc8583
Showing
4 changed files
with
88 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import * as React from "react" | ||
Check failure on line 1 in packages/web/app/src/components/ui/slider.tsx GitHub Actions / code-style / eslint-and-prettier
|
||
import * as SliderPrimitive from "@radix-ui/react-slider" | ||
import { cn } from "@/lib/utils" | ||
|
||
const Slider = React.forwardRef< | ||
React.ElementRef<typeof SliderPrimitive.Root>, | ||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> | ||
>(({ className, ...props }, ref) => ( | ||
<SliderPrimitive.Root | ||
ref={ref} | ||
className={cn( | ||
"relative flex w-full touch-none select-none items-center disabled:cursor-not-allowed", | ||
className | ||
)} | ||
{...props} | ||
> | ||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-black dark:bg-white disabled:pointer-events-none"> | ||
<SliderPrimitive.Range className="absolute h-full bg-black dark:bg-white disabled:pointer-events-none" /> | ||
</SliderPrimitive.Track> | ||
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-black dark:border-white bg-black dark:bg-white ring-offset-orange-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed" /> | ||
</SliderPrimitive.Root> | ||
)) | ||
Slider.displayName = SliderPrimitive.Root.displayName | ||
|
||
export { Slider } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import { Meta, StoryObj } from '@storybook/react'; | ||
import React, { useEffect } from 'react'; | ||
import { Slider } from '../components/ui/slider'; | ||
|
||
|
||
const meta: Meta<typeof Template> = { | ||
title: 'Components/Slider', | ||
component: Template, | ||
argTypes: { | ||
min: { | ||
control: 'number', | ||
defaultValue: 0, | ||
}, | ||
max: { | ||
control: 'number', | ||
defaultValue: 100, | ||
}, | ||
step: { | ||
control: 'number', | ||
defaultValue: 1, | ||
}, | ||
disabled: { | ||
control: 'boolean', | ||
defaultValue: false, | ||
}, | ||
}, | ||
args: { | ||
min: 0, | ||
max: 100, | ||
step: 1, | ||
} | ||
}; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof Template> | ||
|
||
function Template({ min, max, step, disabled }: { min: number, max: number, step: number, disabled: boolean }) { | ||
useEffect(() => { | ||
console.log('min, max, or step changed'); | ||
}, [min, max, step, disabled]); | ||
|
||
return ( | ||
<div className='w-1/2 mx-auto'> | ||
<Slider | ||
min={min} | ||
max={max} | ||
step={step} | ||
disabled={disabled} | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
export const Default: Story = { | ||
args: { | ||
min: 1, | ||
step: 10, | ||
max: 100, | ||
disabled: true, | ||
} | ||
}; |