@adamjanicki/ui 1.0.1 → 1.0.4

package/components/Link/Link.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "onClick">;
-export type CustomLinkElement = (props: Partial<BuiltinLinkProps & {
+type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href">;
+export type CustomLinkElement = (props: Partial<BuiltinLinkProps> & {
     to: string;
-}> & {
-    ref?: React.Ref<HTMLAnchorElement>;
+} & {
+    ref?: React.MutableRefObject<HTMLAnchorElement>;
 }) => React.ReactNode;
 type DefaultLinkProps = BuiltinLinkProps & {
     /**
@@ -18,4 +18,5 @@ type DefaultLinkProps = BuiltinLinkProps & {
     LinkElement?: CustomLinkElement;
 };
 export declare const UnstyledLink: React.ForwardRefExoticComponent<Omit<DefaultLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export {};
+declare const Link: React.ForwardRefExoticComponent<Omit<DefaultLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/components/Link/Link.js

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { classNames } from "../../utils/util";
 var DefaultLinkElement = forwardRef(function (_a, ref) {
     var to = _a.to, props = __rest(_a, ["to"]);
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));
@@ -30,3 +31,8 @@ export var UnstyledLink = forwardRef(function (_a, ref) {
     var _b = _a.LinkElement, LinkElement = _b === void 0 ? DefaultLinkElement : _b, props = __rest(_a, ["LinkElement"]);
     return (_jsx(LinkElement, __assign({}, props, { ref: ref })));
 });
+var Link = forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("ajui-link-default", className), ref: ref })));
+});
+export default Link;

package/components/Link/index.d.ts

@@ -1 +1,3 @@
+import Link from "./Link";
+export default Link;
 export * from "./Link";

package/components/Link/index.js

@@ -1 +1,3 @@
+import Link from "./Link";
+export default Link;
 export * from "./Link";

package/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { default as useScrollLock } from "./useScrollLock";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useWatchScroll } from "./useWatchScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
+export { default as useScrollToHash } from "./useScrollToHash";

package/hooks/index.js

@@ -2,3 +2,4 @@ export { default as useScrollLock } from "./useScrollLock";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useWatchScroll } from "./useWatchScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
+export { default as useScrollToHash } from "./useScrollToHash";

package/hooks/useScrollToHash.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A hook for scrolling to a hash on the page.
+ * @returns a function that scrolls to the hash on the page
+ */
+declare const useScrollToHash: () => (behavior?: ScrollBehavior) => void;
+export default useScrollToHash;

package/hooks/useScrollToHash.js

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+/**
+ * A hook for scrolling to a hash on the page.
+ * @returns a function that scrolls to the hash on the page
+ */
+var useScrollToHash = function () {
+    return useCallback(
+    /**
+     * Scrolls to the hash on the page.
+     * @param behavior the behavior of the scroll
+     */
+    function (behavior) {
+        var hash = window.location.hash;
+        if (hash) {
+            var element = document.getElementById(hash.substring(1));
+            if (element) {
+                element.scrollIntoView({ behavior: behavior });
+            }
+        }
+    }, []);
+};
+export default useScrollToHash;

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/Button";
 export { default as Button } from "./components/Button";
 export * from "./components/Link";
+export { default as Link } from "./components/Link";
 export * from "./components/Input";
 export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";

package/index.js

@@ -2,6 +2,7 @@
 export * from "./components/Button";
 export { default as Button } from "./components/Button";
 export * from "./components/Link";
+export { default as Link } from "./components/Link";
 export * from "./components/Input";
 export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -28,24 +28,17 @@
     "@types/jest": "^29.5.8",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
-    "css-loader": "^7.1.2",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-css-modules": "^2.1.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.0",
     "nodemon": "^3.1.4",
-    "style-loader": "^4.0.0",
     "ts-jest": "^29.2.2",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.2.2",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4"
+    "typescript": "^5.2.2"
   },
   "eslintConfig": {
     "extends": [

package/style.css

@@ -52,6 +52,8 @@
   --ajui-static-border: #bdbdbd;
   /* Modal */
   --ajui-modal-backdrop-background: rgba(0, 0, 0, 0.5);
+  /* Link */
+  --ajui-link-color: #0070ff;
 }
 
 a:not([disabled]):is(:focus-visible),
@@ -181,9 +183,15 @@ a {
   background-color: var(--ajui-button-secondary-background);
 }
 
+.ajui-link-default {
+  color: var(--ajui-link-color);
+  transition: opacity var(--ajui-default-transition);
+}
+
 @media (hover: hover) {
   .ajui-button--primary:not([disabled]):hover,
-  .ajui-icon-button:not([disabled]):hover {
+  .ajui-icon-button:not([disabled]):hover,
+  .ajui-link-default:hover {
     opacity: var(--ajui-default-opacity-dim);
   }
 

package/sandbox/README.md

@@ -1 +0,0 @@
-# Sandbox

package/sandbox/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "sandbox",
-  "version": "0.1.0",
-  "homepage": "https://adamjanicki2.github.io/sandbox",
-  "private": true,
-  "dependencies": {
-    "@adamjanicki/core-ui": "^1.0.4",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-scripts": "5.0.1",
-    "tachyons": "^4.12.0",
-    "typescript": "^4.9.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build; cp build/index.html build/404.html",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/node": "^20.6.2",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "gh-pages": "^6.0.0"
-  }
-}

package/sandbox/public/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link
-      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏖️</text></svg>"
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Site built from React Skeleton" />
-    <meta name="og:title" content="Sandbox" />
-    <meta name="og:image" content="%PUBLIC_URL%/og-image.png" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Sandbox</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

package/sandbox/public/manifest.json

@@ -1,24 +0,0 @@
-{
-  "name": "Sandbox",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}