@1024pix/pix-ui 38.0.0 → 38.2.0

package/.circleci/config.yml

@@ -1,68 +1,58 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/browser-tools@1.4.1
+  browser-tools: circleci/browser-tools@1.4.3
 
 workflows:
   version: 2
   build-and-test:
     jobs:
-      - install:
-          filters:
-            branches:
-              ignore:
-                - gh-pages
       - lint-and-test:
+          matrix:
+            parameters:
+              node-version:
+                - "16.20.1"
+                - "18.17.0"
           filters:
             branches:
               ignore:
                 - gh-pages
-          requires:
-            - install
       - try-scenarios:
           matrix:
             parameters:
               try-scenario:
                 - embroider-safe
                 - embroider-optimized
+              node-version:
+                - "16.20.1"
+                - "18.17.0"
           filters:
             branches:
               ignore:
                 - gh-pages
-          requires:
-            - install
       - chromatic-deployment:
+          matrix:
+            parameters:
+              node-version:
+                - "16.20.1"
+                - "18.17.0"
           filters:
             branches:
               ignore:
                 - gh-pages
-          requires:
-            - install
 
 jobs:
-  install:
-    docker:
-      - image: cimg/node:16.20.0-browsers
-    resource_class: medium+
-    working_directory: ~/pix-ui
-    steps:
-      - checkout
-      - run: npm ci
-      - persist_to_workspace:
-          root: ~/pix-ui
-          paths:
-            - .
-
   lint-and-test:
+    parameters:
+      node-version:
+        type: string
     docker:
-      - image: cimg/node:16.20.0-browsers
+      - image: cimg/node:<< parameters.node-version >>-browsers
     resource_class: medium+
-    working_directory: ~/pix-ui
     steps:
-      - attach_workspace:
-          at: ~/pix-ui
       - browser-tools/install-chrome
-      - browser-tools/install-chromedriver
+      - checkout
+      - run: npm ci
       - run: npm run lint:js
       - run: npm run lint:hbs
       - run: npm run lint:scss
@@ -72,22 +62,24 @@ jobs:
     parameters:
       try-scenario:
         type: string
+      node-version:
+        type: string
     docker:
-      - image: cimg/node:16.20.0-browsers
+      - image: cimg/node:<< parameters.node-version >>-browsers
     resource_class: medium+
-    working_directory: ~/pix-ui
     steps:
-      - attach_workspace:
-          at: ~/pix-ui
       - browser-tools/install-chrome
-      - browser-tools/install-chromedriver
+      - checkout
+      - run: npm ci
       - run: npx ember try:one << parameters.try-scenario >>
 
   chromatic-deployment:
+    parameters:
+      node-version:
+        type: string
     docker:
-      - image: cimg/node:16.20.0-browsers
-    working_directory: ~/pix-ui
+      - image: cimg/node:<< parameters.node-version >>-browsers
     steps:
-      - attach_workspace:
-          at: ~/pix-ui
+      - checkout
+      - run: npm ci
       - run: npm run chromatic -- --auto-accept-changes

package/.nvmrc

@@ -1 +1 @@
-16
+18.17.0

package/.storybook/main.js

@@ -1,8 +1,10 @@
-module.exports = {
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
-  stories: ['../docs/**/*.stories.@(mdx)', '../app/**/*.stories.@(js|mdx)'],
+const config = {
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-mdx-gfm'],
+  stories: ['../docs/**/*.@(mdx|stories.@(mdx))', '../app/*/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
   staticDirs: ['../dist'],
-  core: {
-    builder: 'webpack5',
+  framework: {
+    name: '@1024pix/storybook-ember',
+    options: {}
   },
 };
+export default config;

package/.storybook/preview.js

@@ -1,36 +1,39 @@
-export const parameters = {
-  layout: 'centered',
-  a11y: {
-    element: '#root',
-  },
-  viewMode: 'docs',
-  docs: {
-    iframeHeight: 400,
-    transformSource: (src) => {
-      const match = /hbs`\s?([\s\S]*)`/g.exec(src);
-      return match ? match[1] : src;
+const preview = {
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      element: '#root',
     },
-  },
-  controls: { expanded: true },
-  previewTabs: {
-    'storybook/docs/panel': { index: -1 },
-  },
-  options: {
-    storySort: {
-      order: [
-        'Utiliser Pix UI',
-        ['Installation', 'Utiliser un composant'],
-        'Développement',
-        [
-          'Design System',
-          'Créer un composant',
-          'Bonnes pratiques',
-          'Breaking changes',
-          'Faire une release',
-          'Architecture',
-          'Storybook'
+    viewMode: 'docs',
+    docs: {
+      iframeHeight: 400,
+      transformSource: (src) => {
+        const match = /hbs`\s?([\s\S]*)`/g.exec(src);
+        return match ? match[1] : src;
+      },
+    },
+    controls: { expanded: true },
+    previewTabs: {
+      'storybook/docs/panel': { index: -1 },
+    },
+    options: {
+      storySort: {
+        order: [
+          'Utiliser Pix UI',
+          ['Installation', 'Utiliser un composant'],
+          'Développement',
+          [
+            'Design System',
+            'Créer un composant',
+            'Bonnes pratiques',
+            'Breaking changes',
+            'Faire une release',
+            'Architecture',
+            'Storybook'
+          ],
         ],
-      ],
+      },
     },
-  },
+  }
 };
+export default preview;

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Pix-UI Changelog
 
+## v38.2.0 (25/07/2023)
+
+
+### :building_construction: Tech
+- [#383](https://github.com/1024pix/pix-ui/pull/383) [TECH] Ajouter la compatibilité avec node18.
+
+## v38.1.0 (25/07/2023)
+
+
+### :rocket: Amélioration
+- [#445](https://github.com/1024pix/pix-ui/pull/445) [FEATURE] :sparkles: Upgrade storybook to v7.1.0.
+
+### :coffee: Autre
+- [#447](https://github.com/1024pix/pix-ui/pull/447) chore(deps-dev): bump word-wrap from 1.2.3 to 1.2.5.
+- [#446](https://github.com/1024pix/pix-ui/pull/446) [BUMP] Update browser-tools orb to v1.4.3 (.circleci).
+- [#418](https://github.com/1024pix/pix-ui/pull/418) [BUMP] Update dependency @ember/test-helpers to v3 (dossier racine).
+- [#433](https://github.com/1024pix/pix-ui/pull/433) chore(deps): bump tough-cookie from 4.0.0 to 4.1.3.
+- [#437](https://github.com/1024pix/pix-ui/pull/437) [BUMP] Update dependency @1024pix/ember-testing-library to ^0.7.0 (dossier racine).
+- [#434](https://github.com/1024pix/pix-ui/pull/434) chore(deps): bump semver from 5.7.1 to 5.7.2.
+
 ## v38.0.0 (12/07/2023)
 
 

package/app/stories/form.stories.js

@@ -1,6 +1,10 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Form',
+};
+
 export const form = (args) => {
   return {
     template: hbs`<form>

package/app/stories/{pix-background-header.stories.mdx → pix-background-header.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-background-header.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-background-header.stories';
 
-<Meta title="Layout/Background Header" component="PixBackgroundHeader" />
+<Meta of={ComponentStories} />
 
 # Pix Background Header
 
@@ -12,9 +12,9 @@ Les enfants de la bannière se mettrons en colonne.
 
 > Le `BackgroundHeader` se couple bien avec un ou plusieurs `PixBlock`.
 
-<Canvas>
-  <Story name="Background Header" story={stories.backgroundHeader} height={500} />
-</Canvas>
+
+<Story of={ComponentStories.backgroundHeader} height={500} />
+
 
 ## Usage
 

package/app/stories/pix-background-header.stories.js

@@ -1,5 +1,9 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Layout/Background Header',
+};
+
 export const backgroundHeader = (args) => {
   return {
     template: hbs`<PixBackgroundHeader>

package/app/stories/{pix-banner.stories.mdx → pix-banner.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-banner.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-banner.stories';
 
-<Meta title="Notification/Banner" component="PixBanner" argTypes={stories.argsTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Banner
 
@@ -13,60 +13,49 @@ Une `Banner` permet de mettre en avant une information importante.
 
 Bannière Information (par défaut).
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={75} />
-</Canvas>
+<Story of={ComponentStories.Default} height={75}/>
 
 ## Warning
 
 Bannière pour les alertes.
 
-<Canvas>
-  <Story name="Warning" story={stories.warning} height={75} />
-</Canvas>
+<Story of={ComponentStories.warning} height={75} />
 
 ## Error
 
 Bannière pour les erreurs.
 
-<Canvas>
-  <Story name="Error" story={stories.error} height={75} />
-</Canvas>
+<Story of={ComponentStories.error} height={75} />
 
 ## Communication
 
-<Canvas isColumn>
-  Bannière pour Pix App
-  <Story name="Communication Pix App" story={stories.communicationPixApp} height={75} />
-  Bannière pour Pix Orga
-  <Story name="Pix Orga" story={stories.communicationPixOrga} height={75} />
-  Bannière pour Pix Certif
-  <Story name="Pix Certif" story={stories.communicationPixCertif} height={75} />
-</Canvas>
+Bannière pour Pix App
+<Story of={ComponentStories.communicationPixApp} height={75} />
+Bannière pour Pix Orga
+<Story of={ComponentStories.communicationPixOrga} height={75} />
+Bannière pour Pix Certif
+<Story of={ComponentStories.communicationPixCertif} height={75} />
 
 ## With Internal Link
 
 Bannière contenant un lien interne.
 
-<Canvas>
-  <Story name="With internal link" story={stories.withInternalLink} height={100} />
-</Canvas>
+<Story of={ComponentStories.withInternalLink} height={100} />
+
 
 ## With External Link
 
 Bannière contenant un lien externe.
 
-<Canvas>
-  <Story name="With external link" story={stories.withExternalLink} height={100} />
-</Canvas>
+<Story of={ComponentStories.withExternalLink} height={100} />
+
 
 ## With Close Icon
 
 Bannière contenant un bouton qui permet de fermer la bannière.
 
-<Canvas>
-  <Story name="With close icon" story={stories.withCloseIcon} height={100} />
-</Canvas>
+<Story of={ComponentStories.withCloseIcon} height={100} />
+
 
 ## Usage
 
@@ -94,4 +83,4 @@ Bannière contenant un bouton qui permet de fermer la bannière.
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

package/app/stories/pix-banner.stories.js

@@ -1,5 +1,54 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Notification/Banner',
+  argTypes: {
+    actionLabel: {
+      name: 'actionLabel',
+      description: 'Nom de l‘action',
+      type: { name: 'string', required: false },
+    },
+    actionUrl: {
+      name: 'actionUrl',
+      description: 'Lien de l‘action',
+      type: { name: 'string', required: false },
+    },
+    type: {
+      name: 'type',
+      description: 'Définit le type de bannière',
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'information' } },
+      control: {
+        type: 'select',
+      },
+      options: [
+        'information',
+        'warning',
+        'error',
+        'communication',
+        'communication-orga',
+        'communication-certif',
+      ],
+    },
+    canCloseBanner: {
+      name: 'canCloseBanner',
+      description: 'Afficher la croix pour fermer la bannière',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    onCloseBannerTriggerAction: {
+      name: 'onCloseBannerTriggerAction',
+      description:
+        'Fonction à appeler lors de la fermeture de la bannière. Doit être utilisé avec le paramètre canCloseBanner',
+      type: { required: false },
+      control: { disable: true },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixBanner
@@ -61,49 +110,3 @@ withCloseIcon.args = {
   type: 'information',
   canCloseBanner: true,
 };
-
-export const argsTypes = {
-  actionLabel: {
-    name: 'actionLabel',
-    description: 'Nom de l‘action',
-    type: { name: 'string', required: false },
-  },
-  actionUrl: {
-    name: 'actionUrl',
-    description: 'Lien de l‘action',
-    type: { name: 'string', required: false },
-  },
-  type: {
-    name: 'type',
-    description: 'Définit le type de bannière',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'information' } },
-    control: {
-      type: 'select',
-    },
-    options: [
-      'information',
-      'warning',
-      'error',
-      'communication',
-      'communication-orga',
-      'communication-certif',
-    ],
-  },
-  canCloseBanner: {
-    name: 'canCloseBanner',
-    description: 'Afficher la croix pour fermer la bannière',
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  onCloseBannerTriggerAction: {
-    name: 'onCloseBannerTriggerAction',
-    description:
-      'Fonction à appeler lors de la fermeture de la bannière. Doit être utilisé avec le paramètre canCloseBanner',
-    type: { required: false },
-    control: { disable: true },
-  },
-};

package/app/stories/{pix-block.stories.mdx → pix-block.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-block.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-block.stories';
 
-<Meta title="Layout/Block" component="PixBlock" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Block
 
@@ -13,9 +13,7 @@ Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une
 
 > Il est souvent utilisé dans le PixBackgroundHeader.
 
-<Canvas>
-  <Story name="Block" story={stories.block} height={60} />
-</Canvas>
+  <Story of={ComponentStories.block} height={60} />
 
 ## Usage
 
@@ -31,4 +29,4 @@ Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une
 
 ## Arguments
 
-<ArgsTable story="Block" />
+<ArgTypes of={ComponentStories} />

package/app/stories/pix-block.stories.js

@@ -1,19 +1,22 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Layout/Block',
+  argTypes: {
+    shadow: {
+      name: 'shadow',
+      description: 'Ombre sur le bloc',
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'light' } },
+      control: { type: 'select' },
+      options: ['light', 'heavy'],
+    },
+  },
+};
+
 export const block = (args) => ({
   template: hbs`<PixBlock @shadow={{this.shadow}}>
   Lorem ipsum
 </PixBlock>`,
   context: args,
 });
-
-export const argTypes = {
-  shadow: {
-    name: 'shadow',
-    description: 'Ombre sur le bloc',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'light' } },
-    control: { type: 'select' },
-    options: ['light', 'heavy'],
-  },
-};

package/app/stories/{pix-button-link.stories.mdx → pix-button-link.mdx}

@@ -1,8 +1,8 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
 
-import * as stories from './pix-button-link.stories.js';
+import * as ComponentStories from './pix-button-link.stories';
 
-<Meta title="Basics/ButtonLink" component="PixButtonLink" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # ButtonLink
 
@@ -17,9 +17,7 @@ Affiche un bouton avec les propriétés de lien HTML définies.
 Prend en entrée la propriété `@href`.
 Redirige directement les attributs de la balise HTML `<a>` (eg. `target`...).
 
-<Canvas>
-  <Story name="Lien HTML" story={stories.htmlLink} height={60} />
-</Canvas>
+<Story of={ComponentStories.htmlLink} />
 
 ```html
 <PixButtonLink @href="https://pix.fr" target="_blank"> Libellé du lien </PixButtonLink>
@@ -34,14 +32,8 @@ Prend en entrée la propriété `@route` et `@model`.
 
 Un bouton de route EmberJS peut être désactivé via la propriété `@isDisabled`.
 
-<Canvas>
-  <Story name="Route EmberJS" story={stories.emberLink} height={60} />
-</Canvas>
-
-```html
-<PixButtonLink @route="ma.route.ember" @model="mon-model"> Libellé du lien </PixButtonLink>
-```
+<Story of={ComponentStories.emberLink} />
 
 ## Arguments
 
-<ArgsTable story="Lien HTML" />
+<ArgTypes of={ComponentStories} />