diff --git a/.storybook/main.js b/.storybook/main.js index 813f90d2c6..88e9437f5b 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,6 +1,6 @@ module.exports = { stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], - staticDirs: ['./public'], + staticDirs: ['public'], addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'], core: { builder: 'webpack5', diff --git a/.storybook/msw/mockServiceWorker.js b/.storybook/msw/mockServiceWorker.js deleted file mode 100644 index ab63a84955..0000000000 --- a/.storybook/msw/mockServiceWorker.js +++ /dev/null @@ -1,303 +0,0 @@ -/* eslint-disable */ -/* tslint:disable */ - -/** - * Mock Service Worker (0.47.4). - * @see https://github.com/mswjs/msw - * - Please do NOT modify this file. - * - Please do NOT serve this file on production. - */ - -const INTEGRITY_CHECKSUM = 'b3066ef78c2f9090b4ce87e874965995' -const activeClientIds = new Set() - -self.addEventListener('install', function () { - self.skipWaiting() -}) - -self.addEventListener('activate', function (event) { - event.waitUntil(self.clients.claim()) -}) - -self.addEventListener('message', async function (event) { - const clientId = event.source.id - - if (!clientId || !self.clients) { - return - } - - const client = await self.clients.get(clientId) - - if (!client) { - return - } - - const allClients = await self.clients.matchAll({ - type: 'window', - }) - - switch (event.data) { - case 'KEEPALIVE_REQUEST': { - sendToClient(client, { - type: 'KEEPALIVE_RESPONSE', - }) - break - } - - case 'INTEGRITY_CHECK_REQUEST': { - sendToClient(client, { - type: 'INTEGRITY_CHECK_RESPONSE', - payload: INTEGRITY_CHECKSUM, - }) - break - } - - case 'MOCK_ACTIVATE': { - activeClientIds.add(clientId) - - sendToClient(client, { - type: 'MOCKING_ENABLED', - payload: true, - }) - break - } - - case 'MOCK_DEACTIVATE': { - activeClientIds.delete(clientId) - break - } - - case 'CLIENT_CLOSED': { - activeClientIds.delete(clientId) - - const remainingClients = allClients.filter((client) => { - return client.id !== clientId - }) - - // Unregister itself when there are no more clients - if (remainingClients.length === 0) { - self.registration.unregister() - } - - break - } - } -}) - -self.addEventListener('fetch', function (event) { - const { request } = event - const accept = request.headers.get('accept') || '' - - // Bypass server-sent events. - if (accept.includes('text/event-stream')) { - return - } - - // Bypass navigation requests. - if (request.mode === 'navigate') { - return - } - - // Opening the DevTools triggers the "only-if-cached" request - // that cannot be handled by the worker. Bypass such requests. - if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { - return - } - - // Bypass all requests when there are no active clients. - // Prevents the self-unregistered worked from handling requests - // after it's been deleted (still remains active until the next reload). - if (activeClientIds.size === 0) { - return - } - - // Generate unique request ID. - const requestId = Math.random().toString(16).slice(2) - - event.respondWith( - handleRequest(event, requestId).catch((error) => { - if (error.name === 'NetworkError') { - console.warn( - '[MSW] Successfully emulated a network error for the "%s %s" request.', - request.method, - request.url, - ) - return - } - - // At this point, any exception indicates an issue with the original request/response. - console.error( - `\ -[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`, - request.method, - request.url, - `${error.name}: ${error.message}`, - ) - }), - ) -}) - -async function handleRequest(event, requestId) { - const client = await resolveMainClient(event) - const response = await getResponse(event, client, requestId) - - // Send back the response clone for the "response:*" life-cycle events. - // Ensure MSW is active and ready to handle the message, otherwise - // this message will pend indefinitely. - if (client && activeClientIds.has(client.id)) { - ;(async function () { - const clonedResponse = response.clone() - sendToClient(client, { - type: 'RESPONSE', - payload: { - requestId, - type: clonedResponse.type, - ok: clonedResponse.ok, - status: clonedResponse.status, - statusText: clonedResponse.statusText, - body: - clonedResponse.body === null ? null : await clonedResponse.text(), - headers: Object.fromEntries(clonedResponse.headers.entries()), - redirected: clonedResponse.redirected, - }, - }) - })() - } - - return response -} - -// Resolve the main client for the given event. -// Client that issues a request doesn't necessarily equal the client -// that registered the worker. It's with the latter the worker should -// communicate with during the response resolving phase. -async function resolveMainClient(event) { - const client = await self.clients.get(event.clientId) - - if (client.frameType === 'top-level') { - return client - } - - const allClients = await self.clients.matchAll({ - type: 'window', - }) - - return allClients - .filter((client) => { - // Get only those clients that are currently visible. - return client.visibilityState === 'visible' - }) - .find((client) => { - // Find the client ID that's recorded in the - // set of clients that have registered the worker. - return activeClientIds.has(client.id) - }) -} - -async function getResponse(event, client, requestId) { - const { request } = event - const clonedRequest = request.clone() - - function passthrough() { - // Clone the request because it might've been already used - // (i.e. its body has been read and sent to the client). - const headers = Object.fromEntries(clonedRequest.headers.entries()) - - // Remove MSW-specific request headers so the bypassed requests - // comply with the server's CORS preflight check. - // Operate with the headers as an object because request "Headers" - // are immutable. - delete headers['x-msw-bypass'] - - return fetch(clonedRequest, { headers }) - } - - // Bypass mocking when the client is not active. - if (!client) { - return passthrough() - } - - // Bypass initial page load requests (i.e. static assets). - // The absence of the immediate/parent client in the map of the active clients - // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet - // and is not ready to handle requests. - if (!activeClientIds.has(client.id)) { - return passthrough() - } - - // Bypass requests with the explicit bypass header. - // Such requests can be issued by "ctx.fetch()". - if (request.headers.get('x-msw-bypass') === 'true') { - return passthrough() - } - - // Notify the client that a request has been intercepted. - const clientMessage = await sendToClient(client, { - type: 'REQUEST', - payload: { - id: requestId, - url: request.url, - method: request.method, - headers: Object.fromEntries(request.headers.entries()), - cache: request.cache, - mode: request.mode, - credentials: request.credentials, - destination: request.destination, - integrity: request.integrity, - redirect: request.redirect, - referrer: request.referrer, - referrerPolicy: request.referrerPolicy, - body: await request.text(), - bodyUsed: request.bodyUsed, - keepalive: request.keepalive, - }, - }) - - switch (clientMessage.type) { - case 'MOCK_RESPONSE': { - return respondWithMock(clientMessage.data) - } - - case 'MOCK_NOT_FOUND': { - return passthrough() - } - - case 'NETWORK_ERROR': { - const { name, message } = clientMessage.data - const networkError = new Error(message) - networkError.name = name - - // Rejecting a "respondWith" promise emulates a network error. - throw networkError - } - } - - return passthrough() -} - -function sendToClient(client, message) { - return new Promise((resolve, reject) => { - const channel = new MessageChannel() - - channel.port1.onmessage = (event) => { - if (event.data && event.data.error) { - return reject(event.data.error) - } - - resolve(event.data) - } - - client.postMessage(message, [channel.port2]) - }) -} - -function sleep(timeMs) { - return new Promise((resolve) => { - setTimeout(resolve, timeMs) - }) -} - -async function respondWithMock(response) { - await sleep(response.delay) - return new Response(response.body, response) -} diff --git a/.storybook/preview.js b/.storybook/preview.js index 3891e444ac..e4967ae880 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -54,5 +54,13 @@ if (typeof global.process === 'undefined') { // Start the mocking when each story is loaded. // Repetitive calls to the `.start()` method do not register a new worker, // but check whether there's an existing once, reusing it, if so. - worker.start(); + + const pathname = document.location.pathname.slice(0, document.location.pathname.lastIndexOf('/')); + worker.start({ + serviceWorker: { + // Points to the custom location of the Service Worker file. + url: `${pathname}/mockServiceWorker.js`, + scope: '/', + }, + }); } diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json index bcedbed8cb..f2da7d3b3e 100644 --- a/.storybook/tsconfig.json +++ b/.storybook/tsconfig.json @@ -1,14 +1,10 @@ { - "extends": "../tsconfig.json", - "compilerOptions": { - "types": [ - "node" - ], - "allowSyntheticDefaultImports": true - }, - "exclude": ["../node_modules/**/*", "../dist/**/*", "../packages/**/*.spec.ts", "../stories/**/*.spec.ts"], - "include": ["../packages/**/*", "../stories/**/*", "./msw/**/*"], - "files": [ - "./typings.d.ts" - ] + "extends": "../tsconfig.json", + "compilerOptions": { + "types": ["node"], + "allowSyntheticDefaultImports": true + }, + "exclude": ["../packages/**/*.spec.ts", "../stories/**/*.spec.ts"], + "include": ["../packages/**/*", "../stories/**/*", "./msw/**/*"], + "files": ["./typings.d.ts"] } diff --git a/Jenkinsfile b/Jenkinsfile index 265748ea57..cff3d52f28 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -55,7 +55,6 @@ node(label: CI.getSelectedNode(script:this)) { if (isPR || isRc || isMaster) { loggableStage('Deploy') { echo "deploying ${branchName}" - bat "npm run compodoc" bat "npm run build-storybook" bat "npm run build-compodoc" powershell "Remove-Item \\\\RBX1-SH1-TECH\\lucca-front\\${branchName}\\storybook -Recurse" diff --git a/angular.json b/angular.json index 90dc98e9e6..b768d2a415 100644 --- a/angular.json +++ b/angular.json @@ -3,9 +3,7 @@ "version": 1, "cli": { "packageManager": "npm", - "schematicCollections": [ - "@angular-eslint/schematics" - ], + "schematicCollections": ["@angular-eslint/schematics"], "analytics": false }, "newProjectRoot": "packages/ng", @@ -17,8 +15,8 @@ "build": { "builder": "@angular-devkit/build-angular:ng-packagr", "options": { - "project": "packages/ng/ng-package.json", - "tsConfig": "packages/ng/tsconfig.lib.prod.json" + "project": "packages/ng/ng-package.json", + "tsConfig": "packages/ng/tsconfig.lib.prod.json" } }, "lint": { @@ -31,14 +29,12 @@ "builder": "@storybook/angular:start-storybook", "options": { "browserTarget": "ng:build", - "compodoc": false, + "compodoc": true, + "compodocArgs": ["-p", "./tsconfig.compodoc-json.json", "-e", "json", "-d", ".storybook"], "port": 6006, "styles": [".storybook/styles.scss"], "stylePreprocessorOptions": { - "includePaths": [ - "packages/ng/styles", - "node_modules" - ] + "includePaths": ["packages/ng/styles", "node_modules"] } } }, @@ -46,13 +42,11 @@ "builder": "@storybook/angular:build-storybook", "options": { "browserTarget": "ng:build", - "compodoc": false, + "compodoc": true, + "compodocArgs": ["-p", "./tsconfig.compodoc-json.json", "-e", "json", "-d", ".storybook"], "styles": [".storybook/styles.scss"], "stylePreprocessorOptions": { - "includePaths": [ - "packages/ng/styles", - "node_modules" - ] + "includePaths": ["packages/ng/styles", "node_modules"] } } } diff --git a/package.json b/package.json index b1885ea7fa..ad491617c3 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "start": "ng run ng:storybook", "jenkins-test": "jest --no-cache --runInBand", "test": "jest --maxWorkers=4 --isolatedModules=true --detectOpenHandles --watchAll", - "compodoc": "compodoc -p ./tsconfig.compodoc-json.json -e json -d .storybook", "build-compodoc": "compodoc -p ./tsconfig.compodoc-html.json -d compodoc-static", "build-storybook": "ng run ng:build-storybook", "lint": "ng lint", @@ -109,6 +108,6 @@ "node": "18.12.1" }, "msw": { - "workerDirectory": ".storybook/msw" + "workerDirectory": ".storybook/public" } } diff --git a/stories/documentation/actions/button/button-basic.stories.ts b/stories/documentation/actions/button/button-basic.stories.ts index 2802bfb58d..662f633857 100644 --- a/stories/documentation/actions/button/button-basic.stories.ts +++ b/stories/documentation/actions/button/button-basic.stories.ts @@ -52,7 +52,7 @@ export default { } as Meta; function getTemplate(args: ButtonBasicStory): string { - const classes = [args.mod, args.state, args.palette, args.size].filter(Boolean).join(' '); + const classes = [args.style, args.state, args.palette, args.size].filter(Boolean).join(' '); const type = args.type !== '' ? 'type=' + args.type : ''; const attributes = args.disabled ? `disabled` : ''; const block = args.block ? `mod-block` : ''; @@ -76,7 +76,7 @@ const Template: Story = (args: ButtonBasicStory) => ({ .button-group { margin-top: var(--spacings-standard) }`, - args.mod === 'mod-text mod-invert' ? ':host { background-color: #333333; margin: -15px -15px; padding: 15px 15px; }' : '', + args.style === 'mod-text mod-invert' ? ':host { background-color: #333333; margin: -15px -15px; padding: 15px 15px; }' : '', ], }); diff --git a/stories/documentation/actions/button/button-basic2.stories.ts b/stories/documentation/actions/button/button-basic2.stories.ts index 5ab7b8784c..d54e0815fb 100644 --- a/stories/documentation/actions/button/button-basic2.stories.ts +++ b/stories/documentation/actions/button/button-basic2.stories.ts @@ -39,11 +39,10 @@ export default { function getTemplate(args: ButtonBasic2Story): string { const classes = [args.state, args.palette].filter(Boolean).join(' '); const type = args.type !== '' ? 'type=' + args.type : ''; - const attributes = args.disabled ? `disabled` : ''; const block = args.block ? `mod-block` : ''; return ` - + `; } @@ -61,9 +60,8 @@ const Template: Story = (args: ButtonBasic2Story) => ({ .button-group { margin-top: var(--spacings-standard) }`, - args.mod === 'mod-text mod-invert' ? ':host { background-color: #333333; margin: -15px -15px; padding: 15px 15px; }' : '', ], }); export const Basic2Button = Template.bind({}); -Basic2Button.args = {state: '', palette: '', block: false, type: 'button' }; +Basic2Button.args = { state: '', palette: '', block: false, type: 'button' };