Build changes from 75df597

changelog.txt

@@ -0,0 +1,8 @@
+Version 0.0.3 - 2nd October, 2024
+- New - Breadcrumb
+- New - Grid Container
+- New - Dialog Component
+- New - Drawer Component
+- New - Menu & Menu Item Component
+- New - Sidebar
+- New - Topbar

dist/force-ui.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'f718ae3dbb342ac9c15d');

dist/utils/withTW.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '67b900a0c635847c38c6');

package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@bsf/force-ui",
+  "version": "0.0.6",
+  "description": "Library of components for the BSF project",
+  "main": "dist/force-ui.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "cross-env NODE_ENV=production wp-scripts build",
+    "start": "cross-env NODE_ENV=development wp-scripts start",
+    "pretty-fix": "prettier --write .",
+    "pretty-lint": "prettier --check .",
+    "lint:js": "wp-scripts lint-js ./src",
+    "eslint:js-fix": "wp-scripts lint-js ./src --fix",
+    "lint:js-fix": "npm run pretty-fix && npm run eslint:js-fix",
+    "lint:css": "wp-scripts lint-style ./src/**/*.{scss,css}",
+    "lint:css-fix": "wp-scripts lint-style ./src/**/*.{scss,css} --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token CHROMATIC_PROJECT_TOKEN",
+    "package": "sh bin/build.sh",
+    "release": "npm run build && npm run package "
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rahulvarma722/bsf-admin-ui.git"
+  },
+  "volta": {
+    "node": "18.15.0"
+  },
+  "keywords": [
+    "bsf",
+    "components",
+    "library"
+  ],
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.3.0",
+    "@floating-ui/react": "^0.26.20",
+    "@lexical/react": "^0.17.0",
+    "@lexical/utils": "^0.17.0",
+    "clsx": "^2.1.1",
+    "deepmerge": "^4.3.1",
+    "framer-motion": "^11.3.29",
+    "lexical": "^0.17.0",
+    "lucide-react": "^0.417.0",
+    "nanoid": "^5.0.7",
+    "styled-components": "^6.1.12",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-scoped-preflight": "^3.4.3"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/force-ui.js"
+    },
+    "./withTW": {
+      "node": "./dist/utils/withTW.js"
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-interactions": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/addon-onboarding": "^8.3.3",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.3.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-webpack5": "^8.3.3",
+    "@storybook/test": "^8.3.3",
+    "@wordpress/eslint-plugin": "^20.3.0",
+    "@wordpress/prettier-config": "^4.4.0",
+    "@wordpress/scripts": "^27.9.0",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^11.7.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "postcss": "^8.4.39",
+    "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.3.3",
+    "tailwindcss": "^3.4.10",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "IE 10"
+  ],
+  "bugs": {
+    "url": "https://github.com/rahulvarma722/bsf-admin-ui/issues"
+  },
+  "homepage": "https://github.com/rahulvarma722/bsf-admin-ui#readme"
+}

postcss.config.cjs

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

src/components/alert/alert.jsx

@@ -0,0 +1,154 @@
+import { cn } from '@/utilities/functions';
+import { getIcon, getAction, getContent, getTitle } from '../toaster/utils';
+import { X } from 'lucide-react';
+
+const Alert = ( {
+	design = 'inline', // stack/inline
+	theme = 'light', // light/dark
+	variant = 'neutral',
+	className = '',
+	title = 'Title',
+	content = 'Description',
+	icon = null,
+	onClose = () => {},
+	action = {
+		label: 'Action',
+		onClick: () => {},
+		type: 'link',
+	},
+} ) => {
+	const closeAlert = () => {
+		onClose();
+	};
+
+	const containerVariantClassNames = {
+		stack: 'w-[22.5rem]',
+		inline: 'lg:w-[47.5rem] w-full',
+	};
+
+	// Variant classes - Based on the variant prop.
+	const variantClassNames = {
+		light: {
+			neutral: 'border-alert-border-neutral bg-alert-background-neutral',
+			custom: 'border-alert-border-neutral bg-alert-background-neutral',
+			info: 'border-alert-border-info bg-alert-background-info',
+			success: 'border-alert-border-green bg-alert-background-green',
+			warning: 'border-alert-border-warning bg-alert-background-warning',
+			error: 'border-alert-border-danger bg-alert-background-danger',
+		},
+		dark: 'bg-background-inverse border-background-inverse',
+	};
+
+	// Close icon class names.
+	const closeIconClassNames = {
+		light: 'text-icon-secondary',
+		dark: 'text-icon-inverse',
+	};
+
+	const handleAction = () => {
+		action?.onClick?.( () => closeAlert() );
+	};
+
+	if ( design === 'stack' ) {
+		return (
+			<div
+				className={ cn(
+					'flex items-center justify-start p-4 gap-2 relative border border-solid rounded-md shadow-lg',
+					theme === 'dark'
+						? variantClassNames.dark
+						: variantClassNames.light?.[ variant ],
+					containerVariantClassNames.inline,
+					className
+				) }
+			>
+				<>
+					<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
+						{ getIcon( { variant, icon, theme } ) }
+					</div>
+					<div className="flex flex-col items-start justify-start gap-0.5">
+						{ getTitle( { title, theme } ) }
+						{ getContent( { content, theme } ) }
+						{
+							action?.label &&
+								typeof action?.onClick === 'function' && (
+							/* eslint-disable */
+									<div className="mt-2.5">
+										{getAction({
+											actionLabel: action?.label,
+											actionType:
+												action?.type ?? 'button',
+											onAction: handleAction,
+											theme,
+										})}
+									</div>
+								)
+							/* eslint-enable */
+						}
+					</div>
+					<div className="absolute right-4 top-4 [&_svg]:size-5">
+						<button
+							className={ cn(
+								'bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer',
+								closeIconClassNames[ theme ] ??
+									closeIconClassNames.light
+							) }
+							onClick={ () => closeAlert() }
+						>
+							<X />
+						</button>
+					</div>
+				</>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={ cn(
+				'flex items-center justify-between p-3 gap-2 relative border border-solid rounded-md shadow-lg',
+				theme === 'dark'
+					? variantClassNames.dark
+					: variantClassNames.light?.[ variant ],
+				containerVariantClassNames.inline,
+				className
+			) }
+		>
+			<div className="flex items-center justify-start gap-2">
+				<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
+					{ getIcon( { variant, icon, theme } ) }
+				</div>
+				<div className="flex items-start justify-start gap-1 mr-10 [&>span:first-child]:shrink-0">
+					{ getTitle( { title, theme } ) }
+					{ getContent( { content, theme } ) }
+				</div>
+			</div>
+			<div className="flex items-center justify-start gap-4 [&_svg]:size-5">
+				{
+					action?.label && typeof action?.onClick === 'function' && (
+						/* eslint-disable */
+						<div className="flex">
+							{getAction({
+								actionLabel: action?.label,
+								actionType: action?.type ?? 'button',
+								onAction: handleAction,
+								theme,
+							})}
+						</div>
+					)
+					/* eslint-enable */
+				}
+				<button
+					className={ cn(
+						'bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer',
+						closeIconClassNames[ theme ] ?? closeIconClassNames.light
+					) }
+					onClick={ () => closeAlert() }
+				>
+					<X />
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default Alert;