@react-foundry/anchor-list 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (C) 2019-2025 Crown Copyright
+Copyright (C) 2019-2026 Daniel A.C. Martin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+React Foundry - Anchor List
+===========================
+
+A list of anchors. Items that contain links to the current page are
+marked as active. Useful for navigation menus.
+
+
+Using this package
+------------------
+
+First install the package into your project:
+
+```shell
+npm install -S @react-foundry/anchor-list
+```
+
+Then use it in your code as follows:
+
+```js
+import React, { createElement as h } from 'react';
+import AnchorList from '@react-foundry/anchor-list';
+
+export const MyComponent = props => (
+  <AnchorList items={[
+    { href: '/', text: 'Inactive 1' },
+    { href: '#main-content', text: 'Active' },
+    { href: '/#main-content', text: 'Inactive 2' }
+  ]} />
+);
+
+export default MyComponent;
+```
+
+
+Working on this package
+-----------------------
+
+Before working on this package you must install its dependencies using
+the following command:
+
+```shell
+pnpm install
+```
+
+
+### Testing
+
+```shell
+npm test
+```
+
+
+### Building
+
+```shell
+npm run build
+```
+
+
+### Clean-up
+
+```shell
+npm run clean
+```

package/dist/AnchorList.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType, FC, HTMLProps } from 'react';
+import { AnchorProps } from '@react-foundry/anchor';
+import { StandardProps } from '@react-foundry/component-helpers';
+import '../assets/AnchorList.scss';
+export type Anchor = AnchorProps & {
+    /** Text of the link */
+    text?: string;
+};
+export type Item = Anchor & {
+    /** Subitems */
+    items?: Item[];
+};
+export type AnchorListProps = StandardProps & {
+    /** List component to use  */
+    as?: ComponentType<HTMLProps<HTMLOListElement | HTMLUListElement>> | 'ol' | 'ul';
+    /** List of links to choose from */
+    items: Item[];
+};
+export declare const AnchorList: FC<AnchorListProps>;
+export default AnchorList;

package/dist/AnchorList.js

@@ -0,0 +1,34 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchorList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const anchor_1 = require("@react-foundry/anchor");
+const component_helpers_1 = require("@react-foundry/component-helpers");
+const router_1 = require("@react-foundry/router");
+require("../assets/AnchorList.scss");
+const AnchorListInner = ({ as: Component = 'ul', classBlock, classModifiers, className, items, ...attrs }) => {
+    const classes = (0, component_helpers_1.classBuilder)('penultimate-anchor-list', classBlock, classModifiers, className);
+    const isActive = (0, router_1.useIsActive)();
+    const processItem = ({ children, text, href, items, ...anchorAttrs }, i) => {
+        const active = isActive(href || '', false);
+        return ((0, jsx_runtime_1.jsxs)("li", { className: classes('item', active ? 'active' : undefined), children: [(0, jsx_runtime_1.jsx)(anchor_1.A, { ...anchorAttrs, classBlock: classes('link'), href: href, children: children || text }), !(active && items) ? null : ((0, jsx_runtime_1.jsx)(Component, { className: classes('subitems'), children: items.map(processItem) }))] }, i));
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, { ...attrs, className: classes(), children: items.map(processItem) }));
+};
+const AnchorList = ({ as: Component = 'ul', classBlock, classModifiers, className, items, ...attrs }) => {
+    const classes = (0, component_helpers_1.classBuilder)('penultimate-anchor-list', classBlock, classModifiers, className);
+    const props = {
+        ...attrs,
+        as: Component,
+        classBlock,
+        classModifiers,
+        className,
+        items
+    };
+    const content = ((0, jsx_runtime_1.jsx)(AnchorListInner, { ...props }));
+    return (!router_1.needSuspense ? content : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Component, { ...attrs, className: classes(), children: items.map(({ children, text, href, ...anchorAttrs }, i) => ((0, jsx_runtime_1.jsx)("li", { className: classes('item'), children: (0, jsx_runtime_1.jsx)(anchor_1.A, { ...anchorAttrs, classBlock: classes('link'), href: href, children: children || text }) }, i))) }), children: content })));
+};
+exports.AnchorList = AnchorList;
+exports.default = exports.AnchorList;

package/dist/AnchorList.mjs

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { A } from '@react-foundry/anchor';
+import { classBuilder } from '@react-foundry/component-helpers';
+import { needSuspense, useIsActive } from '@react-foundry/router';
+import '../assets/AnchorList.scss';
+const AnchorListInner = ({ as: Component = 'ul', classBlock, classModifiers, className, items, ...attrs }) => {
+    const classes = classBuilder('penultimate-anchor-list', classBlock, classModifiers, className);
+    const isActive = useIsActive();
+    const processItem = ({ children, text, href, items, ...anchorAttrs }, i) => {
+        const active = isActive(href || '', false);
+        return (_jsxs("li", { className: classes('item', active ? 'active' : undefined), children: [_jsx(A, { ...anchorAttrs, classBlock: classes('link'), href: href, children: children || text }), !(active && items) ? null : (_jsx(Component, { className: classes('subitems'), children: items.map(processItem) }))] }, i));
+    };
+    return (_jsx(Component, { ...attrs, className: classes(), children: items.map(processItem) }));
+};
+export const AnchorList = ({ as: Component = 'ul', classBlock, classModifiers, className, items, ...attrs }) => {
+    const classes = classBuilder('penultimate-anchor-list', classBlock, classModifiers, className);
+    const props = {
+        ...attrs,
+        as: Component,
+        classBlock,
+        classModifiers,
+        className,
+        items
+    };
+    const content = (_jsx(AnchorListInner, { ...props }));
+    return (!needSuspense ? content : (_jsx(Suspense, { fallback: _jsx(Component, { ...attrs, className: classes(), children: items.map(({ children, text, href, ...anchorAttrs }, i) => (_jsx("li", { className: classes('item'), children: _jsx(A, { ...anchorAttrs, classBlock: classes('link'), href: href, children: children || text }) }, i))) }), children: content })));
+};
+export default AnchorList;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@react-foundry/anchor-list",
+  "version": "0.1.0",
+  "description": "A list of anchors.",
+  "main": "dist/AnchorList.js",
+  "sass": "assets/AnchorList.scss",
+  "exports": {
+    ".": {
+      "sass": "./assets/AnchorList.scss",
+      "types": "./dist/AnchorList.d.ts",
+      "import": "./dist/AnchorList.mjs",
+      "require": "./dist/AnchorList.js",
+      "default": "./dist/AnchorList.mjs"
+    }
+  },
+  "files": [
+    "/assets",
+    "/dist"
+  ],
+  "author": "Daniel A.C. Martin <npm@daniel-martin.co.uk> (http://daniel-martin.co.uk/)",
+  "license": "MIT",
+  "keywords": [
+    "react-components"
+  ],
+  "dependencies": {
+    "@react-foundry/anchor": "^0.1.0",
+    "@react-foundry/component-helpers": "^0.1.0",
+    "@react-foundry/router": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@react-foundry/docs-components": "^0.1.0",
+    "@storybook/addon-docs": "^9.1.17",
+    "react": "^19.2.3"
+  },
+  "peerDependenciesMeta": {
+    "@react-foundry/docs-components": {
+      "optional": true
+    },
+    "@storybook/addon-docs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "19.2.9",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "ts-jest": "29.4.6",
+    "typescript": "5.9.3",
+    "@react-foundry/component-test-helpers": "0.1.0"
+  },
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc -m es2022 && find dist -name '*.js' -exec sh -c 'mv \"$0\" \"${0%.js}.mjs\"' {} \\;",
+    "build:cjs": "tsc",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "module": "dist/AnchorList.mjs",
+  "typings": "dist/AnchorList.d.ts"
+}