Skip to content

Commit cdb2ce2

Browse files
ayhamDevayhamDev
committed
lib ts fixes
1 parent 8440f3b commit cdb2ce2

38 files changed

Lines changed: 1333 additions & 289 deletions

File tree

‎src/lib/components/accordion/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const AccordionTrigger = React.forwardRef<
146146
disabled: disableRipple,
147147
});
148148
// FIX: Ensure non-null return for imperative handle
149-
React.useImperativeHandle(ref, () => localRef.current!);
149+
React.useImperativeHandle(ref as React.Ref<any>, () => localRef.current!);
150150

151151
return (
152152
<AccordionPrimitive.Header className="flex">

‎src/lib/components/breadcrumb/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const BreadcrumbLink = React.forwardRef<
6868
HTMLAnchorElement,
6969
React.AnchorHTMLAttributes<HTMLAnchorElement> & { asChild?: boolean }
7070
>(({ asChild, className, ...props }, ref) => {
71-
const Comp = asChild ? Slot : "a";
71+
const Comp = (asChild ? Slot : "a") as any;
7272

7373
return (
7474
<Comp

‎src/lib/components/button/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
127127
};
128128

129129
if (asChild) {
130+
const SlotComp = Slot as any;
130131
return (
131-
<Slot
132+
<SlotComp
132133
className={clsx(
133134
buttonVariants({ variant, size, shape, className, isLoading }),
134135
disabled || isLoading ? "opacity-70 pointer-events-none" : "",
@@ -142,7 +143,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
142143
{...props}
143144
>
144145
{children}
145-
</Slot>
146+
</SlotComp>
146147
);
147148
}
148149

‎src/lib/components/charts/Charts.stories.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,10 @@ export const ChartShowcase: StoryObj = {
7171
<BarChart
7272
data={salesData}
7373
index="month"
74+
scrollable={true}
7475
categories={["sales", "profit"]}
7576
valueFormatter={(v) => `$${v},`}
77+
minWidth={1000}
7678
shape="full"
7779
/>
7880
</Card>

‎src/lib/components/charts/area-chart.tsx‎

Lines changed: 100 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,22 @@ export interface ChartProps {
2828
height?: number | string;
2929
className?: string;
3030
valueFormatter?: (value: number) => string;
31+
scrollable?: boolean;
32+
minWidth?: number | string;
3133
}
3234

3335
export const AreaChart = ({
3436
data,
3537
categories,
3638
index,
3739
variant = "primary",
38-
shape = "minimal", // Extracted but visual impact on Area is minimal
40+
shape = "minimal",
3941
colors,
4042
height = 300,
4143
className,
4244
valueFormatter = (value) => `${value}`,
45+
scrollable = false,
46+
minWidth = 500,
4347
}: ChartProps) => {
4448
const chartId = useId();
4549
const isGhost = variant === "ghost";
@@ -48,102 +52,110 @@ export const AreaChart = ({
4852
return (
4953
<div
5054
className={clsx(
51-
"outline-none[&_.recharts-surface]:outline-none",
55+
"outline-none [&_.recharts-surface]:outline-none",
56+
scrollable && "overflow-x-auto scrollbar-thin",
5257
className,
5358
)}
5459
style={{ height }}
5560
>
56-
<ResponsiveContainer width="100%" height="100%">
57-
<RechartsAreaChart
58-
data={data}
59-
margin={
60-
isGhost
61-
? { top: 0, right: 0, bottom: 0, left: 0 }
62-
: { top: 10, right: 10, bottom: 0, left: 0 }
63-
}
64-
>
65-
<defs>
66-
{categories.map((category, i) => {
67-
const color = colors?.[i] || getColorForIndex(i);
68-
return (
69-
<linearGradient
70-
key={`${chartId}-${category}`}
71-
id={`gradient-${chartId}-${i}`}
72-
x1="0"
73-
y1="0"
74-
x2="0"
75-
y2="1"
76-
>
77-
<stop
78-
offset="100%"
79-
stopColor={color}
80-
stopOpacity={isGhost ? 0.2 : 0.4}
81-
/>
82-
<stop offset="95%" stopColor={color} stopOpacity={0} />
83-
</linearGradient>
84-
);
85-
})}
86-
</defs>
87-
88-
{!isGhost && (
89-
<CartesianGrid
90-
{...chartGridConfig}
91-
vertical={false}
92-
horizontal={!isSecondary}
93-
/>
94-
)}
61+
<div
62+
style={{
63+
minWidth: scrollable ? minWidth : undefined,
64+
height: "100%",
65+
}}
66+
>
67+
<ResponsiveContainer width="100%" height="100%">
68+
<RechartsAreaChart
69+
data={data}
70+
margin={
71+
isGhost
72+
? { top: 0, right: 0, bottom: 0, left: 0 }
73+
: { top: 10, right: 10, bottom: 0, left: 0 }
74+
}
75+
>
76+
<defs>
77+
{categories.map((category, i) => {
78+
const color = colors?.[i] || getColorForIndex(i);
79+
return (
80+
<linearGradient
81+
key={`${chartId}-${category}`}
82+
id={`gradient-${chartId}-${i}`}
83+
x1="0"
84+
y1="0"
85+
x2="0"
86+
y2="1"
87+
>
88+
<stop
89+
offset="100%"
90+
stopColor={color}
91+
stopOpacity={isGhost ? 0.2 : 0.4}
92+
/>
93+
<stop offset="95%" stopColor={color} stopOpacity={0} />
94+
</linearGradient>
95+
);
96+
})}
97+
</defs>
9598

96-
{!isGhost && <XAxis dataKey={index} {...chartAxisConfig} />}
99+
{!isGhost && (
100+
<CartesianGrid
101+
{...chartGridConfig}
102+
vertical={false}
103+
horizontal={!isSecondary}
104+
/>
105+
)}
97106

98-
{!isGhost && (
99-
<YAxis
100-
{...chartAxisConfig}
101-
tickFormatter={valueFormatter}
102-
hide={isSecondary}
103-
width={45}
104-
/>
105-
)}
107+
{!isGhost && <XAxis dataKey={index} {...chartAxisConfig} />}
106108

107-
{!isGhost && (
108-
<Tooltip
109-
content={<ChartTooltip />}
110-
cursor={{
111-
stroke: "var(--md-sys-color-outline-variant)",
112-
strokeWidth: 1,
113-
strokeDasharray: "4 4",
114-
}}
115-
/>
116-
)}
109+
{!isGhost && (
110+
<YAxis
111+
{...chartAxisConfig}
112+
tickFormatter={valueFormatter}
113+
hide={isSecondary}
114+
width={45}
115+
/>
116+
)}
117117

118-
{categories.map((category, i) => {
119-
const color = colors?.[i] || getColorForIndex(i);
120-
return (
121-
<Area
122-
key={category}
123-
type="monotone"
124-
dataKey={category}
125-
stroke={color}
126-
fill={`url(#gradient-${chartId}-${i})`}
127-
strokeWidth={isGhost ? 1 : 2}
128-
fillOpacity={1}
129-
animationDuration={1500}
130-
animationEasing="ease-in-out"
131-
activeDot={
132-
!isGhost
133-
? {
134-
r: 4,
135-
strokeWidth: 2,
136-
stroke: "var(--md-sys-color-surface)",
137-
fill: color,
138-
}
139-
: false
140-
}
141-
isAnimationActive={true}
118+
{!isGhost && (
119+
<Tooltip
120+
content={<ChartTooltip />}
121+
cursor={{
122+
stroke: "var(--md-sys-color-outline-variant)",
123+
strokeWidth: 1,
124+
strokeDasharray: "4 4",
125+
}}
142126
/>
143-
);
144-
})}
145-
</RechartsAreaChart>
146-
</ResponsiveContainer>
127+
)}
128+
129+
{categories.map((category, i) => {
130+
const color = colors?.[i] || getColorForIndex(i);
131+
return (
132+
<Area
133+
key={category}
134+
type="monotone"
135+
dataKey={category}
136+
stroke={color}
137+
fill={`url(#gradient-${chartId}-${i})`}
138+
strokeWidth={isGhost ? 1 : 2}
139+
fillOpacity={1}
140+
animationDuration={1500}
141+
animationEasing="ease-in-out"
142+
activeDot={
143+
!isGhost
144+
? {
145+
r: 4,
146+
strokeWidth: 2,
147+
stroke: "var(--md-sys-color-surface)",
148+
fill: color,
149+
}
150+
: false
151+
}
152+
isAnimationActive={true}
153+
/>
154+
);
155+
})}
156+
</RechartsAreaChart>
157+
</ResponsiveContainer>
158+
</div>
147159
</div>
148160
);
149161
};

‎src/lib/components/charts/bar-chart.tsx‎

Lines changed: 57 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export const BarChart = ({
2929
height = 300,
3030
className,
3131
valueFormatter = (value) => `${value}`,
32+
scrollable = false,
33+
minWidth = 500,
3234
}: ChartProps) => {
3335
const isGhost = variant === "ghost";
3436
const isSecondary = variant === "secondary";
@@ -43,61 +45,69 @@ export const BarChart = ({
4345
<div
4446
className={clsx(
4547
"outline-none [&_.recharts-surface]:outline-none",
48+
scrollable && "overflow-x-auto scrollbar-thin",
4649
className,
4750
)}
4851
style={{ height }}
4952
>
50-
<ResponsiveContainer width="100%" height="100%">
51-
<RechartsBarChart
52-
data={data}
53-
margin={
54-
isGhost
55-
? { top: 0, right: 0, bottom: 0, left: 0 }
56-
: { top: 10, right: 10, bottom: 0, left: 0 }
57-
}
58-
barGap={2}
59-
>
60-
{!isGhost && (
61-
<CartesianGrid {...chartGridConfig} horizontal={!isSecondary} />
62-
)}
53+
<div
54+
style={{
55+
minWidth: scrollable ? minWidth : undefined,
56+
height: "100%",
57+
}}
58+
>
59+
<ResponsiveContainer width="100%" height="100%">
60+
<RechartsBarChart
61+
data={data}
62+
margin={
63+
isGhost
64+
? { top: 0, right: 0, bottom: 0, left: 0 }
65+
: { top: 10, right: 10, bottom: 0, left: 0 }
66+
}
67+
barGap={2}
68+
>
69+
{!isGhost && (
70+
<CartesianGrid {...chartGridConfig} horizontal={!isSecondary} />
71+
)}
6372

64-
{!isGhost && <XAxis dataKey={index} {...chartAxisConfig} />}
73+
{!isGhost && <XAxis dataKey={index} {...chartAxisConfig} />}
6574

66-
{!isGhost && (
67-
<YAxis
68-
{...chartAxisConfig}
69-
tickFormatter={valueFormatter}
70-
hide={isSecondary}
71-
width={45}
72-
/>
73-
)}
74-
75-
{!isGhost && (
76-
<Tooltip
77-
content={<ChartTooltip />}
78-
cursor={{
79-
fill: "var(--md-sys-color-surface-container-highest)",
80-
opacity: 0.4,
81-
}}
82-
/>
83-
)}
75+
{!isGhost && (
76+
<YAxis
77+
{...chartAxisConfig}
78+
tickFormatter={valueFormatter}
79+
hide={isSecondary}
80+
width={45}
81+
/>
82+
)}
8483

85-
{categories.map((category, i) => {
86-
const color = colors?.[i] || getColorForIndex(i);
87-
return (
88-
<Bar
89-
key={category}
90-
dataKey={category}
91-
fill={color}
92-
radius={getRadius() as any}
93-
animationDuration={1500}
94-
animationEasing="ease-out"
95-
maxBarSize={isGhost ? undefined : 60}
84+
{!isGhost && (
85+
<Tooltip
86+
content={<ChartTooltip />}
87+
cursor={{
88+
fill: "var(--md-sys-color-surface-container-highest)",
89+
opacity: 0.4,
90+
}}
9691
/>
97-
);
98-
})}
99-
</RechartsBarChart>
100-
</ResponsiveContainer>
92+
)}
93+
94+
{categories.map((category, i) => {
95+
const color = colors?.[i] || getColorForIndex(i);
96+
return (
97+
<Bar
98+
key={category}
99+
dataKey={category}
100+
fill={color}
101+
radius={getRadius() as any}
102+
animationDuration={1500}
103+
animationEasing="ease-out"
104+
maxBarSize={isGhost ? undefined : 60}
105+
/>
106+
);
107+
})}
108+
</RechartsBarChart>
109+
</ResponsiveContainer>
110+
</div>
101111
</div>
102112
);
103113
};

0 commit comments

Comments
 (0)