@node-core/ui-components 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026 → 1.0.1-1ccf19c1836415b6ec7bc2d63ffba4686b390ca9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Common/AlertBox/index.module.css +46 -47
- package/Common/AlertBox/index.stories.tsx +73 -0
- package/Common/AlertBox/index.tsx +24 -0
- package/Common/AvatarGroup/Avatar/index.module.css +30 -50
- package/Common/AvatarGroup/Avatar/index.stories.tsx +22 -0
- package/Common/AvatarGroup/Avatar/index.tsx +67 -0
- package/Common/AvatarGroup/Overlay/index.module.css +21 -28
- package/Common/AvatarGroup/Overlay/index.stories.tsx +33 -0
- package/Common/AvatarGroup/Overlay/index.tsx +37 -0
- package/Common/AvatarGroup/__tests__/index.test.jsx +55 -0
- package/Common/AvatarGroup/index.module.css +11 -12
- package/Common/AvatarGroup/index.stories.tsx +56 -0
- package/Common/AvatarGroup/index.tsx +83 -0
- package/Common/Badge/index.module.css +26 -34
- package/Common/Badge/index.stories.tsx +38 -0
- package/Common/Badge/index.tsx +35 -0
- package/Common/BadgeGroup/index.module.css +51 -75
- package/Common/BadgeGroup/index.stories.tsx +35 -0
- package/Common/BadgeGroup/index.tsx +35 -0
- package/Common/Banner/index.module.css +27 -30
- package/Common/Banner/index.stories.tsx +29 -0
- package/Common/Banner/index.tsx +18 -0
- package/Common/BaseActiveLink/__tests__/index.test.jsx +52 -0
- package/Common/BaseActiveLink/index.tsx +34 -0
- package/Common/BaseButton/index.module.css +102 -332
- package/Common/BaseButton/index.stories.tsx +67 -0
- package/Common/BaseButton/index.tsx +59 -0
- package/Common/BaseCodeBox/index.module.css +58 -76
- package/Common/BaseCodeBox/index.stories.tsx +39 -0
- package/Common/BaseCodeBox/index.tsx +122 -0
- package/Common/BaseCrossLink/index.module.css +39 -57
- package/Common/BaseCrossLink/index.stories.tsx +38 -0
- package/Common/BaseCrossLink/index.tsx +46 -0
- package/Common/BaseLinkTabs/index.module.css +33 -67
- package/Common/BaseLinkTabs/index.stories.tsx +34 -0
- package/Common/BaseLinkTabs/index.tsx +53 -0
- package/Common/BasePagination/Ellipsis/index.module.css +8 -14
- package/Common/BasePagination/Ellipsis/index.stories.tsx +10 -0
- package/Common/BasePagination/Ellipsis/index.tsx +11 -0
- package/Common/BasePagination/PaginationListItem/__tests__/index.test.jsx +58 -0
- package/Common/BasePagination/PaginationListItem/index.module.css +21 -36
- package/Common/BasePagination/PaginationListItem/index.stories.tsx +40 -0
- package/Common/BasePagination/PaginationListItem/index.tsx +39 -0
- package/Common/BasePagination/PrevNextArrow.tsx +15 -0
- package/Common/BasePagination/__tests__/index.test.jsx +180 -0
- package/Common/BasePagination/index.module.css +26 -27
- package/Common/BasePagination/index.stories.tsx +67 -0
- package/Common/BasePagination/index.tsx +77 -0
- package/Common/BasePagination/useGetPageElements.tsx +132 -0
- package/Common/Blockquote/index.module.css +23 -44
- package/Common/Blockquote/index.stories.tsx +45 -0
- package/Common/Blockquote/index.tsx +11 -0
- package/Common/Breadcrumbs/BreadcrumbHomeLink/index.module.css +3 -3
- package/Common/Breadcrumbs/BreadcrumbHomeLink/index.tsx +30 -0
- package/Common/Breadcrumbs/BreadcrumbItem/index.module.css +27 -38
- package/Common/Breadcrumbs/BreadcrumbItem/index.tsx +42 -0
- package/Common/Breadcrumbs/BreadcrumbLink/index.module.css +16 -26
- package/Common/Breadcrumbs/BreadcrumbLink/index.tsx +37 -0
- package/Common/Breadcrumbs/BreadcrumbRoot/index.module.css +7 -8
- package/Common/Breadcrumbs/BreadcrumbRoot/index.tsx +20 -0
- package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.tsx +9 -0
- package/Common/Breadcrumbs/index.stories.tsx +94 -0
- package/Common/Breadcrumbs/index.tsx +81 -0
- package/Common/CodeTabs/index.module.css +36 -47
- package/Common/CodeTabs/index.stories.tsx +73 -0
- package/Common/CodeTabs/index.tsx +16 -0
- package/Common/DataTag/index.module.css +32 -30
- package/Common/DataTag/index.stories.tsx +40 -0
- package/Common/DataTag/index.tsx +39 -0
- package/Common/GlowingBackdrop/index.module.css +28 -126
- package/Common/GlowingBackdrop/index.stories.tsx +10 -0
- package/Common/GlowingBackdrop/index.tsx +13 -0
- package/Common/LanguageDropDown/index.module.css +42 -140
- package/Common/LanguageDropDown/index.stories.tsx +19 -0
- package/Common/LanguageDropDown/index.tsx +56 -0
- package/Common/Modal/index.module.css +62 -217
- package/Common/Modal/index.stories.tsx +32 -0
- package/Common/Modal/index.tsx +48 -0
- package/Common/NodejsLogo/index.module.css +4 -3
- package/Common/NodejsLogo/index.stories.tsx +14 -0
- package/Common/NodejsLogo/index.tsx +26 -0
- package/Common/Notification/index.module.css +17 -101
- package/Common/Notification/index.stories.tsx +36 -0
- package/Common/Notification/index.tsx +34 -0
- package/Common/Preview/index.module.css +65 -269
- package/Common/Preview/index.stories.tsx +44 -0
- package/Common/Preview/index.tsx +25 -0
- package/Common/Select/__tests__/index.test.jsx +67 -0
- package/Common/Select/index.module.css +127 -294
- package/Common/Select/index.stories.tsx +111 -0
- package/Common/Select/index.tsx +187 -0
- package/Common/Separator/index.module.css +10 -7
- package/Common/Separator/index.stories.tsx +32 -0
- package/Common/Separator/index.tsx +27 -0
- package/Common/Skeleton/index.module.css +21 -118
- package/Common/Skeleton/index.tsx +39 -0
- package/Common/Tabs/__tests__/index.test.jsx +52 -0
- package/Common/Tabs/index.module.css +40 -58
- package/Common/Tabs/index.stories.tsx +50 -0
- package/Common/Tabs/index.tsx +54 -0
- package/Common/ThemeToggle/__tests__/index.test.jsx +35 -0
- package/Common/ThemeToggle/index.module.css +11 -18
- package/Common/ThemeToggle/index.stories.tsx +10 -0
- package/Common/ThemeToggle/index.tsx +15 -0
- package/Common/Tooltip/index.module.css +29 -119
- package/Common/Tooltip/index.stories.tsx +73 -0
- package/Common/Tooltip/index.tsx +48 -0
- package/Containers/Article/index.module.css +58 -127
- package/Containers/Article/index.stories.tsx +39 -0
- package/Containers/Article/index.tsx +9 -0
- package/Containers/DocSideBar/index.tsx +0 -0
- package/Containers/Footer/index.module.css +36 -51
- package/Containers/Footer/index.stories.tsx +27 -0
- package/Containers/Footer/index.tsx +95 -0
- package/Containers/MetaBar/__tests__/index.test.jsx +63 -0
- package/Containers/MetaBar/index.module.css +69 -101
- package/Containers/MetaBar/index.stories.tsx +80 -0
- package/Containers/MetaBar/index.tsx +72 -0
- package/Containers/NavBar/NavItem/index.module.css +36 -50
- package/Containers/NavBar/NavItem/index.stories.tsx +38 -0
- package/Containers/NavBar/NavItem/index.tsx +44 -0
- package/Containers/NavBar/index.module.css +96 -176
- package/Containers/NavBar/index.stories.tsx +45 -0
- package/Containers/NavBar/index.tsx +94 -0
- package/Containers/Sidebar/ProgressionIcon/index.tsx +16 -0
- package/Containers/Sidebar/SidebarGroup/index.module.css +52 -180
- package/Containers/Sidebar/SidebarGroup/index.stories.tsx +36 -0
- package/Containers/Sidebar/SidebarGroup/index.tsx +49 -0
- package/Containers/Sidebar/SidebarItem/index.module.css +38 -49
- package/Containers/Sidebar/SidebarItem/index.stories.tsx +15 -0
- package/Containers/Sidebar/SidebarItem/index.tsx +43 -0
- package/Containers/Sidebar/index.module.css +24 -42
- package/Containers/Sidebar/index.stories.tsx +88 -0
- package/Containers/Sidebar/index.tsx +67 -0
- package/Icons/HexagonGrid.stories.tsx +10 -0
- package/Icons/HexagonGrid.tsx +1434 -0
- package/Icons/InstallationMethod/Choco.tsx +78 -0
- package/Icons/InstallationMethod/Devbox.tsx +21 -0
- package/Icons/InstallationMethod/Docker.tsx +20 -0
- package/Icons/InstallationMethod/FNM.tsx +132 -0
- package/Icons/InstallationMethod/Homebrew.tsx +69 -0
- package/Icons/InstallationMethod/N.tsx +32 -0
- package/Icons/InstallationMethod/NVM.tsx +63 -0
- package/Icons/InstallationMethod/Volta.tsx +34 -0
- package/Icons/InstallationMethod/{index.js → index.ts} +1 -0
- package/Icons/Logos/JsGreen.tsx +24 -0
- package/Icons/Logos/JsWhite.tsx +37 -0
- package/Icons/Logos/Nodejs.tsx +188 -0
- package/Icons/Logos/NodejsStackedBlack.tsx +98 -0
- package/Icons/Logos/NodejsStackedDark.tsx +124 -0
- package/Icons/Logos/NodejsStackedLight.tsx +123 -0
- package/Icons/Logos/NodejsStackedWhite.tsx +98 -0
- package/Icons/Logos/{index.js → index.ts} +10 -1
- package/Icons/OperatingSystem/AIX.tsx +46 -0
- package/Icons/OperatingSystem/Apple.tsx +23 -0
- package/Icons/OperatingSystem/Linux.tsx +969 -0
- package/Icons/OperatingSystem/Microsoft.tsx +19 -0
- package/Icons/OperatingSystem/{index.js → index.ts} +1 -0
- package/Icons/PackageManager/Npm.tsx +21 -0
- package/Icons/PackageManager/Pnpm.tsx +22 -0
- package/Icons/PackageManager/Yarn.tsx +22 -0
- package/Icons/PackageManager/{index.js → index.ts} +1 -0
- package/Icons/Social/Bluesky.tsx +19 -0
- package/Icons/Social/Discord.tsx +20 -0
- package/Icons/Social/GitHub.tsx +16 -0
- package/Icons/Social/LinkedIn.tsx +16 -0
- package/Icons/Social/Mastodon.tsx +36 -0
- package/Icons/Social/Slack.tsx +31 -0
- package/Icons/Social/X.tsx +16 -0
- package/Icons/Social/{index.js → index.ts} +1 -0
- package/MDX/CodeTabs.tsx +47 -0
- package/package.json +54 -6
- package/stylelint/__tests__/index.test.mjs +80 -0
- package/stylelint/one-utility-class-per-line.mjs +50 -34
- package/stylelint/utils.mjs +25 -19
- package/styles/animations.css +47 -0
- package/styles/base.css +17 -0
- package/styles/effects.css +12 -0
- package/styles/index.css +26 -1127
- package/styles/markdown.css +173 -0
- package/styles/theme.css +175 -0
- package/types.ts +25 -0
- package/Common/AlertBox/index.js +0 -5
- package/Common/AvatarGroup/Avatar/index.js +0 -11
- package/Common/AvatarGroup/Overlay/index.js +0 -6
- package/Common/AvatarGroup/index.js +0 -21
- package/Common/Badge/index.js +0 -7
- package/Common/BadgeGroup/index.js +0 -6
- package/Common/Banner/index.js +0 -4
- package/Common/BaseActiveLink/index.js +0 -14
- package/Common/BaseButton/index.js +0 -10
- package/Common/BaseCodeBox/index.js +0 -50
- package/Common/BaseCrossLink/index.js +0 -12
- package/Common/BaseLinkTabs/index.js +0 -5
- package/Common/BasePagination/Ellipsis/index.js +0 -4
- package/Common/BasePagination/PaginationListItem/index.js +0 -6
- package/Common/BasePagination/PrevNextArrow.js +0 -7
- package/Common/BasePagination/index.js +0 -10
- package/Common/BasePagination/useGetPageElements.js +0 -77
- package/Common/Blockquote/index.js +0 -4
- package/Common/Breadcrumbs/BreadcrumbHomeLink/index.js +0 -9
- package/Common/Breadcrumbs/BreadcrumbItem/index.js +0 -6
- package/Common/Breadcrumbs/BreadcrumbLink/index.js +0 -5
- package/Common/Breadcrumbs/BreadcrumbRoot/index.js +0 -4
- package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.js +0 -4
- package/Common/Breadcrumbs/index.js +0 -22
- package/Common/ChangeHistory/index.js +0 -9
- package/Common/ChangeHistory/index.module.css +0 -198
- package/Common/CodeTabs/index.js +0 -5
- package/Common/DataTag/index.js +0 -18
- package/Common/GlowingBackdrop/index.js +0 -5
- package/Common/LanguageDropDown/index.js +0 -11
- package/Common/Modal/index.js +0 -10
- package/Common/NodejsLogo/index.js +0 -7
- package/Common/Notification/index.js +0 -6
- package/Common/Preview/index.js +0 -7
- package/Common/Select/index.js +0 -46
- package/Common/Separator/index.js +0 -7
- package/Common/Skeleton/index.js +0 -18
- package/Common/Tabs/index.js +0 -6
- package/Common/ThemeToggle/index.js +0 -7
- package/Common/Tooltip/index.js +0 -8
- package/Containers/Article/index.js +0 -4
- package/Containers/DocSideBar/index.js +0 -1
- package/Containers/Footer/index.js +0 -22
- package/Containers/MetaBar/index.js +0 -12
- package/Containers/NavBar/NavItem/index.js +0 -7
- package/Containers/NavBar/index.js +0 -18
- package/Containers/Sidebar/ProgressionIcon/index.js +0 -3
- package/Containers/Sidebar/SidebarGroup/index.js +0 -9
- package/Containers/Sidebar/SidebarItem/index.js +0 -11
- package/Containers/Sidebar/index.js +0 -15
- package/Icons/HexagonGrid.js +0 -3
- package/Icons/InstallationMethod/Choco.js +0 -3
- package/Icons/InstallationMethod/Devbox.js +0 -3
- package/Icons/InstallationMethod/Docker.js +0 -3
- package/Icons/InstallationMethod/FNM.js +0 -3
- package/Icons/InstallationMethod/Homebrew.js +0 -3
- package/Icons/InstallationMethod/N.js +0 -5
- package/Icons/InstallationMethod/NVM.js +0 -3
- package/Icons/InstallationMethod/Volta.js +0 -3
- package/Icons/Logos/JsGreen.js +0 -3
- package/Icons/Logos/JsWhite.js +0 -3
- package/Icons/Logos/Nodejs.js +0 -6
- package/Icons/Logos/NodejsStackedBlack.js +0 -3
- package/Icons/Logos/NodejsStackedDark.js +0 -3
- package/Icons/Logos/NodejsStackedLight.js +0 -3
- package/Icons/Logos/NodejsStackedWhite.js +0 -3
- package/Icons/OperatingSystem/AIX.js +0 -3
- package/Icons/OperatingSystem/Apple.js +0 -3
- package/Icons/OperatingSystem/Linux.js +0 -3
- package/Icons/OperatingSystem/Microsoft.js +0 -3
- package/Icons/PackageManager/Npm.js +0 -3
- package/Icons/PackageManager/Pnpm.js +0 -3
- package/Icons/PackageManager/Yarn.js +0 -3
- package/Icons/Social/Bluesky.js +0 -3
- package/Icons/Social/Discord.js +0 -3
- package/Icons/Social/GitHub.js +0 -3
- package/Icons/Social/LinkedIn.js +0 -3
- package/Icons/Social/Mastodon.js +0 -3
- package/Icons/Social/Slack.js +0 -3
- package/Icons/Social/X.js +0 -3
- package/MDX/CodeTabs.js +0 -16
- package/types.js +0 -1
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import HomeIcon from '@heroicons/react/24/outline/HomeIcon';
|
|
3
|
-
import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const BreadcrumbHomeLink = ({ href = '/', ...props }) => {
|
|
6
|
-
const ariaLabel = props['aria-label'];
|
|
7
|
-
return (_jsx(BreadcrumbLink, { href: href, ...props, children: _jsx(HomeIcon, { title: ariaLabel, "aria-label": ariaLabel, className: styles.icon }) }));
|
|
8
|
-
};
|
|
9
|
-
export default BreadcrumbHomeLink;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const BreadcrumbItem = ({ disableMicrodata, children, hidden = false, hideSeparator = false, position, ...props }) => (_jsxs("li", { ...props, itemProp: !disableMicrodata ? 'itemListElement' : undefined, itemScope: !disableMicrodata ? true : undefined, itemType: !disableMicrodata ? 'https://schema.org/ListItem' : undefined, className: classNames(styles.item, { [styles.visuallyHidden]: hidden }, props.className), "aria-hidden": hidden ? 'true' : undefined, children: [children, position && _jsx("meta", { itemProp: "position", content: `${position}` }), !hideSeparator && (_jsx(ChevronRightIcon, { "aria-hidden": "true", className: styles.separator }))] }));
|
|
6
|
-
export default BreadcrumbItem;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import styles from './index.module.css';
|
|
4
|
-
const BreadcrumbLink = ({ href, active, as: Component = 'a', ...props }) => (_jsx(Component, { itemScope: true, itemType: "http://schema.org/Thing", itemProp: "item", itemID: href?.toString(), href: href, className: classNames(styles.link, { [styles.active]: active }, props.className), "aria-current": active ? 'page' : undefined, ...props, children: _jsx("span", { itemProp: "name", children: props.children }) }));
|
|
5
|
-
export default BreadcrumbLink;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import styles from './index.module.css';
|
|
3
|
-
const BreadcrumbRoot = ({ children, ...props }) => (_jsx("nav", { "aria-label": "breadcrumb", ...props, children: _jsx("ol", { itemScope: true, itemType: "https://schema.org/BreadcrumbList", className: styles.list, children: children }) }));
|
|
4
|
-
export default BreadcrumbRoot;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
|
|
3
|
-
const BreadcrumbTruncatedItem = () => (_jsx(BreadcrumbItem, { disableMicrodata: true, children: _jsx("button", { disabled: true, children: "\u2026" }) }));
|
|
4
|
-
export default BreadcrumbTruncatedItem;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import BreadcrumbHomeLink from '#ui/Common/Breadcrumbs/BreadcrumbHomeLink';
|
|
4
|
-
import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
|
|
5
|
-
import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
|
|
6
|
-
import BreadcrumbRoot from '#ui/Common/Breadcrumbs/BreadcrumbRoot';
|
|
7
|
-
import BreadcrumbTruncatedItem from '#ui/Common/Breadcrumbs/BreadcrumbTruncatedItem';
|
|
8
|
-
const Breadcrumbs = ({ links = [], maxLength = 5, hideHome = false, as = 'a', homeLinkAriaLabel, }) => {
|
|
9
|
-
const totalLength = links.length + +!hideHome;
|
|
10
|
-
const lengthOffset = maxLength - totalLength;
|
|
11
|
-
const isOverflow = lengthOffset < 0;
|
|
12
|
-
const items = useMemo(() => links.map((link, index, items) => {
|
|
13
|
-
const position = index + 1;
|
|
14
|
-
const isLastItem = index === items.length - 1;
|
|
15
|
-
const hidden =
|
|
16
|
-
// We add 1 here to take into account of the truncated breadcrumb.
|
|
17
|
-
position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
|
|
18
|
-
return (_jsx(BreadcrumbItem, { hidden: hidden, hideSeparator: isLastItem, position: position + +!hideHome, children: link.href || isLastItem ? (_jsx(BreadcrumbLink, { as: as, href: link.href || undefined, active: isLastItem, children: link.label })) : (_jsx("span", { className: "opacity-70", children: link.label })) }, link.label.toString()));
|
|
19
|
-
}), [hideHome, isOverflow, lengthOffset, links]);
|
|
20
|
-
return (_jsxs(BreadcrumbRoot, { children: [!hideHome && (_jsx(BreadcrumbItem, { position: 1, children: _jsx(BreadcrumbHomeLink, { as: as, "aria-label": homeLinkAriaLabel }) })), isOverflow && _jsx(BreadcrumbTruncatedItem, {}), items] }));
|
|
21
|
-
};
|
|
22
|
-
export default Breadcrumbs;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const ChangeHistory = ({ label = 'History', changes = [], className, as: As = 'a', 'aria-label': ariaLabel = label, ...props }) => (_jsx("div", { className: classNames('relative', 'inline-block', className), ...props, children: _jsxs("details", { className: "group", children: [_jsxs("summary", { className: styles.summary, role: "button", "aria-haspopup": "menu", children: [_jsx(ClockIcon, { className: "size-4" }), _jsx("span", { children: label }), _jsx(ChevronDownIcon, { className: "size-3 group-open:rotate-180 motion-safe:transition-transform" })] }), _jsx("div", { className: styles.dropdownContentWrapper, role: "menu", "aria-label": ariaLabel, children: _jsx("div", { className: styles.dropdownContentInner, children: changes.map((change, index) => {
|
|
6
|
-
const MenuItem = change.url ? As : 'div';
|
|
7
|
-
return (_jsxs(MenuItem, { className: styles.dropdownItem, role: "menuitem", tabIndex: 0, "aria-label": `${change.label}: ${change.versions.join(', ')}`, href: change.url, children: [_jsx("div", { className: styles.dropdownLabel, children: change.label }), _jsx("div", { className: styles.dropdownVersions, children: change.versions.join(', ') })] }, index));
|
|
8
|
-
}) }) })] }) }));
|
|
9
|
-
export default ChangeHistory;
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.summary {
|
|
3
|
-
display: flex;
|
|
4
|
-
height: calc(var(--spacing, 0.25rem)*9);
|
|
5
|
-
cursor: pointer;
|
|
6
|
-
align-items: center;
|
|
7
|
-
gap: calc(var(--spacing, 0.25rem)*2);
|
|
8
|
-
border-radius: var(--radius-md, 0.375rem);
|
|
9
|
-
border-style: var(--tw-border-style);
|
|
10
|
-
border-width: 1px;
|
|
11
|
-
border-color: var(--color-neutral-200, #e9edf0);
|
|
12
|
-
padding: calc(var(--spacing, 0.25rem)*2);
|
|
13
|
-
font-size: var(--text-sm, 0.875rem);
|
|
14
|
-
line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
|
|
15
|
-
color: var(--color-neutral-700, #6e7b83);
|
|
16
|
-
--tw-outline-style: none;
|
|
17
|
-
outline-style: none;
|
|
18
|
-
@media (forced-colors: active) {
|
|
19
|
-
outline: 2px solid transparent;
|
|
20
|
-
outline-offset: 2px;
|
|
21
|
-
}
|
|
22
|
-
-webkit-user-select: none;
|
|
23
|
-
user-select: none;
|
|
24
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
25
|
-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
26
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
|
|
27
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
|
|
28
|
-
}
|
|
29
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
30
|
-
border-color: var(--color-neutral-900, #2c3437);
|
|
31
|
-
}
|
|
32
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
33
|
-
color: var(--color-neutral-300, #d9e1e4);
|
|
34
|
-
}
|
|
35
|
-
&:hover,
|
|
36
|
-
&:focus-visible {
|
|
37
|
-
background-color: var(--color-neutral-100, #f6f7f9);
|
|
38
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
39
|
-
background-color: var(--color-neutral-900, #2c3437);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
.dropdownContentWrapper {
|
|
44
|
-
position: absolute;
|
|
45
|
-
top: 100%;
|
|
46
|
-
right: calc(var(--spacing, 0.25rem)*0);
|
|
47
|
-
z-index: 50;
|
|
48
|
-
margin-top: calc(var(--spacing, 0.25rem)*1);
|
|
49
|
-
max-height: calc(var(--spacing, 0.25rem)*80);
|
|
50
|
-
width: calc(var(--spacing, 0.25rem)*52);
|
|
51
|
-
overflow: hidden;
|
|
52
|
-
border-radius: var(--radius-sm, 0.25rem);
|
|
53
|
-
border-style: var(--tw-border-style);
|
|
54
|
-
border-width: 1px;
|
|
55
|
-
border-color: var(--color-neutral-200, #e9edf0);
|
|
56
|
-
background-color: var(--color-white, #fff);
|
|
57
|
-
--tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
|
|
58
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
59
|
-
--tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 8%, transparent));
|
|
60
|
-
}
|
|
61
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
62
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
63
|
-
border-color: var(--color-neutral-900, #2c3437);
|
|
64
|
-
}
|
|
65
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
66
|
-
background-color: var(--color-neutral-950, #0d121c);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
.dropdownContentInner {
|
|
70
|
-
max-height: calc(var(--spacing, 0.25rem)*80);
|
|
71
|
-
width: calc(var(--spacing, 0.25rem)*52);
|
|
72
|
-
overflow-y: auto;
|
|
73
|
-
}
|
|
74
|
-
.dropdownItem {
|
|
75
|
-
display: block;
|
|
76
|
-
padding-inline: calc(var(--spacing, 0.25rem)*2.5);
|
|
77
|
-
padding-block: calc(var(--spacing, 0.25rem)*1.5);
|
|
78
|
-
font-size: var(--text-sm, 0.875rem);
|
|
79
|
-
line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
|
|
80
|
-
--tw-font-weight: var(--font-weight-medium, 500);
|
|
81
|
-
font-weight: var(--font-weight-medium, 500);
|
|
82
|
-
color: var(--color-neutral-800, #556066);
|
|
83
|
-
text-decoration-line: none;
|
|
84
|
-
--tw-outline-style: none;
|
|
85
|
-
outline-style: none;
|
|
86
|
-
@media (forced-colors: active) {
|
|
87
|
-
outline: 2px solid transparent;
|
|
88
|
-
outline-offset: 2px;
|
|
89
|
-
}
|
|
90
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
91
|
-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
92
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
|
|
93
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
|
|
94
|
-
}
|
|
95
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
96
|
-
color: var(--color-white, #fff);
|
|
97
|
-
}
|
|
98
|
-
&:hover,
|
|
99
|
-
&:focus-visible {
|
|
100
|
-
background-color: var(--color-green-600, #417e38);
|
|
101
|
-
color: var(--color-white, #fff);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
.dropdownLabel {
|
|
105
|
-
display: block;
|
|
106
|
-
font-size: var(--text-sm, 0.875rem);
|
|
107
|
-
line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
|
|
108
|
-
--tw-leading: var(--leading-tight, 1.25);
|
|
109
|
-
line-height: var(--leading-tight, 1.25);
|
|
110
|
-
--tw-font-weight: var(--font-weight-medium, 500);
|
|
111
|
-
font-weight: var(--font-weight-medium, 500);
|
|
112
|
-
}
|
|
113
|
-
.dropdownVersions {
|
|
114
|
-
display: block;
|
|
115
|
-
font-size: var(--text-xs, 0.75rem);
|
|
116
|
-
line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
|
|
117
|
-
--tw-leading: var(--leading-tight, 1.25);
|
|
118
|
-
line-height: var(--leading-tight, 1.25);
|
|
119
|
-
opacity: 75%;
|
|
120
|
-
}
|
|
121
|
-
@property --tw-border-style {
|
|
122
|
-
syntax: "*";
|
|
123
|
-
inherits: false;
|
|
124
|
-
initial-value: solid;
|
|
125
|
-
}
|
|
126
|
-
@property --tw-shadow {
|
|
127
|
-
syntax: "*";
|
|
128
|
-
inherits: false;
|
|
129
|
-
initial-value: 0 0 #0000;
|
|
130
|
-
}
|
|
131
|
-
@property --tw-shadow-color {
|
|
132
|
-
syntax: "*";
|
|
133
|
-
inherits: false;
|
|
134
|
-
}
|
|
135
|
-
@property --tw-shadow-alpha {
|
|
136
|
-
syntax: "<percentage>";
|
|
137
|
-
inherits: false;
|
|
138
|
-
initial-value: 100%;
|
|
139
|
-
}
|
|
140
|
-
@property --tw-inset-shadow {
|
|
141
|
-
syntax: "*";
|
|
142
|
-
inherits: false;
|
|
143
|
-
initial-value: 0 0 #0000;
|
|
144
|
-
}
|
|
145
|
-
@property --tw-inset-shadow-color {
|
|
146
|
-
syntax: "*";
|
|
147
|
-
inherits: false;
|
|
148
|
-
}
|
|
149
|
-
@property --tw-inset-shadow-alpha {
|
|
150
|
-
syntax: "<percentage>";
|
|
151
|
-
inherits: false;
|
|
152
|
-
initial-value: 100%;
|
|
153
|
-
}
|
|
154
|
-
@property --tw-ring-color {
|
|
155
|
-
syntax: "*";
|
|
156
|
-
inherits: false;
|
|
157
|
-
}
|
|
158
|
-
@property --tw-ring-shadow {
|
|
159
|
-
syntax: "*";
|
|
160
|
-
inherits: false;
|
|
161
|
-
initial-value: 0 0 #0000;
|
|
162
|
-
}
|
|
163
|
-
@property --tw-inset-ring-color {
|
|
164
|
-
syntax: "*";
|
|
165
|
-
inherits: false;
|
|
166
|
-
}
|
|
167
|
-
@property --tw-inset-ring-shadow {
|
|
168
|
-
syntax: "*";
|
|
169
|
-
inherits: false;
|
|
170
|
-
initial-value: 0 0 #0000;
|
|
171
|
-
}
|
|
172
|
-
@property --tw-ring-inset {
|
|
173
|
-
syntax: "*";
|
|
174
|
-
inherits: false;
|
|
175
|
-
}
|
|
176
|
-
@property --tw-ring-offset-width {
|
|
177
|
-
syntax: "<length>";
|
|
178
|
-
inherits: false;
|
|
179
|
-
initial-value: 0px;
|
|
180
|
-
}
|
|
181
|
-
@property --tw-ring-offset-color {
|
|
182
|
-
syntax: "*";
|
|
183
|
-
inherits: false;
|
|
184
|
-
initial-value: #fff;
|
|
185
|
-
}
|
|
186
|
-
@property --tw-ring-offset-shadow {
|
|
187
|
-
syntax: "*";
|
|
188
|
-
inherits: false;
|
|
189
|
-
initial-value: 0 0 #0000;
|
|
190
|
-
}
|
|
191
|
-
@property --tw-font-weight {
|
|
192
|
-
syntax: "*";
|
|
193
|
-
inherits: false;
|
|
194
|
-
}
|
|
195
|
-
@property --tw-leading {
|
|
196
|
-
syntax: "*";
|
|
197
|
-
inherits: false;
|
|
198
|
-
}
|
package/Common/CodeTabs/index.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import Tabs from '#ui/Common/Tabs';
|
|
3
|
-
import styles from './index.module.css';
|
|
4
|
-
const CodeTabs = ({ ...props }) => (_jsx(Tabs, { ...props, className: styles.root, triggerClassName: styles.trigger }));
|
|
5
|
-
export default CodeTabs;
|
package/Common/DataTag/index.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import styles from './index.module.css';
|
|
4
|
-
// These symbols match up with the types used in
|
|
5
|
-
// node core, and the ones defined at
|
|
6
|
-
// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
|
|
7
|
-
const symbolMap = {
|
|
8
|
-
event: 'E',
|
|
9
|
-
method: 'M',
|
|
10
|
-
property: 'P',
|
|
11
|
-
class: 'C',
|
|
12
|
-
module: 'M',
|
|
13
|
-
classMethod: 'S',
|
|
14
|
-
global: 'G',
|
|
15
|
-
ctor: 'C',
|
|
16
|
-
};
|
|
17
|
-
const DataTag = ({ kind, size = 'md' }) => (_jsx("div", { className: classNames(styles.dataTag, styles[size], styles[kind]), children: _jsx("span", { children: symbolMap[kind] }) }));
|
|
18
|
-
export default DataTag;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import HexagonGrid from '#ui/Icons/HexagonGrid';
|
|
3
|
-
import styles from './index.module.css';
|
|
4
|
-
const GlowingBackdrop = () => (_jsx("div", { className: styles.glowingBackdrop, children: _jsx(HexagonGrid, {}) }));
|
|
5
|
-
export default GlowingBackdrop;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { LanguageIcon } from '@heroicons/react/24/outline';
|
|
3
|
-
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
const LanguageDropdown = ({ onChange = () => { }, currentLanguage, availableLanguages, ariaLabel, }) => {
|
|
7
|
-
return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { className: styles.languageDropdown, "aria-label": ariaLabel, children: _jsx(LanguageIcon, { height: "20" }) }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { align: "start", className: styles.dropDownContent, sideOffset: 5, children: _jsx("div", { children: availableLanguages.map(({ name, code, localName }) => (_jsx(DropdownMenu.Item, { onClick: () => onChange({ name, code, localName }), className: classNames(styles.dropDownItem, {
|
|
8
|
-
[styles.currentDropDown]: code === currentLanguage,
|
|
9
|
-
}), children: localName }, code))) }) }) })] }));
|
|
10
|
-
};
|
|
11
|
-
export default LanguageDropdown;
|
package/Common/Modal/index.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { XMarkIcon } from '@heroicons/react/24/outline';
|
|
4
|
-
import * as Dialog from '@radix-ui/react-dialog';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
const Modal = ({ children, open = false, onOpenChange = () => { }, }) => (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: styles.overlay, children: _jsxs(Dialog.Content, { className: styles.content, children: [_jsx(Dialog.Trigger, { className: styles.close, children: _jsx(XMarkIcon, {}) }), children, _jsx(Dialog.Close, {})] }) }) }) }));
|
|
7
|
-
const Title = ({ children }) => (_jsx(Dialog.Title, { className: styles.title, children: children }));
|
|
8
|
-
const Description = ({ children }) => (_jsx(Dialog.Description, { className: styles.description, children: children }));
|
|
9
|
-
const Content = ({ children }) => (_jsx("main", { className: styles.wrapper, children: children }));
|
|
10
|
-
export { Modal, Title, Description, Content };
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import NodejsIcon from '#ui/Icons/Logos/Nodejs';
|
|
3
|
-
import style from './index.module.css';
|
|
4
|
-
const NodejsLogo = ({ variant = 'default', ariaLabel, }) => {
|
|
5
|
-
return (_jsx(NodejsIcon, { variant: variant, className: style.nodejsLogo, ariaLabel: ariaLabel }));
|
|
6
|
-
};
|
|
7
|
-
export default NodejsLogo;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const Notification = ({ open, duration = 5000, onChange, children, className, }) => (_jsx(ToastPrimitive.Root, { open: open, duration: duration, onOpenChange: onChange, className: classNames(styles.root, className), children: _jsx(ToastPrimitive.Title, { className: styles.message, children: children }) }));
|
|
6
|
-
export default Notification;
|
package/Common/Preview/index.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import HexagonGrid from '#ui/Icons/HexagonGrid';
|
|
4
|
-
import JsWhiteIcon from '#ui/Icons/Logos/JsWhite';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
const Preview = ({ type = 'announcements', title }) => (_jsx("div", { className: classNames(styles.root, styles[type]), children: _jsxs("div", { className: styles.container, "aria-hidden": true, children: [_jsx(HexagonGrid, { className: styles.hexagon }), _jsx(JsWhiteIcon, { className: styles.logo }), title] }) }));
|
|
7
|
-
export default Preview;
|
package/Common/Select/index.js
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
|
|
4
|
-
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
5
|
-
import classNames from 'classnames';
|
|
6
|
-
import { useEffect, useId, useMemo, useState } from 'react';
|
|
7
|
-
import Skeleton from '#ui/Common/Skeleton';
|
|
8
|
-
import styles from './index.module.css';
|
|
9
|
-
const isStringArray = (values) => Boolean(values[0] && typeof values[0] === 'string');
|
|
10
|
-
const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
|
|
11
|
-
const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, ariaLabel, loading = false, disabled = false, }) => {
|
|
12
|
-
const id = useId();
|
|
13
|
-
const [value, setValue] = useState(defaultValue);
|
|
14
|
-
useEffect(() => setValue(defaultValue), [defaultValue]);
|
|
15
|
-
const mappedValues = useMemo(() => {
|
|
16
|
-
let mappedValues = values;
|
|
17
|
-
if (isStringArray(mappedValues)) {
|
|
18
|
-
mappedValues = mappedValues.map(value => ({ label: value, value }));
|
|
19
|
-
}
|
|
20
|
-
if (isValuesArray(mappedValues)) {
|
|
21
|
-
return [{ items: mappedValues }];
|
|
22
|
-
}
|
|
23
|
-
return mappedValues;
|
|
24
|
-
}, [values]);
|
|
25
|
-
// We render the actual item slotted to fix/prevent the issue
|
|
26
|
-
// of the tirgger flashing on the initial render
|
|
27
|
-
const currentItem = useMemo(() => mappedValues
|
|
28
|
-
.flatMap(({ items }) => items)
|
|
29
|
-
.find(item => item.value === value), [mappedValues, value]);
|
|
30
|
-
const memoizedMappedValues = useMemo(() => {
|
|
31
|
-
return mappedValues.map(({ label, items }, key) => (_jsxs(SelectPrimitive.Group, { children: [label && (_jsx(SelectPrimitive.Label, { className: classNames(styles.item, styles.label), children: label })), items.map(({ value, label, iconImage, disabled }) => (_jsx(SelectPrimitive.Item, { value: value, disabled: disabled, className: classNames(styles.item, styles.text), children: _jsxs(SelectPrimitive.ItemText, { children: [iconImage, _jsx("span", { children: label })] }) }, value)))] }, label?.toString() ?? key)));
|
|
32
|
-
// We explicitly want to recalculate these values only when the values themselves changed
|
|
33
|
-
// This is to prevent re-rendering and re-calcukating the values on every render
|
|
34
|
-
}, [JSON.stringify(values)]);
|
|
35
|
-
// Both change the internal state and emit the change event
|
|
36
|
-
const handleChange = (value) => {
|
|
37
|
-
setValue(value);
|
|
38
|
-
if (typeof onChange === 'function') {
|
|
39
|
-
onChange(value);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
return (_jsx(Skeleton, { loading: loading, children: _jsxs("span", { className: classNames(styles.select, { [styles.inline]: inline }, className), children: [label && (_jsx("label", { className: styles.label, htmlFor: id, children: label })), _jsxs(SelectPrimitive.Root, { value: currentItem !== undefined ? value : undefined, onValueChange: handleChange, disabled: disabled, children: [_jsxs(SelectPrimitive.Trigger, { className: styles.trigger, "aria-label": ariaLabel, id: id, children: [_jsx(SelectPrimitive.Value, { placeholder: placeholder, children: currentItem !== undefined && (_jsxs(_Fragment, { children: [currentItem.iconImage, _jsx("span", { children: currentItem.label })] })) }), _jsx(ChevronDownIcon, { className: styles.icon })] }), _jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { position: inline ? 'popper' : 'item-aligned', className: classNames(styles.dropdown, {
|
|
43
|
-
[styles.inline]: inline,
|
|
44
|
-
}), children: [_jsx(SelectPrimitive.ScrollUpButton, { children: _jsx(ChevronUpIcon, { className: styles.scrollIcon }) }), _jsx(SelectPrimitive.Viewport, { children: memoizedMappedValues }), _jsx(SelectPrimitive.ScrollDownButton, { children: _jsx(ChevronDownIcon, { className: styles.scrollIcon }) })] }) })] })] }) }));
|
|
45
|
-
};
|
|
46
|
-
export default Select;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
const Separator = ({ className, orientation = 'horizontal', decorative = true, ...props }) => (_jsx(SeparatorPrimitive.Root, { decorative: decorative, orientation: orientation, className: classNames(styles.root, orientation === 'horizontal' ? styles.horizontal : styles.vertical, className), ...props }));
|
|
7
|
-
export default Separator;
|
package/Common/Skeleton/index.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import { isValidElement } from 'react';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const Skeleton = ({ children, className, hide = false, loading = true, }) => {
|
|
6
|
-
// This can be used to completely hide the children after the Skeleton has loaded
|
|
7
|
-
// If certain criterias do not match. This is useful for conditional rendering without
|
|
8
|
-
// changing the actual tree that the Skeleton is wrapping
|
|
9
|
-
if (!loading && hide) {
|
|
10
|
-
return null;
|
|
11
|
-
}
|
|
12
|
-
// If we finished loading, we can hide the Skeleton and render the children tree
|
|
13
|
-
if (!loading) {
|
|
14
|
-
return children;
|
|
15
|
-
}
|
|
16
|
-
return (_jsx("span", { tabIndex: -1, "aria-hidden": "true", className: classNames(styles.skeleton, className), "data-inline-skeleton": isValidElement(children) ? undefined : true, children: children }));
|
|
17
|
-
};
|
|
18
|
-
export default Skeleton;
|
package/Common/Tabs/index.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const Tabs = ({ tabs, addons, triggerClassName, children, ...props }) => (_jsxs(TabsPrimitive.Root, { ...props, className: classNames(styles.tabsRoot, props.className), children: [_jsxs(TabsPrimitive.List, { className: styles.tabsList, children: [tabs.map(tab => (_jsxs(TabsPrimitive.Trigger, { value: tab.value ?? tab.key, className: classNames(styles.tabsTrigger, triggerClassName), children: [tab.label, tab.secondaryLabel ? (_jsx("span", { className: styles.tabSecondaryLabel, children: tab.secondaryLabel })) : null] }, tab.key))), addons && _jsx("div", { className: styles.addons, children: addons })] }), children] }));
|
|
6
|
-
export default Tabs;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
|
|
3
|
-
import styles from './index.module.css';
|
|
4
|
-
const ThemeToggle = props => {
|
|
5
|
-
return (_jsxs("button", { type: "button", className: styles.themeToggle, ...props, children: [_jsx(MoonIcon, { className: "block dark:hidden", height: "20" }), _jsx(SunIcon, { className: "hidden dark:block", height: "20" })] }));
|
|
6
|
-
};
|
|
7
|
-
export default ThemeToggle;
|
package/Common/Tooltip/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const Tooltip = ({ kind = 'default', children, content, asChild = false, side = 'bottom', container, }) => (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: asChild, children: children }), _jsx(TooltipPrimitive.Portal, { container: container, children: _jsxs(TooltipPrimitive.Content, { side: side, sideOffset: 4, className: classNames(styles[kind], styles.content, {
|
|
6
|
-
'mx-1.5': side === 'top' || side === 'bottom',
|
|
7
|
-
}), children: [content, _jsx(TooltipPrimitive.Arrow, { className: styles.arrow, width: 14, height: 6 })] }) })] }) }));
|
|
8
|
-
export default Tooltip;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import NavItem from '#ui/Containers/NavBar/NavItem';
|
|
4
|
-
import { Bluesky, Discord, GitHub, LinkedIn, Mastodon, Slack, X, } from '#ui/Icons/Social';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
const footerSocialIcons = {
|
|
7
|
-
github: GitHub,
|
|
8
|
-
mastodon: Mastodon,
|
|
9
|
-
twitter: X,
|
|
10
|
-
slack: Slack,
|
|
11
|
-
linkedin: LinkedIn,
|
|
12
|
-
bluesky: Bluesky,
|
|
13
|
-
discord: Discord,
|
|
14
|
-
};
|
|
15
|
-
const Footer = ({ pathname = '/', as = 'a', navigation }) => {
|
|
16
|
-
const openJSlink = navigation.footerLinks.at(-1);
|
|
17
|
-
return (_jsxs("footer", { className: styles.footer, children: [_jsx("div", { className: styles.sectionPrimary, children: navigation.footerLinks.slice(0, -1).map(item => (_jsx(NavItem, { type: "footer", href: item.link, as: as, pathname: pathname, children: item.text }, item.link))) }), _jsxs("div", { className: styles.sectionSecondary, children: [_jsxs(NavItem, { type: "footer", href: openJSlink.link, as: as, pathname: pathname, children: ["\u00A9 ", openJSlink.text] }), _jsx("div", { className: styles.social, children: navigation.socialLinks.map(link => {
|
|
18
|
-
const SocialIcon = footerSocialIcons[link.icon];
|
|
19
|
-
return (_jsx(NavItem, { href: link.link, type: "footer", as: as, pathname: pathname, children: _jsx(SocialIcon, { width: 20, height: 20, "aria-label": link.link }) }, link.icon));
|
|
20
|
-
}) })] })] }));
|
|
21
|
-
};
|
|
22
|
-
export default Footer;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Fragment, useMemo } from 'react';
|
|
3
|
-
import styles from './index.module.css';
|
|
4
|
-
const MetaBar = ({ items, headings, as: Component = 'a', heading, }) => {
|
|
5
|
-
// The default depth of headings to display in the table of contents.
|
|
6
|
-
const { minDepth = 2, items: headingItems = [] } = headings || {};
|
|
7
|
-
const filteredHeadings = useMemo(() => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4), [minDepth, headingItems]);
|
|
8
|
-
return (_jsx("div", { className: styles.wrapper, children: _jsxs("dl", { children: [Object.entries(items)
|
|
9
|
-
.filter(([, value]) => !!value)
|
|
10
|
-
.map(([key, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { children: key }), _jsx("dd", { children: value })] }, key))), filteredHeadings.length > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { children: heading }), _jsx("dd", { children: _jsx("ol", { children: filteredHeadings.map(head => (_jsx("li", { className: head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : '', children: _jsxs(Component, { href: `#${head?.data?.id}`, children: [' ', head.value] }) }, head.value))) }) })] }))] }) }));
|
|
11
|
-
};
|
|
12
|
-
export default MetaBar;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import BaseActiveLink from '#ui/Common/BaseActiveLink';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
const NavItem = ({ href = '', type = 'nav', children, className, target, ...props }) => (_jsxs(BaseActiveLink, { target: target, href: href, className: classNames(styles.navItem, styles[type], className), activeClassName: styles.active, allowSubPath: href.startsWith('/'), ...props, children: [_jsx("span", { className: styles.label, children: children }), target === '_blank' && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
|
|
7
|
-
export default NavItem;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
|
|
4
|
-
import XMark from '@heroicons/react/24/solid/XMarkIcon';
|
|
5
|
-
import * as Label from '@radix-ui/react-label';
|
|
6
|
-
import classNames from 'classnames';
|
|
7
|
-
import { useState } from 'react';
|
|
8
|
-
import NavItem from '#ui/Containers/NavBar/NavItem';
|
|
9
|
-
import style from './index.module.css';
|
|
10
|
-
const navInteractionIcons = {
|
|
11
|
-
show: _jsx(Hamburger, { className: style.navInteractionIcon }),
|
|
12
|
-
close: _jsx(XMark, { className: style.navInteractionIcon }),
|
|
13
|
-
};
|
|
14
|
-
const NavBar = ({ children, Logo, as: Component = 'a', navItems, pathname, sidebarItemTogglerAriaLabel, }) => {
|
|
15
|
-
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
16
|
-
return (_jsxs("nav", { className: style.container, children: [_jsxs("div", { className: style.nodeIconAndMobileItemsToggler, children: [_jsx(Component, { className: style.nodeIconWrapper, href: "/", "aria-label": "Home", children: _jsx(Logo, {}) }), _jsx(Label.Root, { className: style.sidebarItemTogglerLabel, htmlFor: "sidebarItemToggler", role: "button", "aria-label": sidebarItemTogglerAriaLabel, children: navInteractionIcons[isMenuOpen ? 'close' : 'show'] })] }), _jsx("input", { className: classNames(['peer', style.sidebarItemToggler]), id: "sidebarItemToggler", type: "checkbox", onChange: e => setIsMenuOpen(() => e.target.checked), "aria-label": sidebarItemTogglerAriaLabel, tabIndex: -1 }), _jsxs("div", { className: `${style.main} hidden peer-checked:flex`, children: [_jsx("div", { className: style.navItems, children: navItems.map(({ text, link, target }) => (_jsx(NavItem, { pathname: pathname, as: Component, href: link, target: target, children: text }, link))) }), _jsx("div", { className: style.actionsWrapper, children: children })] })] }));
|
|
17
|
-
};
|
|
18
|
-
export default NavBar;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
const ProgressionIcon = props => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", ...props, children: _jsx("path", { d: "M9 3.26795L8 2.6906L7 3.26795L3.5359 5.26795L2.5359 5.8453V7V11V12.1547L3.5359 12.7321L7 14.7321L8 15.3094L9 14.7321L12.4641 12.7321L13.4641 12.1547V11V7V5.8453L12.4641 5.26795L9 3.26795Z" }) }));
|
|
3
|
-
export default ProgressionIcon;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const SidebarGroup = ({ groupName, items, showProgressionIcons, className, ...props }) => (_jsxs("section", { className: classNames({
|
|
6
|
-
[styles.group]: true,
|
|
7
|
-
[styles.progression]: showProgressionIcons,
|
|
8
|
-
}, className), children: [_jsx("label", { className: styles.groupName, children: groupName }), _jsx("ul", { className: styles.itemList, children: items.map(({ label, link }) => (_jsx(SidebarItem, { label: label, link: link, showProgressionIcons: showProgressionIcons, ...props }, link))) })] }));
|
|
9
|
-
export default SidebarGroup;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import BaseActiveLink from '#ui/Common/BaseActiveLink';
|
|
5
|
-
import styles from './index.module.css';
|
|
6
|
-
import ProgressionIcon from '../ProgressionIcon';
|
|
7
|
-
const SidebarItem = ({ label, link, showProgressionIcons = false, ...props }) => (_jsxs(BaseActiveLink, { className: classNames({
|
|
8
|
-
[styles.item]: true,
|
|
9
|
-
[styles.progression]: showProgressionIcons,
|
|
10
|
-
}), href: link, activeClassName: styles.active, ...props, children: [showProgressionIcons && (_jsx(ProgressionIcon, { className: styles.progressionIcon })), _jsx("span", { className: styles.label, children: label }), /^https?:/.test(link) && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
|
|
11
|
-
export default SidebarItem;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Select from '#ui/Common/Select';
|
|
3
|
-
import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
|
|
4
|
-
import styles from './index.module.css';
|
|
5
|
-
const SideBar = ({ groups, pathname, title, onSelect, as, showProgressionIcons = false, children, placeholder, }) => {
|
|
6
|
-
const selectItems = groups.map(({ items, groupName }) => ({
|
|
7
|
-
label: groupName,
|
|
8
|
-
items: items.map(({ label, link }) => ({ value: link, label })),
|
|
9
|
-
}));
|
|
10
|
-
const currentItem = selectItems
|
|
11
|
-
.flatMap(item => item.items)
|
|
12
|
-
.find(item => pathname === item.value);
|
|
13
|
-
return (_jsxs("aside", { className: styles.wrapper, children: [children, selectItems.length > 0 && (_jsx(Select, { label: title, values: selectItems, defaultValue: currentItem?.value, placeholder: placeholder, onChange: onSelect, className: styles.mobileSelect })), groups.map(({ groupName, items }) => (_jsx(SidebarGroup, { groupName: groupName, items: items, pathname: pathname, as: as, showProgressionIcons: showProgressionIcons, className: styles.navigation }, groupName.toString())))] }));
|
|
14
|
-
};
|
|
15
|
-
export default SideBar;
|