Skip to content

Commit b549b03

Browse files
ariflogsariflogs
committed
new registry build
1 parent 03622b3 commit b549b03

File tree

6 files changed

+76
-4
lines changed

6 files changed

+76
-4
lines changed

‎public/r/area-chart.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "area-chart",
4+
"type": "registry:component",
5+
"title": "Area Chart",
6+
"description": "Beautiful area chart for data visualization with retro styling",
7+
"dependencies": [
8+
"recharts"
9+
],
10+
"files": [
11+
{
12+
"path": "components/retroui/charts/AreaChart.tsx",
13+
"content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Area,\n AreaChart as RechartsAreaChart,\n CartesianGrid,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\n\ninterface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {\n data: Record<string, any>[]\n index: string\n categories: string[]\n strokeColors?: string[]\n fillColors?: string[]\n tooltipBgColor?: string\n tooltipBorderColor?: string\n gridColor?: string\n valueFormatter?: (value: number) => string\n showGrid?: boolean\n showTooltip?: boolean\n fill?: \"gradient\" | \"solid\"\n className?: string\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n (\n {\n data = [],\n index,\n categories = [],\n strokeColors = [\"var(--foreground)\"],\n fillColors = [\"var(--primary)\"],\n tooltipBgColor = \"var(--background)\",\n tooltipBorderColor = \"var(--border)\",\n gridColor = \"var(--muted)\",\n valueFormatter = (value: number) => value.toString(),\n showGrid = true,\n showTooltip = true,\n fill = \"gradient\",\n className,\n ...props\n },\n ref\n ) => {\n const chartId = React.useId()\n\n return (\n <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>\n <defs>\n {categories.map((category, index) => {\n const fillColor = fillColors[index] || fillColors[0]\n const gradientId = `gradient-${chartId}-${category}`\n return (\n <linearGradient key={category} id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n {fill === \"gradient\" ? (\n <>\n <stop offset=\"5%\" stopColor={fillColor} stopOpacity={0.8} />\n <stop offset=\"95%\" stopColor={fillColor} stopOpacity={0} />\n </>\n ) : (\n <stop stopColor={fillColor} stopOpacity={0.6} />\n )}\n </linearGradient>\n )\n })}\n </defs>\n \n {showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n )}\n \n <XAxis \n dataKey={index}\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n />\n \n <YAxis\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n tickFormatter={valueFormatter}\n />\n \n {showTooltip && (\n <Tooltip\n content={({ active, payload, label }) => {\n if (!active || !payload?.length) return null\n \n return (\n <div \n className=\"border p-2 shadow\"\n style={{ \n backgroundColor: tooltipBgColor,\n borderColor: tooltipBorderColor \n }}\n >\n <div className=\"grid grid-cols-2 gap-2\">\n <div className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {index}\n </span>\n <span className=\"font-bold text-muted-foreground\">\n {label}\n </span>\n </div>\n {payload.map((entry, index) => (\n <div key={index} className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {entry.dataKey}\n </span>\n <span className=\"font-bold\" style={{ color: strokeColors[0] }}>\n {valueFormatter(entry.value as number)}\n </span>\n </div>\n ))}\n </div>\n </div>\n )\n }}\n />\n )}\n \n {categories.map((category, index) => {\n const strokeColor = strokeColors[index] || strokeColors[0]\n const gradientId = `gradient-${chartId}-${category}`\n \n return (\n <Area\n key={category}\n dataKey={category}\n stroke={strokeColor}\n fill={`url(#${gradientId})`}\n strokeWidth={2}\n />\n )\n })}\n </RechartsAreaChart>\n </ResponsiveContainer>\n </div>\n )\n }\n)\n\nAreaChart.displayName = \"AreaChart\"\n\nexport { AreaChart, type AreaChartProps }",
14+
"type": "registry:component",
15+
"target": "components/retroui/charts/AreaChart.tsx"
16+
}
17+
]
18+
}

‎public/r/bar-chart.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "bar-chart",
4+
"type": "registry:component",
5+
"title": "Bar Chart",
6+
"description": "Beautiful bar chart for data visualization with retro styling",
7+
"dependencies": [
8+
"recharts"
9+
],
10+
"files": [
11+
{
12+
"path": "components/retroui/charts/BarChart.tsx",
13+
"content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Bar,\n BarChart as RechartsBarChart,\n CartesianGrid,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\n\ninterface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n data: Record<string, any>[]\n index: string\n categories: string[]\n strokeColors?: string[]\n fillColors?: string[]\n tooltipBgColor?: string\n tooltipBorderColor?: string\n gridColor?: string\n valueFormatter?: (value: number) => string\n showGrid?: boolean\n showTooltip?: boolean\n alignment?: \"vertical\" | \"horizontal\"\n className?: string\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n (\n {\n data = [],\n index,\n categories = [],\n strokeColors = [\"var(--foreground)\"],\n fillColors = [\"var(--primary)\"],\n tooltipBgColor = \"var(--background)\",\n tooltipBorderColor = \"var(--border)\",\n gridColor = \"var(--muted)\",\n valueFormatter = (value: number) => value.toString(),\n showGrid = true,\n showTooltip = true,\n alignment = \"vertical\",\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsBarChart \n data={data} \n layout={alignment === \"horizontal\" ? \"vertical\" : undefined}\n margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n >\n {showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n )}\n \n {alignment === \"horizontal\" ? (\n <>\n <XAxis \n type=\"number\"\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n tickFormatter={valueFormatter}\n />\n \n <YAxis\n type=\"category\"\n dataKey={index}\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n width={80}\n />\n </>\n ) : (\n <>\n <XAxis \n dataKey={index}\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n />\n \n <YAxis\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n tickFormatter={valueFormatter}\n />\n </>\n )}\n \n {showTooltip && (\n <Tooltip\n content={({ active, payload, label }) => {\n if (!active || !payload?.length) return null\n \n return (\n <div \n className=\"border p-2 shadow\"\n style={{ \n backgroundColor: tooltipBgColor,\n borderColor: tooltipBorderColor \n }}\n >\n <div className=\"grid grid-cols-2 gap-2\">\n <div className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {index}\n </span>\n <span className=\"font-bold text-muted-foreground\">\n {label}\n </span>\n </div>\n {payload.map((entry, index) => (\n <div key={index} className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {entry.dataKey}\n </span>\n <span className=\"font-bold\" style={{ color: strokeColors[0] }}>\n {valueFormatter(entry.value as number)}\n </span>\n </div>\n ))}\n </div>\n </div>\n )\n }}\n />\n )}\n \n {categories.map((category, index) => {\n const fillColor = fillColors[index] || fillColors[0]\n const strokeColor = strokeColors[index] || strokeColors[0]\n \n return (\n <Bar\n key={category}\n dataKey={category}\n fill={fillColor}\n stroke={strokeColor}\n strokeWidth={1}\n />\n )\n })}\n </RechartsBarChart>\n </ResponsiveContainer>\n </div>\n )\n }\n)\n\nBarChart.displayName = \"BarChart\"\n\nexport { BarChart, type BarChartProps }",
14+
"type": "registry:component",
15+
"target": "components/retroui/charts/BarChart.tsx"
16+
}
17+
]
18+
}

‎public/r/card.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
"type": "registry:component",
55
"title": "Card",
66
"description": "A customizable card component to visualize your content. 📝",
7-
"dependencies": [
8-
"https://retroui.dev/r/text.json"
7+
"registryDependencies": [
8+
"text"
99
],
1010
"files": [
1111
{
1212
"path": "components/retroui/Card.tsx",
13-
"content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n return (\n <div\n className={cn(\n \"inline-block border-2 shadow-md transition-all hover:shadow-xs bg-card\",\n className,\n )}\n {...props}\n />\n );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n return (\n <div\n className={cn(\"flex flex-col justify-start p-4\", className)}\n {...props}\n />\n );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n <p className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n Header: CardHeader,\n Title: CardTitle,\n Description: CardDescription,\n Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
13+
"content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/retroui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n return (\n <div\n className={cn(\n \"inline-block border-2 shadow-md transition-all hover:shadow-xs bg-card\",\n className,\n )}\n {...props}\n />\n );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n return (\n <div\n className={cn(\"flex flex-col justify-start p-4\", className)}\n {...props}\n />\n );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n <p className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n Header: CardHeader,\n Title: CardTitle,\n Description: CardDescription,\n Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
1414
"type": "registry:component",
1515
"target": "components/retroui/Card.tsx"
1616
}

‎public/r/line-chart.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "line-chart",
4+
"type": "registry:component",
5+
"title": "Line Chart",
6+
"description": "Beautiful line chart for data visualization with retro styling",
7+
"dependencies": [
8+
"recharts"
9+
],
10+
"files": [
11+
{
12+
"path": "components/retroui/charts/LineChart.tsx",
13+
"content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n CartesianGrid,\n Line,\n LineChart as RechartsLineChart,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\n\ninterface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {\n data: Record<string, any>[]\n index: string\n categories: string[]\n strokeColors?: string[]\n tooltipBgColor?: string\n tooltipBorderColor?: string\n gridColor?: string\n valueFormatter?: (value: number) => string\n showGrid?: boolean\n showTooltip?: boolean\n strokeWidth?: number\n dotSize?: number\n className?: string\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n (\n {\n data = [],\n index,\n categories = [],\n strokeColors = [\"var(--foreground)\"],\n tooltipBgColor = \"var(--background)\",\n tooltipBorderColor = \"var(--border)\",\n gridColor = \"var(--muted)\",\n valueFormatter = (value: number) => value.toString(),\n showGrid = true,\n showTooltip = true,\n strokeWidth = 2,\n dotSize = 4,\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsLineChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>\n {showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n )}\n \n <XAxis \n dataKey={index}\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n />\n \n <YAxis\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n tickFormatter={valueFormatter}\n />\n \n {showTooltip && (\n <Tooltip\n content={({ active, payload, label }) => {\n if (!active || !payload?.length) return null\n \n return (\n <div \n className=\"border p-2 shadow\"\n style={{ \n backgroundColor: tooltipBgColor,\n borderColor: tooltipBorderColor \n }}\n >\n <div className=\"grid grid-cols-2 gap-2\">\n <div className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {index}\n </span>\n <span className=\"font-bold text-muted-foreground\">\n {label}\n </span>\n </div>\n {payload.map((entry, index) => (\n <div key={index} className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {entry.dataKey}\n </span>\n <span className=\"font-bold\" style={{ color: entry.color }}>\n {valueFormatter(entry.value as number)}\n </span>\n </div>\n ))}\n </div>\n </div>\n )\n }}\n />\n )}\n \n {categories.map((category, index) => {\n const strokeColor = strokeColors[index] || strokeColors[0]\n \n return (\n <Line\n key={category}\n dataKey={category}\n stroke={strokeColor}\n strokeWidth={strokeWidth}\n dot={{ r: dotSize, fill: strokeColor }}\n activeDot={{ r: dotSize + 2, fill: strokeColor }}\n />\n )\n })}\n </RechartsLineChart>\n </ResponsiveContainer>\n </div>\n )\n }\n)\n\nLineChart.displayName = \"LineChart\"\n\nexport { LineChart, type LineChartProps }",
14+
"type": "registry:component",
15+
"target": "components/retroui/charts/LineChart.tsx"
16+
}
17+
]
18+
}

0 commit comments

Comments
 (0)