Feat/icons-page

apps/www/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "www",
-	"version": "1.16.4",
+	"version": "1.16.5",
 	"module": "src/index.js",
 	"scripts": {
 		"dev": "bun run --hot src/index.tsx",

apps/www/src/common/types.js

@@ -8,10 +8,6 @@
  * @typedef {"horizontal" | "vertical"} DirectionType
  */
 
-/**
- * @typedef {`ri.${keyof typeof import("@iconify-json/ri/icons.json")["icons"]}`} IconName
- */
-
 /**
  * Position Type enum
  * @typedef {"top" | "bottom" | "left" | "right"} PositionType

apps/www/src/components/alert.component.jsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 /**
  * @typedef AlertProps
- * @type {{ title?: string, icon?: import("@kitajs/html").Children, iconName?: import("../common/types").IconName } & import("../common/props").VariantColorProps & import("../common/props").HTMLTag}
+ * @type {{ title?: string, icon?: import("@kitajs/html").Children, iconName?: import("./icon.component").IconName } & import("../common/props").VariantColorProps & import("../common/props").HTMLTag}
  */
 
 /**

apps/www/src/components/icon.component.jsx

@@ -1,42 +1,28 @@
-import { SVG } from "./svg.component";
 import { icons } from "@iconify-json/ri/icons.json";
 import clsx from "clsx";
+import { SVG } from "./svg.component";
+
+/**
+ * @typedef {`ri.${keyof typeof import("@iconify-json/ri/icons.json")["icons"]}`} IconName
+ */
 
 /**
  * @typedef IconProps
- * @type {{size?: number, name: import("../common/types").IconName, color?: string, applyDefsId?: string} & import("./svg.component").SVGProps}
+ * @type {{size?: number, name: IconName, color?: string, applyDefsId?: string} & import("./svg.component").SVGProps}
  */
 
 /**
  * Icon component props
- * @type {import("../common/props").JSXComponent<Omit<IconProps, "viewBox">>}
+ * @param {Omit<IconProps, "viewBox">} props
  */
-export function Icon(props) {
-	const {
-		children,
-		size = 4,
-		name,
-		applyDefsId,
-		class: className,
-		...restProps
-	} = props;
-	// const iconData = getIconData(icons, name);
-	// if (!iconData) {
-	// 	console.error("Icon data is null or undefined");
-	// 	return "";
-	// }
-	// const iconSvg = iconToSVG(iconData, {
-	// 	height: "auto"
-	// });
-	// if (!iconSvg) {
-	// 	console.error(`Icon "${name}" is missing`);
-	// 	return "";
-	// }
-	// const {
-	// 	attributes: { viewBox },
-	// 	body
-	// } = iconSvg;
-
+export function Icon({
+	children,
+	size = 4,
+	name,
+	applyDefsId,
+	class: className,
+	...restProps
+}) {
 	const iconType = name.split(".")[0];
 	const iconName = /** @type {keyof typeof icons} */ (name.split(".")[1]);
 	if (!icons[iconName]) {

apps/www/src/components/ratings.component.jsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 
 /**
  * @typedef {Object} RatingsProps
- * @type {{ applyDefsId: string, nb?: number, value: number, max?: number, size?: number, icon?: import("../common/types").IconName, color?: { empty: string, fill: string } } & import("../common/props").HTMLTagWithChildren}
+ * @type {{ applyDefsId: string, nb?: number, value: number, max?: number, size?: number, icon?: import("./icon.component").IconName, color?: { empty: string, fill: string } } & import("../common/props").HTMLTagWithChildren}
  */
 
 /**

apps/www/src/config/navigation.js

@@ -330,10 +330,10 @@ export const SIDEBAR = [
 				}
 			],
 			[
-				"components/icon",
+				"components/icons",
 				{
 					text: "Icon",
-					link: "/components/icon",
+					link: "/components/icons",
 					chapters: [
 						{ text: "Overview", slug: "overview" },
 						{
@@ -346,7 +346,7 @@ export const SIDEBAR = [
 						},
 						{ text: "Size Props", slug: "size-props" },
 						{ text: "Color Props", slug: "color-props" },
-						{ text: "Customized Icon", slug: "customized-icon" }
+						{ text: "Use Other Iconify Icons", slug: "use-other-iconify-icons" },
 					]
 				}
 			],

apps/www/src/controllers/components/*.ts

@@ -11,7 +11,7 @@ import { checkboxController } from "$controllers/components/checkbox.controller"
 import { datePickerController } from "$controllers/components/date-picker.controller";
 import { dropdownController } from "$controllers/components/dropdown.controller";
 import { galleriesController } from "$controllers/components/galleries.controller";
-import { iconController } from "$controllers/components/icon.controller";
+import { iconsController } from "$controllers/components/icons.controller";
 import { imagePickerController } from "$controllers/components/imagepicker.controller";
 import { inputsController } from "$controllers/components/inputs.controller";
 import { modalsController } from "$controllers/components/modals.controller";
@@ -46,7 +46,7 @@ export const componentsController = new Hono<AppContext>()
 	.route("/datepicker", datePickerController)
 	.route("/dropdown", dropdownController)
 	.route("/galleries", galleriesController)
-	.route("/icon", iconController)
+	.route("/icons", iconsController)
 	.route("/imagepicker", imagePickerController)
 	.route("/inputs", inputsController)
 	.route("/modals", modalsController)

apps/www/src/controllers/components/icons.controller.tsx

@@ -0,0 +1,49 @@
+import { SITE } from "$config/seo";
+import { AppContext } from "$config/server";
+import { IconsPage } from "$pages/components/icons.page";
+import { defaultFavicon } from "$views/layouts.view";
+import { Hono } from "hono";
+
+export const iconsController = new Hono<AppContext>().get((ctx) => {
+	const title = "Icons Component Documentation";
+	const description = "Icons come from iconify. By default, we choose the Remix Icon package.";
+
+	return ctx.html(
+		<IconsPage
+			{...{
+				description,
+				seo: {
+					title,
+					description,
+					robots: ["index", "follow"],
+					openGraph: {
+						title,
+						description,
+						type: "website",
+						image: {
+							width: 150,
+							height: 262
+						},
+						imageUrl: ctx.var.url.origin.concat(defaultFavicon),
+						url: ctx.var.url.href,
+						site_name: ctx.var.url.href
+					},
+					twitter: {
+						name: {
+							creator: SITE.twitter.author,
+							site: SITE.twitter.author,
+							title,
+							description,
+							image: ctx.var.url.origin.concat(defaultFavicon)
+						},
+						property: {
+							url: ctx.var.url.href,
+							domain: ctx.var.url.hostname
+						}
+					}
+				},
+				...ctx.var
+			}}
+		/>
+	);
+});

apps/www/src/pages/components/icons.page.jsx

@@ -0,0 +1,75 @@
+import {
+	ComponentPresentation,
+	ComponentSection,
+	ComponentInstallation
+} from "$views/components.view";
+import { MainLayout } from "$views/layouts.view";
+
+/**
+ * Icons page props
+ * @param {import("$components/page.component").PageContext<{ description: string }>} props
+ */
+export function IconsPage({ seo, isHTMX, description, ...restProps }) {
+	return (
+		<MainLayout seo={seo} isHTMX={isHTMX} {...restProps}>
+			<ComponentPresentation name="Icons" source="icon">
+				<ComponentSection heading="Overview">
+					<p safe>{description}</p>
+				</ComponentSection>
+
+				<ComponentSection heading="Installation">
+					<ComponentInstallation name="icon" />
+				</ComponentSection>
+
+				<ComponentSection heading="Usage" examples={["icons/usage"]}>
+					<p>
+						You can use any icon from iconify's <em>Remix Icon</em> package
+						(@iconify-json/ri). Thanks to your code editor's intellisense,
+						autocompletion shows you all available icons name as you type, dope
+						right ? ;).
+					</p>
+				</ComponentSection>
+
+				<ComponentSection heading="Size Props" examples={["icons/size"]}>
+					<p>
+						Size props are almost value from tailwind's <em>size</em> unit
+						class: 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80,
+						96.
+					</p>
+				</ComponentSection>
+
+				<ComponentSection heading="Color Props" examples={["icons/color"]}>
+					<p>
+						You will deal with colors using text-[color] classes. For example,
+						text-white, text-green-500, etc.
+					</p>
+				</ComponentSection>
+
+				<ComponentSection heading="Use Other Iconify Icons">
+					<p>
+						Like said in{" "}
+						<a href="#usage" class="link link-primary">
+							usage
+						</a>{" "}
+						section, jsxpine allow you to use iconify's remix icons package.
+						Because iconify include other packages, you can use them instead of
+						remix.
+					</p>
+					<p>
+						However, be sure that this package has the same structure as
+						@iconify-json/ri. You can look this link from the iconify website
+						about{" "}
+						<a
+							href="https://iconify.design/docs/types/iconify-json.html"
+							target="_blank"
+							class="link link-primary"
+						>
+							icon json structure
+						</a>{" "}
+						for a better understanding.
+					</p>
+				</ComponentSection>
+			</ComponentPresentation>
+		</MainLayout>
+	);
+}

apps/www/src/views/examples/icons/color.example.jsx

@@ -0,0 +1,14 @@
+import { Icon } from "$components/icon.component";
+
+export function ColorIconExample() {
+    return (
+        <>
+            <Icon name="ri.edit-box-line" size={12} class="text-primary" />
+            <Icon name="ri.edit-box-line" size={12} class="text-secondary" />
+            <Icon name="ri.edit-box-line" size={12} class="text-info" />
+            <Icon name="ri.edit-box-line" size={12} class="text-success" />
+            <Icon name="ri.edit-box-line" size={12} class="text-warning" />
+            <Icon name="ri.edit-box-line" size={12} class="text-danger" />
+        </>
+    )
+}

apps/www/src/views/examples/icons/size.example.jsx

@@ -0,0 +1,12 @@
+import { Icon } from "$components/icon.component";
+
+export function SizeIconExample() {
+    return (
+        <>
+            <Icon name="ri.add-circle-fill" size={6} />
+            <Icon name="ri.add-circle-fill" size={8} />
+            <Icon name="ri.add-circle-fill" size={12} />
+            <Icon name="ri.add-circle-fill" size={16} />
+        </>
+    )
+}

apps/www/src/views/examples/icons/usage.example.jsx

@@ -0,0 +1,12 @@
+import { Icon } from "$components/icon.component";
+
+export function UsqgeIconExqample() {
+    return (
+        <>
+            <Icon name="ri.arrow-left-line" />
+            <Icon name="ri.arrow-up-line" />
+            <Icon name="ri.arrow-right-line" />
+            <Icon name="ri.arrow-down-line" />
+        </>
+    );
+}

apps/www/src/views/examples/ratings/custom-icon.example.jsx

@@ -10,7 +10,7 @@ export function CustomIconRatingsExample() {
 				max={3}
 				size={12}
 				color={{ empty: COLORS.slate[300], fill: COLORS.red[500] }}
-				icon="heart-3-fill"
+				icon="ri.heart-3-fill"
                 applyDefsId="custom-icon-ratings-example"
 			/>
 		</div>