@agilant/toga-blox 1.0.5

package/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20.11.0
+
+WORKDIR /app
+
+# Clean up the apt cache to reduce image size
+RUN rm -rf /var/lib/apt/lists/*
+
+# The default command to run, this can be overridden by docker-compose
+CMD ["npm", "run", "start"]

package/README.md

@@ -0,0 +1,69 @@
+🌟 Toga-Blox 🌟
+Toga-Blox is a comprehensive and reusable React component library tailored for accelerating the development of web applications within our company. Crafted with React, TypeScript, and Tailwind CSS, this library encompasses a suite of customizable and ready-to-deploy components, ensuring a harmonious and efficient development experience.
+
+🚀 Features
+🔩 Reusable Components: A curated set of UI components for rapid integration into diverse React applications.
+🔐 TypeScript Support: Robustly typed components to enhance development reliability.
+🎨 Customizable Styling: Integrating Tailwind CSS for effortless and flexible component styling.
+⚡ Vite Compatible: Seamlessly optimized for projects utilizing Vite.
+📦 Installation
+To integrate Toga-Blox into your project, execute the following command:
+
+bash
+
+npm install @your-company/toga-blox
+
+🔧 Customization
+Our components are engineered for extensive customization via props. For comprehensive guidance on customizing each component, consult the specific component documentation.
+
+🐳 Docker Integration
+Toga-Blox requires Docker to run certain services like Storybook and CSS watcher. Please ensure Docker is installed on your system. Follow these steps to set up and run the services:
+
+Install Docker from Docker's official website.
+
+Once Docker is installed, use the following commands to manage the Docker containers:
+
+build the Docker images: docker-compose build
+
+To start the services: docker-compose up
+
+To stop the services: docker-compose down
+
+To run tests: docker-compose run --rm test
+
+📚 Dependencies
+Toga-Blox is built using:
+
+React
+TypeScript
+Tailwind CSS
+DaisyUI
+
+🤝 Contributing
+We value contributions to Toga-Blox, whether they involve documentation enhancements, feature developments, or bug rectifications. Please follow our contribution guidelines.
+
+⚡ Vite Compatibility
+Though toga-blox is developed and optimized using Vite, it's designed to be universally compatible with any React project regardless of the build tool used. This ensures seamless integration whether your project uses Vite, Create React App, or other build setups.
+
+📚 Storybook
+For an interactive exploration of toga-blox components, check out our Storybook. It provides live examples, usage scenarios, and customizable props for each component.
+
+## Peer Dependencies
+
+This library requires `react-router-dom` to be installed in your project. Please ensure that you have `react-router-dom` installed to avoid any issues with missing modules.
+
+To install `react-router-dom`, run:
+
+```bash
+npm install react-router-dom
+```
+
+## FontAwesome Icons
+
+This library uses FontAwesome icons from the free icon sets. If you have a FontAwesome Pro subscription, the Pro icons will be used if they are installed in your project. Ensure you follow the setup instructions from FontAwesome for Pro icons.
+
+For users without a Pro subscription, the free icons will be used. Make sure to install the required FontAwesome packages in your project:
+
+```bash
+npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
+```

package/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+	const value: any;
+	return value;
+}

package/docker-compose.yml

@@ -0,0 +1,22 @@
+services:
+    ui:
+        build:
+            context: .
+            dockerfile: Dockerfile
+        volumes:
+            - ./:/app
+        working_dir: /app
+        ports:
+            - 6006:6006
+        tty: true
+        command: npm run storybook
+
+    css-watcher:
+        build:
+            context: .
+            dockerfile: Dockerfile
+        volumes:
+            - ./:/app
+        working_dir: /app
+        tty: true
+        command: npm run watch-css

package/global.css

@@ -0,0 +1,4 @@
+/* global.css */
+body {
+	padding: 0px !important;
+}

package/index.js

@@ -0,0 +1,4 @@
+import "./main.css";
+
+export { default as HelloWorld } from "./components/HelloWorld";
+export { default as Button } from "./components/Button";

package/nodemon.json

@@ -0,0 +1,5 @@
+{
+	"watch": ["src/**/*.{js,jsx,ts,tsx}", ".storybook/**/*.{js,jsx,ts,tsx}"],
+	"ext": "js,jsx,ts,tsx",
+	"exec": "npm run build-css"
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+	"name": "@agilant/toga-blox",
+	"private": false,
+	"version": "1.0.5",
+	"description": "",
+	"main": "index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"test": "vitest run",
+		"test:coverage": "vitest run --coverage=v8-to-istanbul",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"build-css": "tailwindcss -i ./src/main.css -o ./dist/main.css --minify",
+		"watch-css": "nodemon"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"daisyui": "^3",
+		"@storybook/addon-docs": "^7.6.6",
+		"@storybook/addon-viewport": "^7.6.10",
+		"classnames": "^2.5.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"framer-motion": "^11.0.8",
+		"tslib": "^2.3.0",
+		"@emotion/is-prop-valid": "^1.1.3",
+		"@tanstack/virtual-core": "^3.1.3",
+		"@tanstack/react-virtual": "^3.1.3"
+	},
+	"devDependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.5.1",
+		"@fortawesome/free-solid-svg-icons": "^6.5.1",
+		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@storybook/addon-a11y": "^7.6.8",
+		"@storybook/addon-essentials": "^7.6.6",
+		"@storybook/addon-interactions": "^7.6.6",
+		"@storybook/addon-links": "^7.6.6",
+		"@storybook/addon-onboarding": "^1.0.10",
+		"@storybook/blocks": "^7.6.6",
+		"@storybook/react": "^7.6.6",
+		"@storybook/react-vite": "^7.6.6",
+		"@storybook/test": "^7.6.6",
+		"@testing-library/jest-dom": "^6.2.0",
+		"@testing-library/react": "^14.1.2",
+		"@testing-library/user-event": "^14.5.2",
+		"@types/react-router-dom": "^5.3.3",
+		"@vitejs/plugin-react": "^4.2.1",
+		"@vitest/coverage-istanbul": "^1.2.1",
+		"@vitest/coverage-v8": "^1.2.1",
+		"autoprefixer": "^10.4.16",
+		"jsdom": "^23.2.0",
+		"nodemon": "^3.0.2",
+		"postcss": "^8.4.32",
+		"react-router-dom": "^6.21.1",
+		"storybook": "^7.6.6",
+		"tailwindcss": "^3.4.0",
+		"typescript": "^5.3.3",
+		"vite": "^4.5.1",
+		"vite-tsconfig-paths": "^4.2.2",
+		"vitest": "^1.2.1"
+	},
+	"peerDependencies": {
+		"@fortawesome/fontawesome-svg-core": "^1.2.35",
+		"@fortawesome/free-solid-svg-icons": "^5.15.4",
+		"@fortawesome/react-fontawesome": "^0.1.15",
+		"react-router-dom": "^5.2.0"
+	}
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,284 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Text from "../Text/Text";
+import Badge from "./Badge";
+import { BadgeTypes } from "./Badge.types";
+import Image from "../Image/Image";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
+export default {
+	title: "Components/Badge",
+	component: Badge,
+	argTypes: {
+		badgeSize: {
+			control: "select",
+			options: ["small", "medium", "large"],
+			description: "The size of the badge.",
+		},
+		color: {
+			control: "select",
+			options: [
+				"red",
+				"blue",
+				"green",
+				"black",
+				"white",
+				"orange",
+				"purple",
+				"none",
+			],
+			description: "The badge color.",
+		},
+		borderColor: {
+			control: "select",
+			options: [
+				"red",
+				"blue",
+				"green",
+				"black",
+				"orange",
+				"purple",
+				"none",
+			],
+			description: "The border color of the badge.",
+		},
+		fontColor: {
+			control: "select",
+			options: ["white", "black"],
+			description: "The text color on the button.",
+		},
+		hoverColor: {
+			control: "select",
+			options: ["red", "green", "blue", "orange", "purple", "none"],
+			description: "The background color on hover",
+		},
+		cursorPointer: {
+			control: "boolean",
+			description: "Whether the badge should have a pointer cursor.",
+		},
+		image: {
+			table: {
+				disable: true,
+			},
+			description: "The image to display in the badge.",
+		},
+		tagStyle: {
+			control: "boolean",
+			description: "Whether the badge is a tag style.",
+		},
+		tagStyleIconColor: {
+			control: "select",
+			options: ["red", "blue", "green", "orange", "purple", "black"],
+			description: "The color of the icon for tag style.",
+		},
+		to: {
+			table: {
+				disable: true,
+			},
+			description: "The link to redirect to when the badge is clicked.",
+		},
+		text: {
+			table: {
+				disable: true,
+			},
+			description: "The text to display in the badge.",
+		},
+		hasMobileStyle: {
+			control: "boolean",
+			description: "Whether the badge uses responsive styles or not.",
+		},
+
+		mobileIcon: {
+			table: {
+				disable: true,
+			},
+			description:
+				"The icon to display in the badge when on mobile view.",
+		},
+		mobileIconLabel: {
+			table: {
+				disable: true,
+			},
+		},
+		href: {
+			table: {
+				disable: true,
+			},
+		},
+		additionalClasses: {
+			table: {
+				disable: true,
+			},
+		},
+		icon: {
+			table: {
+				disable: true,
+			},
+		},
+		as: {
+			table: {
+				disable: true,
+			},
+		},
+		type: {
+			table: {
+				disable: true,
+			},
+		},
+		testId: {
+			table: {
+				disable: true,
+			},
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: StoryFn<BadgeTypes> = (args) => <Badge {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	type: "span",
+	color: "red",
+	borderColor: "red",
+	hoverColor: "none",
+	badgeSize: "large",
+	cursorPointer: false,
+	tagStyle: false,
+	hasMobileStyle: true,
+	mobileIcon: getFontAwesomeIcon("exclamation"),
+	mobileIconLabel: "Priority",
+	testId: "priority-badge",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Priority"
+			tag="p"
+			additionalClasses="font-bold"
+		/>
+	),
+};
+
+export const Processing = Template.bind({});
+Processing.args = {
+	type: "span",
+	color: "purple",
+	borderColor: "purple",
+	hoverColor: "none",
+	badgeSize: "large",
+	cursorPointer: false,
+	tagStyle: false,
+	hasMobileStyle: false,
+	mobileIcon: getFontAwesomeIcon("exclamation"),
+	mobileIconLabel: "Processing",
+	testId: "priority-badge",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Processing"
+			tag="p"
+			additionalClasses="font-bold"
+		/>
+	),
+};
+
+export const BadgeWithIcon = Template.bind({});
+BadgeWithIcon.args = {
+	type: "span",
+	color: "green",
+	hoverColor: "none",
+	borderColor: "green",
+	badgeSize: "large",
+	cursorPointer: false,
+	tagStyle: false,
+	hasMobileStyle: true,
+	mobileIcon: getFontAwesomeIcon("check"),
+	mobileIconLabel: "Complete",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Complete"
+			tag="p"
+		/>
+	),
+	icon: getFontAwesomeIcon("check"),
+};
+
+export const PillStyle = Template.bind({});
+PillStyle.args = {
+	type: "href",
+	href: "#",
+	color: "blue",
+	hoverColor: "blue",
+	borderColor: "none",
+	tagStyle: false,
+	hasMobileStyle: true,
+	mobileIcon: getFontAwesomeIcon("phone"),
+	mobileIconLabel: "Contact Us",
+	text: (
+		<>
+			<Text
+				size="md"
+				color="primary"
+				fontFamily="serif"
+				text="Contact Us"
+				tag="h2"
+				additionalClasses="pl-2 pb-0 font-bold"
+			/>
+			<Text
+				size="md"
+				color="primary"
+				fontFamily="serif"
+				text="1-800-800-8000"
+				tag="p"
+				additionalClasses="pl-2 pt-0"
+			/>
+		</>
+	),
+	image: (
+		<Image
+			src="../../../assets/contact-image.png"
+			alt=""
+			background={false}
+			additionalClasses="flex justify-center w-12 h-12 max-md:hidden"
+		/>
+	),
+};
+
+export const TagStyle = Template.bind({});
+TagStyle.args = {
+	type: "span",
+	color: "white",
+	hoverColor: "none",
+	borderColor: "red",
+	badgeSize: "large",
+	tagStyle: true,
+	tagStyleIconColor: "red",
+	cursorPointer: false,
+	hasMobileStyle: true,
+	mobileIcon: getFontAwesomeIcon("D"),
+	mobileIconLabel: "Damaged",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Damaged"
+			tag="p"
+		/>
+	),
+	icon: getFontAwesomeIcon("D"),
+};