refactor(components, hooks): rewrite ToC and useHeadingsTree

* replace TableOfContents component with TocWidget to keep the name of
widget components coherent
* replace `wrapper` prop with `tree` prop (the component no longer uses
the hook, it is up to the consumer to provide the headings tree)
* let consumer handle the widget title
* add options to useHeadingsTree hook to retrieve only the wanted
headings (and do not assume that h1 is unwanted)
* expect an ref object instead of an element in useHeadingsTree hook
* rename most of the types involved

1 files changed, 46 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx b/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx
new file mode 100644
index 0000000..3563a94
--- /dev/null
+++ b/src/components/organisms/widgets/toc-widget/toc-widget.stories.tsx
@@ -0,0 +1,46 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Heading } from '../../../atoms';
+import { TocWidget } from './toc-widget';
+
+/**
+ * TocWidget - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Widgets/Table of Contents',
+  component: TocWidget,
+  argTypes: {
+    tree: {
+      description: 'The headings tree.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+} as ComponentMeta<typeof TocWidget>;
+
+const Template: ComponentStory<typeof TocWidget> = (args) => (
+  <TocWidget {...args} />
+);
+
+/**
+ * Widgets Stories - Table of Contents
+ */
+export const TableOfContents = Template.bind({});
+TableOfContents.args = {
+  heading: <Heading level={3}>Table of contents</Heading>,
+  tree: [
+    { children: [], depth: 2, id: 'title1', label: 'Title 1' },
+    {
+      children: [
+        { children: [], depth: 3, id: 'subtitle1', label: 'Subtitle 1' },
+        { children: [], depth: 3, id: 'subtitle2', label: 'Subtitle 2' },
+      ],
+      depth: 2,
+      id: 'title2',
+      label: 'Title 2',
+    },
+    { children: [], depth: 2, id: 'title3', label: 'Title 3' },
+  ],
+};