Remove deprecated components

lib/components/Popover/index.tsx

@@ -1,4 +1,4 @@
-import { Popover } from "@headlessui/react";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 
-export { Popover };
+export { Popover, PopoverButton, PopoverPanel };
 

lib/main.ts

@@ -6,44 +6,44 @@ export { BarItem } from "./components/BarChart/BarItem";
 export type { BarItemProps } from "./components/BarChart/BarItem";
 export { XAxis } from "./components/XAxis";
 export {
-  defaultXAxisProps,
-  scatterXAxisProps,
+	defaultXAxisProps,
+	scatterXAxisProps,
 } from "./components/XAxis/constants";
 export type { XAxisProps } from "./components/XAxis";
 export { YAxis } from "./components/YAxis";
 export {
-  defaultYAxisProps,
-  scatterYAxisProps,
+	defaultYAxisProps,
+	scatterYAxisProps,
 } from "./components/YAxis/constants";
 export type { YAxisProps } from "./components/YAxis";
 export { Grid, type GridProps } from "./components/Grid";
 export {
-  defaultGridProps,
-  scatterGridProps,
+	defaultGridProps,
+	scatterGridProps,
 } from "./components/Grid/constants";
 export {
-  ChartTooltip,
-  DefaultTooltip,
-  ChartTooltipTitle,
-  ChartTooltipValue,
-  ChartTooltipFooter,
-  ChartTooltipContent,
-  type ChartTooltipProps,
+	ChartTooltip,
+	DefaultTooltip,
+	ChartTooltipTitle,
+	ChartTooltipValue,
+	ChartTooltipFooter,
+	ChartTooltipContent,
+	type ChartTooltipProps,
 } from "./components/ChartTooltip";
 export {
-  defaultTooltipProps,
-  scatterChartTooltipProps,
+	defaultTooltipProps,
+	scatterChartTooltipProps,
 } from "./components/ChartTooltip/constants";
 export { EmptyState } from "./components/EmptyState";
 export type { EmptyStateProps } from "./components/EmptyState";
 export {
-  Lifecycle,
-  Command,
-  CommandOption,
-  CommandList,
-  CommandInput,
+	Lifecycle,
+	Command,
+	CommandOption,
+	CommandList,
+	CommandInput,
 } from "./components/Command";
-export { Popover } from "./components/Popover";
+export { Popover, PopoverButton, PopoverPanel } from "./components/Popover";
 export { Button, type ButtonProps } from "./components/Button";
 export { LineChart, type LineChartProps } from "./components/LineChart";
 export { Line } from "./components/Line";
@@ -52,29 +52,29 @@ export { AreaChart, type AreaChartProps } from "./components/AreaChart";
 export { Area, type AreaProps } from "./components/Area";
 export { defaultAreaProps } from "./components/Area/constants";
 export {
-  ReferenceLine,
-  type ReferenceLineProps,
+	ReferenceLine,
+	type ReferenceLineProps,
 } from "./components/ReferenceLine";
 export {
-  defaultReferenceLineProps,
-  scatterReferenceLineYProps,
-  scatterReferenceLineXProps,
+	defaultReferenceLineProps,
+	scatterReferenceLineYProps,
+	scatterReferenceLineXProps,
 } from "./components/ReferenceLine/constants.ts";
 export { Dot } from "./components/Dot";
 export { defaultDotProps } from "./components/Dot/constants";
 export { Legend, type LegendProps } from "./components/Legend";
 export { ChartLabel, type ChartLabelProps } from "./components/ChartLabel";
 export {
-  ChartLabelText,
-  type ChartLabelTextProps,
+	ChartLabelText,
+	type ChartLabelTextProps,
 } from "./components/ChartLabel/ChartLabelText.tsx";
 export { TickText, type TickTextProps } from "./components/TickText";
 export { imagineColor } from "./components/common/utils";
 export { ChartCell, type ChartCellProps } from "./components/ChartCell";
 export { scatterChartCellProps } from "./components/ChartCell/constants";
 export {
-  ScatterChart,
-  type ScatterChartProps,
+	ScatterChart,
+	type ScatterChartProps,
 } from "./components/ScatterChart";
 export { Scatter, type ScatterProps } from "./components/Scatter";
 export { defaultScatterProps } from "./components/Scatter/constants";

src/stories/AreaChart.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Area,
   AreaChart,
+  ChartLabel,
+  ChartLabelText,
   ChartTooltip,
   defaultAreaProps,
   defaultDotProps,
@@ -17,80 +19,78 @@ import {
   ReferenceLine,
   XAxis,
   YAxis,
-  ChartLabel,
-  ChartLabelText,
 } from "../../lib/main.ts";
 
 type Story = StoryObj<typeof AreaChart>;
 
 const data = [
-  { x: "Mon", y: 0 },
-  { x: "Tue", y: 30 },
-  { x: "Wed", y: 20 },
-  { x: "Thu", y: 60 },
-  { x: "Fri", y: 27 },
-  { x: "Sat", y: 40 },
-  { x: "Sun", y: 30 },
+	{ x: "Mon", y: 0 },
+	{ x: "Tue", y: 30 },
+	{ x: "Wed", y: 20 },
+	{ x: "Thu", y: 60 },
+	{ x: "Fri", y: 27 },
+	{ x: "Sat", y: 40 },
+	{ x: "Sun", y: 30 },
 ];
 
 const meta: Meta<typeof AreaChart> = {
-  title: "Visualizations/Chart/AreaChart",
-  component: AreaChart,
-  args: { data },
-  parameters: {
-    sourceLink:
-      "https://github.com/juneHQ/june-charts/tree/main/lib/components/AreaChart/index.tsx",
-  },
+	title: "Visualizations/Chart/AreaChart",
+	component: AreaChart,
+	args: { data },
+	parameters: {
+		sourceLink:
+			"https://github.com/juneHQ/ui/tree/main/lib/components/AreaChart/index.tsx",
+	},
 };
 
 export default meta;
 
 export const Default: Story = {
-  args: {
-    data,
-    margin: { top: 20, left: 10, right: 10, bottom: 10 },
-  },
-  render: (args) => (
-    <AreaChart {...args}>
-      <Grid {...defaultGridProps} />
-      <YAxis {...defaultYAxisProps} dataKey="y" />
-      <XAxis {...defaultXAxisProps} dataKey="x" />
-      <ChartTooltip
-          {...defaultTooltipProps}
-          content={({ active, payload, label }) => (
-          <DefaultTooltip
-            label={label}
-            active={active}
-            payload={payload}
-            valueFormatter={(p) => `${p.y} count`}
-          />
-        )}
-      />
-      <ReferenceLine
-        {...defaultReferenceLineProps}
-        y={data.sort((a, b) => b.y - a.y)[0].y}
-      >
-        <ChartLabel
-          content={({ viewBox }) => (
-            <ChartLabelText viewBox={viewBox}>All time high</ChartLabelText>
-          )}
-        ></ChartLabel>
-      </ReferenceLine>
-      <Area
-        {...defaultAreaProps}
-        activeDot={
-          <Dot {...defaultDotProps} onClick={() => {}} cursor={"pointer"} />
-        }
-        dataKey="y"
-      />
-      <Legend
-        content={() => (
-          <div className="text-center">
-            <div>x – day</div>
-            <div>y – users</div>
-          </div>
-        )}
-      />
-    </AreaChart>
-  ),
+	args: {
+		data,
+		margin: { top: 20, left: 10, right: 10, bottom: 10 },
+	},
+	render: (args) => (
+		<AreaChart {...args}>
+			<Grid {...defaultGridProps} />
+			<YAxis {...defaultYAxisProps} dataKey="y" />
+			<XAxis {...defaultXAxisProps} dataKey="x" />
+			<ChartTooltip
+				{...defaultTooltipProps}
+				content={({ active, payload, label }) => (
+					<DefaultTooltip
+						label={label}
+						active={active}
+						payload={payload}
+						valueFormatter={(p) => `${p.y} count`}
+					/>
+				)}
+			/>
+			<ReferenceLine
+				{...defaultReferenceLineProps}
+				y={data.sort((a, b) => b.y - a.y)[0].y}
+			>
+				<ChartLabel
+					content={({ viewBox }) => (
+						<ChartLabelText viewBox={viewBox}>All time high</ChartLabelText>
+					)}
+				></ChartLabel>
+			</ReferenceLine>
+			<Area
+				{...defaultAreaProps}
+				activeDot={
+					<Dot {...defaultDotProps} onClick={() => { }} cursor={"pointer"} />
+				}
+				dataKey="y"
+			/>
+			<Legend
+				content={() => (
+					<div className="text-center">
+						<div>x – day</div>
+						<div>y – users</div>
+					</div>
+				)}
+			/>
+		</AreaChart>
+	),
 };