@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/awesome-not-found.tsx

@@ -1,116 +1,116 @@
-"use client";
-import {
-  ButtonProps,
-  buttonVariants,
-} from "@repo/ayasofyazilim-ui/components/button";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from "@repo/ayasofyazilim-ui/components/empty";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import { motion } from "motion/react";
-import Link from "next/link";
-
-const PRIMARY_ORB_HORIZONTAL_OFFSET = 40;
-const PRIMARY_ORB_VERTICAL_OFFSET = 20;
-
-export function AwesomeNotFound({
-  title = "404",
-  description = "The page you are looking for does not exist.",
-  actions = [],
-}: {
-  title?: string;
-  description?: string;
-  actions?: {
-    label: string;
-    href: string;
-    variant?: ButtonProps["variant"];
-    size?: ButtonProps["size"];
-    icon?: React.ComponentType;
-  }[];
-}) {
-  return (
-    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.1),transparent_70%)] text-foreground">
-      <div
-        aria-hidden={true}
-        className="-z-10 absolute inset-0 overflow-hidden"
-      >
-        <motion.div
-          animate={{
-            x: [
-              0,
-              PRIMARY_ORB_HORIZONTAL_OFFSET,
-              -PRIMARY_ORB_HORIZONTAL_OFFSET,
-              0,
-            ],
-            y: [
-              0,
-              PRIMARY_ORB_VERTICAL_OFFSET,
-              -PRIMARY_ORB_VERTICAL_OFFSET,
-              0,
-            ],
-            rotate: [0, 10, -10, 0],
-          }}
-          className="absolute top-1/2 left-1/3 size-90 rounded-full bg-linear-to-tr from-purple-500/20 to-blue-500/20 blur-3xl"
-          transition={{
-            repeat: Number.POSITIVE_INFINITY,
-            duration: 4,
-            ease: "easeInOut",
-          }}
-        />
-        <motion.div
-          animate={{
-            x: [
-              0,
-              -PRIMARY_ORB_HORIZONTAL_OFFSET,
-              PRIMARY_ORB_HORIZONTAL_OFFSET,
-              0,
-            ],
-            y: [
-              0,
-              -PRIMARY_ORB_VERTICAL_OFFSET,
-              PRIMARY_ORB_VERTICAL_OFFSET,
-              0,
-            ],
-          }}
-          className="absolute right-1/4 bottom-1/3 size-120 rounded-full bg-linear-to-br from-indigo-400/10 to-pink-400/10 blur-3xl"
-          transition={{
-            repeat: Number.POSITIVE_INFINITY,
-            duration: 4,
-            ease: "easeInOut",
-          }}
-        />
-      </div>
-
-      <Empty>
-        <EmptyHeader>
-          <EmptyTitle className="font-extrabold text-8xl">{title}</EmptyTitle>
-          <EmptyDescription className="text-nowrap">
-            {description}
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            {actions.map((action) => (
-              <Link
-                href={action.href}
-                className={cn(
-                  buttonVariants({
-                    variant: action.variant || "default",
-                    size: action.size || "default",
-                  })
-                )}
-                key={action.label}
-              >
-                {action.icon && <action.icon />} {action.label}
-              </Link>
-            ))}
-          </div>
-        </EmptyContent>
-      </Empty>
-    </div>
-  );
-}
+"use client";
+import {
+  ButtonProps,
+  buttonVariants,
+} from "@ayasofyazilim/ui/components/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@ayasofyazilim/ui/components/empty";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import { motion } from "motion/react";
+import Link from "next/link";
+
+const PRIMARY_ORB_HORIZONTAL_OFFSET = 40;
+const PRIMARY_ORB_VERTICAL_OFFSET = 20;
+
+export function AwesomeNotFound({
+  title = "404",
+  description = "The page you are looking for does not exist.",
+  actions = [],
+}: {
+  title?: string;
+  description?: string;
+  actions?: {
+    label: string;
+    href: string;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    icon?: React.ComponentType;
+  }[];
+}) {
+  return (
+    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.1),transparent_70%)] text-foreground">
+      <div
+        aria-hidden={true}
+        className="-z-10 absolute inset-0 overflow-hidden"
+      >
+        <motion.div
+          animate={{
+            x: [
+              0,
+              PRIMARY_ORB_HORIZONTAL_OFFSET,
+              -PRIMARY_ORB_HORIZONTAL_OFFSET,
+              0,
+            ],
+            y: [
+              0,
+              PRIMARY_ORB_VERTICAL_OFFSET,
+              -PRIMARY_ORB_VERTICAL_OFFSET,
+              0,
+            ],
+            rotate: [0, 10, -10, 0],
+          }}
+          className="absolute top-1/2 left-1/3 size-90 rounded-full bg-linear-to-tr from-purple-500/20 to-blue-500/20 blur-3xl"
+          transition={{
+            repeat: Number.POSITIVE_INFINITY,
+            duration: 4,
+            ease: "easeInOut",
+          }}
+        />
+        <motion.div
+          animate={{
+            x: [
+              0,
+              -PRIMARY_ORB_HORIZONTAL_OFFSET,
+              PRIMARY_ORB_HORIZONTAL_OFFSET,
+              0,
+            ],
+            y: [
+              0,
+              -PRIMARY_ORB_VERTICAL_OFFSET,
+              PRIMARY_ORB_VERTICAL_OFFSET,
+              0,
+            ],
+          }}
+          className="absolute right-1/4 bottom-1/3 size-120 rounded-full bg-linear-to-br from-indigo-400/10 to-pink-400/10 blur-3xl"
+          transition={{
+            repeat: Number.POSITIVE_INFINITY,
+            duration: 4,
+            ease: "easeInOut",
+          }}
+        />
+      </div>
+
+      <Empty>
+        <EmptyHeader>
+          <EmptyTitle className="font-extrabold text-8xl">{title}</EmptyTitle>
+          <EmptyDescription className="text-nowrap">
+            {description}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div className="flex gap-2">
+            {actions.map((action) => (
+              <Link
+                href={action.href}
+                className={cn(
+                  buttonVariants({
+                    variant: action.variant || "default",
+                    size: action.size || "default",
+                  }),
+                )}
+                key={action.label}
+              >
+                {action.icon && <action.icon />} {action.label}
+              </Link>
+            ))}
+          </div>
+        </EmptyContent>
+      </Empty>
+    </div>
+  );
+}

package/src/custom/charts/area-chart.tsx

@@ -1,147 +1,147 @@
-"use client";
-
-import {
-  Area,
-  CartesianGrid,
-  AreaChart as RechartsAreaChart,
-  XAxis,
-  YAxis,
-} from "recharts";
-
-import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@repo/ayasofyazilim-ui/components/chart";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import { ReactNode } from "react";
-import { CurveType } from "recharts/types/shape/Curve";
-import { BaseAxisProps } from "recharts/types/util/types";
-import { CardClassNames, ChartCard } from "./chart-card";
-import { EmptyConfig } from ".";
-
-export const description = "An area chart with a legend";
-
-type ChartData = Array<{
-  [key: string]: number | string;
-}>;
-
-type ChartConfig = {
-  [key: string]: {
-    label: string;
-    type?: CurveType;
-    color: string;
-  };
-};
-
-export type AreaChartProps = {
-  data: ChartData;
-  config: ChartConfig;
-  title?: ReactNode;
-  description?: ReactNode;
-  period?: ReactNode;
-  footer?: ReactNode;
-  trendText?: ReactNode;
-  trendIcon?: ReactNode;
-  showLegend?: boolean;
-  xAxisTickFormatter?: BaseAxisProps["tickFormatter"];
-  classNames?: {
-    chart?: {
-      container?: string;
-      area?: string;
-      legend?: string;
-    };
-    card?: CardClassNames;
-  };
-  valuePrefix?: string;
-  valueSuffix?: string;
-} & EmptyConfig;
-
-export function AreaChart({
-  data,
-  title,
-  config,
-  description,
-  period,
-  footer,
-  trendText,
-  trendIcon,
-  showLegend,
-  xAxisTickFormatter = (value) => value,
-  classNames,
-  valuePrefix,
-  valueSuffix,
-  emptyState,
-}: AreaChartProps) {
-  return (
-    <ChartCard
-      title={title}
-      description={description}
-      period={period}
-      trendText={trendText}
-      trendIcon={trendIcon}
-      footer={footer}
-      classNames={classNames?.card}
-      emptyState={data.length === 0 ? emptyState : undefined}
-    >
-      <ChartContainer
-        config={config}
-        className={cn("mx-auto max-h-full", classNames?.chart?.container)}
-      >
-        <RechartsAreaChart
-          accessibilityLayer
-          data={data}
-          className={cn("flex flex-col pb-2", classNames?.chart?.area)}
-          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
-        >
-          <CartesianGrid vertical={false} />
-          <XAxis
-            dataKey="label"
-            tickMargin={2}
-            minTickGap={2}
-            tickFormatter={xAxisTickFormatter}
-          />
-          <YAxis />
-          <ChartTooltip
-            cursor={false}
-            content={
-              <ChartTooltipContent
-                indicator="line"
-                valuePrefix={valuePrefix}
-                valueSuffix={valueSuffix}
-              />
-            }
-          />
-          {Object.keys(config).map((key) => (
-            <Area
-              key={key}
-              dataKey={key}
-              type={config[key]?.type || "monotoneX"}
-              fill={config[key]?.color || `var(--color-${key})`}
-              fillOpacity={0.4}
-              stroke={config[key]?.color || `var(--color-${key})`}
-              stackId="a"
-            />
-          ))}
-          {showLegend && (
-            <ChartLegend
-              wrapperStyle={{
-                position: "relative",
-                top: "unset",
-                left: "unset",
-                bottom: "unset",
-                right: "unset",
-                width: "100%",
-                textAlign: "center",
-              }}
-              className={cn("p-0", classNames?.chart?.legend)}
-              content={<ChartLegendContent />}
-            />
-          )}
-        </RechartsAreaChart>
-      </ChartContainer>
-    </ChartCard>
-  );
-}
+"use client";
+
+import {
+  Area,
+  CartesianGrid,
+  AreaChart as RechartsAreaChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@ayasofyazilim/ui/components/chart";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import { ReactNode } from "react";
+import { CurveType } from "recharts/types/shape/Curve";
+import { BaseAxisProps } from "recharts/types/util/types";
+import { CardClassNames, ChartCard } from "./chart-card";
+import { EmptyConfig } from ".";
+
+export const description = "An area chart with a legend";
+
+type ChartData = Array<{
+  [key: string]: number | string;
+}>;
+
+type ChartConfig = {
+  [key: string]: {
+    label: string;
+    type?: CurveType;
+    color: string;
+  };
+};
+
+export type AreaChartProps = {
+  data: ChartData;
+  config: ChartConfig;
+  title?: ReactNode;
+  description?: ReactNode;
+  period?: ReactNode;
+  footer?: ReactNode;
+  trendText?: ReactNode;
+  trendIcon?: ReactNode;
+  showLegend?: boolean;
+  xAxisTickFormatter?: BaseAxisProps["tickFormatter"];
+  classNames?: {
+    chart?: {
+      container?: string;
+      area?: string;
+      legend?: string;
+    };
+    card?: CardClassNames;
+  };
+  valuePrefix?: string;
+  valueSuffix?: string;
+} & EmptyConfig;
+
+export function AreaChart({
+  data,
+  title,
+  config,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  showLegend,
+  xAxisTickFormatter = (value) => value,
+  classNames,
+  valuePrefix,
+  valueSuffix,
+  emptyState,
+}: AreaChartProps) {
+  return (
+    <ChartCard
+      title={title}
+      description={description}
+      period={period}
+      trendText={trendText}
+      trendIcon={trendIcon}
+      footer={footer}
+      classNames={classNames?.card}
+      emptyState={data.length === 0 ? emptyState : undefined}
+    >
+      <ChartContainer
+        config={config}
+        className={cn("mx-auto max-h-full", classNames?.chart?.container)}
+      >
+        <RechartsAreaChart
+          accessibilityLayer
+          data={data}
+          className={cn("flex flex-col pb-2", classNames?.chart?.area)}
+          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="label"
+            tickMargin={2}
+            minTickGap={2}
+            tickFormatter={xAxisTickFormatter}
+          />
+          <YAxis />
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                indicator="line"
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          {Object.keys(config).map((key) => (
+            <Area
+              key={key}
+              dataKey={key}
+              type={config[key]?.type || "monotoneX"}
+              fill={config[key]?.color || `var(--color-${key})`}
+              fillOpacity={0.4}
+              stroke={config[key]?.color || `var(--color-${key})`}
+              stackId="a"
+            />
+          ))}
+          {showLegend && (
+            <ChartLegend
+              wrapperStyle={{
+                position: "relative",
+                top: "unset",
+                left: "unset",
+                bottom: "unset",
+                right: "unset",
+                width: "100%",
+                textAlign: "center",
+              }}
+              className={cn("p-0", classNames?.chart?.legend)}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsAreaChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}