refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 85 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
new file mode 100644
index 0000000..a9c677b
--- /dev/null
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -0,0 +1,85 @@
+import Link from '@components/atoms/links/link';
+import List, {
+  type ListProps,
+  type ListItem,
+} from '@components/atoms/lists/list';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { slugify } from '@utils/helpers/strings';
+import { FC } from 'react';
+import styles from './links-list-widget.module.scss';
+
+export type LinksListItems = {
+  /**
+   * An array of name/url couple child of this list item.
+   */
+  child?: LinksListItems[];
+  /**
+   * The item name.
+   */
+  name: string;
+  /**
+   * The item url.
+   */
+  url: string;
+};
+
+export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
+  Pick<ListProps, 'className' | 'kind'> & {
+    /**
+     * An array of name/url couple.
+     */
+    items: LinksListItems[];
+  };
+
+/**
+ * LinksListWidget component
+ *
+ * Render a list of links inside a widget.
+ */
+const LinksListWidget: FC<LinksListWidgetProps> = ({
+  className = '',
+  items,
+  kind = 'unordered',
+  ...props
+}) => {
+  const listKindClass = `list--${kind}`;
+
+  /**
+   * Format the widget data to be used as List items.
+   *
+   * @param {LinksListItems[]} data - The widget data.
+   * @returns {ListItem[]} The list items data.
+   */
+  const getListItems = (data: LinksListItems[]): ListItem[] => {
+    return data.map((item) => {
+      return {
+        id: slugify(item.name),
+        child: item.child && getListItems(item.child),
+        value: (
+          <Link href={item.url} className={styles.list__link}>
+            {item.name}
+          </Link>
+        ),
+      };
+    });
+  };
+
+  return (
+    <Widget
+      expanded={true}
+      withBorders={true}
+      className={styles.widget}
+      withScroll={true}
+      {...props}
+    >
+      <List
+        items={getListItems(items)}
+        kind={kind}
+        className={`${styles.list} ${styles[listKindClass]} ${className}`}
+        itemsClassName={styles.list__item}
+      />
+    </Widget>
+  );
+};
+
+export default LinksListWidget;