From bd8320181ea987ea92d1e6117786a3bd9a68bb06 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Wed, 28 Feb 2024 12:07:24 -0500
Subject: [PATCH] docs: fix import name and import package

---
 packages/documentation/.ladle/components.tsx  | 25 +++++++--
 .../GettingStarted/5-alpha-beta.stories.tsx   |  5 +-
 .../src/System/Flexgrid.stories.tsx           |  1 +
 .../src/System/Icons.stories.tsx              | 53 +++++++++----------
 4 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/packages/documentation/.ladle/components.tsx b/packages/documentation/.ladle/components.tsx
index e3468f69..2a1b0b69 100644
--- a/packages/documentation/.ladle/components.tsx
+++ b/packages/documentation/.ladle/components.tsx
@@ -7,8 +7,20 @@ import type { GlobalProvider } from "@ladle/react";
 import { IconGitHub } from "@versini/ui-icons";
 import clsx from "clsx";
 
-const renderImportLine = (importName: string, stage?: string) => {
+const renderImportLine = ({
+	importName,
+	importPackage,
+	stage,
+	header,
+}: {
+	importName: string;
+	importPackage?: string;
+	stage?: string;
+	header?: string;
+}) => {
 	let variant: "information" | "warning" | "success", releaseTag;
+	let packageName = importPackage || "ui-components";
+	let titleHeader = header || importName;
 
 	switch (stage) {
 		case "beta":
@@ -29,7 +41,7 @@ const renderImportLine = (importName: string, stage?: string) => {
 		<div className="mb-6">
 			<Flexgrid alignVertical="center" className="mb-2" columnGap={3}>
 				<FlexgridItem>
-					<h1 className="m-0">{importName}</h1>
+					<h1 className="m-0">{titleHeader}</h1>
 				</FlexgridItem>
 				<FlexgridItem>
 					<Pill label={releaseTag} variant={variant} className="mt-2" />
@@ -37,7 +49,7 @@ const renderImportLine = (importName: string, stage?: string) => {
 			</Flexgrid>
 
 			<pre className="mt-0">
-				<code>{`import { ${importName} } from "@versini/ui-components";`}</code>
+				<code>{`import { ${importName} } from "@versini/${packageName}";`}</code>
 			</pre>
 		</div>
 	);
@@ -54,7 +66,12 @@ export const Provider: GlobalProvider = ({ children, storyMeta }) => {
 		<>
 			<div className={className}>
 				{storyMeta?.importName
-					? renderImportLine(storyMeta.importName, storyMeta?.stage)
+					? renderImportLine({
+							importName: storyMeta.importName,
+							importPackage: storyMeta?.importPackage,
+							header: storyMeta?.header,
+							stage: storyMeta?.stage,
+						})
 					: null}
 				{children}
 			</div>
diff --git a/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx b/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx
index f26e698f..f9164355 100644
--- a/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx
+++ b/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx
@@ -19,9 +19,10 @@ export const ReleaseTags: Story<any> = () => (
 			help consuming partners, we are applying tags per components: alpha, then
 			beta and finally stable.
 		</p>
+
 		<p>
-			Component stage is indicated by a little "pill" located to the right of
-			the component title.
+			<strong>NOTE:</strong> component stage is indicated by a little "pill"
+			located to the right of the component title.
 		</p>
 
 		<Flexgrid alignVertical="center" columnGap={3}>
diff --git a/packages/documentation/src/System/Flexgrid.stories.tsx b/packages/documentation/src/System/Flexgrid.stories.tsx
index 41b90c87..9df1fd7d 100644
--- a/packages/documentation/src/System/Flexgrid.stories.tsx
+++ b/packages/documentation/src/System/Flexgrid.stories.tsx
@@ -13,6 +13,7 @@ export default {
 	title: "System/Flexgrid",
 	meta: {
 		importName: "Flexgrid, FlexgridItem",
+		importPackage: "ui-system",
 	},
 	args: {
 		className: "",
diff --git a/packages/documentation/src/System/Icons.stories.tsx b/packages/documentation/src/System/Icons.stories.tsx
index efddd8e5..dc959e10 100644
--- a/packages/documentation/src/System/Icons.stories.tsx
+++ b/packages/documentation/src/System/Icons.stories.tsx
@@ -22,37 +22,34 @@ import {
 
 export default {
 	title: "System/Icons",
+	meta: {
+		header: "Icons",
+		importName: "IconXYZ",
+		importPackage: "ui-icons",
+	},
 };
 
 export const Basic: Story<any> = (args) => (
-	<>
-		<div className="mb-6 max-w-none">
-			<h1>Icons</h1>
-			<pre>
-				<code>{`import { IconXYZ } from "@versini/ui-icons";`}</code>
-			</pre>
-		</div>
-		<div className="prose prose-dark flex max-w-none flex-wrap gap-2 bg-slate-300 p-10">
-			<IconBack {...args} />
-			<IconChart {...args} />
-			<IconClose {...args} />
-			<IconCopied {...args} />
-			<IconCopy {...args} />
-			<IconDelete {...args} />
-			<IconEdit {...args} />
-			<IconGitHub {...args} />
-			<IconHide {...args} />
-			<IconHistory {...args} />
-			<IconInfo {...args} />
-			<IconNext {...args} />
-			<IconPrevious {...args} />
-			<IconProfile {...args} />
-			<IconRestore {...args} />
-			<IconSettings {...args} />
-			<IconShow {...args} />
-			<IconUser {...args} />
-		</div>
-	</>
+	<div className="prose prose-dark flex max-w-none flex-wrap gap-2 bg-slate-300 p-10">
+		<IconBack {...args} />
+		<IconChart {...args} />
+		<IconClose {...args} />
+		<IconCopied {...args} />
+		<IconCopy {...args} />
+		<IconDelete {...args} />
+		<IconEdit {...args} />
+		<IconGitHub {...args} />
+		<IconHide {...args} />
+		<IconHistory {...args} />
+		<IconInfo {...args} />
+		<IconNext {...args} />
+		<IconPrevious {...args} />
+		<IconProfile {...args} />
+		<IconRestore {...args} />
+		<IconSettings {...args} />
+		<IconShow {...args} />
+		<IconUser {...args} />
+	</div>
 );
 
 Basic.args = {