docs: refactor API documentation to use standalone components (#683)

packages/documentation/.ladle/components.tsx

@@ -1,10 +1,11 @@
 import "./styles.css";
 
-import { ButtonIcon, Footer, Pill } from "@versini/ui-components";
-import { Flexgrid, FlexgridItem } from "@versini/ui-system";
-
 import type { GlobalProvider } from "@ladle/react";
+import { ButtonIcon } from "@versini/ui-button";
+import { Footer } from "@versini/ui-footer";
 import { IconGitHub } from "@versini/ui-icons";
+import { Pill } from "@versini/ui-pill";
+import { Flexgrid, FlexgridItem } from "@versini/ui-system";
 import clsx from "clsx";
 
 const renderImportLine = ({
@@ -19,7 +20,7 @@ const renderImportLine = ({
 	header?: string;
 }) => {
 	let variant: "information" | "warning" | "success", releaseTag;
-	const packageName = importPackage || "ui-components";
+	const packageName = importPackage || `ui-${importName.toLowerCase()}`;
 	const titleHeader = header || importName;
 
 	switch (stage) {

packages/documentation/nodemon.json

@@ -3,12 +3,30 @@
 		"tailwind.config.js",
 		".ladle/*.*",
 		"src/**/*.*",
-		"../ui-components/src/**/*.*",
-		"../ui-components/lib/**/*.*",
+
 		"../ui-styles/src/**/*.*",
 		"../ui-fingerprint/src/**/*.*",
-		"../ui-form/src/**/*.*",
 		"../ui-icons/src/**/*.*",
-		"../ui-system/src/**/*.*"
+		"../ui-system/src/**/*.*",
+
+		"../ui-anchor/src/**/*.*",
+		"../ui-bubble/src/**/*.*",
+		"../ui-button/src/**/*.*",
+		"../ui-card/src/**/*.*",
+		"../ui-footer/src/**/*.*",
+		"../ui-header/src/**/*.*",
+		"../ui-hooks/src/**/*.*",
+		"../ui-icons/src/**/*.*",
+		"../ui-main/src/**/*.*",
+		"../ui-menu/src/**/*.*",
+		"../ui-panel/src/**/*.*",
+		"../ui-pill/src/**/*.*",
+		"../ui-private/src/**/*.*",
+		"../ui-spinner/src/**/*.*",
+		"../ui-system/src/**/*.*",
+		"../ui-table/src/**/*.*",
+		"../ui-textarea/src/**/*.*",
+		"../ui-textinput/src/**/*.*",
+		"../ui-toggle/src/**/*.*"
 	]
 }

packages/documentation/package.json

@@ -21,12 +21,27 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-components": "workspace:../ui-components",
+		"@versini/ui-anchor": "workspace:../ui-anchor",
+		"@versini/ui-bubble": "workspace:../ui-bubble",
+		"@versini/ui-button": "workspace:../ui-button",
+		"@versini/ui-card": "workspace:../ui-card",
 		"@versini/ui-fingerprint": "workspace:../ui-fingerprint",
-		"@versini/ui-form": "workspace:../ui-form",
+		"@versini/ui-footer": "workspace:../ui-footer",
+		"@versini/ui-header": "workspace:../ui-header",
+		"@versini/ui-hooks": "workspace:../ui-hooks",
 		"@versini/ui-icons": "workspace:../ui-icons",
+		"@versini/ui-main": "workspace:../ui-main",
+		"@versini/ui-menu": "workspace:../ui-menu",
+		"@versini/ui-panel": "workspace:../ui-panel",
+		"@versini/ui-pill": "workspace:../ui-pill",
+		"@versini/ui-private": "workspace:../ui-private",
+		"@versini/ui-spinner": "workspace:../ui-spinner",
 		"@versini/ui-styles": "workspace:../ui-styles",
 		"@versini/ui-system": "workspace:../ui-system",
+		"@versini/ui-table": "workspace:../ui-table",
+		"@versini/ui-textarea": "workspace:../ui-textarea",
+		"@versini/ui-textinput": "workspace:../ui-textinput",
+		"@versini/ui-toggle": "workspace:../ui-toggle",
 		"clsx": "2.1.1",
 		"prismjs": "1.29.0",
 		"prism-react-renderer": "2.4.0",

packages/documentation/src/Components/Anchor.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Anchor } from "@versini/ui-components";
+import { Anchor } from "@versini/ui-anchor";
 
 export default {
 	title: "Components/Anchor",

packages/documentation/src/Components/Bubble.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Bubble } from "@versini/ui-components";
+import { Bubble } from "@versini/ui-bubble";
 
 export default {
 	title: "Components/Bubble",

packages/documentation/src/Components/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Button } from "@versini/ui-components";
+import { Button } from "@versini/ui-button";
 
 export default {
 	title: "Components/Button",

packages/documentation/src/Components/ButtonIcon.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { ButtonIcon } from "@versini/ui-components";
+import { ButtonIcon } from "@versini/ui-button";
 import {
 	IconEdit,
 	IconNext,

packages/documentation/src/Components/Card.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Card } from "@versini/ui-components";
+import { Card } from "@versini/ui-card";
 
 export default {
 	title: "Components/Card",

packages/documentation/src/Components/Footer.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Footer } from "@versini/ui-components";
+import { Footer } from "@versini/ui-footer";
 
 export default {
 	title: "Components/Footer",

packages/documentation/src/Components/Header.stories.tsx

@@ -1,22 +1,20 @@
 import type { Story } from "@ladle/react";
+import { Anchor } from "@versini/ui-anchor";
+import { Button, ButtonIcon } from "@versini/ui-button";
+import { Card } from "@versini/ui-card";
+import { Footer } from "@versini/ui-footer";
+import { Header } from "@versini/ui-header";
+import { Main } from "@versini/ui-main";
+import { Menu, MenuItem } from "@versini/ui-menu";
+import { Spinner } from "@versini/ui-spinner";
 import {
-	Anchor,
-	Button,
-	ButtonIcon,
-	Card,
-	Footer,
-	Header,
-	Main,
-	Menu,
-	MenuItem,
-	Spinner,
 	Table,
 	TableBody,
 	TableCell,
 	TableHead,
 	TableRow,
-} from "@versini/ui-components";
-import { TextInput } from "@versini/ui-form";
+} from "@versini/ui-table";
+
 import {
 	IconChart,
 	IconDelete,
@@ -26,6 +24,7 @@ import {
 	IconRestore,
 	IconSettings,
 } from "@versini/ui-icons";
+import { TextInput } from "@versini/ui-textinput";
 import { Highlight, themes } from "prism-react-renderer";
 
 export default {

packages/documentation/src/Components/Main.stories.tsx

@@ -1,5 +1,7 @@
 import type { Story } from "@ladle/react";
-import { Footer, Header, Main } from "@versini/ui-components";
+import { Footer } from "@versini/ui-footer";
+import { Header } from "@versini/ui-header";
+import { Main } from "@versini/ui-main";
 
 export default {
 	title: "Components/Main",

packages/documentation/src/Components/Menu.stories.tsx

@@ -1,12 +1,5 @@
 import type { Story } from "@ladle/react";
-import {
-	Button,
-	ButtonIcon,
-	Menu,
-	MenuItem,
-	MenuSeparator,
-	Panel,
-} from "@versini/ui-components";
+import { Button, ButtonIcon } from "@versini/ui-button";
 import {
 	IconBack,
 	IconChart,
@@ -15,12 +8,15 @@ import {
 	IconProfile,
 	IconSettings,
 } from "@versini/ui-icons";
+import { Menu, MenuItem, MenuSeparator } from "@versini/ui-menu";
+import { Panel } from "@versini/ui-panel";
 import { useState } from "react";
 
 export default {
 	title: "Components/Menu",
 	meta: {
 		importName: "Menu, MenuItem, MenuSeparator",
+		importPackage: "ui-menu",
 	},
 	args: {
 		mode: "system",

packages/documentation/src/Components/Panel.stories.tsx

@@ -1,5 +1,6 @@
 import type { Story } from "@ladle/react";
-import { Button, Panel } from "@versini/ui-components";
+import { Button } from "@versini/ui-button";
+import { Panel } from "@versini/ui-panel";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";
 import { useState } from "react";
 

packages/documentation/src/Components/Pill.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Pill } from "@versini/ui-components";
+import { Pill } from "@versini/ui-pill";
 
 export default {
 	title: "Components/Pill",

packages/documentation/src/Components/Spinner.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@ladle/react";
-import { Spinner } from "@versini/ui-components";
+import { Spinner } from "@versini/ui-spinner";
 
 export default {
 	title: "Components/Spinner",

packages/documentation/src/Components/Table.stories.tsx

@@ -1,6 +1,7 @@
 import type { Story } from "@ladle/react";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconDelete, IconRestore } from "@versini/ui-icons";
 import {
-	ButtonIcon,
 	Table,
 	TableBody,
 	TableCell,
@@ -9,15 +10,15 @@ import {
 	TableFooter,
 	TableHead,
 	TableRow,
-} from "@versini/ui-components";
-import { IconDelete, IconRestore } from "@versini/ui-icons";
+} from "@versini/ui-table";
 import { useState } from "react";
 
 export default {
 	title: "Components/Table",
 	meta: {
 		importName:
 			"Table, TableBody, TableCell, TableCellSort, TableHead, TableRow",
+		importPackage: "ui-table",
 	},
 	args: {
 		mode: "system",

packages/documentation/src/Form/TextArea.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story } from "@ladle/react";
-import { Button } from "@versini/ui-components";
-import { TextArea } from "@versini/ui-form";
+import { Button } from "@versini/ui-button";
 import { ThemeProvider } from "@versini/ui-system";
+import { TextArea } from "@versini/ui-textarea";
 import { useState } from "react";
 
 const customTheme = {
@@ -24,7 +24,6 @@ export default {
 	title: "Form components/TextArea",
 	meta: {
 		importName: "TextArea",
-		importPackage: "ui-form",
 	},
 	args: {
 		label: "Type your question here",

packages/documentation/src/Form/TextInput.stories.tsx

@@ -1,12 +1,11 @@
 import type { Story } from "@ladle/react";
-import { Button } from "@versini/ui-components";
-import { TextInput } from "@versini/ui-form";
+import { Button } from "@versini/ui-button";
+import { TextInput } from "@versini/ui-textinput";
 
 export default {
 	title: "Form components/TextInput",
 	meta: {
 		importName: "TextInput",
-		importPackage: "ui-form",
 	},
 	args: {
 		type: "text",

packages/documentation/src/Form/TextInputMask.stories.tsx

@@ -1,14 +1,14 @@
 import type { Story } from "@ladle/react";
-import { ButtonIcon } from "@versini/ui-components";
-import { TextInputMask } from "@versini/ui-form";
+import { ButtonIcon } from "@versini/ui-button";
 import { IconHide, IconShow } from "@versini/ui-icons";
+import { TextInputMask } from "@versini/ui-textinput";
 import { useState } from "react";
 
 export default {
 	title: "Form components/TextInputMask",
 	meta: {
 		importName: "TextInputMask",
-		importPackage: "ui-form",
+		importPackage: "ui-textinput",
 	},
 	args: {
 		label: "Enter password",

packages/documentation/src/Form/Toggle.stories.tsx

@@ -1,13 +1,13 @@
 import type { Story } from "@ladle/react";
-import { Button, Card } from "@versini/ui-components";
-import { Toggle } from "@versini/ui-form";
+import { Button } from "@versini/ui-button";
+import { Card } from "@versini/ui-card";
+import { Toggle } from "@versini/ui-toggle";
 import { useState } from "react";
 
 export default {
 	title: "Form components/Toggle",
 	meta: {
 		importName: "Toggle",
-		importPackage: "ui-form",
 	},
 	args: {
 		mode: "system",

packages/documentation/src/GettingStarted/1-overview.stories.tsx

@@ -1,5 +1,5 @@
 import { Story, linkTo } from "@ladle/react";
-import { ButtonIcon } from "@versini/ui-components";
+import { ButtonIcon } from "@versini/ui-button";
 import { IconNext } from "@versini/ui-icons";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";