-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add Card, Alert, Slider, Switch (#990)
* add Card, Alert, Slider, Switch * fix imports * run build * add examples to the preview app
- Loading branch information
1 parent
de550a1
commit d584028
Showing
14 changed files
with
3,969 additions
and
2,544 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
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
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
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
52 changes: 52 additions & 0 deletions
52
lib/platform-bible-react/src/components/shadcn-ui/alert.tsx
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,52 @@ | ||
| import React from 'react'; | ||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
|
|
||
| import { cn } from '@/utils/shadcn-ui.util'; | ||
|
|
||
| const alertVariants = cva( | ||
| 'pr-relative pr-w-full pr-rounded-lg pr-border pr-p-4 [&>svg~*]:pr-pl-7 [&>svg+div]:pr-translate-y-[-3px] [&>svg]:pr-absolute [&>svg]:pr-left-4 [&>svg]:pr-top-4 [&>svg]:pr-text-foreground', | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: 'pr-bg-background pr-text-foreground', | ||
| destructive: | ||
| 'pr-border-destructive/50 pr-text-destructive dark:pr-border-destructive [&>svg]:pr-text-destructive', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default', | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| const Alert = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> | ||
| >(({ className, variant, ...props }, ref) => ( | ||
| <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} /> | ||
| )); | ||
| Alert.displayName = 'Alert'; | ||
|
|
||
| const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <h5 | ||
| ref={ref} | ||
| className={cn('pr-mb-1 pr-font-medium pr-leading-none pr-tracking-tight', className)} | ||
| {...props} | ||
| > | ||
| {/* added because of https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/heading-has-content.md */} | ||
| {props.children}{' '} | ||
| </h5> | ||
| ), | ||
| ); | ||
| AlertTitle.displayName = 'AlertTitle'; | ||
|
|
||
| const AlertDescription = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn('pr-text-sm [&_p]:pr-leading-relaxed', className)} {...props} /> | ||
| )); | ||
| AlertDescription.displayName = 'AlertDescription'; | ||
|
|
||
| export { Alert, AlertTitle, AlertDescription }; |
66 changes: 66 additions & 0 deletions
66
lib/platform-bible-react/src/components/shadcn-ui/card.tsx
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,66 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { cn } from '@/utils/shadcn-ui.util'; | ||
|
|
||
| const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| 'pr-rounded-lg pr-border pr-bg-card pr-text-card-foreground pr-shadow-sm', | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| ), | ||
| ); | ||
| Card.displayName = 'Card'; | ||
|
|
||
| const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn('pr-flex pr-flex-col pr-space-y-1.5 pr-p-6', className)} | ||
| {...props} | ||
| /> | ||
| ), | ||
| ); | ||
| CardHeader.displayName = 'CardHeader'; | ||
|
|
||
| const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={cn('pr-text-2xl pr-font-semibold pr-leading-none pr-tracking-tight', className)} | ||
| {...props} | ||
| > | ||
| {/* added because of https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/heading-has-content.md */} | ||
| {props.children} | ||
| </h3> | ||
| ), | ||
| ); | ||
| CardTitle.displayName = 'CardTitle'; | ||
|
|
||
| const CardDescription = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <p ref={ref} className={cn('pr-text-sm pr-text-muted-foreground', className)} {...props} /> | ||
| )); | ||
| CardDescription.displayName = 'CardDescription'; | ||
|
|
||
| const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn('pr-p-6 pr-pt-0', className)} {...props} /> | ||
| ), | ||
| ); | ||
| CardContent.displayName = 'CardContent'; | ||
|
|
||
| const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn('pr-flex pr-items-center pr-p-6 pr-pt-0', className)} {...props} /> | ||
| ), | ||
| ); | ||
| CardFooter.displayName = 'CardFooter'; | ||
|
|
||
| export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }; |
26 changes: 26 additions & 0 deletions
26
lib/platform-bible-react/src/components/shadcn-ui/slider.tsx
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,26 @@ | ||
| import React from 'react'; | ||
| import * as SliderPrimitive from '@radix-ui/react-slider'; | ||
|
|
||
| import { cn } from '@/utils/shadcn-ui.util'; | ||
|
|
||
| const Slider = React.forwardRef< | ||
| React.ElementRef<typeof SliderPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SliderPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| 'pr-relative pr-flex pr-w-full pr-touch-none pr-select-none pr-items-center', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <SliderPrimitive.Track className="pr-relative pr-h-2 pr-w-full pr-grow pr-overflow-hidden pr-rounded-full pr-bg-secondary"> | ||
| <SliderPrimitive.Range className="pr-absolute pr-h-full pr-bg-primary" /> | ||
| </SliderPrimitive.Track> | ||
| <SliderPrimitive.Thumb className="pr-block pr-h-5 pr-w-5 pr-rounded-full pr-border-2 pr-border-primary pr-bg-background pr-ring-offset-background pr-transition-colors focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-pointer-events-none disabled:pr-opacity-50" /> | ||
| </SliderPrimitive.Root> | ||
| )); | ||
| Slider.displayName = SliderPrimitive.Root.displayName; | ||
|
|
||
| export { Slider }; |
27 changes: 27 additions & 0 deletions
27
lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
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,27 @@ | ||
| import React from 'react'; | ||
| import * as SwitchPrimitives from '@radix-ui/react-switch'; | ||
|
|
||
| import { cn } from '@/utils/shadcn-ui.util'; | ||
|
|
||
| const Switch = React.forwardRef< | ||
| React.ElementRef<typeof SwitchPrimitives.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SwitchPrimitives.Root | ||
| className={cn( | ||
| 'pr-peer pr-inline-flex pr-h-6 pr-w-11 pr-shrink-0 pr-cursor-pointer pr-items-center pr-rounded-full pr-border-2 pr-border-transparent pr-transition-colors focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 focus-visible:pr-ring-offset-background disabled:pr-cursor-not-allowed disabled:pr-opacity-50 data-[state=checked]:pr-bg-primary data-[state=unchecked]:pr-bg-input', | ||
| className, | ||
| )} | ||
| {...props} | ||
| ref={ref} | ||
| > | ||
| <SwitchPrimitives.Thumb | ||
| className={cn( | ||
| 'pr-pointer-events-none pr-block pr-h-5 pr-w-5 pr-rounded-full pr-bg-background pr-shadow-lg pr-ring-0 pr-transition-transform data-[state=checked]:pr-translate-x-5 data-[state=unchecked]:pr-translate-x-0', | ||
| )} | ||
| /> | ||
| </SwitchPrimitives.Root> | ||
| )); | ||
| Switch.displayName = SwitchPrimitives.Root.displayName; | ||
|
|
||
| export { Switch }; |
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 |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import * as React from 'react'; | ||
| import React from 'react'; | ||
|
|
||
| import { cn } from '@/utils/shadcn-ui.util'; | ||
|
|
||
|
|
||
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
Oops, something went wrong.