@gouvfr/dsfr-roller 1.0.0

package/src/node/directive/doc/changelog-leaf-directive.js

@@ -0,0 +1,238 @@
+import { Node } from '../../node.js'
+import { convertHTMLEntities, gitmoji, log } from '@gouvfr/dsfr-forge'
+
+class ChangelogLeafDirective extends Node {
+  structure (data) {
+    if (!data.changelog) {
+      log.warn('ChangelogLeafDirective: missing "changelog"');
+      return data;
+    }
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-changelog'],
+      children: data.changelog.map(version => this.structureVersion(version, data.dateFormat))
+    });
+  }
+
+  structureVersion (version, dateFormat) {
+    const date = new Intl.DateTimeFormat(dateFormat, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(new Date(version.date));
+
+    return {
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-changelog__version', 'fr-mb-12v'],
+      children: [
+        {
+          type: 'heading',
+          depth: 4,
+          children: [
+            {
+              type: 'link',
+              url: version.url,
+              children: [
+                {
+                  type: 'text',
+                  value: version.id
+                }
+              ]
+            },
+            {
+              type: 'text',
+              value: ` - ${date}`
+            }
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-grid-row', 'fr-grid-row--gutters'],
+          children: version.commits.map(commit => this.structureCommit(commit))
+        }
+      ]
+    };
+  }
+
+  structureCommit (commit) {
+    const contentChildren = [
+      {
+        type: 'heading',
+        depth: 5,
+        data: { isSemantic: true },
+        classes: ['fr-tile__title'],
+        children: [
+          {
+            type: 'link',
+            url: commit.pull,
+            children: [
+              {
+                type: 'text',
+                value: convertHTMLEntities(commit.title)
+              }
+            ]
+          }
+        ]
+      }
+    ];
+
+    if (commit.description) {
+      commit.description.forEach(node => {
+        node.classes = (node.classes ?? []).concat(['fr-tile__desc']);
+      });
+      contentChildren.push(...commit.description);
+    }
+
+    if (commit.change) {
+      contentChildren.push({
+        type: 'paragraph',
+        classes: ['fr-tile__desc'],
+        children: [
+          {
+            type: 'text',
+            value: 'Breaking change:'
+          }
+        ]
+      });
+      commit.change.forEach(node => {
+        node.classes = (node.classes ?? []).concat(['fr-tile__desc']);
+      });
+      contentChildren.push(...commit.change);
+    }
+
+    let badgeClasses = ['fr-badge'];
+
+    switch (commit.type) {
+      case 'feat':
+        badgeClasses.push('fr-badge--success', 'fr-badge--no-icon');
+        break;
+      case 'fix':
+        badgeClasses.push('fr-badge--warning', 'fr-badge--no-icon');
+        break;
+      case 'refactor':
+        badgeClasses.push('fr-badge--info', 'fr-badge--no-icon');
+        break;
+      case 'docs':
+      case 'doc':
+        badgeClasses.push('fr-badge--info', 'fr-badge--no-icon');
+        break;
+    }
+
+    const badges = [
+      {
+        type: 'htmlContainer',
+        tagName: 'p',
+        classes: badgeClasses,
+        children: [
+          {
+            type: 'text',
+            value: (commit.gitmojis?.length ? `${commit.gitmojis.join('')} ` : '') + commit.type
+          }
+        ]
+      }
+    ]
+
+    if (commit.isBreaking) {
+      badges.push({
+        type: 'htmlContainer',
+        tagName: 'p',
+        classes: ['fr-badge', 'fr-badge--error', 'fr-badge--no-icon'],
+        children: [
+          {
+            type: 'text',
+            value: `${gitmoji(':boom:')} Breaking change`
+          }
+        ]
+      });
+    }
+
+    const badgesGroup = badges.length === 1 ? badges : [
+      {
+        type: 'htmlContainer',
+        tagName: 'div',
+        classes: ['fr-badges-group'],
+        children: badges
+      }
+    ]
+
+    contentChildren.push({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-tile__start'],
+      children: badgesGroup
+    });
+
+    switch (true) {
+      case !commit.scopes?.length:
+      case commit.scopes.length === 1 && commit.scopes[0] === '*':
+        break;
+
+      default:
+        contentChildren.push({
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-tile__start'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-tags-group'],
+              children: commit.scopes.map(scope => ({
+                type: 'htmlContainer',
+                tagName: 'p',
+                classes: ['fr-tag'],
+                children: [{ type: 'text', value: scope }]
+              }))
+            }
+          ]
+        });
+    }
+
+    contentChildren.push({
+      type: 'paragraph',
+      classes: ['fr-tile__detail'],
+      children: [
+        {
+          type: 'text',
+          value: `#${commit.id}`
+        }
+      ]
+    });
+
+    return {
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-col-12', 'fr-col-md-8'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-tile', 'fr-tile--sm', 'fr-enlarge-link', 'fr-tile--horizontal'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-tile__body'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['fr-tile__content'],
+                  children: contentChildren
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
+
+ChangelogLeafDirective.NAME = 'dsfr-doc-changelog';
+
+export { ChangelogLeafDirective };

package/src/node/directive/doc/figma-leaf-directive.js

@@ -0,0 +1,21 @@
+import { Node } from '../../node.js';
+
+class FigmaLeafDirective extends Node {
+  constructor (data) {
+    super(data, 'iframe');
+    if (!this.attributes.hasAttribute('width')) this.attributes.setAttribute('width', '100%');
+    if (!this.attributes.hasAttribute('height')) this.attributes.setAttribute('height', '100%');
+  }
+
+  async render() {
+    return `
+      <div class="dsfr-doc-figma-leaf">
+        ${await super.render()}
+      </div>
+    `;
+  }
+}
+
+FigmaLeafDirective.NAME = 'dsfr-doc-figma';
+
+export { FigmaLeafDirective };

package/src/node/directive/doc/guideline-container-directive.js

@@ -0,0 +1,71 @@
+import { Node } from '../../node.js'
+import { log } from '@gouvfr/dsfr-forge';
+
+class GuidelineContainerDirective extends Node {
+  structure (data) {
+    const image = Node.getImageChild(data);
+
+    if (!image) {
+      log.warn('GuidelineContainerDirective: missing image');
+      return data;
+    }
+
+    const valid = data.attributes.valid.toLowerCase() === 'true';
+    const col = data.attributes.col || '12';
+    const description = data.children.filter(child => {
+      switch (true) {
+        case child?.data?.directiveLabel === true:
+          return false;
+        case Node.getImageChild(child) !== null:
+          return false;
+        default:
+          return true;
+      }
+    });
+    const title = valid ? data.fragments.do : data.fragments.dont;
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-col-12', `fr-col-md-${col}`],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['dsfr-doc-guideline', `dsfr-doc-guideline--${valid ? 'do' : 'dont'}`],
+          children: [
+            {
+              type: 'image',
+              classes: ['dsfr-doc-guideline__img'],
+              attributes: {
+                src: image.url,
+                alt: title
+              }
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-guideline__content'],
+              children: [
+                {
+                  type: 'paragraph',
+                  classes: ['dsfr-doc-guideline__title'],
+                  children: [
+                    {
+                      type: 'text',
+                      value: title
+                    }
+                  ]
+                },
+              ].concat(description)
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+GuidelineContainerDirective.NAME = 'dsfr-doc-guideline';
+
+export { GuidelineContainerDirective };

package/src/node/directive/doc/guidelines-container-directive.js

@@ -0,0 +1,13 @@
+import { Node } from '../../node.js'
+
+class GuidelinesContainerDirective extends Node {
+  constructor (data) {
+    super(data, 'div');
+    this.attributes.addClass('fr-grid-row');
+    this.attributes.addClass('fr-grid-row--gutters');
+  }
+}
+
+GuidelinesContainerDirective.NAME = 'dsfr-doc-guidelines';
+
+export { GuidelinesContainerDirective };

package/src/node/directive/doc/image-text-directive.js

@@ -0,0 +1,13 @@
+import { Node } from '../../node.js'
+
+class ImageTextDirective extends Node {
+  constructor (data) {
+    super(data);
+    this._image = this.findDescendantsByType('image')[0];
+    if (this.attributes.hasAttribute('responsive') && this._image) this._image.attributes.addClass('fr-responsive-img');
+  }
+}
+
+ImageTextDirective.NAME = 'dsfr-doc-image';
+
+export { ImageTextDirective };

package/src/node/directive/doc/pin-leaf-directive.js

@@ -0,0 +1,46 @@
+import { Node } from '../../node.js';
+
+class PinLeafDirective extends Node {
+  structure (data) {
+    const required = data?.attributes?.required;
+    const add = data?.attributes?.add;
+    const titleChildren = data?.children[0];
+    const requiredFragment = data.fragments?.anatomy?.required;
+    const optionalFragment = data.fragments?.anatomy?.optional;
+    let descriptionValue = `${required === 'true' ? requiredFragment : optionalFragment}`;
+    if (add) descriptionValue += ` ${add}`;
+
+    if (!titleChildren) {
+      log.warn(`PinLeafDirective: missing label on pin`);
+    }
+
+    return {
+      type: 'htmlContainer',
+      tagName: 'li',
+      classes: ['dsfr-doc-anatomy__pin', required === 'true' ? 'dsfr-doc-anatomy__pin--required' : ''],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'span',
+          classes: ['dsfr-doc-anatomy__title'],
+          children: [titleChildren]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'span',
+          classes: ['dsfr-doc-anatomy__description'],
+          children: [
+            {
+              type: 'text',
+              value: descriptionValue
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
+
+PinLeafDirective.NAME = 'dsfr-doc-pin';
+
+export { PinLeafDirective };

package/src/node/directive/doc/storybook-leaf-directive.js

@@ -0,0 +1,18 @@
+import { Node } from '../../node.js';
+
+class StorybookLeafDirective extends Node {
+
+  // TODO:
+  //  - script externe pour le resize de l'iframe
+  //  - apossibilité de multiple storybook (baser sur id de la story ?)
+  //  - bug resize down
+  //  - bouton communication avec iframe pour changer le theme exemple
+  //  - changement theme iframe en fonction theme parent
+  async render() {
+    return `<div class="storybook-leaf"><iframe ${this.renderAttributes()}></iframe></div>`;
+  }
+}
+
+StorybookLeafDirective.NAME = 'dsfr-doc-storybook';
+
+export { StorybookLeafDirective };

package/src/node/directive/doc/tab-container-directive.js

@@ -0,0 +1,22 @@
+import { Node } from '../../node.js';
+
+class TabContainerDirective extends Node {
+  structure (data) {
+    const tabId = data?.attributes?.id;
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      attributes: {
+        id: `${tabId}-panel`,
+        role: 'tabpanel',
+        'aria-labelledby': tabId
+      },
+      classes: ['fr-tabs__panel'],
+      children: data.children
+    });
+  }
+}
+
+TabContainerDirective.NAME = 'fr-tab';
+
+export { TabContainerDirective };

package/src/node/directive/doc/tab-navigation-container-directive.js

@@ -0,0 +1,49 @@
+import { Node } from '../../node.js';
+import { HtmlNode } from '../../generic/html-node.js';
+
+class TabNavigationContainerDirective extends Node {
+    constructor(data) {
+        super(data);
+        this._id = data.attributes.id || 'dsfr-doc-tab-navigation--collapse';
+        const list = this.findDescendantsByType('list')[0];
+        list.attributes.setAttribute('role', 'tablist');
+        const items = list.findDescendantsByType('listItem');
+        for (const item of items) {
+            item.attributes.setAttribute('role', 'presentation');
+            let node;
+            let isSelected = false;
+            const link = item.findDescendantsByType('link')[0];
+            if (link) {
+                node = link;
+            } else {
+                this._currentNode = item._children[0];
+
+                node = new HtmlNode({ type: 'html', value: '<div>' });
+                const close = new HtmlNode({ type: 'html', value: '</div>' });
+                item._children = [node, ...item._children, close];
+                isSelected = true;
+            }
+            node.attributes.setAttribute('role', 'tab');
+            node.attributes.setAttribute('aria-selected', isSelected);
+            node.attributes.addClass('dsfr-doc-tab-navigation__tab');
+        }
+    }
+    async render() {
+        this.attributes.setAttribute('role', 'navigation');
+        this.attributes.addClass('dsfr-doc-tab-navigation');
+        return `<nav ${this.renderAttributes()}>
+        <div class="fr-sidemenu">
+            <div class="fr-sidemenu__inner">
+                <button aria-expanded="false" aria-controls="${this._id}" type="button" class="fr-sidemenu__btn">${await this._currentNode.render()}</button>
+                <div class="fr-collapse" id="${this._id}">
+                    ${await super.render()}
+                </div>
+            </div>
+        </div>
+    </nav>`;
+    }
+}
+
+TabNavigationContainerDirective.NAME = 'dsfr-doc-tab-navigation';
+
+export { TabNavigationContainerDirective };

package/src/node/directive/doc/table-container-directive.js

@@ -0,0 +1,56 @@
+import { Node } from '../../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+const VALIGN = new Map([
+  ['top', 'fr-cell--top'],
+  ['bottom', 'fr-cell--bottom']
+]);
+
+class TableContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+    this.applyAttributes(data.attributes);
+  }
+
+  structure (data) {
+    const directiveLabel = data.children?.[0];
+    if (!directiveLabel.data?.directiveLabel) {
+      log.warn('TableContainerDirective: missing caption');
+      return data;
+    }
+    data.children.shift();
+    const table = data.children?.find(child => child.type === 'table');
+    if (table ) {
+      table.caption = directiveLabel.children?.[0]?.value;
+    }
+    return data;
+  }
+
+  applyAttributes (attributes) {
+    const table = this.findDescendantsByType('table')[0];
+    if (!table) return;
+
+    if (attributes.scroll === 'false') table.attributes.addClass('fr-table--no-scroll');
+    if (attributes.caption === 'false') table.attributes.addClass('fr-table--no-caption');
+
+    const cellCount = table.children[0].children.length;
+
+    const valign = attributes.valign ? attributes.valign.split(',') : null;
+    if (valign?.length === 1 && VALIGN.has(valign[0])) {
+      valign.length = cellCount;
+      valign.fill(valign[0]);
+    }
+
+    table.children.forEach((row, index) => {
+      row.children.forEach((cell, cellIndex) => {
+        if (valign && valign[cellIndex] && VALIGN.has(valign[cellIndex])) {
+          cell.attributes.addClass(VALIGN.get(valign[cellIndex]));
+        }
+      });
+    });
+  }
+}
+
+TableContainerDirective.NAME = 'dsfr-doc-table';
+
+export { TableContainerDirective };

package/src/node/directive/doc/tabs-container-directive.js

@@ -0,0 +1,71 @@
+import { Node } from '../../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+import { TabContainerDirective } from './tab-container-directive.js';
+
+class TabsContainerDirective extends Node {
+  structure (data) {
+    const label = data.children.filter(child => child?.data?.directiveLabel)?.[0]?.children?.[0]?.value;
+    const contentChildren = data.children.filter(child => !child?.data?.directiveLabel);
+    const tabs = contentChildren
+      .filter(child => child.type === 'containerDirective' && child.name === TabContainerDirective.NAME)
+      .map(this.structureTab);
+
+    const listAttributes = {
+      role: 'tablist'
+    };
+    if (label) {
+      listAttributes['aria-label'] = label;
+    }
+    else log.warn('TabsContainerDirective: missing label on fr-tabs');
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-tabs'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'ul',
+          classes: ['fr-tabs__list'],
+          attributes: listAttributes,
+          children: tabs
+        },
+        ...contentChildren
+      ]
+    });
+  }
+
+  structureTab (data, index) {
+    const tabId = data?.attributes?.id;
+    const tabTitleChildren = data.children.filter(child => child?.data?.directiveLabel)?.[0]?.children;
+
+    if (!tabTitleChildren) {
+      log.warn(`TabsContainerDirective: missing label on fr-tab ${index + 1}`);
+    }
+
+    return {
+      type: 'htmlContainer',
+      tagName: 'li',
+      attributes: {
+        role: 'presentation'
+      },
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'button',
+          classes: ['fr-tabs__tab'],
+          attributes: {
+            role: 'tab',
+            'aria-controls': `${tabId}-panel`,
+            'aria-selected': index === 0
+          },
+          children: tabTitleChildren
+        }
+      ]
+    };
+  }
+}
+
+TabsContainerDirective.NAME = 'fr-tabs';
+
+export { TabsContainerDirective };

package/src/node/generic/blockquote-node.js

@@ -0,0 +1,26 @@
+import { Node } from '../node.js';
+
+const LEVELS = new Map([
+    ['note', { icon: 'information-line', color: 'blue-cumulus' }],
+    ['tip', { icon: 'lightbulb-line', color: 'green-emeraude' }],
+    ['important', { icon: 'feedback-line', color: 'purple-glycine' }],
+    ['warning', { icon: 'alert-line', color: 'yellow-moutarde' }],
+    ['caution', { icon: 'spam-2-line', color: 'pink-tuile' }]
+  ]);
+
+class BlockquoteNode extends Node {
+  constructor (data) {
+    if (data?.children?.[0]?.type === 'heading') data.children[0].attributes = { class: 'fr-callout__title' };
+    super(data, 'div');
+    this.attributes.addClass('fr-callout fr-mb-6v');
+
+    if (data?.level && LEVELS.has(data.level)) {
+      const level = LEVELS.get(data.level);
+      this.attributes.addClasses(`fr-icon-${level.icon}`, `fr-callout--${level.color}`);
+    }
+  }
+}
+
+BlockquoteNode.TYPE = 'blockquote';
+
+export { BlockquoteNode };

package/src/node/generic/break-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class BreakNode extends Node {
+  async render() {
+    return '<br>';
+  }
+}
+
+BreakNode.TYPE = 'break';
+
+export { BreakNode };