lfg

irsyadadl · Oct 21, 2024 · c34a499 · c34a499
1 parent 3b52c0d
commit c34a499
Show file tree

Hide file tree

Showing 664 changed files with 9,617 additions and 8,030 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -20,7 +20,7 @@
     "^[./]"
   ],
   "importOrderSeparation": true,
-  "singleQuote": true,
+  "singleQuote": false,
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": false,

diff --git a/app/(app)/charts/page.tsx b/app/(app)/charts/page.tsx
@@ -1,56 +1,56 @@
-import React from 'react'
+import React from "react"
 
-import { Charts } from '@/app/(app)/charts/partials/charts'
-import { Header } from '@/components/header'
-import { siteConfig } from '@/resources/config/site'
-import type { Metadata } from 'next'
+import { Charts } from "@/app/(app)/charts/partials/charts"
+import { Header } from "@/components/header"
+import { siteConfig } from "@/resources/config/site"
+import type { Metadata } from "next"
 
 export const metadata: Metadata = {
-  title: 'Charts',
+  title: "Charts",
   description:
-    'Charts are a great way to display data in a visually appealing and easy-to-understand format. They are ideal for presenting information in a clear and concise manner.',
+    "Charts are a great way to display data in a visually appealing and easy-to-understand format. They are ideal for presenting information in a clear and concise manner.",
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   applicationName: siteConfig.name,
   keywords: [
-    'Charts',
-    'Chart',
-    'Area Chart',
-    'Pie Chart',
-    'Line Chart',
-    'Radial Chart',
-    'Radar Chart',
-    'Components',
-    'Justd Components',
-    'Tailwind CSS',
-    'UI Components',
-    'UI Kit',
-    'UI Library',
-    'UI Framework',
-    'Justd',
-    'Next.js 15',
-    'React Aria',
-    'React Aria Components',
-    'Server Components',
-    'React Components',
-    'Next UI Components',
-    'UI Design System',
-    'UI for Laravel Inertia',
-    'Laravel Inertia UI',
-    'Laravel Inertia Components',
-    'Laravel Inertia UI Components',
-    'Laravel Inertia UI Kit',
-    'Laravel Inertia UI Library',
-    'Laravel Inertia UI Framework',
-    'Laravel Inertia Justd',
-    'Laravel Justd',
-    'Justd Components',
-    'Justd UI Components',
-    'Justd UI Kit',
-    'Justd UI Library',
-    'Justd UI Framework',
-    'Justd Laravel Inertia',
-    'Justd Laravel',
-    'Justd Inertia'
+    "Charts",
+    "Chart",
+    "Area Chart",
+    "Pie Chart",
+    "Line Chart",
+    "Radial Chart",
+    "Radar Chart",
+    "Components",
+    "Justd Components",
+    "Tailwind CSS",
+    "UI Components",
+    "UI Kit",
+    "UI Library",
+    "UI Framework",
+    "Justd",
+    "Next.js 15",
+    "React Aria",
+    "React Aria Components",
+    "Server Components",
+    "React Components",
+    "Next UI Components",
+    "UI Design System",
+    "UI for Laravel Inertia",
+    "Laravel Inertia UI",
+    "Laravel Inertia Components",
+    "Laravel Inertia UI Components",
+    "Laravel Inertia UI Kit",
+    "Laravel Inertia UI Library",
+    "Laravel Inertia UI Framework",
+    "Laravel Inertia Justd",
+    "Laravel Justd",
+    "Justd Components",
+    "Justd UI Components",
+    "Justd UI Kit",
+    "Justd UI Library",
+    "Justd UI Framework",
+    "Justd Laravel Inertia",
+    "Justd Laravel",
+    "Justd Inertia"
   ]
 }
 

diff --git a/app/(app)/charts/partials/charts.tsx b/app/(app)/charts/partials/charts.tsx
@@ -1,40 +1,40 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { AsideLink } from '@/app/(app)/components/partials/on-this-page'
-import AreaChartDemo from '@/components/docs/surfaces/chart/area/area-chart-demo'
-import AreaChartGradientDemo from '@/components/docs/surfaces/chart/area/area-chart-gradient-demo'
-import AreaChartLinearDemo from '@/components/docs/surfaces/chart/area/area-chart-linear-demo'
-import AreaChartStackedDemo from '@/components/docs/surfaces/chart/area/area-chart-stacked-demo'
-import BarChartAnalyticDemo from '@/components/docs/surfaces/chart/bar/bar-chart-analytic-demo'
-import BarChartDemo from '@/components/docs/surfaces/chart/bar/bar-chart-demo'
-import BarChartHorizontalDemo from '@/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo'
-import BarChartMixedDemo from '@/components/docs/surfaces/chart/bar/bar-chart-mixed-demo'
-import BarChartMultipleDemo from '@/components/docs/surfaces/chart/bar/bar-chart-multiple-demo'
-import LineChartDemo from '@/components/docs/surfaces/chart/line/line-chart-demo'
-import LineChartDotsColorDemo from '@/components/docs/surfaces/chart/line/line-chart-dots-color-demo'
-import LineChartDotsDemo from '@/components/docs/surfaces/chart/line/line-chart-dots-demo'
-import LineChartLabelDemo from '@/components/docs/surfaces/chart/line/line-chart-label-demo'
-import LineChartLinearDemo from '@/components/docs/surfaces/chart/line/line-chart-linear-demo'
-import LineChartMultipleDemo from '@/components/docs/surfaces/chart/line/line-chart-multiple-demo'
-import PieChartDemo from '@/components/docs/surfaces/chart/pie/pie-chart-demo'
-import PieChartInteractiveDemo from '@/components/docs/surfaces/chart/pie/pie-chart-interactive-demo'
-import PieChartLabelDemo from '@/components/docs/surfaces/chart/pie/pie-chart-label-demo'
-import PieChartLegendDemo from '@/components/docs/surfaces/chart/pie/pie-chart-legend-demo'
-import PieChartStackedDemo from '@/components/docs/surfaces/chart/pie/pie-chart-stacked-demo'
-import RadarChartDemo from '@/components/docs/surfaces/chart/radar/radar-chart-demo'
-import RadarChartDotsDemo from '@/components/docs/surfaces/chart/radar/radar-chart-dots-demo'
-import RadarChartLineOnlyDemo from '@/components/docs/surfaces/chart/radar/radar-chart-line-only-demo'
-import RadarChartMultipleDemo from '@/components/docs/surfaces/chart/radar/radar-chart-multiple-demo'
-import RadialChartDemo from '@/components/docs/surfaces/chart/radial/radial-chart-demo'
-import RadialChartGridDemo from '@/components/docs/surfaces/chart/radial/radial-chart-grid-demo'
-import RadialChartShapeDemo from '@/components/docs/surfaces/chart/radial/radial-chart-shape-demo'
-import RadialChartStackedDemo from '@/components/docs/surfaces/chart/radial/radial-chart-stacked-demo'
-import RadialChartTextDemo from '@/components/docs/surfaces/chart/radial/radial-chart-text-demo'
-import { useActiveItem } from '@/components/table-of-contents'
-import { ListBox } from 'react-aria-components'
-import { buttonStyles, Card, Container, Heading, Link, useMediaQuery } from 'ui'
+import { AsideLink } from "@/app/(app)/components/partials/on-this-page"
+import AreaChartDemo from "@/components/docs/surfaces/chart/area/area-chart-demo"
+import AreaChartGradientDemo from "@/components/docs/surfaces/chart/area/area-chart-gradient-demo"
+import AreaChartLinearDemo from "@/components/docs/surfaces/chart/area/area-chart-linear-demo"
+import AreaChartStackedDemo from "@/components/docs/surfaces/chart/area/area-chart-stacked-demo"
+import BarChartAnalyticDemo from "@/components/docs/surfaces/chart/bar/bar-chart-analytic-demo"
+import BarChartDemo from "@/components/docs/surfaces/chart/bar/bar-chart-demo"
+import BarChartHorizontalDemo from "@/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo"
+import BarChartMixedDemo from "@/components/docs/surfaces/chart/bar/bar-chart-mixed-demo"
+import BarChartMultipleDemo from "@/components/docs/surfaces/chart/bar/bar-chart-multiple-demo"
+import LineChartDemo from "@/components/docs/surfaces/chart/line/line-chart-demo"
+import LineChartDotsColorDemo from "@/components/docs/surfaces/chart/line/line-chart-dots-color-demo"
+import LineChartDotsDemo from "@/components/docs/surfaces/chart/line/line-chart-dots-demo"
+import LineChartLabelDemo from "@/components/docs/surfaces/chart/line/line-chart-label-demo"
+import LineChartLinearDemo from "@/components/docs/surfaces/chart/line/line-chart-linear-demo"
+import LineChartMultipleDemo from "@/components/docs/surfaces/chart/line/line-chart-multiple-demo"
+import PieChartDemo from "@/components/docs/surfaces/chart/pie/pie-chart-demo"
+import PieChartInteractiveDemo from "@/components/docs/surfaces/chart/pie/pie-chart-interactive-demo"
+import PieChartLabelDemo from "@/components/docs/surfaces/chart/pie/pie-chart-label-demo"
+import PieChartLegendDemo from "@/components/docs/surfaces/chart/pie/pie-chart-legend-demo"
+import PieChartStackedDemo from "@/components/docs/surfaces/chart/pie/pie-chart-stacked-demo"
+import RadarChartDemo from "@/components/docs/surfaces/chart/radar/radar-chart-demo"
+import RadarChartDotsDemo from "@/components/docs/surfaces/chart/radar/radar-chart-dots-demo"
+import RadarChartLineOnlyDemo from "@/components/docs/surfaces/chart/radar/radar-chart-line-only-demo"
+import RadarChartMultipleDemo from "@/components/docs/surfaces/chart/radar/radar-chart-multiple-demo"
+import RadialChartDemo from "@/components/docs/surfaces/chart/radial/radial-chart-demo"
+import RadialChartGridDemo from "@/components/docs/surfaces/chart/radial/radial-chart-grid-demo"
+import RadialChartShapeDemo from "@/components/docs/surfaces/chart/radial/radial-chart-shape-demo"
+import RadialChartStackedDemo from "@/components/docs/surfaces/chart/radial/radial-chart-stacked-demo"
+import RadialChartTextDemo from "@/components/docs/surfaces/chart/radial/radial-chart-text-demo"
+import { useActiveItem } from "@/components/table-of-contents"
+import { ListBox } from "react-aria-components"
+import { buttonStyles, Card, Container, Heading, Link, useMediaQuery } from "ui"
 
 export function Charts() {
   return (
@@ -135,34 +135,34 @@ export function Charts() {
 
 const navigations = [
   {
-    text: 'Area Charts',
-    href: '#area',
-    id: 'area'
+    text: "Area Charts",
+    href: "#area",
+    id: "area"
   },
   {
-    text: 'Bar Charts',
-    href: '#bar',
-    id: 'bar'
+    text: "Bar Charts",
+    href: "#bar",
+    id: "bar"
   },
   {
-    text: 'Line Charts',
-    href: '#line',
-    id: 'line'
+    text: "Line Charts",
+    href: "#line",
+    id: "line"
   },
   {
-    text: 'Pie Charts',
-    href: '#pie',
-    id: 'pie'
+    text: "Pie Charts",
+    href: "#pie",
+    id: "pie"
   },
   {
-    text: 'Radar Charts',
-    href: '#radar',
-    id: 'radar'
+    text: "Radar Charts",
+    href: "#radar",
+    id: "radar"
   },
   {
-    text: 'Radial Charts',
-    href: '#radial',
-    id: 'radial'
+    text: "Radial Charts",
+    href: "#radial",
+    id: "radial"
   }
 ].map((x) => {
   return {
@@ -173,8 +173,8 @@ const navigations = [
 })
 
 export function OnThisPage() {
-  const activeId = useActiveItem(navigations.map((x) => x.href.split('#')[1]))
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const activeId = useActiveItem(navigations.map((x) => x.href.split("#")[1]))
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   return (
     <>
       {isDesktop ? (
@@ -184,7 +184,7 @@ export function OnThisPage() {
           </Heading>
           <ListBox aria-label="On this page">
             {navigations.map(({ text, href, id }) => (
-              <AsideLink key={id.toString()} activeId={activeId || ''} text={text} href={href} />
+              <AsideLink key={id.toString()} activeId={activeId || ""} text={text} href={href} />
             ))}
           </ListBox>
         </div>
@@ -203,7 +203,7 @@ export function Header({ title, description, docs }: HeaderProps) {
   return (
     <div className="flex items-center gap-2 justify-between">
       <Card.Header withoutPadding title={title} description={description} />
-      <Link className={buttonStyles({ appearance: 'outline' })} href={docs}>
+      <Link className={buttonStyles({ appearance: "outline" })} href={docs}>
         View docs
       </Link>
     </div>

diff --git a/app/(app)/colors/(colors)/color-generator.tsx b/app/(app)/colors/(colors)/color-generator.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import React, { useState } from 'react'
+import React, { useState } from "react"
 
-import { ColorRow } from '@/app/(app)/colors/(colors)/color-row'
-import { generateColorScale, getColorName } from '@/resources/lib/colors'
-import { parseColor } from '@react-stately/color'
-import { IconArrowWallRight } from 'justd-icons'
-import { ColorField, defaultColor, useMediaQuery } from 'ui'
+import { ColorRow } from "@/app/(app)/colors/(colors)/color-row"
+import { generateColorScale, getColorName } from "@/resources/lib/colors"
+import { parseColor } from "@react-stately/color"
+import { IconArrowWallRight } from "justd-icons"
+import { ColorField, defaultColor, useMediaQuery } from "ui"
 
 export function ColorGenerator() {
-  const [colorObj, setColorObj] = useState<string>(defaultColor.toString('hex'))
+  const [colorObj, setColorObj] = useState<string>(defaultColor.toString("hex"))
   const handleChange = (newColor: any) => {
-    setColorObj(newColor.toString('hex'))
+    setColorObj(newColor.toString("hex"))
   }
 
   const colorScales = generateColorScale(colorObj)
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   return (
     <div className="mb-2">
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-2">
@@ -24,7 +24,7 @@ export function ColorGenerator() {
             className="relative"
             value={parseColor(colorObj)}
             onChange={handleChange}
-            placeholder={defaultColor.toString('hex')}
+            placeholder={defaultColor.toString("hex")}
             suffix={
               <span className="text-xs sm:border-0 sm:p-0 px-2 cursor-pointer py-1.5 border rounded-sm absolute right-[4px] sm:right-2.5 font-mono top-[0.3rem] sm:top-3">
                 <IconArrowWallRight className="hidden sm:inline" />
@@ -38,7 +38,7 @@ export function ColorGenerator() {
           <ColorRow
             showItem={isDesktop}
             item={{
-              name: getColorName(defaultColor.toString('hex')),
+              name: getColorName(defaultColor.toString("hex")),
               children: colorScales as any
             }}
           />

diff --git a/app/(app)/colors/(colors)/color-item.tsx b/app/(app)/colors/(colors)/color-item.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { formatColorForTailwind, rgbToOklch, textColorBasedOnBg } from '@/resources/lib/colors'
-import { parseColor } from '@react-stately/color'
-import type { ColorFormat } from '@react-types/color'
-import { IconBulletFill, IconCheck, IconDuplicate } from 'justd-icons'
-import type { ListBoxItemProps } from 'react-aria-components'
-import { ListBoxItem } from 'react-aria-components'
-import type { ColorShade, FormatOnlyForTailwindVariableType } from 'resources/types'
-import { toast } from 'sonner'
-import { cn, isBrightColor } from 'ui'
-import { copyToClipboard } from 'usemods'
+import { formatColorForTailwind, rgbToOklch, textColorBasedOnBg } from "@/resources/lib/colors"
+import { parseColor } from "@react-stately/color"
+import type { ColorFormat } from "@react-types/color"
+import { IconBulletFill, IconCheck, IconDuplicate } from "justd-icons"
+import type { ListBoxItemProps } from "react-aria-components"
+import { ListBoxItem } from "react-aria-components"
+import type { ColorShade, FormatOnlyForTailwindVariableType } from "resources/types"
+import { toast } from "sonner"
+import { cn, isBrightColor } from "ui"
+import { copyToClipboard } from "usemods"
 
 interface ColorItemProps extends ListBoxItemProps {
   item: ColorShade
@@ -38,26 +38,26 @@ const ColorItem = ({
     setTimeout(() => setCopied(false), 2000)
     toast.success(`Copy ${toCopy} to clipboard.`, {
       classNames: {
-        toast: '[&:has([data-icon])_[data-content]]:!ml-0',
-        icon: 'hidden'
+        toast: "[&:has([data-icon])_[data-content]]:!ml-0",
+        icon: "hidden"
       }
     })
   }
   return (
     <ListBoxItem
       textValue={name}
       className={cn(
-        'w-full h-14 sm:h-24 group focus:outline-none focus:rounded-sm cursor-pointer rounded relative',
+        "w-full h-14 sm:h-24 group focus:outline-none focus:rounded-sm cursor-pointer rounded relative",
         isBrightColor(item.color)
-          ? 'ring-1 ring-inset ring-black/10'
-          : 'dark:ring-1 dark:ring-inset dark:ring-white/10'
+          ? "ring-1 ring-inset ring-black/10"
+          : "dark:ring-1 dark:ring-inset dark:ring-white/10"
       )}
       onAction={() =>
         handleCopy(
-          selectedFormat === 'oklch'
-            ? rgbToOklch(parseColor(item.color as string)?.toString('rgb')).replaceAll(
-                '0.000 NaN',
-                '0 0'
+          selectedFormat === "oklch"
+            ? rgbToOklch(parseColor(item.color as string)?.toString("rgb")).replaceAll(
+                "0.000 NaN",
+                "0 0"
               )
             : parseColor(item.color as string)?.toString(selectedFormat as ColorFormat)
         )
@@ -69,13 +69,13 @@ const ColorItem = ({
     >
       <span
         className={cn(
-          'group-hover:block hidden text-xs left-1/2 -translate-x-1/2 top-2 absolute font-mono',
-          copied && 'block'
+          "group-hover:block hidden text-xs left-1/2 -translate-x-1/2 top-2 absolute font-mono",
+          copied && "block"
         )}
       >
         {copied ? <IconCheck /> : <IconDuplicate />}
       </span>
-      {[500, '500'].includes(item.shade) && (
+      {[500, "500"].includes(item.shade) && (
         <IconBulletFill className="size-1 opacity-50 sm:size-2 ml-1 mt-1 sm:mt-10 sm:mx-auto" />
       )}
       {showItem ? (