[FEATURE] Organiser les composants comme dans Figma (PIX-14598)

#762
1024pix · Nov 18, 2024 · 2a4e929 · 2a4e929
2 parents eee12f9 + 499d3c6
commit 2a4e929
Show file tree

Hide file tree

Showing 65 changed files with 144 additions and 121 deletions.
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -3,4 +3,7 @@ import storybookCustomTheme from './storybook-custom-theme';
 
 addons.setConfig({
   theme: storybookCustomTheme,
+  sidebar: {
+    showRoots: true,
+  },
 });
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -25,23 +25,35 @@ const preview = {
     options: {
       storySort: {
         order: [
-          'Utiliser Pix UI',
-          ['Installation', 'Utiliser un composant'],
-          'Développement',
+          'CHANGELOG',
+          'Pix UI',
           [
-            'Design System',
-            'Créer un composant',
-            'Bonnes pratiques',
-            'Breaking changes',
-            'Faire une release',
-            'Architecture',
-            'Storybook',
+            'Installation',
+            'Utiliser un composant',
+            'Développement',
+            [
+              'Design System',
+              'Créer un composant',
+              'Bonnes pratiques',
+              'Breaking changes',
+              'Faire une release',
+              'Architecture',
+              'Storybook',
+            ],
           ],
+          'Design Tokens',
+          'Actions',
+          'Forms',
+          'Navigation',
+          'Feedback',
+          'Data display',
+          'Overlay',
+          'Other',
         ],
       },
     },
   },
 
-  tags: ['autodocs']
+  tags: ['autodocs'],
 };
 export default preview;
diff --git a/app/components/pix-checkbox.js b/app/components/pix-checkbox.js
@@ -1 +1,4 @@
+// WORKAROUND: necessary for storybook to resolve the import
+import '@formatjs/intl';
+
 export { default } from '@1024pix/pix-ui/components/pix-checkbox';
diff --git a/app/components/pix-radio-button.js b/app/components/pix-radio-button.js
@@ -1 +1,4 @@
+// WORKAROUND: necessary for storybook to resolve the import
+import '@formatjs/intl';
+
 export { default } from '@1024pix/pix-ui/components/pix-radio-button';
diff --git a/app/stories/form.mdx → app/stories/form-example.mdx b/app/stories/form.mdx → app/stories/form-example.mdx
@@ -1,11 +1,10 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import * as stories from './form.stories';
+import * as ComponentStories from './form-example.stories';
 
-<Meta of={stories} />
+<Meta of={ComponentStories} />
 
 # Formulaire avec les composants Pix UI
 
 Un formulaire complet avec les composants Pix UI :
 
-<Story of={stories.form} height={700} />
-
+<Story of={ComponentStories.form} height={700} />
diff --git a/app/stories/form.stories.js → app/stories/form-example.stories.js b/app/stories/form.stories.js → app/stories/form-example.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Form/Exemple de formulaire',
+  title: 'Forms/Exemple de formulaire',
 };
 
 export const form = (args) => {

diff --git a/app/stories/pix-background-header.stories.js b/app/stories/pix-background-header.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Layout/Background Header',
+  title: 'Other/Background Header',
 };
 
 export const backgroundHeader = (args) => {

diff --git a/app/stories/pix-banner.stories.js b/app/stories/pix-banner.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Notification/Banner',
+  title: 'Feedback/Banner',
   argTypes: {
     actionLabel: {
       name: 'actionLabel',

diff --git a/app/stories/pix-block.stories.js b/app/stories/pix-block.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Layout/Block',
+  title: 'Other/Contenu',
   argTypes: {
     shadow: {
       name: 'shadow',

diff --git a/app/stories/pix-button-link.stories.js b/app/stories/pix-button-link.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Basics/ButtonLink',
+  title: 'Actions/ButtonLink',
 
   argTypes: {
     href: {

diff --git a/app/stories/pix-button-upload.stories.js b/app/stories/pix-button-upload.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Basics/ButtonUpload',
+  title: 'Actions/ButtonUpload',
   argTypes: {
     id: {
       name: 'id',

diff --git a/app/stories/pix-button.stories.js b/app/stories/pix-button.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { ICONS } from '../../addon/helpers/icons';
 
 export default {
-  title: 'Basics/Button',
+  title: 'Actions/Button',
   argTypes: {
     type: {
       name: 'type',

diff --git a/app/stories/pix-checkbox-variant-tile.stories.js b/app/stories/pix-checkbox-variant-tile.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import pixCheckboxStories from './pix-checkbox.stories.js';
 
 export default {
-  title: 'Form/Inputs/Checkbox/Variant Tile',
+  title: 'Forms/Checkbox/Variant Tile',
   argTypes: {
     variant: {
       name: 'variant',

diff --git a/app/stories/pix-checkbox.stories.js b/app/stories/pix-checkbox.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Inputs/Checkbox',
+  title: 'Forms/Checkbox',
   argTypes: {
     id: {
       name: 'id',

diff --git a/app/stories/pix-collapsible.stories.js b/app/stories/pix-collapsible.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { ICONS } from '../../addon/helpers/icons';
 
 export default {
-  title: 'Others/Collapsible',
+  title: 'Data display/Collapsible',
   argTypes: {
     iconName: {
       name: 'iconName',

diff --git a/app/stories/pix-filter-banner.stories.js b/app/stories/pix-filter-banner.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Form/Filter banner',
+  title: 'Other/Filter banner',
   argTypes: {
     title: {
       name: 'title',

diff --git a/app/stories/pix-filterable-and-searchable-select.stories.js b/app/stories/pix-filterable-and-searchable-select.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Form/Filterable and searchable select',
+  title: 'Other/Filterable and searchable select',
   argTypes: {
     label: {
       name: 'label',

diff --git a/app/stories/pix-icon-button.stories.js b/app/stories/pix-icon-button.stories.js
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { ICONS } from '../../addon/helpers/icons';
 
 export default {
-  title: 'Basics/Icon button',
+  title: 'Actions/Icon button',
   argTypes: {
     ariaLabel: {
       name: 'ariaLabel',

diff --git a/app/stories/pix-icon.stories.js b/app/stories/pix-icon.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { ICONS } from '../../addon/helpers/icons.js';
 
 export default {
-  title: 'Others/Icon',
+  title: 'Design Tokens/Icon',
   argTypes: {
     name: {
       name: 'name',

diff --git a/app/stories/pix-indicator-card.stories.js b/app/stories/pix-indicator-card.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { ICONS } from '../../addon/helpers/icons.js';
 
 export default {
-  title: 'Others/Indicator Card',
+  title: 'Other/Indicator Card',
   argTypes: {
     title: {
       name: 'Title',

diff --git a/app/stories/pix-input-code.stories.js b/app/stories/pix-input-code.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Inputs/Code',
+  title: 'Forms/Code',
   argTypes: {
     ariaLabel: {
       name: 'ariaLabel',

diff --git a/app/stories/pix-input-password.stories.js b/app/stories/pix-input-password.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Inputs/Password',
+  title: 'Forms/Password',
   argTypes: {
     id: {
       name: 'id',

diff --git a/app/stories/pix-input.stories.js b/app/stories/pix-input.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Inputs/Input',
+  title: 'Forms/Input',
   argTypes: {
     id: {
       name: 'id',

diff --git a/app/stories/pix-label.stories.js b/app/stories/pix-label.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Label',
+  title: 'Forms/Label',
   argTypes: {
     for: {
       name: 'for',

diff --git a/app/stories/pix-message.stories.js b/app/stories/pix-message.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Notification/Message',
+  title: 'Feedback/Message',
   render: (args) => ({
     template: hbs`<PixMessage @type={{this.type}} @withIcon={{this.withIcon}}>
   Ceci est un message

diff --git a/app/stories/pix-modal.stories.js b/app/stories/pix-modal.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Basics/Modal',
+  title: 'Overlay/Modal',
   render: (args) => ({
     template: hbs`<PixModal
   @showModal={{this.showModal}}

diff --git a/app/stories/pix-multi-select.stories.js b/app/stories/pix-multi-select.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Form/Multi Select',
+  title: 'Forms/Multi Select',
   render: (args) => ({
     template: hbs`{{! template-lint-disable no-forbidden-elements }}
 <style>

diff --git a/app/stories/pix-navigation.stories.js b/app/stories/pix-navigation.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Layout/Navigation',
+  title: 'Navigation/Navigation',
   argTypes: {
     variant: {
       description: 'Variante de la navigation',

diff --git a/app/stories/pix-pagination.stories.js b/app/stories/pix-pagination.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Basics/Pagination',
+  title: 'Navigation/Pagination',
   render: (args) => ({
     template: hbs`<PixPagination
   @pagination={{this.pagination}}

diff --git a/app/stories/pix-progress-gauge.stories.js b/app/stories/pix-progress-gauge.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Others/Progress Gauge',
+  title: 'Data display/Progress Gauge',
   argTypes: {
     value: {
       name: 'value',

diff --git a/app/stories/pix-radio-button-variant-tile.stories.js b/app/stories/pix-radio-button-variant-tile.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import pixRadioButtonStories from './pix-radio-button.stories.js';
 
 export default {
-  title: 'Form/Inputs/Radio Button/Variant Tile',
+  title: 'Forms/Radio Button/Variant Tile',
   argTypes: {
     variant: {
       name: 'variant',

diff --git a/app/stories/pix-radio-button.stories.js b/app/stories/pix-radio-button.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Inputs/Radio Button',
+  title: 'Forms/Radio Button',
   argTypes: {
     id: {
       name: 'id',

diff --git a/app/stories/pix-return-to.stories.js b/app/stories/pix-return-to.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Basics/Return To',
+  title: 'Other/Return To',
   render: (args) => ({
     template: hbs`<PixReturnTo
   @route='profile'

diff --git a/app/stories/pix-search-input.stories.js b/app/stories/pix-search-input.stories.js
@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Others/SearchInput',
+  title: 'Forms/SearchInput',
   argTypes: {
     id: {
       name: 'id',

diff --git a/app/stories/pix-select.stories.js b/app/stories/pix-select.stories.js
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { ICONS } from '../../addon/helpers/icons';
 
 export default {
-  title: 'Form/Select',
+  title: 'Forms/Select',
   argTypes: {
     options: {
       name: 'options',

diff --git a/app/stories/pix-selectable-tag.stories.js b/app/stories/pix-selectable-tag.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'basics/Tag/Selectable Tag',
+  title: 'Data display/Tag/Selectable Tag',
   argTypes: {
     label: {
       name: 'label',

diff --git a/app/stories/pix-sidebar.stories.js b/app/stories/pix-sidebar.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Basics/Sidebar',
+  title: 'Navigation/Sidebar',
   argTypes: {
     showSidebar: {
       name: 'showSidebar',

diff --git a/app/stories/pix-stars.stories.js b/app/stories/pix-stars.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Others/PixStars',
+  title: 'Data display/PixStars',
   argTypes: {
     count: {
       name: 'count',

diff --git a/app/stories/pix-tag.stories.js b/app/stories/pix-tag.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Basics/Tag',
+  title: 'Data display/Tag',
   render: (args) => ({
     template: hbs`<PixTag @color={{this.color}}>
   Contenu du tag

diff --git a/app/stories/pix-textarea.stories.js b/app/stories/pix-textarea.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Textarea',
+  title: 'Forms/Textarea',
   argTypes: {
     id: {
       name: 'id',