Merge branch 'storybook' into 'dev'

chore(sb): storybook integration + button component

See merge request !556

.eslintrc.json

@@ -8,7 +8,11 @@
         "project": ["tsconfig.json"],
         "createDefaultProgram": true
       },
-      "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": [
+        "plugin:storybook/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -57,7 +61,6 @@
         "@angular-eslint/template/no-negated-async": "error",
         "@angular-eslint/template/no-positive-tabindex": "error",
         "@angular-eslint/template/use-track-by-function": "off",
-
         "@angular-eslint/component-class-suffix": "error",
         "@angular-eslint/component-max-inline-declarations": "error",
         "@angular-eslint/component-selector": "error",

.storybook/main.ts

+import type { StorybookConfig } from '@storybook/angular';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: [{ from: '../src/assets', to: 'assets' }],
+};
+export default config;

.storybook/manager.js

+import { addons } from '@storybook/manager-api';
+import resinTheme from './theme';
+
+addons.setConfig({
+  theme: resinTheme,
+});

.storybook/preview.ts

+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import type { Preview } from '@storybook/angular';
+import docJson from '../documentation.json';
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      values: [
+        // Overrides storybook off-white to mockups white
+        { name: 'white', value: '#fff' },
+        { name: 'dark', value: '#333333' },
+      ],
+    },
+  },
+};
+
+export default preview;

.storybook/theme.ts

+import { create } from '@storybook/theming';
+import sbResin from '../src/assets/sb-header.png';
+
+export default create({
+  base: 'light',
+  brandTitle: "Res'in Design system",
+  brandUrl: 'https://resin.grandlyon.com',
+  brandImage: sbResin,
+  // brandImage: 'https://forge.grandlyon.com/uploads/-/system/project/avatar/466/favicon.ico?width=64',
+});

.storybook/tsconfig.json

+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
+}

.storybook/typings.d.ts

+declare module '*.md' {
+  const content: string;
+  export default content;
+}

.vscode/settings.json

@@ -48,11 +48,13 @@
     "personaloffer",
     "Rés'in",
     "saturday",
+    "smedium",
     "sunday",
     "thursday",
     "toastr",
     "tuesday",
     "ultrawide",
-    "wednesday"
+    "wednesday",
+    "xsmall"
   ]
 }

angular.json

@@ -148,6 +148,26 @@
           "options": {
             "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "pamn:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "pamn:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
+            "outputDir": "storybook-static"
+          }
         }
       }
     }

package.json

@@ -12,7 +12,9 @@
     "test": "ng test",
     "lint": "ng lint --fix",
     "release": "standard-version",
-    "translate": "ng xi18n --ivy --output-path src/locale --out-file messages.en.xlf"
+    "translate": "ng xi18n --ivy --output-path src/locale --out-file messages.en.xlf",
+    "storybook": "ng run pamn:storybook",
+    "build-storybook": "ng run pamn:build-storybook"
   },
   "private": true,
   "dependencies": {
@@ -57,6 +59,14 @@
     "@angular/compiler-cli": "^15.1.3",
     "@angular/localize": "^15.1.3",
     "@compodoc/compodoc": "^1.1.16",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/angular": "^7.4.0",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/manager-api": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.4.0",
     "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/leaflet": "^1.5.17",
@@ -68,6 +78,7 @@
     "codelyzer": "^6.0.2",
     "eslint": "^8.28.0",
     "eslint-plugin-jest": "^27.0.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^14.1.0",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
@@ -81,7 +92,10 @@
     "karma-jasmine-html-reporter": "^2.0.0",
     "ng-packagr": "^15.1.1",
     "prettier": "^2.8.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "standard-version": "^9.3.2",
+    "storybook": "^7.4.0",
     "ts-node": "~8.10.0",
     "tslint": "~6.1.0",
     "typescript": "~4.9.4"

src/app/annuaire/annuaire.component.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  height: calc(100vh - $header-height - $footer-height);
   &.logged {
     justify-content: flex-start;
   }

src/app/app-routing.module.ts

@@ -268,7 +268,6 @@ const routes: Routes = [
         canActivate: [AdminGuard],
         loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule),
       },
-      footerOutletRoute,
     ],
   },
   {

src/app/app.component.html

@@ -8,7 +8,7 @@
       <router-outlet name="left-pane"></router-outlet>
       <router-outlet></router-outlet>
       <router-outlet name="print"></router-outlet>
-      <router-outlet *ngIf="!loading" name="footer"></router-outlet>
     </ng-container>
   </div>
+  <router-outlet *ngIf="!loading" name="footer"></router-outlet>
 </div>

src/app/app.component.scss

@@ -3,8 +3,9 @@
 @import 'layout';
 
 .app-container {
-  display: block;
+  display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 @media print {
@@ -18,7 +19,9 @@
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  height: calc(100svh - #{$header-height});
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
 }
 
 .loader {

src/app/header/header.component.scss

@@ -15,6 +15,9 @@
   border-bottom: solid 1px $grey-4;
   background-color: $white;
   padding: 0 20px;
+  position: sticky;
+  top: 0;
+  z-index: 50;
   .right-header {
     @media #{$tablet} {
       display: none !important;

src/app/login/login.component.scss

@@ -4,23 +4,32 @@
 @import 'typography';
 
 .loginPage {
+  height: calc(100vh - $header-height - $footer-height);
   display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media #{$phone} {
+    padding: 1rem;
+    align-items: flex-start;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
     width: 100%;
     max-width: 980px;
     box-sizing: border-box;
-  margin: auto;
-  margin-top: 2rem;
-  min-height: 450px;
-  max-height: 80vh;
-  overflow-y: auto;
     color: $grey-1;
     background: $white;
     border-radius: 8px;
     border: 1px solid $grey-6;
     padding: 70px 40px;
-  @media #{$desktop} {
-    padding: 1rem;
-    margin-top: 1rem;
+    * {
+      max-width: 340px;
+    }
   }
 
   .title {
@@ -42,11 +51,6 @@
     color: $orange-warning;
   }
 
-  .form {
-    max-width: 340px;
-    margin: auto;
-  }
-
   .form-group {
     margin: 1.5rem 0;
     .notValidate {
@@ -110,9 +114,3 @@
     }
   }
 }
-
-@media #{$tablet} {
-  .loginPage {
-    height: 100%;
-  }
-}

src/app/shared/components/index.ts

@@ -20,6 +20,7 @@ import { StructureTypePickerComponent } from './structure-type-picker/structure-
 import { SvgIconComponent } from './svg-icon/svg-icon.component';
 import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
 import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
+import { ButtonV3Component } from './v3/button/button.component';
 
 // tslint:disable-next-line: max-line-length
 export {
@@ -27,6 +28,7 @@ export {
   AddressAutocompleteComponent,
   AppointmentChoiceComponent,
   ButtonComponent,
+  ButtonV3Component,
   CheckboxFormComponent,
   CustomModalComponent,
   HourPickerComponent,
@@ -52,6 +54,7 @@ export const SharedComponents = [
   LogoCardComponent,
   SvgIconComponent,
   ButtonComponent,
+  ButtonV3Component,
   AddressAutocompleteComponent,
   StructureTypePickerComponent,
   CheckboxFormComponent,

src/app/shared/components/v3/button/Button.stories.ts

+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { ButtonV3Component } from './button.component';
+import { ButtonTypeV3 } from './button.type';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ButtonV3Component> = {
+  title: 'Components/Button',
+  component: ButtonV3Component,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      declarations: [SvgIconComponent],
+      imports: [CommonModule],
+    }),
+  ],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ButtonV3Component>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary button',
+    variant: ButtonTypeV3.Primary,
+    size: 'medium',
+    disabled: false,
+  },
+};
+
+export const PrimarySmall: Story = {
+  args: {
+    ...Primary.args,
+    size: 'small',
+  },
+};
+
+export const PrimaryLarge: Story = {
+  args: {
+    ...Primary.args,
+    size: 'large',
+  },
+};
+
+export const PrimaryWithIcon: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Suivant',
+    iconPosition: 'right',
+    iconFolder: 'form',
+    iconName: 'chevronRight',
+  },
+};
+
+export const PrimaryWide: Story = {
+  args: {
+    ...Primary.args,
+    wide: true,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary button',
+    variant: ButtonTypeV3.Secondary,
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    label: 'Tertiary button',
+    variant: ButtonTypeV3.Tertiary,
+  },
+};