Autogenerate sidebar names using getTitle function

applications/storybook/.storybook/main.js

@@ -73,6 +73,11 @@ module.exports = {
                     chunkFilename: isProduction ? '[id].[contenthash:8].css' : '[id].css',
                 }),
             ],
+            node: {
+                ...config.node,
+                __dirname: true,
+                __filename: true,
+            },
         };
     },
 };

applications/storybook/src/helpers/title.ts

@@ -0,0 +1,23 @@
+import _startcase from 'lodash.startcase';
+
+const caseString = (str: string, caseFilename: boolean = true) => {
+    // avoid _startcase stripping the '/'
+    return str
+        .split('/')
+        .map((item, index, arr) => {
+            if (!caseFilename && index === arr.length - 1) {
+                return item;
+            }
+
+            return _startcase(item);
+        })
+        .join('/');
+};
+
+export const getTitle = (filename: string, caseFilename?: boolean) => {
+    const directoryPrefix = 'src/stories/';
+    const storySuffix = /.stories.(tsx|mdx)/;
+    const strippedFileName = filename.replace(directoryPrefix, '').replace(storySuffix, '');
+
+    return caseString(strippedFileName, caseFilename);
+};

applications/storybook/src/stories/Changelog.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Description } from '@storybook/addon-docs/blocks';
-
+import { getTitle } from '../helpers/title';
 import changelog from '../../CHANGELOG.md';
 
-<Meta title="Changelog" />
+<Meta title={getTitle(__filename)} />
 
 <Description>{changelog}</Description>

applications/storybook/src/stories/Introduction.stories.mdx

@@ -1,16 +1,16 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import { getTitle } from '../helpers/title';
 
-<Meta title="Introduction" />
+<Meta title={getTitle(__filename)} />
 
 # Proton Storybook
 
-
 Welcome to ProtonMail Design System. The goals of these pages are:
 
-- Having a more consistent experience for users
-- Having a consistent reference for all the teams
-- Improving/simplifying work discussions between design and devs, and between all front-end team (same language, same conventions, same objectives)
-- Improving/simplifying Front-End maintenability/scalability
-- Avoid reinventing the wheel for Front-End
-- Documentaaaation! Because it is important. ©
-- Facilitating the onboarding of newcomers in the team.
+-   Having a more consistent experience for users
+-   Having a consistent reference for all the teams
+-   Improving/simplifying work discussions between design and devs, and between all front-end team (same language, same conventions, same objectives)
+-   Improving/simplifying Front-End maintenability/scalability
+-   Avoid reinventing the wheel for Front-End
+-   Documentaaaation! Because it is important. ©
+-   Facilitating the onboarding of newcomers in the team.

applications/storybook/src/stories/components/Alert.stories.tsx

@@ -1,9 +1,11 @@
 import { Alert } from '@proton/components';
+import { getTitle } from '../../helpers/title';
+
 import mdx from './Alert.mdx';
 
 export default {
     component: Alert,
-    title: 'Components / Alert',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Autocomplete.stories.tsx

@@ -10,10 +10,12 @@ import {
     Marks,
     Icon,
 } from '@proton/components';
+import { getTitle } from '../../helpers/title';
+
 import mdx from './Autocomplete.mdx';
 
 export default {
-    title: 'Components / Autocomplete',
+    title: getTitle(__filename, false),
     component: Autocomplete,
     parameters: {
         docs: {

applications/storybook/src/stories/components/Badge.stories.tsx

@@ -1,10 +1,11 @@
 import { Badge } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Badge.mdx';
 
 export default {
     component: Badge,
-    title: 'Components / Badge',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Button.stories.tsx

@@ -11,12 +11,13 @@ import {
     ButtonLike,
     Checkbox,
 } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Button.mdx';
 
 export default {
     component: Button,
-    title: 'Components / Button',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/ButtonGroup.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Story, ArgsTable, Primary, PRIMARY_STORY } from "@storybook/addon-docs/blocks";
 
-# Button group
+# ButtonGroup
 
-The button group is a simply a group of ButtonLike components.
+The button group is simply a group of ButtonLike components.
 
 <Canvas>
     <Story id="components-button-group--sandbox" />

applications/storybook/src/stories/components/ButtonGroup.stories.tsx

@@ -10,12 +10,13 @@ import {
     RadioGroup,
     ButtonGroup,
 } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './ButtonGroup.mdx';
 
 export default {
     component: ButtonGroup,
-    title: 'Components / Button Group',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Card.stories.tsx

@@ -1,10 +1,11 @@
 import { Button, Card } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Card.mdx';
 
 export default {
     component: Card,
-    title: 'Components / Card',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Copy.stories.tsx

@@ -1,10 +1,11 @@
 import { Copy } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Copy.mdx';
 
 export default {
     component: Copy,
-    title: 'Components / Copy',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Countdown.stories.tsx

@@ -1,10 +1,11 @@
 import { Countdown } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Countdown.mdx';
 
 export default {
     component: Countdown,
-    title: 'Components / Countdown',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/DateInput.stories.tsx

@@ -1,11 +1,13 @@
 import { useMemo, useState } from 'react';
 import { DateInput } from '@proton/components';
 import { addDays } from '@proton/shared/lib/date-fns-utc';
+import { getTitle } from '../../helpers/title';
+
 import mdx from './DateInput.mdx';
 
 export default {
     component: DateInput,
-    title: 'Components / DateInput',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Dropzone.stories.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import { Dropzone, Button } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Dropzone.mdx';
 
 export default {
     component: Dropzone,
-    title: 'Components / Dropzone',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/InputButton.stories.tsx

@@ -2,12 +2,13 @@ import { useState } from 'react';
 import * as React from 'react';
 import { InputButton } from '@proton/components';
 import { remove } from '@proton/shared/lib/helpers/array';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './InputButton.mdx';
 
 export default {
     component: InputButton,
-    title: 'Components / InputButton',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/InputField.stories.tsx → applications/storybook/src/stories/components/InputFieldTwo.stories.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import { Icon, InputFieldTwo, PasswordInputTwo } from '@proton/components';
-import mdx from './InputField.mdx';
+import { getTitle } from '../../helpers/title';
+
+import mdx from './InputFieldTwo.mdx';
 
 export default {
     component: InputFieldTwo,
-    title: 'Components / InputFieldTwo',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Input.stories.tsx → applications/storybook/src/stories/components/InputTwo.stories.tsx

@@ -2,11 +2,13 @@ import { useState } from 'react';
 import * as React from 'react';
 import { InputTwo } from '@proton/components';
 import ccIcon from '@proton/styles/assets/img/credit-card-icons/cc-master.svg';
-import mdx from './Input.mdx';
+import { getTitle } from '../../helpers/title';
+
+import mdx from './InputTwo.mdx';
 
 export default {
     component: InputTwo,
-    title: 'Components / InputTwo',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/LabelStack.stories.tsx

@@ -1,10 +1,11 @@
 import { LabelStack } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './LabelStack.mdx';
 
 export default {
     component: LabelStack,
-    title: 'Components / LabelStack',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Meter.stories.tsx

@@ -1,10 +1,11 @@
 import { Meter } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Meter.mdx';
 
 export default {
     component: Meter,
-    title: 'Components / Meter',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/MiddleEllipsis.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Story, ArgsTable } from "@storybook/addon-docs/blocks";
 import { MiddleEllipsis } from "@proton/components";
 
-# Middle Ellipsis
+# MiddleEllipsis
 
 When you don't have enough space to display something, but you want to display the end of this content. For sure, if you have enough room, ellipsis won't appear. :) 
 

applications/storybook/src/stories/components/MiddleEllipsis.stories.tsx

@@ -1,10 +1,11 @@
 import { MiddleEllipsis } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './MiddleEllipsis.mdx';
 
 export default {
     component: MiddleEllipsis,
-    title: 'Components / Middle Ellipsis',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Notification.stories.tsx

@@ -1,10 +1,11 @@
 import { Button, CreateNotificationOptions, useNotifications } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Notification.mdx';
 
 export default {
     component: Notification,
-    title: 'Components / Notification',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Price.stories.tsx

@@ -1,10 +1,11 @@
 import { Price } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Price.mdx';
 
 export default {
     component: Price,
-    title: 'Components / Price',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Progress.stories.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
 import { Progress } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Progress.mdx';
 
 export default {
     component: Progress,
-    title: 'Components / Progress',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Scale.stories.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import { Scale } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
 import mdx from './Scale.mdx';
 
 export default {
     component: Scale,
-    title: 'Components / Scale',
+    title: getTitle(__filename, false),
     parameters: {
         docs: {
             page: mdx,

applications/storybook/src/stories/components/Select.stories.tsx

@@ -1,9 +1,11 @@
 import { useRef, useState } from 'react';
 import { SelectTwo, Option, Icon } from '@proton/components';
+import { getTitle } from '../../helpers/title';
+
 import mdx from './Select.mdx';
 
 export default {
-    title: 'Components / Select',
+    title: getTitle(__filename, false),
     component: SelectTwo,
     parameters: {
         docs: {

applications/storybook/src/stories/components/Tabs.stories.tsx

@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import { Tabs } from '@proton/components';
+import { getTitle } from '../../helpers/title';
 
-import mdx from './Tabs.mdx';
 import bulbasaur from '../../assets/bulbasaur.png';
 import charmander from '../../assets/charmander.png';
 import squirtle from '../../assets/squirtle.png';
 
+import mdx from './Tabs.mdx';
+
 export default {
-    title: 'Components / Tabs',
+    title: getTitle(__filename, false),
     component: Tabs,
     parameters: {
         docs: {