Skip to content

Commit

Permalink
Merge branch 'main' of github.com:paranext/paranext-core into fix-cha…
Browse files Browse the repository at this point in the history
…pter-range-selector
  • Loading branch information
Jolie Rabideau authored and Jolie Rabideau committed Sep 25, 2024
2 parents 8b1a998 + ac9c8aa commit 5f31876
Show file tree
Hide file tree
Showing 21 changed files with 3,228 additions and 2,465 deletions.
340 changes: 180 additions & 160 deletions lib/platform-bible-react/dist/index.cjs

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/platform-bible-react/dist/index.cjs.map

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions lib/platform-bible-react/dist/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as SliderPrimitive from '@radix-ui/react-slider';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { ColumnDef as TSColumnDef, Row as TSRow, SortDirection as TSSortDirection, Table as TSTable } from '@tanstack/react-table';
import { VariantProps } from 'class-variance-authority';
import { LucideProps } from 'lucide-react';
Expand Down Expand Up @@ -1237,6 +1238,14 @@ export declare const VerticalTabsTrigger: React$1.ForwardRefExoticComponent<Omit
export declare const VerticalTabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
className?: string | undefined;
} & React$1.RefAttributes<HTMLDivElement>>;
export declare const ToggleGroup: React$1.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
variant?: "default" | "outline" | null | undefined;
size?: "default" | "sm" | "lg" | null | undefined;
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>) & React$1.RefAttributes<HTMLDivElement>>;
export declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
variant?: "default" | "outline" | null | undefined;
size?: "default" | "sm" | "lg" | null | undefined;
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
export type InstallButtonProps = {
/** The installing boolean value determines the state of the button. */
isInstalling: boolean;
Expand Down
4,520 changes: 2,293 additions & 2,227 deletions lib/platform-bible-react/dist/index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/platform-bible-react/dist/index.js.map

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions lib/platform-bible-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@tanstack/react-table": "^8.19.2",
"autoprefixer": "^10.4.19",
"class-variance-authority": "^0.7.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { CircleCheckIcon, CircleHelpIcon, CircleXIcon } from 'lucide-react';
import { Button } from '@/components/shadcn-ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/shadcn-ui/toggle-group';
import { CircleCheckIcon, CircleHelpIcon, CircleXIcon } from 'lucide-react';
import { ColumnDef } from '../data-table/data-table.component';
import { getSortingIcon, ItemData, Status } from './inventory.component';

Expand Down Expand Up @@ -32,11 +33,14 @@ export const inventoryCountColumn = (countLabel: string): ColumnDef<ItemData> =>
return {
accessorKey: 'count',
header: ({ column }) => (
<Button variant="ghost" onClick={() => column.toggleSorting(undefined)}>
{countLabel}
{getSortingIcon(column.getIsSorted())}
</Button>
<div className="pr-flex pr-justify-end pr-tabular-nums">
<Button variant="ghost" onClick={() => column.toggleSorting(undefined)}>
{countLabel}
{getSortingIcon(column.getIsSorted())}
</Button>
</div>
),
cell: ({ row }) => <div className="pr-flex pr-justify-end">{row.getValue('count')}</div>,
};
};

Expand All @@ -54,59 +58,35 @@ export const inventoryStatusColumn = (
): ColumnDef<ItemData> => {
return {
accessorKey: 'status',
header: ({ column, table }) => {
const selectedRows = table.getSelectedRowModel().rows;

const items: string[] = [];
selectedRows.forEach((row) => {
items.push(row.getValue('item'));
});

header: ({ column }) => {
return (
<div className="pr-flex pr-justify-start">
<Button
className="pr-mt-1"
variant="ghost"
onClick={() => column.toggleSorting(undefined)}
>
<div className="pr-flex pr-justify-center">
<Button variant="ghost" onClick={() => column.toggleSorting(undefined)}>
{statusLabel}
{getSortingIcon(column.getIsSorted())}
</Button>
<Button className="pr-m-1">
<CircleCheckIcon
onClick={() => {
statusChangeHandler(items, 'approved');
}}
/>
</Button>
<Button className="pr-m-1">
<CircleXIcon
onClick={() => {
statusChangeHandler(items, 'unapproved');
}}
/>
</Button>
<Button className="pr-m-1">
<CircleHelpIcon
onClick={() => {
statusChangeHandler(items, 'unknown');
}}
/>
</Button>
</div>
);
},
cell: ({ row }) => {
const status: Status = row.getValue('status');
switch (status) {
case 'approved':
return <CircleCheckIcon />;
case 'unapproved':
return <CircleXIcon />;
case 'unknown':
default:
return <CircleHelpIcon />;
}
const item: string = row.getValue('item');
return (
<ToggleGroup value={status} variant="outline" type="single">
<ToggleGroupItem onClick={() => statusChangeHandler([item], 'approved')} value="approved">
<CircleCheckIcon />
</ToggleGroupItem>
<ToggleGroupItem
onClick={() => statusChangeHandler([item], 'unapproved')}
value="unapproved"
>
<CircleXIcon />
</ToggleGroupItem>
<ToggleGroupItem onClick={() => statusChangeHandler([item], 'unknown')} value="unknown">
<CircleHelpIcon />
</ToggleGroupItem>
</ToggleGroup>
);
},
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'pr-flex pr-h-10 pr-rounded-md pr-bg-background pr-px-3 pr-py-2 pr-text-sm pr-ring-offset-background file:pr-border-0 file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground disabled:pr-cursor-not-allowed disabled:pr-opacity-50',
'pr-twp pr-flex pr-rounded-md pr-bg-background pr-px-3 pr-py-2 pr-font-sans pr-text-sm pr-ring-offset-background file:pr-border-0 file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground disabled:pr-cursor-not-allowed disabled:pr-opacity-50',
className,
)}
ref={ref}
Expand Down
6 changes: 5 additions & 1 deletion lib/platform-bible-react/src/components/shadcn-ui/label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
<LabelPrimitive.Root
ref={ref}
className={cn('pr-twp pr-font-sans', labelVariants(), className)}
{...props}
/>
));
Label.displayName = LabelPrimitive.Root.displayName;
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Slider = React.forwardRef<
<SliderPrimitive.Root
ref={ref}
className={cn(
'pr-relative pr-flex pr-w-full pr-touch-none pr-select-none pr-items-center',
'pr-twp pr-relative pr-flex pr-w-full pr-touch-none pr-select-none pr-items-center pr-font-sans',
className,
)}
{...props}
Expand Down
4 changes: 2 additions & 2 deletions lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ const Switch = React.forwardRef<
>(({ 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',
'pr-peer pr-twp 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',
'pr-twp 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>
Expand Down
64 changes: 64 additions & 0 deletions lib/platform-bible-react/src/components/shadcn-ui/toggle-group.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { type VariantProps } from 'class-variance-authority';

import { cn } from '@/utils/shadcn-ui.util';
import { toggleVariants } from '@/components/shadcn-ui/toggle';

const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
size: 'default',
variant: 'default',
});

const ToggleGroup = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
<ToggleGroupPrimitive.Root
ref={ref}
className={cn(
'pr-twp pr-flex pr-items-center pr-justify-center pr-gap-1 pr-font-sans',
className,
)}
{...props}
>
<ToggleGroupContext.Provider
// Suppress warning produced by imported shadcn code
// eslint-disable-next-line react/jsx-no-constructed-context-values
value={{ variant, size }}
>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
));

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;

const ToggleGroupItem = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
const context = React.useContext(ToggleGroupContext);

return (
<ToggleGroupPrimitive.Item
ref={ref}
className={cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
className,
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
);
});

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;

export { ToggleGroup, ToggleGroupItem };
42 changes: 42 additions & 0 deletions lib/platform-bible-react/src/components/shadcn-ui/toggle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/utils/shadcn-ui.util';

const toggleVariants = cva(
'pr-twp pr-font-sans pr-inline-flex pr-items-center pr-justify-center pr-rounded-md pr-text-sm pr-font-medium pr-ring-offset-background pr-transition-colors hover:pr-bg-muted hover:pr-text-muted-foreground 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 data-[state=on]:pr-bg-accent data-[state=on]:pr-text-accent-foreground',
{
variants: {
variant: {
default: 'pr-bg-transparent',
outline:
'pr-border pr-border-input pr-bg-transparent hover:pr-bg-accent hover:pr-text-accent-foreground',
},
size: {
default: 'pr-h-10 pr-px-3',
sm: 'pr-h-9 pr-px-2.5',
lg: 'pr-h-11 pr-px-5',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);

const Toggle = React.forwardRef<
React.ElementRef<typeof TogglePrimitive.Root>,
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
<TogglePrimitive.Root
ref={ref}
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
));

Toggle.displayName = TogglePrimitive.Root.displayName;

export { Toggle, toggleVariants };
1 change: 1 addition & 0 deletions lib/platform-bible-react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export {
VerticalTabsContent,
VerticalTabsTrigger,
} from './components/basics/tabs-vertical';
export { ToggleGroup, ToggleGroupItem } from './components/shadcn-ui/toggle-group';

export { default as InstallButton } from './components/advanced/extension-marketplace/buttons/install-button.component';
export { default as EnableButton } from './components/advanced/extension-marketplace/buttons/enable-button.component';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ const scriptureSnippet: string = `\\id MAT 40-MAT-web.sfm World English Bible (W
\\p
\\v 17 So all the generations from Abraham to David are fourteen generations; from David to the exile to Babylon fourteen generations; and from the carrying away to Babylon to the Christ, fourteen generations.
\\p
\\v 18 Now the birth of Jesus Christ was like like this: After his mother, Mary, was engaged to Joseph, before they came together, she was found pregnant by the Holy Spirit.
\\v 18 Now the birth of Jesus Christ was like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like like this: After his mother, Mary, was engaged to Joseph, before they came together, she was found pregnant by the Holy Spirit.
\\v 19 Joseph, her husband, being a righteous man, and not willing to make her a public example, intended to put her away secretly.
\\v 20 But when he thought about these things, behold,\\f + \\fr 1:20 \\ft “Behold”, from “ἰδοὺ”, means look at, take notice, observe, see, or gaze at. It is often used as an interjection.\\f* an angel of the Lord appeared to him in a dream, saying, “Joseph, son of David, don’t be afraid to take to yourself Mary as your wife, for that which is conceived in her is of the Holy Spirit.
\\v 20 But when he thought about these things, behold,\\f + \\fr 1:20 \\ft “Behold”, from “ἰδοὺ”, means look at, take notice, observe, see, or gaze at. It is often used as an interjection.\\f* an angel of the Lord appeared to him in a dream, saying, “Joseph, son of David, don’t be afraid to take to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to yourself Mary as your wife, for that which is conceived in her is of the Holy Spirit.
\\v 21 She shall give birth to a son. You shall name him Jesus,\\f + \\fr 1:21 \\ft “Jesus” means “Salvation”.\\f* for it is he who shall save his people from their sins.”
\\p
\\v 22 Now all this has happened that it might be fulfilled which was spoken by the Lord through the prophet, saying,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import TabExamples from './basics/tab.examples.component';
import TableExamples from './basics/table.examples.component';
import SpinnerExamples from './basics/spinner.examples.component';
import ChapterRangeSelectorExample from './basics/chapter-range-example.component';
import ToggleGroupExamples from './basics/toggle-group.examples.component';
import SonnerExamples from './basics/sonner.examples.component';

function Basics({ direction }: HasDirection) {
return (
Expand All @@ -37,13 +39,15 @@ function Basics({ direction }: HasDirection) {
<VerticalTabsTrigger value="Search Bar">Search Bar</VerticalTabsTrigger>
<VerticalTabsTrigger value="Select">Select</VerticalTabsTrigger>
<VerticalTabsTrigger value="Slider">Slider</VerticalTabsTrigger>
<VerticalTabsTrigger value="Sonner">Sonner</VerticalTabsTrigger>
<VerticalTabsTrigger value="Spinner">Spinner</VerticalTabsTrigger>
<VerticalTabsTrigger value="Switch">Switch</VerticalTabsTrigger>
<VerticalTabsTrigger value="Tabs">Tabs</VerticalTabsTrigger>
<VerticalTabsTrigger value="Table">Table</VerticalTabsTrigger>
<VerticalTabsTrigger value="Chapter Range Selector">
Chapter Range Selector
</VerticalTabsTrigger>
<VerticalTabsTrigger value="Toggle Group">Toggle Group</VerticalTabsTrigger>
</VerticalTabsList>

<VerticalTabsContent value="Alert">
Expand Down Expand Up @@ -85,6 +89,10 @@ function Basics({ direction }: HasDirection) {
<SliderExamples />
</VerticalTabsContent>

<VerticalTabsContent value="Sonner">
<SonnerExamples />
</VerticalTabsContent>

<VerticalTabsContent value="Spinner">
<SpinnerExamples />
</VerticalTabsContent>
Expand All @@ -108,6 +116,10 @@ function Basics({ direction }: HasDirection) {
<VerticalTabsContent value="Chapter Range Selector">
<ChapterRangeSelectorExample />
</VerticalTabsContent>

<VerticalTabsContent value="Toggle Group">
<ToggleGroupExamples />
</VerticalTabsContent>
</VerticalTabs>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import Slider from '@/components/mui/slider.component';
import { Slider } from '@/components/shadcn-ui/slider';
import { useState } from 'react';

export default function SliderExamples() {
const [sliderValue, setSlider] = useState(3);
const [sliderValue, setSlider] = useState<number[]>([33]);
return (
<>
Wrongly using MUI slider right now 😬
<Slider />
<Slider isDisabled />
<Slider
className="pr-h-10"
min={0}
max={5}
max={100}
step={1}
value={sliderValue}
onChange={(_e, value) => setSlider(Array.isArray(value) ? value?.[0] : value)}
onValueChange={setSlider}
/>
{/* Wondering in which case the slider would output a number[] as its value 🤷 */}
{sliderValue}

<Slider className="pr-h-10" disabled min={0} max={100} step={1} defaultValue={[50]} />
</>
);
}
Loading

0 comments on commit 5f31876

Please sign in to comment.