From 681d8ecb0bb417d6b0ec34d677f0b243922da4b1 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 19 Aug 2025 14:27:59 +0200 Subject: [PATCH] ressurect storybook buttons --- .gitignore | 2 + .../{.storybook/preview-head.html => .npmrc} | 0 old-sae-airwatch/.storybook/main.ts | 1 - old-sae-airwatch/.storybook/preview.ts | 11 --- old-sae-airwatch/package-lock.json | 33 +++---- .../main-button/main-button.stories.ts | 94 +++++++++++++++++++ .../src/stories/button.component.ts | 2 +- .../src/stories/header.component.ts | 76 --------------- old-sae-airwatch/src/stories/header.css | 32 ------- .../src/stories/header.stories.ts | 33 ------- .../src/stories/page.component.ts | 82 ---------------- old-sae-airwatch/src/stories/page.css | 68 -------------- old-sae-airwatch/src/stories/page.stories.ts | 32 ------- old-sae-airwatch/src/stories/user.ts | 3 - 14 files changed, 108 insertions(+), 361 deletions(-) rename old-sae-airwatch/{.storybook/preview-head.html => .npmrc} (100%) delete mode 100644 old-sae-airwatch/src/stories/header.component.ts delete mode 100644 old-sae-airwatch/src/stories/header.css delete mode 100644 old-sae-airwatch/src/stories/header.stories.ts delete mode 100644 old-sae-airwatch/src/stories/page.component.ts delete mode 100644 old-sae-airwatch/src/stories/page.css delete mode 100644 old-sae-airwatch/src/stories/page.stories.ts delete mode 100644 old-sae-airwatch/src/stories/user.ts diff --git a/.gitignore b/.gitignore index 9e73df0..830929c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ #ng-demo #.gitignore node_modules +implem/.angular/cache +**/.angular/cache diff --git a/old-sae-airwatch/.storybook/preview-head.html b/old-sae-airwatch/.npmrc similarity index 100% rename from old-sae-airwatch/.storybook/preview-head.html rename to old-sae-airwatch/.npmrc diff --git a/old-sae-airwatch/.storybook/main.ts b/old-sae-airwatch/.storybook/main.ts index a335ccb..bbf01f3 100644 --- a/old-sae-airwatch/.storybook/main.ts +++ b/old-sae-airwatch/.storybook/main.ts @@ -12,7 +12,6 @@ const config: StorybookConfig = { // '@storybook/addon-controls' - no longer exists in Storybook 9.0+ // ... autres addons ], - staticDirs: ['../../my-workspace/projects/sae-lib/public'], framework: { name: '@storybook/angular', options: {} diff --git a/old-sae-airwatch/.storybook/preview.ts b/old-sae-airwatch/.storybook/preview.ts index f13b42d..418c712 100644 --- a/old-sae-airwatch/.storybook/preview.ts +++ b/old-sae-airwatch/.storybook/preview.ts @@ -10,17 +10,6 @@ const preview: Preview = { date: /Date$/i, }, }, - // viewport: { - // viewports: INITIAL_VIEWPORTS, - // defaultViewport: 'responsive', - // }, - backgrounds: { - default: 'light', - values: [ - { name: 'light', value: '#f8f9fa' }, - { name: 'dark', value: '#333333' }, - ], - }, }, }; diff --git a/old-sae-airwatch/package-lock.json b/old-sae-airwatch/package-lock.json index 8d0bd42..6ae62a5 100644 --- a/old-sae-airwatch/package-lock.json +++ b/old-sae-airwatch/package-lock.json @@ -34,8 +34,6 @@ "@angular/compiler-cli": "^20.1.0", "@angular/localize": "^20.1.2", "@mdx-js/loader": "^3.1.0", - "@storybook/addon-backgrounds": "^9.0.8", - "@storybook/addon-controls": "^9.0.8", "@storybook/addon-docs": "^9.0.17", "@storybook/addon-links": "^9.0.17", "@storybook/addon-viewport": "^9.0.8", @@ -5292,26 +5290,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@storybook/addon-backgrounds": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-9.0.8.tgz", - "integrity": "sha512-4Vvr4wYHtiZ8UVWdCahK0XEMU4zNgInnNcVQ31YkUg41MVSY+aoZqtNuxOuRbFzUtjL9/aVsbY0Sg9Lp1/EJ4g==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/addon-controls": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-9.0.8.tgz", - "integrity": "sha512-6MY9QeBv2vNmBXH+ONmbpp/Gu/odSxriN1+BAY+il9OyXZBMq3OiDsjoH7xY5V7PGr+0XhZfOLkamvx3q+lQTg==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, "node_modules/@storybook/addon-docs": { "version": "9.0.17", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.0.17.tgz", @@ -5358,6 +5336,17 @@ } } }, + "node_modules/@storybook/addon-viewport": { + "version": "9.0.8", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-9.0.8.tgz", + "integrity": "sha512-HgIFDzNXvMx0zQBM5mhwBoAJlrF9KRlxNCZnJbqrFLCJO4Ps2PMtB0HRGHcg0gm3RLcqyps0DpiF7wll3udb7Q==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-vitest": { "version": "9.0.17", "resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-9.0.17.tgz", diff --git a/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts index e69de29..03bd53c 100644 --- a/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts +++ b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts @@ -0,0 +1,94 @@ +import type {Meta, StoryObj} from '@storybook/angular'; +import {MainButton} from './main-button'; +import {moduleMetadata} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; + +// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction +const meta: Meta = { + title: 'Components/MainButton', + component: MainButton, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [CommonModule], + providers: [] + }) + ], + argTypes: { + label: {control: 'text'}, + icon: {control: 'text'}, + kind: { + control: 'select', + options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'], + description: 'Style du bouton' + }, + }, +}; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args +export const Primary: Story = { + args: { + label: 'Button', + icon: 'home-line-2', + kind: 'primary' + }, +}; + +export const Secondary: Story = { + args: { + label: 'Secondary Button', + icon: 'settings-line', + kind: 'secondary' + }, +}; + +export const Info: Story = { + args: { + label: 'Info Button', + icon: 'information-line', + kind: 'info' + }, +}; + +export const Success: Story = { + args: { + label: 'Success Button', + icon: 'check-line', + kind: 'success' + }, +}; + +export const Warning: Story = { + args: { + label: 'Warning Button', + icon: 'alert-line', + kind: 'warning' + }, +}; + +export const Danger: Story = { + args: { + label: 'Danger Button', + icon: 'close-circle-line', + kind: 'danger' + }, +}; + +export const WithoutIcon: Story = { + args: { + label: 'Button without icon', + icon: '', + kind: 'primary' + }, +}; + +export const WithIcon: Story = { + args: { + label: 'Button with icon', + icon: 'user-line', + kind: '' + }, +}; diff --git a/old-sae-airwatch/src/stories/button.component.ts b/old-sae-airwatch/src/stories/button.component.ts index a1cdf6a..4e716c3 100644 --- a/old-sae-airwatch/src/stories/button.component.ts +++ b/old-sae-airwatch/src/stories/button.component.ts @@ -13,7 +13,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; > {{ label }} `, - styleUrls: ['./button.css'], + // styleUrls: ['./button.css'], }) export class ButtonComponent { /** Is this the principal call to action on the page? */ diff --git a/old-sae-airwatch/src/stories/header.component.ts b/old-sae-airwatch/src/stories/header.component.ts deleted file mode 100644 index 4d3a4fd..0000000 --- a/old-sae-airwatch/src/stories/header.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { ButtonComponent } from './button.component'; -import type { User } from './user'; - -@Component({ - selector: 'storybook-header', - standalone: true, - imports: [CommonModule, ButtonComponent], - template: `
-
-
- - - - - - - -

Acme

-
-
-
- - Welcome, {{ user.name }}! - - -
-
- - -
-
-
-
`, - styleUrls: ['./header.css'], -}) -export class HeaderComponent { - @Input() - user: User | null = null; - - @Output() - onLogin = new EventEmitter(); - - @Output() - onLogout = new EventEmitter(); - - @Output() - onCreateAccount = new EventEmitter(); -} diff --git a/old-sae-airwatch/src/stories/header.css b/old-sae-airwatch/src/stories/header.css deleted file mode 100644 index 5efd46c..0000000 --- a/old-sae-airwatch/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - display: inline-block; - vertical-align: top; - margin: 6px 0 6px 10px; - font-weight: 700; - font-size: 20px; - line-height: 1; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - margin-right: 10px; - color: #333; - font-size: 14px; -} diff --git a/old-sae-airwatch/src/stories/header.stories.ts b/old-sae-airwatch/src/stories/header.stories.ts deleted file mode 100644 index 8a9f73b..0000000 --- a/old-sae-airwatch/src/stories/header.stories.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/angular'; -import { fn } from 'storybook/test'; - -import { HeaderComponent } from './header.component'; - -const meta: Meta = { - title: 'Example/Header', - component: HeaderComponent, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -}; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/old-sae-airwatch/src/stories/page.component.ts b/old-sae-airwatch/src/stories/page.component.ts deleted file mode 100644 index fca9d29..0000000 --- a/old-sae-airwatch/src/stories/page.component.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { HeaderComponent } from './header.component'; -import type { User } from './user'; - -@Component({ - selector: 'storybook-page', - standalone: true, - imports: [CommonModule, HeaderComponent], - template: `
- -
-

Pages in Storybook

-

- We recommend building UIs with a - - component-driven - - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at - - Storybook tutorials - - . Read more in the - docs - . -

-
- Tip Adjust the width of the canvas with the - - - - - - Viewports addon in the toolbar -
-
-
`, - styleUrls: ['./page.css'], -}) -export class PageComponent { - user: User | null = null; - - doLogout() { - this.user = null; - } - - doLogin() { - this.user = { name: 'Jane Doe' }; - } - - doCreateAccount() { - this.user = { name: 'Jane Doe' }; - } -} diff --git a/old-sae-airwatch/src/stories/page.css b/old-sae-airwatch/src/stories/page.css deleted file mode 100644 index 77c81d2..0000000 --- a/old-sae-airwatch/src/stories/page.css +++ /dev/null @@ -1,68 +0,0 @@ -.storybook-page { - margin: 0 auto; - padding: 48px 20px; - max-width: 600px; - color: #333; - font-size: 14px; - line-height: 24px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-page h2 { - display: inline-block; - vertical-align: top; - margin: 0 0 4px; - font-weight: 700; - font-size: 32px; - line-height: 1; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - color: inherit; -} - -.storybook-page ul { - margin: 1em 0; - padding-left: 30px; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - vertical-align: top; - margin-right: 10px; - border-radius: 1em; - background: #e7fdd8; - padding: 4px 12px; - color: #357a14; - font-weight: 700; - font-size: 11px; - line-height: 12px; -} - -.storybook-page .tip-wrapper { - margin-top: 40px; - margin-bottom: 40px; - font-size: 13px; - line-height: 20px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - vertical-align: top; - margin-top: 3px; - margin-right: 4px; - width: 12px; - height: 12px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/old-sae-airwatch/src/stories/page.stories.ts b/old-sae-airwatch/src/stories/page.stories.ts deleted file mode 100644 index 659a14c..0000000 --- a/old-sae-airwatch/src/stories/page.stories.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/angular'; -import { expect, userEvent, within } from 'storybook/test'; - -import { PageComponent } from './page.component'; - -const meta: Meta = { - title: 'Example/Page', - component: PageComponent, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, -}; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}; diff --git a/old-sae-airwatch/src/stories/user.ts b/old-sae-airwatch/src/stories/user.ts deleted file mode 100644 index c664619..0000000 --- a/old-sae-airwatch/src/stories/user.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface User { - name: string; -}