chore: add a TableOfContents component

3 files changed, 106 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
new file mode 100644
index 0000000..fba7c54
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import ToCWidget from './table-of-contents';
+
+/**
+ * TableOfContents - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Widgets',
+  component: ToCWidget,
+  argTypes: {
+    wrapper: {
+      control: {
+        type: null,
+      },
+      description:
+        'A reference to the HTML element that contains the headings.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof ToCWidget>;
+
+const Template: ComponentStory<typeof ToCWidget> = (args) => (
+  <ToCWidget {...args} />
+);
+
+/**
+ * Widgets Stories - Table of Contents
+ */
+export const TableOfContents = Template.bind({});
+TableOfContents.args = {};
diff --git a/src/components/organisms/widgets/table-of-contents.test.tsx b/src/components/organisms/widgets/table-of-contents.test.tsx
new file mode 100644
index 0000000..2064f39
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@test-utils';
+import TableOfContents from './table-of-contents';
+
+describe('TableOfContents', () => {
+  it('renders the ToC title', () => {
+    const divEl = document.createElement('div');
+    render(<TableOfContents wrapper={divEl} />);
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Table of Contents/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
new file mode 100644
index 0000000..3778e02
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -0,0 +1,53 @@
+import useHeadingsTree, { type Heading } from '@utils/hooks/use-headings-tree';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import LinksListWidget, { type LinksListItems } from './links-list-widget';
+
+type TableOfContentsProps = {
+  /**
+   * A reference to the HTML element that contains the headings.
+   */
+  wrapper: HTMLElement;
+};
+
+/**
+ * Table of Contents widget component
+ *
+ * Render a table of contents.
+ */
+const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
+  const intl = useIntl();
+  const headingsTree = useHeadingsTree(wrapper);
+  const title = intl.formatMessage({
+    defaultMessage: 'Table of Contents',
+    description: 'TableOfContents: the widget title',
+    id: 'WKG9wj',
+  });
+
+  /**
+   * Convert an headings tree to list items.
+   *
+   * @param {Heading[]} tree - The headings tree.
+   * @returns {LinksListItems[]} The list items.
+   */
+  const getItems = (tree: Heading[]): LinksListItems[] => {
+    return tree.map((heading) => {
+      return {
+        name: heading.title,
+        url: `#${heading.id}`,
+        child: getItems(heading.children),
+      };
+    });
+  };
+
+  return (
+    <LinksListWidget
+      kind="ordered"
+      title={title}
+      level={2}
+      items={getItems(headingsTree)}
+    />
+  );
+};
+
+export default TableOfContents;