feat: first release

.github/workflows/pull-requests.yml

@@ -0,0 +1,26 @@
+name: Inspect Pull Requests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  inspect:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - run: yarn install
+      - run: npx lerna run build
+      - run: npx lerna run lint
+      - run: npx lerna run test:coverage

package.json

@@ -12,9 +12,6 @@
 		"test": "yarn lerna run test"
 	},
 	"devDependencies": {
-		"@versini/dev-dependencies-client": "1.0.2",
-		"glob": "10.3.10",
-		"vite-plugin-dts": "3.6.3",
-		"vite-plugin-lib-inject-css": "1.3.0"
+		"@versini/dev-dependencies-client": "1.0.3"
 	}
 }

packages/ui-components/package.json

@@ -1,29 +1,44 @@
 {
 	"name": "@versini/ui-components",
-	"version": "1.0.0",
+	"version": "0.0.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
 	"scripts": {
 		"clean": "rimraf dist",
 		"dev": "vite --host",
-		"build": "yarn run clean && vite build",
+		"build": "yarn run clean && tsc && vite build",
 		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
 		"start": "static-server dist --port 5173",
 		"test": "vitest run",
 		"test:coverage": "vitest run --coverage",
 		"test:coverage:ui": "vitest --coverage --ui",
 		"test:watch": "vitest"
 	},
-	"dependencies": {
-		"@floating-ui/react": "0.26.0",
+	"peerDependencies": {
+		"@floating-ui/react": "^0.26.0",
+		"@tailwindcss/typography": "^0.5.10",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"tailwindcss": "^3.3.3"
+	},
+	"devDependencies": {
+		"@floating-ui/react": "0.26.1",
 		"@tailwindcss/typography": "0.5.10",
-		"autoprefixer": "10.4.16",
-		"clsx": "2.0.0",
-		"postcss": "8.4.31",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"tailwindcss": "3.3.3",
+		"tailwindcss": "3.3.5"
+	},
+	"dependencies": {
+		"clsx": "2.0.0",
 		"uuid": "9.0.1"
-	}
+	},
+	"sideEffects": [
+		"**/*.css"
+	]
 }

packages/ui-components/src/common/utilities.ts

@@ -14,71 +14,3 @@ export const truncate = (fullString: string, maxLength: number) => {
 		fullString,
 	};
 };
-
-/* c8 ignore start */
-export const serviceCall = async ({
-	name,
-	data,
-	method = "POST",
-	headers = {},
-}: {
-	name: string;
-	data: any;
-	method?: string;
-	headers?: any;
-}) => {
-	const response = await fetch(
-		`${import.meta.env.VITE_SERVER_URL}/api/${name}`,
-		{
-			method,
-			headers: {
-				...headers,
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify(data),
-		},
-	);
-	return response;
-};
-/* c8 ignore stop */
-
-/* c8 ignore start */
-export const getViewportWidth = () => {
-	return Math.max(
-		document.documentElement.clientWidth || 0,
-		window.innerWidth || 0,
-	);
-};
-/* c8 ignore stop */
-
-export const obfuscate = (str: string) => {
-	/**
-	 * First we use encodeURIComponent to get percent-encoded
-	 * UTF-8, then we convert the percent encodings into raw
-	 * bytes which can be fed into btoa.
-	 */
-	return window.btoa(
-		encodeURIComponent(str).replace(
-			/%([0-9A-F]{2})/g,
-			function toSolidBytes(_match, p1) {
-				return String.fromCharCode(Number(`0x${p1}`));
-			},
-		),
-	);
-};
-
-export const unObfuscate = (str: string) => {
-	/**
-	 * Going backwards: from bytestream, to percent-encoding,
-	 * to original string.
-	 */
-	return decodeURIComponent(
-		window
-			.atob(str)
-			.split("")
-			.map(function (c) {
-				return `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`;
-			})
-			.join(""),
-	);
-};

packages/ui-components/src/components/Button/ButtonLink.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { truncate } from "../../common/utilities";
+import type { ButtonLinkProps } from "./ButtonTypes";
+import { getButtonClasses, TYPE_LINK } from "./utilities";
+
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+	(
+		{
+			children,
+			kind = "dark",
+			fullWidth = false,
+			className,
+			slim = false,
+			raw = false,
+			"aria-label": ariaLabel,
+			link,
+			target,
+			maxLabelLength,
+		},
+		ref,
+	) => {
+		const buttonClass = getButtonClasses({
+			type: TYPE_LINK,
+			kind,
+			fullWidth,
+			disabled: false,
+			raw,
+			className,
+			slim,
+		});
+
+		const formattedLabel =
+			maxLabelLength && typeof children === "string"
+				? truncate(children, maxLabelLength)
+				: null;
+
+		const extraProps = {
+			target,
+			rel: target === "_blank" ? "noopener noreferrer" : undefined,
+		};
+
+		return (
+			<>
+				<a
+					ref={ref}
+					aria-label={ariaLabel || formattedLabel?.fullString}
+					className={buttonClass}
+					href={link}
+					{...extraProps}
+				>
+					{formattedLabel?.truncatedString || children}
+				</a>
+			</>
+		);
+	},
+);

packages/ui-components/src/components/Button/ButtonTypes.d.ts

@@ -13,3 +13,9 @@ export type ButtonProps = {
 export type ButtonIconProps = {
 	label?: string;
 } & ButtonProps;
+
+export type ButtonLinkProps = {
+	link?: string;
+	target?: string;
+	maxLabelLength?: number;
+} & ButtonProps;