feat(scripts): update component generator

package.json

@@ -23,10 +23,10 @@
     "build:storybook": "lerna run --stream build:storybook",
     "clean": "lerna run clean",
     "doc": "lerna run doc",
-    "generate:component": "plop --plopfile scripts/component-generator/plopfile.js component",
     "lint": "yarn lint:ts && yarn lint:scss",
     "lint:ts": "lerna run lint:ts",
     "lint:scss": "lerna run lint:scss",
+    "new:component": "plop --plopfile scripts/component-generator/plopfile.js component",
     "ods:graduate": "yarn ods:release:prepare && yarn version:graduate",
     "ods:major": "yarn ods:release:prepare && yarn version:major",
     "ods:minor": "yarn ods:release:prepare && yarn version:minor",

packages/ods/react/tests/_app/src/components.ts

@@ -0,0 +1,15 @@
+/**
+ * File generated and updated using the component generator.
+ *
+ * You should not update this file manually!
+ *
+ * If you want to create a new component,
+ * please use the generator command `yarn new:component` at the root of the project
+ */
+const componentNames = [
+  'spinner',
+  'text',
+  //--generator-anchor--
+];
+
+export { componentNames };

packages/ods/react/tests/_app/src/index.tsx

@@ -1,9 +1,7 @@
 import React, { createRoot } from 'react-dom/client';
 import { StrictMode, Suspense, lazy } from 'react';
 import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
-// TODO automate
-const Spinner = lazy(() => import('./ods-spinner'));
-const Text = lazy(() => import('./ods-text'));
+import { componentNames } from './components';
 
 const root = createRoot(document.getElementById('root')!);
 
@@ -13,16 +11,31 @@ function renderApp() {
       <BrowserRouter>
         <Suspense>
           <Routes>
-            <Route path="/ods-spinner" element={ <Spinner /> } />
-            <Route path="/ods-text" element={ <Text /> } />
+            {
+              componentNames.map((componentName, idx) => {
+                const Component = lazy(() =>
+                  import(/* @vite-ignore */
+                    `./components/ods-${componentName}`).then(comp => comp)
+                );
+
+                return (
+                  <Route key={ idx }
+                         path={ `/ods-${componentName}` }
+                         element={ <Component /> } />
+                )
+              })
+            }
+
             <Route path="*" element={
               <ul>
-                <li>
-                  <Link id="ods-spinner" to="/ods-spinner">ods-spinner</Link>
-                </li>
-                <li>
-                  <Link id="ods-text" to="/ods-text">ods-text</Link>
-                </li>
+                {
+                  componentNames.map((componentName, idx) => (
+                    <li key={ idx }>
+                      <Link id={ `ods-${componentName}` }
+                            to={ `/ods-${componentName}` }>ods-{ componentName }</Link>
+                    </li>
+                  ))
+                }
               </ul>
             } />
           </Routes>

packages/ods/src/components/index.ts

@@ -1,2 +1,10 @@
+/**
+ * File generated and updated using the component generator.
+ *
+ * You should not update this file manually!
+ *
+ * If you want to create a new component,
+ * please use the generator command `yarn new:component` at the root of the project
+ */
 export * from './spinner/src';
 export * from './text/src';

packages/ods/src/components/spinner/documentation/specifications/spec.md

@@ -0,0 +1,26 @@
+* [**Interfaces**](#interfaces)
+* [**Types**](#types)
+
+## Interfaces
+
+### OdsSpinnerAttribute
+|Name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`contrasted`** | _boolean_ |  |  | contrasted or not: see component principles|
+|**`inline`** | _boolean_ |  |  | full width or not: see component principles|
+|**`mode`** | `indeterminate` |  |  | choose between infinite or progress spinner (infinite only for now)|
+|**`size`** | `ODS_SPINNER_SIZE` |  |  | size: see component principles|
+
+## Types
+
+### ODS_SPINNER_MODE
+|  |
+|:---:|
+| `indeterminate` |
+
+### ODS_SPINNER_SIZE
+|  |
+|:---:|
+| `lg` |
+| `md` |
+| `sm` |

packages/ods/src/components/spinner/documentation/specifications/specifications-spinner.mdx

@@ -0,0 +1,4 @@
+import { Markdown } from '@storybook/addon-docs';
+import Specs from './spec.md';
+
+<Markdown>{ Specs }</Markdown>

packages/ods/src/components/spinner/documentation/usage-guidelines/properties/usage.color.mdx

@@ -0,0 +1,9 @@
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas sourceState="none">
+  <ods-spinner color="primary"></ods-spinner>
+</Canvas>
+
+```html
+<ods-spinner color="primary"></ods-spinner>
+```

packages/ods/src/components/spinner/documentation/usage-guidelines/properties/usage.size.mdx

@@ -0,0 +1,13 @@
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas sourceState="none">
+  <ods-spinner size='sm'></ods-spinner>
+  <ods-spinner size='md'></ods-spinner>
+  <ods-spinner size='lg'></ods-spinner>
+</Canvas>
+
+```html
+<ods-spinner size='sm'></ods-spinner>
+<ods-spinner size='md'></ods-spinner>
+<ods-spinner size='lg'></ods-spinner>
+```

packages/ods/src/components/spinner/documentation/usage-guidelines/usage.mdx

@@ -0,0 +1,27 @@
+import { Canvas } from '@storybook/addon-docs';
+import ColorProperty from './properties/usage.color.mdx';
+import SizeProperty from './properties/usage.size.mdx';
+
+## Usage
+
+### Default
+
+<Canvas sourceState="none">
+  <div style={{ height: '300px', display: 'inline-flex'}}>
+    <ods-spinner></ods-spinner>
+  </div>
+</Canvas>
+
+```html
+<div style='height: 300px; display: inline-flex'>
+  <ods-spinner></ods-spinner>
+</div>
+```
+
+### Color
+
+<ColorProperty />
+
+### Size
+
+<SizeProperty />

packages/ods/src/components/spinner/package.json

@@ -7,7 +7,6 @@
   "collection": "dist/collection/collection-manifest.json",
   "scripts": {
     "clean": "rimraf .stencil coverage dist docs-api www",
-    "__doc": "typedoc --pretty && node ../../../scripts/generate-typedoc-md.js",
     "doc": "typedoc --pretty --plugin typedoc-plugin-markdown --hideBreadcrumbs true --hideInPageTOC true",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
     "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",

packages/ods/src/components/spinner/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset='utf-8' />
   <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0' />
-  <title>Dev ods-text</title>
+  <title>Dev ods-spinner</title>
 
   <script type='module' src='/build/ods-spinner.esm.js'></script>
   <script nomodule src='/build/ods-spinner.js'></script>

packages/ods/src/components/spinner/tests/accessibility/ods-spinner.e2e.ts

@@ -14,7 +14,7 @@ describe('ods-spinner accessibility', () => {
     el = await page.find('ods-spinner');
   }
 
-  it('should render the web component with the correct role', async() => {
+  it('should render the web component with the right role', async() => {
     await setup('<ods-spinner></ods-spinner>');
 
     expect(el.shadowRoot).not.toBeNull();

packages/ods/src/components/spinner/tests/rendering/ods-spinner.spec.ts

@@ -7,7 +7,7 @@ describe('ods-spinner rendering', () => {
   let page: SpecPage;
   let root: HTMLElement | undefined;
 
-  async function setup(html: string) {
+  async function setup(html: string): Promise<void> {
     page = await newSpecPage({
       components: [OdsSpinner],
       html,

packages/ods/src/components/text/src/components/ods-text/ods-text.tsx

@@ -11,7 +11,7 @@ import { ODS_TEXT_PRESET } from '../../constants/text-preset';
 export class OdsText {
   @Element() el!: HTMLElement;
 
-  @Prop({ reflect: true }) neededFlag!: boolean;
+  // @Prop({ reflect: true }) neededFlag!: boolean;
   @Prop({ reflect: true }) preset? = ODS_TEXT_PRESET.text;
 
   @State() hasFocus = false;

packages/ods/vue/tests/_app/src/components.ts

@@ -0,0 +1,15 @@
+/**
+ * File generated and updated using the component generator.
+ *
+ * You should not update this file manually!
+ *
+ * If you want to create a new component,
+ * please use the generator command `yarn new:component` at the root of the project
+ */
+const componentNames = [
+  'spinner',
+  'text',
+  //--generator-anchor--
+];
+
+export { componentNames };

packages/ods/vue/tests/_app/src/views/Spinner.vue → packages/ods/vue/tests/_app/src/components/ods-spinner.vue

@@ -7,7 +7,7 @@ import { defineComponent } from 'vue';
 import { OdsSpinner } from '@ovhcloud/ods-components/vue';
 
 export default defineComponent({
-  name: 'App',
+  name: 'Spinner',
   components: {
     OdsSpinner,
   },

packages/ods/vue/tests/_app/src/views/Text.vue → packages/ods/vue/tests/_app/src/components/ods-text.vue

@@ -7,7 +7,7 @@ import { defineComponent } from 'vue';
 import { OdsText } from '@ovhcloud/ods-components/vue';
 
 export default defineComponent({
-  name: 'App',
+  name: 'Text',
   components: {
     OdsText,
   },

packages/ods/vue/tests/_app/src/router/index.ts

@@ -1,20 +1,11 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
-import SpinnerView from '../views/Spinner.vue';
-import TextView from '../views/Text.vue';
+import { componentNames } from '../components';
 
-// TODO generate
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/ods-spinner',
-    name: 'ods-spinner',
-    component: SpinnerView,
-  },
-  {
-    path: '/ods-text',
-    name: 'ods-text',
-    component: TextView,
-  },
-];
+const routes: Array<RouteRecordRaw> = componentNames.map((componentName) => ({
+  component: () => import(`../components/ods-${componentName}.vue`),
+  path: `/ods-${componentName}`,
+  name: `ods-${componentName}`,
+}))
 
 const router = createRouter({
   history: createWebHashHistory(),

packages/storybook/.storybook/preview.ts

@@ -1,4 +1,5 @@
 // import { DocsPage, DocsContainer } from '@storybook/addon-docs'; // TODO check what is it for?
+import '@ovhcloud/ods-themes';
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {

packages/storybook/stories/components/spinner/1_specifications.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/addon-docs';
+import SpecificationsSpinner from '@ovhcloud/ods-components/src/components/spinner/documentation/specifications/specifications-spinner.mdx';
+
+<Meta title="ODS Components/User feedback/Spinner [atom]/Specifications" />
+
+# Spinner - Design Specifications
+----
+
+A visual indicator that a process is happening in the background but the interface is not yet ready for interaction:
+<div>
+  <osds-button color="primary" variant="ghost" href="https://zeroheight.com/6fc8a63f7/p/9017bb-spinner/b/40a887" target="_blank">
+    ZEROHEIGHT - SPINNER DESIGN GUIDELINES &nbsp;
+    <osds-icon name="external-link" color="primary" size="xs"></osds-icon>
+  </osds-button>
+</div>
+
+# Spinner - Technical Specification
+----
+
+<SpecificationsSpinner />

packages/storybook/stories/components/spinner/2_usage.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs';
+import Usage from '@ovhcloud/ods-components/src/components/spinner/documentation/usage-guidelines/usage.mdx';
+
+<Meta title="ODS Components/User feedback/Spinner [atom]/Usage Guidelines" />
+
+# Spinner - Usage Guidelines
+----
+
+<Usage />

packages/storybook/stories/components/spinner/3_demo.stories.ts

@@ -0,0 +1,34 @@
+import { ODS_SPINNER_COLOR, ODS_SPINNER_COLORS, ODS_SPINNER_SIZE, ODS_SPINNER_SIZES } from '@ovhcloud/ods-components';
+import { defineCustomElement } from '@ovhcloud/ods-components/dist/components/ods-spinner';
+import { html } from 'lit-html';
+
+defineCustomElement();
+
+export default {
+  title: 'ODS Components/User feedback/Spinner [atom]/Demo',
+  render: (args) => html`
+    <ods-spinner color="${args.color}"
+                 size="${args.size}">
+    </ods-spinner>
+  `,
+  argTypes: {
+    color: {
+      // category: 'General', // TODO not native storybook, need a table
+      control: { type: 'select' },
+      options: ODS_SPINNER_COLORS,
+    },
+    size: {
+      // category: 'General', // TODO not native storybook, need a table
+      control: { type: 'select' },
+      options: ODS_SPINNER_SIZES,
+    },
+  },
+  args: {
+    color: ODS_SPINNER_COLOR.primary,
+    size: ODS_SPINNER_SIZE.md,
+  },
+};
+
+export const Default = {
+  args: {},
+};