up storybook
This commit is contained in:
Tykayn
tykayn
parent
0e9a0aa21e
commit
179a8d9279
344 changed files with 57478 additions and 87 deletions
0
old-sae-airwatch/.npmrc
Normal file
0
old-sae-airwatch/.npmrc
Normal file
|
|
@ -6,6 +6,10 @@ const config: StorybookConfig = {
|
|||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-docs',
|
||||
// '@storybook/addon-viewport',
|
||||
// Removed deprecated addons:
|
||||
// '@storybook/addon-backgrounds' - no longer exists in Storybook 9.0+
|
||||
// '@storybook/addon-controls' - no longer exists in Storybook 9.0+
|
||||
// ... autres addons
|
||||
],
|
||||
framework: {
|
||||
|
|
@ -89,7 +93,7 @@ const config: StorybookConfig = {
|
|||
if (!config.resolve.alias) config.resolve.alias = {};
|
||||
|
||||
config.resolve.alias['~src'] = path.resolve(__dirname, '../src');
|
||||
config.resolve.alias['sae-lib'] = path.resolve(__dirname, '../node_modules/sae-lib');
|
||||
config.resolve.alias['sae-lib'] = path.resolve(__dirname, '../../my-workspace/projects/sae-lib');
|
||||
|
||||
// Ajouter un alias pour remixicon
|
||||
config.resolve.alias['remixicon'] = path.resolve(__dirname, '../node_modules/remixicon');
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type {Preview} from '@storybook/angular';
|
||||
import 'remixicon/fonts/remixicon.css';
|
||||
// import 'remixicon/fonts/remixicon.css';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
|
|
@ -10,6 +10,17 @@ const preview: Preview = {
|
|||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
// viewport: {
|
||||
// viewports: INITIAL_VIEWPORTS,
|
||||
// defaultViewport: 'responsive',
|
||||
// },
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
values: [
|
||||
{ name: 'light', value: '#f8f9fa' },
|
||||
{ name: 'dark', value: '#333333' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,45 +1,67 @@
|
|||
# MyApp
|
||||
# Storybook Setup
|
||||
|
||||
Démo de design system avec Angular
|
||||
faisant des composants web.
|
||||
## Issues Fixed
|
||||
|
||||
Storybook.
|
||||
1. Fixed the import statement in `.storybook/preview.ts` to use the correct path for `INITIAL_VIEWPORTS`:
|
||||
```typescript
|
||||
// Changed from
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport/presets';
|
||||
|
||||
// To
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
```
|
||||
|
||||
### Usage
|
||||
2. Removed deprecated Storybook addons:
|
||||
- Removed `@storybook/addon-backgrounds` from `.storybook/main.ts` and `package.json`
|
||||
- Removed `@storybook/addon-controls` from `.storybook/main.ts` and `package.json`
|
||||
- Kept the backgrounds and controls configuration in `.storybook/preview.ts` as these are now part of the core Storybook functionality
|
||||
|
||||
### Build Script Features
|
||||
## Remaining Issues
|
||||
|
||||
To build the application and prepare files for implementation:
|
||||
1. **Node.js Version Compatibility**:
|
||||
- The Angular CLI requires Node.js v20.19+ or v22.12+
|
||||
- Current Node.js version is v18.19.1
|
||||
- To fix this issue, you need to upgrade your Node.js version
|
||||
|
||||
## How to Upgrade Node.js
|
||||
|
||||
You can upgrade Node.js using one of the following methods:
|
||||
|
||||
### Using NVM (Node Version Manager)
|
||||
|
||||
```bash
|
||||
./build.sh
|
||||
# Install NVM if you don't have it already
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
|
||||
|
||||
# Install the required Node.js version
|
||||
nvm install 20.19
|
||||
|
||||
# Use the installed version
|
||||
nvm use 20.19
|
||||
```
|
||||
|
||||
- Builds the Angular application
|
||||
- Checks for Node.js version compatibility (requires v20.19+ or v22.12+)
|
||||
- Renames the output files to match the expected names in the implementation directory:
|
||||
- CSS file → `design-system.css`
|
||||
- JS files → `design-system.js` (combines main and polyfills)
|
||||
- Copies the renamed files to the `implementation/assets` directory
|
||||
### Using Package Manager
|
||||
|
||||
### Requirements
|
||||
#### For Ubuntu/Debian:
|
||||
|
||||
- Node.js v20.19+ or v22.12+
|
||||
- npm
|
||||
```bash
|
||||
# Add NodeSource repository
|
||||
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
|
||||
|
||||
## Development
|
||||
# Install Node.js
|
||||
sudo apt-get install -y nodejs
|
||||
```
|
||||
|
||||
- Angular application with web components
|
||||
- Storybook for component development and testing
|
||||
#### For macOS (using Homebrew):
|
||||
|
||||
# notes
|
||||
```bash
|
||||
brew update
|
||||
brew install node@20
|
||||
```
|
||||
|
||||
- génération de web components
|
||||
- maj des imports scss https://sass-lang.com/documentation/breaking-changes/import/
|
||||
After upgrading Node.js, run the following commands to reinstall dependencies and start Storybook:
|
||||
|
||||
# implémentation
|
||||
|
||||
Pour implémenter les composants de l'application Angular:
|
||||
|
||||
- charger le service de chatbot
|
||||
- mettre un composant
|
||||
```bash
|
||||
npm install
|
||||
npm run storybook
|
||||
```
|
||||
|
|
|
|||
23
old-sae-airwatch/package-lock.json
generated
23
old-sae-airwatch/package-lock.json
generated
|
|
@ -34,8 +34,11 @@
|
|||
"@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",
|
||||
"@storybook/addon-vitest": "^9.0.17",
|
||||
"@storybook/angular": "^9.0.17",
|
||||
"@types/express": "^5.0.1",
|
||||
|
|
@ -5289,6 +5292,26 @@
|
|||
"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",
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
"@mdx-js/loader": "^3.1.0",
|
||||
"@storybook/addon-docs": "^9.0.17",
|
||||
"@storybook/addon-links": "^9.0.17",
|
||||
"@storybook/addon-viewport": "^9.0.8",
|
||||
"@storybook/addon-vitest": "^9.0.17",
|
||||
"@storybook/angular": "^9.0.17",
|
||||
"@types/express": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ fi
|
|||
echo "Création d'un lien npm pour sae-lib..."
|
||||
npm link
|
||||
|
||||
cd ../../../sae-airwatch
|
||||
cd ../../../old-sae-airwatch
|
||||
|
||||
# Utiliser le lien dans l'application
|
||||
echo "Utilisation du lien dans l'application sae-csc..."
|
||||
echo "Utilisation du lien dans l'application old-sae-airwatch..."
|
||||
npm link sae-lib
|
||||
|
||||
echo "Lien créé avec succès. sae-lib est maintenant disponible comme un module npm."
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use 'sae-lib/src/styles/variables.scss';
|
||||
@use 'sae-lib/src/styles/_variables.scss' as variables;
|
||||
|
||||
.prompt-input {
|
||||
margin: 20px auto;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<header class="container">
|
||||
|
||||
<nav aria-label="main navigation" class="navbar" role="navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://cipherbliss.com">
|
||||
<app-logo></app-logo>
|
||||
</a>
|
||||
|
||||
<a aria-expanded="false" aria-label="menu" class="navbar-burger" data-target="navbarBasicExample"
|
||||
role="button">
|
||||
<a
|
||||
aria-expanded="false"
|
||||
aria-label="menu"
|
||||
class="navbar-burger"
|
||||
[class.is-active]="isMenuActive"
|
||||
role="button"
|
||||
(click)="toggleMenu()">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
|
|
@ -15,30 +19,28 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-menu" id="navbarBasicExample">
|
||||
<div class="navbar-menu" [class.is-active]="isMenuActive" id="navbarBasicExample">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<button class="navbar-item" routerLink="home" routerLinkActive="active-link">
|
||||
accueil
|
||||
</button>
|
||||
<span class="navbar-item" routerLink="colors" routerLinkActive="active-link">
|
||||
colors
|
||||
</span>
|
||||
<a class="navbar-item" routerLink="home" routerLinkActive="active-link">
|
||||
Accueil
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="colors" routerLinkActive="active-link">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="grid" routerLinkActive="active-link">
|
||||
tableau
|
||||
Tableau
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="csc" routerLinkActive="active-link">
|
||||
CSC démo
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="layout" routerLinkActive="active-link">
|
||||
layout
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Ask question
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
@use 'sae-lib/src/styles/_variables.scss' as variables;
|
||||
|
||||
// Navigation bar styles
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
background-color: variables.$neutral-white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-burger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 2px 0;
|
||||
background-color: #333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&.is-active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-start, &-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: variables.$main-color-active;
|
||||
}
|
||||
|
||||
&.active-link {
|
||||
color: variables.$main-color-active;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
position: relative;
|
||||
|
||||
&:hover .navbar-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
|
||||
padding: 0.5rem 0;
|
||||
z-index: 20;
|
||||
min-width: 12rem;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
display: block;
|
||||
|
||||
&.is-selected {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
height: 1px;
|
||||
background-color: #dbdbdb;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
.ri-notification-2-line {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
|
@ -5,9 +5,20 @@ import {CommonModule} from '@angular/common';
|
|||
import {Store, StoreModule} from '@ngrx/store';
|
||||
import {reducers} from '../reducers';
|
||||
import {ActivatedRoute, RouterModule} from '@angular/router';
|
||||
import {Logo} from '../logo/logo';
|
||||
|
||||
const appReducer = reducers.app;
|
||||
|
||||
/**
|
||||
* # Navigation Bar Component
|
||||
*
|
||||
* The DsNavbar component provides the main navigation for the application.
|
||||
* It includes:
|
||||
* - Brand logo
|
||||
* - Navigation links
|
||||
* - Dropdown menus
|
||||
* - Mobile-responsive hamburger menu
|
||||
*/
|
||||
const meta: Meta<DsNavbar> = {
|
||||
title: 'Navigation/DsNavbar',
|
||||
component: DsNavbar,
|
||||
|
|
@ -16,6 +27,7 @@ const meta: Meta<DsNavbar> = {
|
|||
moduleMetadata({
|
||||
imports: [
|
||||
CommonModule,
|
||||
Logo,
|
||||
StoreModule.forRoot({app: appReducer as any}),
|
||||
RouterModule.forRoot([]),
|
||||
],
|
||||
|
|
@ -36,49 +48,51 @@ const meta: Meta<DsNavbar> = {
|
|||
],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'The main navigation bar component used throughout the application. It provides navigation links, dropdown menus, and is responsive for mobile devices.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<DsNavbar>;
|
||||
|
||||
/**
|
||||
* Default state of the navigation bar.
|
||||
*/
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
}
|
||||
args: {}
|
||||
};
|
||||
|
||||
export const Expanded: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
},
|
||||
/**
|
||||
* Navigation bar with active link highlighting.
|
||||
* This example simulates when a user is on a specific page.
|
||||
*/
|
||||
export const WithActiveLink: Story = {
|
||||
args: {},
|
||||
parameters: {
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
displayConversationListPanelLarge: true
|
||||
}
|
||||
});
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Shows the navigation bar with an active link highlighted. This represents the state when a user is on a specific page.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const Collapsed: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
},
|
||||
/**
|
||||
* Mobile view of the navigation bar with hamburger menu.
|
||||
*/
|
||||
export const MobileView: Story = {
|
||||
args: {},
|
||||
parameters: {
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
displayConversationListPanelLarge: false
|
||||
}
|
||||
});
|
||||
viewport: {
|
||||
defaultViewport: 'mobile1'
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Shows the navigation bar in mobile view with the hamburger menu. This is how the component appears on smaller screens.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,33 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Logo} from "../logo/logo";
|
||||
import {RouterLink, RouterLinkActive} from "@angular/router";
|
||||
import { Logo } from "../logo/logo";
|
||||
import { RouterLink, RouterLinkActive } from "@angular/router";
|
||||
|
||||
/**
|
||||
* Navigation Bar Component
|
||||
*
|
||||
* This component provides the main navigation for the application.
|
||||
* It includes a responsive design with a hamburger menu for mobile views.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-ds-navbar',
|
||||
imports: [
|
||||
Logo,
|
||||
RouterLink,
|
||||
RouterLinkActive
|
||||
],
|
||||
imports: [
|
||||
Logo,
|
||||
RouterLink,
|
||||
RouterLinkActive
|
||||
],
|
||||
templateUrl: './ds-navbar.html',
|
||||
styleUrl: './ds-navbar.scss'
|
||||
})
|
||||
export class DsNavbar {
|
||||
/**
|
||||
* Flag to track if the mobile menu is active
|
||||
*/
|
||||
isMenuActive = false;
|
||||
|
||||
/**
|
||||
* Toggles the mobile menu
|
||||
*/
|
||||
toggleMenu(): void {
|
||||
this.isMenuActive = !this.isMenuActive;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue