fix
This commit is contained in:
rizky
parent
101c439ef0
commit
a1fd792350
|
|
@ -1,260 +0,0 @@
|
|||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
|
||||
import { cn } from "@/utils"
|
||||
import { Button } from "@/comps/ui/button"
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
const Carousel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||
>(
|
||||
(
|
||||
{
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) {
|
||||
return
|
||||
}
|
||||
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) {
|
||||
return
|
||||
}
|
||||
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) {
|
||||
return
|
||||
}
|
||||
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={ref}
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("c-relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
)
|
||||
Carousel.displayName = "Carousel"
|
||||
|
||||
const CarouselContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div ref={carouselRef} className="c-overflow-hidden">
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"c-flex",
|
||||
orientation === "horizontal" ? "c--ml-4" : "c--mt-4 c-flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
CarouselContent.displayName = "CarouselContent"
|
||||
|
||||
const CarouselItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
className={cn(
|
||||
"c-min-w-0 c-shrink-0 c-grow-0 c-basis-full",
|
||||
orientation === "horizontal" ? "c-pl-4" : "c-pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
CarouselItem.displayName = "CarouselItem"
|
||||
|
||||
const CarouselPrevious = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"c-absolute c- c-h-8 c-w-8 c-rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "c--left-12 c-top-1/2 c--translate-y-1/2"
|
||||
: "c--top-12 c-left-1/2 c--translate-x-1/2 c-rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ArrowLeft className="c-h-4 c-w-4" />
|
||||
<span className="c-sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselPrevious.displayName = "CarouselPrevious"
|
||||
|
||||
const CarouselNext = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"c-absolute c-h-8 c-w-8 c-rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "c--right-12 c-top-1/2 c--translate-y-1/2"
|
||||
: "c--bottom-12 c-left-1/2 c--translate-x-1/2 c-rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ArrowRight className="c-h-4 c-w-4" />
|
||||
<span className="c-sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselNext.displayName = "CarouselNext"
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
}
|
||||
20
exports.tsx
20
exports.tsx
|
|
@ -6,7 +6,7 @@ import { lazify, lazifyMany } from "@/utils/lazify";
|
|||
import __get from "lodash.get";
|
||||
import { sum } from "./utils/sum";
|
||||
|
||||
export const _sum = sum;
|
||||
export const _sum = sum;
|
||||
export const _get = __get;
|
||||
|
||||
export const Accordion = lazify(
|
||||
|
|
@ -19,7 +19,7 @@ export const Popover = lazify(
|
|||
export const Progress = lazify(
|
||||
async () => (await import("@/comps/ui/progress")).Progress
|
||||
);
|
||||
|
||||
|
||||
export const Dialog = lazify(
|
||||
async () => (await import("@/comps/ui/dialog")).Dialog
|
||||
);
|
||||
|
|
@ -87,10 +87,18 @@ export const HeaderProfile = lazify(
|
|||
);
|
||||
|
||||
/** charts */
|
||||
export { BarChart } from "@/comps/charts/bar";
|
||||
export { PieChart } from "@/comps/charts/pie";
|
||||
export { DoughnutChart } from "@/comps/charts/doughnut";
|
||||
export { LineChart } from "@/comps/charts/line";
|
||||
export const BarChart = lazify(
|
||||
async () => (await import("@/comps/charts/bar")).BarChart
|
||||
);
|
||||
export const PieChart = lazify(
|
||||
async () => (await import("@/comps/charts/pie")).PieChart
|
||||
);
|
||||
export const DoughnutChart = lazify(
|
||||
async () => (await import("@/comps/charts/doughnut")).DoughnutChart
|
||||
);
|
||||
export const LineChart = lazify(
|
||||
async () => (await import("@/comps/charts/line")).LineChart
|
||||
);
|
||||
|
||||
/** Generator */
|
||||
export { generateFilter as genereteFilter } from "@/comps/filter/gen/gen-filter";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.26.12",
|
||||
"@hookform/resolvers": "^3.3.4",
|
||||
"@paralleldrive/cuid2": "^2.2.2",
|
||||
"@prisma/client": "^5.13.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.1",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-label": "^2.0.2",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.0",
|
||||
"@radix-ui/react-popover": "^1.0.7",
|
||||
"@radix-ui/react-progress": "^1.1.0",
|
||||
"@radix-ui/react-scroll-area": "^1.1.0",
|
||||
"@radix-ui/react-slider": "^1.1.2",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-switch": "^1.1.0",
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@types/autosize": "^4.0.3",
|
||||
"@types/lodash.capitalize": "^4.2.9",
|
||||
"@types/lodash.get": "^4.4.9",
|
||||
"@types/react": "^18.2.65",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/uuid": "^9.0.8",
|
||||
"@wojtekmaj/react-qr-svg": "^1.0.0",
|
||||
"any-date-parser": "^1.5.4",
|
||||
"autosize": "^6.0.1",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.0",
|
||||
"date-fns": "^3.3.1",
|
||||
"dayjs": "^1.11.11",
|
||||
"embla-carousel-react": "^8.0.2",
|
||||
"lodash.capitalize": "^4.2.1",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lucide-react": "^0.418.0",
|
||||
"next-themes": "^0.3.0",
|
||||
"prisma": "^5.13.0",
|
||||
"quill": "^2.0.2",
|
||||
"react": "^18.2.0",
|
||||
"react-arborist": "^3.4.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-data-grid": "^7.0.0-beta.43",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.51.0",
|
||||
"react-resizable-panels": "^2.0.11",
|
||||
"read-excel-file": "^5.7.1",
|
||||
"sonner": "^1.4.41",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"uuid": "^9.0.1",
|
||||
"xlsx": "npm:@e965/xlsx"
|
||||
}
|
||||
}
|
||||
|
|
@ -68,9 +68,3 @@ export const ButtonUpload: FC<{
|
|||
</div>
|
||||
);
|
||||
};
|
||||
const formatMoney = (res: number) => {
|
||||
const formattedAmount = new Intl.NumberFormat("id-ID", {
|
||||
minimumFractionDigits: 0,
|
||||
}).format(res);
|
||||
return formattedAmount;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue