@agilant/toga-blox 1.0.5

package/src/utils/generateNavMenu.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Text from "../components/Text/Text";
+
+type Link = {
+	link: string;
+	menuItem: string;
+};
+
+type NavItem = {
+	title: string;
+	links: Link[];
+};
+
+type NavItemProps = {
+	navDataList: NavItem[];
+};
+
+export const NavList: React.FC<NavItemProps> = ({ navDataList }) => {
+	return (
+		<>
+			{navDataList.map((item) => (
+				<div className="flex flex-col" key={item.title}>
+					<div data-testid={item.title}>
+						<Text
+							size={"md"}
+							color={"black"}
+							text={item.title}
+							fontFamily={""}
+							additionalClasses="font-bold uppercase mb-3"
+						/>
+					</div>
+					<ul>
+						{item.links.map((link) => (
+							<li key={link.menuItem}>
+								<a
+									className="link link-hover my-3"
+									href={link.link}
+									data-testid={link.menuItem}
+								>
+									<Text
+										size={"sm"}
+										color={"black"}
+										text={link.menuItem}
+										fontFamily={""}
+									/>
+								</a>
+							</li>
+						))}
+					</ul>
+				</div>
+			))}
+		</>
+	);
+};

package/src/utils/generateSocialList.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+type SocialListProps = {
+	socialDataList: {
+		type: string;
+		xmlns: string;
+		path: string;
+		ariaLabel: string;
+		href: string;
+	}[];
+};
+
+export const SocialList: React.FC<SocialListProps> = ({ socialDataList }) => {
+	return (
+		<>
+			{socialDataList.map((item) => (
+				<a href={item.href} key={item.href}>
+					<svg
+						xmlns={item.xmlns}
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						className="fill-current"
+						aria-label={item.ariaLabel}
+						data-testid={item.ariaLabel}
+						tabIndex={0}
+					>
+						<path d={item.path}></path>
+					</svg>
+				</a>
+			))}
+		</>
+	);
+};

package/src/utils/getFontAwesomeIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Icons from "@fortawesome/free-solid-svg-icons";
+
+export const getFontAwesomeIcon = (
+	iconName: string
+): React.ReactElement | null => {
+	try {
+		// Extract the required icon using bracket notation
+		const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(
+			1
+		)}`;
+		const icon = (Icons as any)[iconKey];
+
+		if (!icon) {
+			throw new Error(`Icon not found: ${iconName}`);
+		}
+
+		// Render the FontAwesomeIcon with the selected icon
+		return <FontAwesomeIcon icon={icon} />;
+	} catch (error) {
+		console.error(`Error loading Font Awesome icon: ${iconName}`, error);
+		return null;
+	}
+};

package/src/utils/inputValidation.tsx

@@ -0,0 +1,26 @@
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email regex
+const numberRegex = /^\d+$/; // Only digits
+const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; // Minimum eight characters, at least one letter and one number
+const minCharactersRegex = /^.{3,}$/;
+
+const validateInput = (
+	term: string | number,
+	regex: RegExp,
+	errorMessage: string
+) => {
+	term = term.toString();
+
+	if (!regex.test(term)) {
+		return errorMessage;
+	}
+
+	return "Success";
+};
+
+export {
+	validateInput,
+	emailRegex,
+	numberRegex,
+	passwordRegex,
+	minCharactersRegex,
+};

package/tailwind.config.js

@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+
+
+module.exports = {
+	mode: "jit",
+	content: ["./src/**/*.{js,jsx,ts,tsx}"],
+
+	theme: {
+		extend: {
+			maxHeight: {
+				"view-page": "1000px",
+			},
+			fontSize: {
+				"3xl": "2.25rem",
+				xxs: ".6rem",
+			},
+			minWidth: {
+				navDropDown: "25em",
+			},
+			maxWidth: {
+				pageSectionMaxWidth: "1500px",
+			},
+		},
+		fontFamily: {
+			sans: ["ui-sans-serif"],
+			serif: ["ui-serif"],
+			mono: ["ui-monospace"],
+		},
+	},
+
+	plugins: [require("daisyui")],
+};

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"declaration": true,
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"lib": ["DOM", "DOM.Iterable", "ESNext"],
+		"allowJs": false,
+		"skipLibCheck": true,
+		"esModuleInterop": true, // Updated to true for better module compatibility
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx"
+	},
+	"include": [
+		"./src/**/*", // Ensure all source files are included
+		"./vite.config.ts" // Include your Vite configuration
+	],
+	"types": ["vitest/globals"] // Explicitly include Vitest types
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// If you have TypeScript path aliases, they should be specified in your tsconfig.json
+// and this plugin will make Vite understand them.
+import tsconfigPaths from "vite-tsconfig-paths";
+// Include Vitest types
+/// <reference types="vitest" />
+export default defineConfig({
+	plugins: [react(), tsconfigPaths()],
+	server: {
+		host: true,
+		port: 6006,
+	},
+	// @ts-ignore
+	test: {
+		globals: true,
+		environment: "jsdom",
+		setupFiles: "./src/setupTests.ts",
+		// include: ["**/*.{test,spec}.{js,jsx,ts,tsx}"],
+		exclude: [
+			"./index,js",
+			"./node_modules/**",
+			"./**/*.stories.tsx",
+			"./**/postcss.config.js",
+			"./**/tailwind.config.js",
+			"",
+		],
+		coverage: {
+			provider: "istanbul",
+		},
+	},
+});