refactor(script): update component generation script with latest doc changes

Author: dpellier

scripts/component-generator/templates/component/src/components/ods-{{>component-name}}/ods-{{>component-name}}.tsx.hbs

@@ -1,5 +1,4 @@
-import type { FunctionalComponent } from '@stencil/core';
-import { Component, Host, Prop, h } from '@stencil/core';
+import { Component, type FunctionalComponent, Host, Prop, h } from '@stencil/core';
 
 @Component({
   shadow: true,
@@ -12,7 +11,7 @@ export class Ods{{> ComponentName }} {
   render(): FunctionalComponent {
     return (
       <Host
-        class='ods-{{> component-name }}'
+        class="ods-{{> component-name }}"
         role="article">
         <p>
           ODS Template Component: { this.dummy }

scripts/component-generator/templates/component/tests/accessibility/ods-{{>component-name}}.e2e.ts.hbs

@@ -1,5 +1,4 @@
-import type { E2EElement, E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
+import { type E2EElement, type E2EPage, newE2EPage } from '@stencil/core/testing';
 
 describe('ods-{{> component-name }} accessibility', () => {
   let el: E2EElement;
@@ -9,7 +8,7 @@ describe('ods-{{> component-name }} accessibility', () => {
     page = await newE2EPage();
 
     await page.setContent(content);
-    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+    await page.evaluate(() => document.body.style.setProperty('margin', '0'));
 
     el = await page.find('ods-{{> component-name }}');
   }

scripts/component-generator/templates/component/tests/rendering/ods-{{>component-name}}.e2e.ts.hbs

@@ -1,5 +1,4 @@
-import type { E2EElement, E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
+import { type E2EElement, type E2EPage, newE2EPage } from '@stencil/core/testing';
 
 describe('ods-{{> component-name }} rendering', () => {
   let el: E2EElement;
@@ -9,7 +8,7 @@ describe('ods-{{> component-name }} rendering', () => {
     page = await newE2EPage();
 
     await page.setContent(content);
-    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+    await page.evaluate(() => document.body.style.setProperty('margin', '0'));
 
     if (customStyle) {
       await page.addStyleTag({ content: customStyle });

scripts/component-generator/templates/component/tests/rendering/ods-{{>component-name}}.spec.ts.hbs

@@ -1,5 +1,4 @@
-import type { SpecPage } from '@stencil/core/testing';
-import { newSpecPage } from '@stencil/core/testing';
+import { type SpecPage, newSpecPage } from '@stencil/core/testing';
 import { Ods{{> ComponentName }} } from '../../src';
 
 describe('ods-{{> component-name }} rendering', () => {

scripts/component-generator/templates/storybook/documentation.mdx.hbs

@@ -1,39 +1,61 @@
-import { Canvas, Meta, Markdown } from '@storybook/blocks';
-import Specifications{{> ComponentName }} from '@ovhcloud/ods-{{> component-dir}}/src/components/{{> component-name }}/documentation/spec.md?raw';
-import { Banner } from '../../banner';
-import { DocNavigator } from '../../doc-navigator';
+import { Canvas, Meta } from '@storybook/blocks';
 import * as {{> ComponentName }}Stories from './{{> component-name }}.stories';
-import { LINK_ID } from '../../zeroheight';
+import { Banner } from '../../../src/components/banner/Banner';
+import { BestPractices } from '../../../src/components/bestPractices/BestPractices';
+import { Heading } from '../../../src/components/heading/Heading';
+import { IdentityCard } from '../../../src/components/identityCard/IdentityCard';
+import { StorybookLink } from '../../../src/components/storybookLink/StorybookLink';
+import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign';
+import { ODS_COMPONENTS_TITLE, STORY } from '../../../src/constants/meta';
 
 <Meta of={ {{> ComponentName }}Stories } name='Documentation' />
 
 <Banner of={ {{> ComponentName }}Stories } />
 
-# Overview
-
-TODO Some text about the component
+_**{{> ComponentName }}** TODO some text about the component_
 
 <Canvas of={ {{> ComponentName }}Stories.Default } sourceState='none' />
 
-<DocNavigator of={ {{> ComponentName }}Stories } linkId={ LINK_ID.{{> COMPONENT_NAME }} } />
+<Heading label="Overview" level={ 2 } />
+
+<IdentityCard aliases={ [] }
+              atomicType={ ATOMIC_TYPE.TODO }
+              figmaLink="TODO"
+              githubUrl="https://github.com/ovh/design-system/tree/master/packages/ods/src/components/{{> component-name }}"
+              name="{{> ComponentName }}"
+              relatedComponents={ [] }>
+  TODO some text about the component.
+</IdentityCard>
+
+<Heading label="Anatomy" level={ 2 } />
+
+TODO picture
+
+<Heading label="Usage" level={ 2 } />
+
+TODO if relevant
+
+<Heading label="Dos & Don'ts" level={ 3 } />
 
-<Markdown>{ Specifications{{> ComponentName }} }</Markdown>
+<BestPractices
+  donts={[]}
+  dos={[]}
+/>
 
-# Style customization [IF RELEVANT]
+<Heading label="Placement" level={ 2 } />
 
-You can add your own style on the {{> component-name }} element using the part `{{> component-name }}`.
+TODO if relevant
 
-Custom {{> component-name }} css:
+<Heading label="Behavior" level={ 2 } />
 
-<Canvas of={ {{> ComponentName }}Stories.CustomCSS } sourceState='shown'/>
+TODO if relevant
 
-# Examples
+<Heading label="Variation" level={ 2 } />
 
-## Default
+<Heading label="Variant" level={ 3 } />
 
-<Canvas of={ {{> ComponentName }}Stories.Default } sourceState='shown' />
+TODO if relevant
 
-## [Other attribute]
-<Canvas of={ {{> ComponentName }}Stories.Default } sourceState='shown' />
+<Heading label="Accessibility" level={ 2 } />
 
-...
+TODO if relevant

scripts/component-generator/templates/storybook/migration.from.17.x.mdx.hbs

@@ -0,0 +1,34 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import Specifications{{> ComponentName }} from '@ovhcloud/ods-components/src/components/{{> component-name }}/documentation/custom-elements.json';
+import { Banner } from '../../../src/components/banner/Banner';
+import { Heading } from '../../../src/components/heading/Heading';
+import { TechnicalSpecification } from '../../../src/components/technicalSpecification/TechnicalSpecification';
+import * as {{> ComponentName }}Stories from './{{> component-name }}.stories';
+
+<Meta of={ {{> ComponentName }}Stories } name="Technical information" />
+
+<Banner of={ {{> ComponentName }}Stories } />
+
+<Heading label="Overview" level={ 2 } />
+
+<Canvas of={ {{> ComponentName }}Stories.Overview } sourceState="'none' "/>
+
+<TechnicalSpecification data={ Specifications{{> ComponentName }} } />
+
+<Heading label="Style customization" level={ 2 } />
+
+TODO if relevant
+
+You can add your own style on the {{> component-name }} element using the part `...`.
+
+Custom CSS:
+
+<Canvas of={ {{> ComponentName }}Stories.CustomCSS } sourceState="shown" />
+
+<Heading label="Examples" level={ 2 } />
+
+<Heading label="Default" level={ 3 } />
+
+<Canvas of={ {{> ComponentName }}Stories.Default } sourceState="shown" />
+
+...

scripts/component-generator/templates/storybook/technical-information.mdx

@@ -1,9 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { defineCustomElement } from '@ovhcloud/ods-components/dist/components/ods-{{> component-name }}';
 import { html } from 'lit-html';
-import { CONTROL_CATEGORY, orderControls } from '../../control';
-
-defineCustomElement();
+import { CONTROL_CATEGORY } from '../../../src/constants/controls';
+import { orderControls } from '../../../src/helpers/controls';
 
 const meta: Meta = {
   title: 'ODS Components/TODO/{{> ComponentName }}',