@node-core/ui-components 1.0.1-9592ede0c373887bc655fce1377f06f063194424 → 1.0.1-a008bedf3c5f841ab073a1d74bad6625a18a4681

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.
Files changed (262) hide show
  1. package/Common/AlertBox/index.js +5 -0
  2. package/Common/AlertBox/index.module.css +2 -76
  3. package/Common/AvatarGroup/Avatar/index.js +11 -0
  4. package/Common/AvatarGroup/Avatar/index.module.css +2 -40
  5. package/Common/AvatarGroup/Overlay/index.js +6 -0
  6. package/Common/AvatarGroup/Overlay/index.module.css +2 -31
  7. package/Common/AvatarGroup/index.js +21 -0
  8. package/Common/AvatarGroup/index.module.css +2 -21
  9. package/Common/Badge/index.js +7 -0
  10. package/Common/Badge/index.module.css +2 -38
  11. package/Common/BadgeGroup/index.js +6 -0
  12. package/Common/BadgeGroup/index.module.css +2 -77
  13. package/Common/Banner/index.js +4 -0
  14. package/Common/Banner/index.module.css +2 -42
  15. package/Common/BaseActiveLink/index.js +14 -0
  16. package/Common/BaseButton/index.js +10 -0
  17. package/Common/BaseButton/index.module.css +2 -142
  18. package/Common/BaseCodeBox/index.js +50 -0
  19. package/Common/BaseCodeBox/index.module.css +2 -78
  20. package/Common/BaseCrossLink/index.js +12 -0
  21. package/Common/BaseCrossLink/index.module.css +2 -51
  22. package/Common/BaseLinkTabs/index.js +5 -0
  23. package/Common/BaseLinkTabs/index.module.css +2 -43
  24. package/Common/BasePagination/Ellipsis/index.js +4 -0
  25. package/Common/BasePagination/Ellipsis/index.module.css +2 -10
  26. package/Common/BasePagination/PaginationListItem/index.js +6 -0
  27. package/Common/BasePagination/PaginationListItem/index.module.css +2 -27
  28. package/Common/BasePagination/PrevNextArrow.js +7 -0
  29. package/Common/BasePagination/index.js +10 -0
  30. package/Common/BasePagination/index.module.css +2 -39
  31. package/Common/BasePagination/useGetPageElements.js +77 -0
  32. package/Common/Blockquote/index.js +4 -0
  33. package/Common/Blockquote/index.module.css +2 -29
  34. package/Common/Breadcrumbs/BreadcrumbHomeLink/index.js +9 -0
  35. package/Common/Breadcrumbs/BreadcrumbHomeLink/index.module.css +2 -5
  36. package/Common/Breadcrumbs/BreadcrumbItem/index.js +6 -0
  37. package/Common/Breadcrumbs/BreadcrumbItem/index.module.css +2 -41
  38. package/Common/Breadcrumbs/BreadcrumbLink/index.js +5 -0
  39. package/Common/Breadcrumbs/BreadcrumbLink/index.module.css +2 -22
  40. package/Common/Breadcrumbs/BreadcrumbRoot/index.js +4 -0
  41. package/Common/Breadcrumbs/BreadcrumbRoot/index.module.css +2 -9
  42. package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.js +4 -0
  43. package/Common/Breadcrumbs/index.js +22 -0
  44. package/Common/ChangeHistory/index.js +9 -0
  45. package/Common/ChangeHistory/index.module.css +2 -0
  46. package/Common/CodeTabs/index.js +5 -0
  47. package/Common/CodeTabs/index.module.css +2 -56
  48. package/Common/DataTag/index.js +18 -0
  49. package/Common/DataTag/index.module.css +2 -56
  50. package/Common/GlowingBackdrop/index.js +5 -0
  51. package/Common/GlowingBackdrop/index.module.css +2 -32
  52. package/Common/LanguageDropDown/index.js +11 -0
  53. package/Common/LanguageDropDown/index.module.css +2 -53
  54. package/Common/Modal/index.js +10 -0
  55. package/Common/Modal/index.module.css +2 -79
  56. package/Common/NodejsLogo/index.js +7 -0
  57. package/Common/NodejsLogo/index.module.css +2 -6
  58. package/Common/Notification/index.js +6 -0
  59. package/Common/Notification/index.module.css +2 -20
  60. package/Common/Preview/index.js +7 -0
  61. package/Common/Preview/index.module.css +2 -79
  62. package/Common/Select/index.js +49 -0
  63. package/Common/Select/index.module.css +2 -161
  64. package/Common/Separator/index.js +7 -0
  65. package/Common/Separator/index.module.css +2 -16
  66. package/Common/Skeleton/index.js +18 -0
  67. package/Common/Skeleton/index.module.css +2 -30
  68. package/Common/Tabs/index.js +6 -0
  69. package/Common/Tabs/index.module.css +2 -54
  70. package/Common/ThemeToggle/index.js +7 -0
  71. package/Common/ThemeToggle/index.module.css +2 -15
  72. package/Common/Tooltip/index.js +8 -0
  73. package/Common/Tooltip/index.module.css +2 -43
  74. package/Containers/Article/index.js +4 -0
  75. package/Containers/Article/index.module.css +2 -70
  76. package/Containers/DocSideBar/index.js +1 -0
  77. package/Containers/Footer/index.js +22 -0
  78. package/Containers/Footer/index.module.css +2 -46
  79. package/Containers/MetaBar/index.js +12 -0
  80. package/Containers/MetaBar/index.module.css +2 -91
  81. package/Containers/NavBar/NavItem/index.js +7 -0
  82. package/Containers/NavBar/NavItem/index.module.css +2 -60
  83. package/Containers/NavBar/index.js +18 -0
  84. package/Containers/NavBar/index.module.css +2 -125
  85. package/Containers/Sidebar/ProgressionIcon/index.js +3 -0
  86. package/Containers/Sidebar/SidebarGroup/index.js +9 -0
  87. package/Containers/Sidebar/SidebarGroup/index.module.css +2 -64
  88. package/Containers/Sidebar/SidebarItem/index.js +11 -0
  89. package/Containers/Sidebar/SidebarItem/index.module.css +2 -56
  90. package/Containers/Sidebar/index.js +15 -0
  91. package/Containers/Sidebar/index.module.css +2 -30
  92. package/Icons/HexagonGrid.js +3 -0
  93. package/Icons/InstallationMethod/Choco.js +3 -0
  94. package/Icons/InstallationMethod/Devbox.js +3 -0
  95. package/Icons/InstallationMethod/Docker.js +3 -0
  96. package/Icons/InstallationMethod/FNM.js +3 -0
  97. package/Icons/InstallationMethod/Homebrew.js +3 -0
  98. package/Icons/InstallationMethod/N.js +5 -0
  99. package/Icons/InstallationMethod/NVM.js +3 -0
  100. package/Icons/InstallationMethod/Volta.js +3 -0
  101. package/Icons/InstallationMethod/{index.ts → index.js} +0 -1
  102. package/Icons/Logos/JsWhite.js +3 -0
  103. package/Icons/Logos/Nodejs.js +12 -0
  104. package/Icons/Logos/index.js +3 -0
  105. package/Icons/OperatingSystem/AIX.js +3 -0
  106. package/Icons/OperatingSystem/Apple.js +3 -0
  107. package/Icons/OperatingSystem/Linux.js +3 -0
  108. package/Icons/OperatingSystem/Microsoft.js +3 -0
  109. package/Icons/OperatingSystem/{index.ts → index.js} +0 -1
  110. package/Icons/PackageManager/Npm.js +3 -0
  111. package/Icons/PackageManager/Pnpm.js +3 -0
  112. package/Icons/PackageManager/Yarn.js +3 -0
  113. package/Icons/PackageManager/{index.ts → index.js} +0 -1
  114. package/Icons/Social/Bluesky.js +3 -0
  115. package/Icons/Social/Discord.js +3 -0
  116. package/Icons/Social/GitHub.js +3 -0
  117. package/Icons/Social/LinkedIn.js +3 -0
  118. package/Icons/Social/Mastodon.js +3 -0
  119. package/Icons/Social/Slack.js +3 -0
  120. package/Icons/Social/X.js +3 -0
  121. package/Icons/Social/{index.ts → index.js} +0 -1
  122. package/MDX/CodeTabs.js +16 -0
  123. package/Providers/NotificationProvider/index.js +16 -0
  124. package/Providers/NotificationProvider/index.module.css +2 -0
  125. package/package.json +10 -58
  126. package/stylelint/one-utility-class-per-line.mjs +34 -50
  127. package/stylelint/utils.mjs +19 -25
  128. package/styles/index.css +2 -38
  129. package/types.js +1 -0
  130. package/Common/AlertBox/index.stories.tsx +0 -73
  131. package/Common/AlertBox/index.tsx +0 -24
  132. package/Common/AvatarGroup/Avatar/index.stories.tsx +0 -22
  133. package/Common/AvatarGroup/Avatar/index.tsx +0 -67
  134. package/Common/AvatarGroup/Overlay/index.stories.tsx +0 -33
  135. package/Common/AvatarGroup/Overlay/index.tsx +0 -37
  136. package/Common/AvatarGroup/__tests__/index.test.jsx +0 -55
  137. package/Common/AvatarGroup/index.stories.tsx +0 -56
  138. package/Common/AvatarGroup/index.tsx +0 -83
  139. package/Common/Badge/index.stories.tsx +0 -38
  140. package/Common/Badge/index.tsx +0 -35
  141. package/Common/BadgeGroup/index.stories.tsx +0 -35
  142. package/Common/BadgeGroup/index.tsx +0 -35
  143. package/Common/Banner/index.stories.tsx +0 -29
  144. package/Common/Banner/index.tsx +0 -18
  145. package/Common/BaseActiveLink/__tests__/index.test.jsx +0 -52
  146. package/Common/BaseActiveLink/index.tsx +0 -34
  147. package/Common/BaseButton/index.stories.tsx +0 -67
  148. package/Common/BaseButton/index.tsx +0 -59
  149. package/Common/BaseCodeBox/index.stories.tsx +0 -39
  150. package/Common/BaseCodeBox/index.tsx +0 -122
  151. package/Common/BaseCrossLink/index.stories.tsx +0 -38
  152. package/Common/BaseCrossLink/index.tsx +0 -46
  153. package/Common/BaseLinkTabs/index.stories.tsx +0 -34
  154. package/Common/BaseLinkTabs/index.tsx +0 -53
  155. package/Common/BasePagination/Ellipsis/index.stories.tsx +0 -10
  156. package/Common/BasePagination/Ellipsis/index.tsx +0 -11
  157. package/Common/BasePagination/PaginationListItem/__tests__/index.test.jsx +0 -58
  158. package/Common/BasePagination/PaginationListItem/index.stories.tsx +0 -40
  159. package/Common/BasePagination/PaginationListItem/index.tsx +0 -39
  160. package/Common/BasePagination/PrevNextArrow.tsx +0 -15
  161. package/Common/BasePagination/__tests__/index.test.jsx +0 -180
  162. package/Common/BasePagination/index.stories.tsx +0 -67
  163. package/Common/BasePagination/index.tsx +0 -77
  164. package/Common/BasePagination/useGetPageElements.tsx +0 -132
  165. package/Common/Blockquote/index.stories.tsx +0 -45
  166. package/Common/Blockquote/index.tsx +0 -11
  167. package/Common/Breadcrumbs/BreadcrumbHomeLink/index.tsx +0 -30
  168. package/Common/Breadcrumbs/BreadcrumbItem/index.tsx +0 -42
  169. package/Common/Breadcrumbs/BreadcrumbLink/index.tsx +0 -37
  170. package/Common/Breadcrumbs/BreadcrumbRoot/index.tsx +0 -20
  171. package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.tsx +0 -9
  172. package/Common/Breadcrumbs/index.stories.tsx +0 -94
  173. package/Common/Breadcrumbs/index.tsx +0 -81
  174. package/Common/CodeTabs/index.stories.tsx +0 -73
  175. package/Common/CodeTabs/index.tsx +0 -16
  176. package/Common/DataTag/index.stories.tsx +0 -40
  177. package/Common/DataTag/index.tsx +0 -39
  178. package/Common/GlowingBackdrop/index.stories.tsx +0 -10
  179. package/Common/GlowingBackdrop/index.tsx +0 -13
  180. package/Common/LanguageDropDown/index.stories.tsx +0 -19
  181. package/Common/LanguageDropDown/index.tsx +0 -56
  182. package/Common/Modal/index.stories.tsx +0 -32
  183. package/Common/Modal/index.tsx +0 -48
  184. package/Common/NodejsLogo/index.stories.tsx +0 -14
  185. package/Common/NodejsLogo/index.tsx +0 -26
  186. package/Common/Notification/index.stories.tsx +0 -36
  187. package/Common/Notification/index.tsx +0 -34
  188. package/Common/Preview/index.stories.tsx +0 -44
  189. package/Common/Preview/index.tsx +0 -25
  190. package/Common/Select/__tests__/index.test.jsx +0 -67
  191. package/Common/Select/index.stories.tsx +0 -111
  192. package/Common/Select/index.tsx +0 -187
  193. package/Common/Separator/index.stories.tsx +0 -32
  194. package/Common/Separator/index.tsx +0 -27
  195. package/Common/Skeleton/index.tsx +0 -39
  196. package/Common/Tabs/__tests__/index.test.jsx +0 -52
  197. package/Common/Tabs/index.stories.tsx +0 -50
  198. package/Common/Tabs/index.tsx +0 -54
  199. package/Common/ThemeToggle/__tests__/index.test.jsx +0 -35
  200. package/Common/ThemeToggle/index.stories.tsx +0 -10
  201. package/Common/ThemeToggle/index.tsx +0 -15
  202. package/Common/Tooltip/index.stories.tsx +0 -73
  203. package/Common/Tooltip/index.tsx +0 -48
  204. package/Containers/Article/index.stories.tsx +0 -39
  205. package/Containers/Article/index.tsx +0 -9
  206. package/Containers/DocSideBar/index.tsx +0 -0
  207. package/Containers/Footer/index.stories.tsx +0 -27
  208. package/Containers/Footer/index.tsx +0 -95
  209. package/Containers/MetaBar/__tests__/index.test.jsx +0 -63
  210. package/Containers/MetaBar/index.stories.tsx +0 -80
  211. package/Containers/MetaBar/index.tsx +0 -72
  212. package/Containers/NavBar/NavItem/index.stories.tsx +0 -38
  213. package/Containers/NavBar/NavItem/index.tsx +0 -44
  214. package/Containers/NavBar/index.stories.tsx +0 -45
  215. package/Containers/NavBar/index.tsx +0 -94
  216. package/Containers/Sidebar/ProgressionIcon/index.tsx +0 -16
  217. package/Containers/Sidebar/SidebarGroup/index.stories.tsx +0 -36
  218. package/Containers/Sidebar/SidebarGroup/index.tsx +0 -49
  219. package/Containers/Sidebar/SidebarItem/index.stories.tsx +0 -15
  220. package/Containers/Sidebar/SidebarItem/index.tsx +0 -43
  221. package/Containers/Sidebar/index.stories.tsx +0 -88
  222. package/Containers/Sidebar/index.tsx +0 -67
  223. package/Icons/HexagonGrid.stories.tsx +0 -10
  224. package/Icons/HexagonGrid.tsx +0 -1434
  225. package/Icons/InstallationMethod/Choco.tsx +0 -78
  226. package/Icons/InstallationMethod/Devbox.tsx +0 -21
  227. package/Icons/InstallationMethod/Docker.tsx +0 -20
  228. package/Icons/InstallationMethod/FNM.tsx +0 -132
  229. package/Icons/InstallationMethod/Homebrew.tsx +0 -69
  230. package/Icons/InstallationMethod/N.tsx +0 -32
  231. package/Icons/InstallationMethod/NVM.tsx +0 -63
  232. package/Icons/InstallationMethod/Volta.tsx +0 -34
  233. package/Icons/Logos/JsGreen.tsx +0 -24
  234. package/Icons/Logos/JsWhite.tsx +0 -37
  235. package/Icons/Logos/Nodejs.tsx +0 -188
  236. package/Icons/Logos/NodejsStackedBlack.tsx +0 -98
  237. package/Icons/Logos/NodejsStackedDark.tsx +0 -124
  238. package/Icons/Logos/NodejsStackedLight.tsx +0 -123
  239. package/Icons/Logos/NodejsStackedWhite.tsx +0 -98
  240. package/Icons/Logos/index.ts +0 -17
  241. package/Icons/OperatingSystem/AIX.tsx +0 -46
  242. package/Icons/OperatingSystem/Apple.tsx +0 -23
  243. package/Icons/OperatingSystem/Linux.tsx +0 -969
  244. package/Icons/OperatingSystem/Microsoft.tsx +0 -19
  245. package/Icons/PackageManager/Npm.tsx +0 -21
  246. package/Icons/PackageManager/Pnpm.tsx +0 -22
  247. package/Icons/PackageManager/Yarn.tsx +0 -22
  248. package/Icons/Social/Bluesky.tsx +0 -19
  249. package/Icons/Social/Discord.tsx +0 -20
  250. package/Icons/Social/GitHub.tsx +0 -16
  251. package/Icons/Social/LinkedIn.tsx +0 -16
  252. package/Icons/Social/Mastodon.tsx +0 -36
  253. package/Icons/Social/Slack.tsx +0 -31
  254. package/Icons/Social/X.tsx +0 -16
  255. package/MDX/CodeTabs.tsx +0 -47
  256. package/stylelint/__tests__/index.test.mjs +0 -80
  257. package/styles/animations.css +0 -47
  258. package/styles/base.css +0 -17
  259. package/styles/effects.css +0 -12
  260. package/styles/markdown.css +0 -173
  261. package/styles/theme.css +0 -175
  262. package/types.ts +0 -25
@@ -1,36 +0,0 @@
1
- import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2
-
3
- import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
4
-
5
- type Story = StoryObj<typeof SidebarGroup>;
6
- type Meta = MetaObj<typeof SidebarGroup>;
7
-
8
- export const Default: Story = {
9
- args: {
10
- groupName: 'Example Group',
11
- items: [
12
- { label: 'Item 1', link: '/item1' },
13
- { label: 'Item 2', link: '/item2' },
14
- { label: 'Item 3', link: '/item3' },
15
- ],
16
- },
17
- };
18
-
19
- export const CustomGroup: Story = {
20
- args: {
21
- groupName: 'Custom Group',
22
- items: [
23
- { label: 'Custom Item 1', link: '/custom-item1' },
24
- { label: 'Custom Item 2', link: '/custom-item2' },
25
- ],
26
- },
27
- };
28
-
29
- export const EmptyGroup: Story = {
30
- args: {
31
- groupName: 'Empty Group',
32
- items: [],
33
- },
34
- };
35
-
36
- export default { component: SidebarGroup } as Meta;
@@ -1,49 +0,0 @@
1
- import classNames from 'classnames';
2
- import type { ComponentProps, FC } from 'react';
3
-
4
- import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
5
- import type { FormattedMessage, LinkLike } from '#ui/types';
6
-
7
- import styles from './index.module.css';
8
-
9
- type SidebarGroupProps = {
10
- groupName: FormattedMessage;
11
- items: Array<Omit<ComponentProps<typeof SidebarItem>, 'as' | 'pathname'>>;
12
- as?: LinkLike;
13
- pathname?: string;
14
- className: string;
15
- showProgressionIcons?: boolean;
16
- };
17
-
18
- const SidebarGroup: FC<SidebarGroupProps> = ({
19
- groupName,
20
- items,
21
- showProgressionIcons,
22
- className,
23
- ...props
24
- }) => (
25
- <section
26
- className={classNames(
27
- {
28
- [styles.group]: true,
29
- [styles.progression]: showProgressionIcons,
30
- },
31
- className
32
- )}
33
- >
34
- <label className={styles.groupName}>{groupName}</label>
35
- <ul className={styles.itemList}>
36
- {items.map(({ label, link }) => (
37
- <SidebarItem
38
- key={link}
39
- label={label}
40
- link={link}
41
- showProgressionIcons={showProgressionIcons}
42
- {...props}
43
- />
44
- ))}
45
- </ul>
46
- </section>
47
- );
48
-
49
- export default SidebarGroup;
@@ -1,15 +0,0 @@
1
- import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2
-
3
- import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
4
-
5
- type Story = StoryObj<typeof SidebarItem>;
6
- type Meta = MetaObj<typeof SidebarItem>;
7
-
8
- export const Default: Story = {
9
- args: {
10
- label: 'Example Item',
11
- link: '/example',
12
- },
13
- };
14
-
15
- export default { component: SidebarItem } as Meta;
@@ -1,43 +0,0 @@
1
- import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
2
- import classNames from 'classnames';
3
- import type { FC } from 'react';
4
-
5
- import BaseActiveLink from '#ui/Common/BaseActiveLink';
6
- import type { FormattedMessage, LinkLike } from '#ui/types';
7
-
8
- import styles from './index.module.css';
9
- import ProgressionIcon from '../ProgressionIcon';
10
-
11
- type SidebarItemProps = {
12
- label: FormattedMessage;
13
- link: string;
14
- as?: LinkLike;
15
- pathname?: string;
16
- showProgressionIcons?: boolean;
17
- };
18
-
19
- const SidebarItem: FC<SidebarItemProps> = ({
20
- label,
21
- link,
22
- showProgressionIcons = false,
23
- ...props
24
- }) => (
25
- <BaseActiveLink
26
- className={classNames({
27
- [styles.item]: true,
28
- [styles.progression]: showProgressionIcons,
29
- })}
30
- href={link}
31
- activeClassName={styles.active}
32
- {...props}
33
- >
34
- {showProgressionIcons && (
35
- <ProgressionIcon className={styles.progressionIcon} />
36
- )}
37
- <span className={styles.label}>{label}</span>
38
-
39
- {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
40
- </BaseActiveLink>
41
- );
42
-
43
- export default SidebarItem;
@@ -1,88 +0,0 @@
1
- import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2
-
3
- import Sidebar from '#ui/Containers/Sidebar';
4
-
5
- type Story = StoryObj<typeof Sidebar>;
6
- type Meta = MetaObj<typeof Sidebar>;
7
-
8
- const args = {
9
- groups: [
10
- {
11
- groupName: 'About Node.js',
12
- items: [
13
- {
14
- link: '/item1',
15
- label: 'About Node.js',
16
- },
17
- {
18
- link: '/item2',
19
- label: 'Project Governance',
20
- },
21
- {
22
- link: '/item3',
23
- label: 'Releases',
24
- },
25
- {
26
- link: '/item4',
27
- label: 'Branding',
28
- },
29
- {
30
- link: '/item5',
31
- label: 'Privacy Policy',
32
- },
33
- {
34
- link: '/item6',
35
- label: 'Security Reporting',
36
- },
37
- ],
38
- },
39
- {
40
- groupName: 'Get Involved',
41
- items: [
42
- {
43
- link: '/item7',
44
- label: 'Get Involved',
45
- },
46
- {
47
- link: '/item8',
48
- label: 'Collab Summit',
49
- },
50
- {
51
- link: '/item9',
52
- label: 'Contribute',
53
- },
54
- {
55
- link: '/item10',
56
- label: 'Code of Conduct',
57
- },
58
- ],
59
- },
60
- {
61
- groupName: 'Download',
62
- items: [
63
- {
64
- link: '/item11',
65
- label: 'Download',
66
- },
67
- {
68
- link: '/item12',
69
- label: 'Package Manager',
70
- },
71
- {
72
- link: '/item13',
73
- label: 'Node.js Releases',
74
- },
75
- ],
76
- },
77
- ],
78
- title: 'Sidebar',
79
- onSelect: console.log,
80
- pathname: '/item1',
81
- };
82
-
83
- export const Default: Story = { args };
84
- export const Progression: Story = {
85
- args: { ...args, showProgressionIcons: true },
86
- };
87
-
88
- export default { component: Sidebar } as Meta;
@@ -1,67 +0,0 @@
1
- import type { ComponentProps, FC, PropsWithChildren } from 'react';
2
-
3
- import Select from '#ui/Common/Select';
4
- import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
5
- import type { LinkLike } from '#ui/types';
6
-
7
- import styles from './index.module.css';
8
-
9
- type SidebarProps = {
10
- groups: Array<
11
- Pick<ComponentProps<typeof SidebarGroup>, 'items' | 'groupName'>
12
- >;
13
- pathname?: string;
14
- title: string;
15
- onSelect: (value: string) => void;
16
- as?: LinkLike;
17
- showProgressionIcons?: boolean;
18
- };
19
-
20
- const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
21
- groups,
22
- pathname,
23
- title,
24
- onSelect,
25
- as,
26
- showProgressionIcons = false,
27
- children,
28
- }) => {
29
- const selectItems = groups.map(({ items, groupName }) => ({
30
- label: groupName,
31
- items: items.map(({ label, link }) => ({ value: link, label })),
32
- }));
33
-
34
- const currentItem = selectItems
35
- .flatMap(item => item.items)
36
- .find(item => pathname === item.value);
37
-
38
- return (
39
- <aside className={styles.wrapper}>
40
- {children}
41
-
42
- {selectItems.length > 0 && (
43
- <Select
44
- label={title}
45
- values={selectItems}
46
- defaultValue={currentItem?.value}
47
- onChange={onSelect}
48
- className={styles.mobileSelect}
49
- />
50
- )}
51
-
52
- {groups.map(({ groupName, items }) => (
53
- <SidebarGroup
54
- key={groupName.toString()}
55
- groupName={groupName}
56
- items={items}
57
- pathname={pathname}
58
- as={as}
59
- showProgressionIcons={showProgressionIcons}
60
- className={styles.navigation}
61
- />
62
- ))}
63
- </aside>
64
- );
65
- };
66
-
67
- export default SideBar;
@@ -1,10 +0,0 @@
1
- import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2
-
3
- import HexagonGrid from '#ui/Icons/HexagonGrid';
4
-
5
- type Story = StoryObj<typeof HexagonGrid>;
6
- type Meta = MetaObj<typeof HexagonGrid>;
7
-
8
- export const Default: Story = {};
9
-
10
- export default { component: HexagonGrid } as Meta;