@the21og/a16z 0.0.1 → 0.0.2

package/components/ui/chart.tsx

@@ -0,0 +1,219 @@
+/**
+ * UI Lib - Chart System
+ * 
+ * @module Chart
+ * @description A flexible wrapper around Recharts designed for the Red/Neutral theme context.
+ * Focuses on accessible color mapping and responsive container handling.
+ * @version 1.0.0 - Generated for user request: "create a chart component"
+ */
+
+import * as React from "react";
+import { ResponsiveContainer, Tooltip as RechartsTooltip, Legend as RechartsLegend } from "recharts";
+
+// -----------------------------------------------------------------------------
+// Types & Context
+// -----------------------------------------------------------------------------
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+    color?: string;
+    theme?: Record<"light" | "dark", string>;
+  }
+>;
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+const useChart = () => {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a ChartContainer");
+  }
+  return context;
+};
+
+// -----------------------------------------------------------------------------
+// Components
+// -----------------------------------------------------------------------------
+
+/**
+ * Wrapper that injects CSS variables for chart colors based on the current theme configuration.
+ */
+export const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ReactComponentElement<any, any>;
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        ref={ref}
+        data-chart={chartId}
+        id={chartId}
+        className={`flex aspect-video justify-center text-xs ${className || ""}`}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <ResponsiveContainer>
+          {children}
+        </ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "ChartContainer";
+
+/**
+ * Generates a style tag to map internal chart colors to CSS variables.
+ */
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
+  if (!colorConfig.length) return null;
+
+  return (
+    <style dangerouslySetInnerHTML={{ __html: 
+      `[data-chart=${id}] {
+        ${colorConfig.map(([key, item]) => {
+          const color = item.theme?.light || item.color;
+          return color ? `--color-${key}: ${color};` : "";
+        }).join("\n")}
+      }
+      .dark [data-chart=${id}] {
+        ${colorConfig.map(([key, item]) => {
+          const color = item.theme?.dark || item.color;
+          return color ? `--color-${key}: ${color};` : "";
+        }).join("\n")}
+      }`
+    }} />
+  );
+};
+
+/**
+ * Custom Tooltip implementation ensuring consistent Red/Neutral styling.
+ */
+export const ChartTooltip = RechartsTooltip;
+
+export const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    active?: boolean;
+    payload?: any[];
+    indicator?: "line" | "dot" | "dashed";
+    hideLabel?: boolean;
+    label?: string;
+    labelFormatter?: (value: any, payload: any[]) => React.ReactNode;
+    formatter?: (value: any, name: string, item: any, index: number, payload: any) => React.ReactNode;
+    color?: string;
+    nameKey?: string;
+    labelKey?: string;
+  }
+>(({ 
+  active, 
+  payload, 
+  indicator = "dot", 
+  hideLabel = false, 
+  label, 
+  labelFormatter, 
+  className, 
+  formatter, 
+  color,
+  nameKey,
+  labelKey,
+}, ref) => {
+  const { config } = useChart();
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={`grid min-w-[8rem] items-start gap-1.5 rounded-xl border border-neutral-200 bg-white px-2.5 py-1.5 text-xs shadow-sm dark:border-neutral-800 dark:bg-neutral-950 ${className || ""}`}
+    >
+      {!hideLabel && (
+        <div className="mb-1 font-medium text-neutral-500 dark:text-neutral-400">
+          {labelFormatter ? labelFormatter(label, payload) : label}
+        </div>
+      )}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = config[key] || config[item.name] || {};
+          
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey + index}
+              className="flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-neutral-500 dark:[&>svg]:text-neutral-400"
+            >
+              {indicator === "dot" && (
+                <span
+                  className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                  style={{ "--color-bg": indicatorColor } as React.CSSProperties}
+                />
+              )}
+              <div className="flex flex-1 justify-between leading-none gap-4">
+                <span className="text-neutral-500 dark:text-neutral-400">
+                  {itemConfig?.label || item.name}
+                </span>
+                <span className="font-mono font-medium tabular-nums text-neutral-900 dark:text-neutral-50">
+                  {item.value?.toLocaleString()}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+ChartTooltipContent.displayName = "ChartTooltipContent";
+
+export const ChartLegend = RechartsLegend;
+
+export const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    payload?: any[];
+    verticalAlign?: "top" | "bottom";
+  }
+>(({ payload, verticalAlign = "bottom", className }, ref) => {
+  const { config } = useChart();
+  
+  if (!payload?.length) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={`flex flex-wrap items-center justify-center gap-4 pt-2 ${verticalAlign === "top" ? "pb-2" : "pt-2"} ${className || ""}`}
+    >
+      {payload.map((item) => {
+        const key = `${item.dataKey || "value"}`;
+        const itemConfig = config[key] || {};
+        return (
+          <div key={item.value} className="flex items-center gap-1.5 text-xs text-neutral-600 dark:text-neutral-400">
+            <div
+              className="h-2 w-2 rounded-full"
+              style={{ backgroundColor: item.color }}
+            />
+            <span>{itemConfig?.label || item.value}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegendContent";

package/index.css

@@ -4,6 +4,8 @@
 
 @layer base {
   :root {
+    dark: [object Object];
+    light: [object Object];
     --card: 0 0% 100%;
     --ring: 0 72.2% 50.6%;
     --input: 0 0% 89.8%;

package/index.ts

@@ -1,5 +1,6 @@
 import "./index.css";
 export * from "./components/ui/card";
+export * from "./components/ui/chart";
 export * from "./components/ui/input";
 export * from "./components/ui/button";
 export * from "./lib/utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the21og/a16z",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "a16z is a startup accelerator and venture capital firm",
   "main": "index.js",
   "style": "index.css",