From 3358d47dde3d4e32841a0e700a7ce9e102b94bf2 Mon Sep 17 00:00:00 2001 From: Rita Lopes Date: Mon, 24 Jul 2023 17:33:22 +0100 Subject: [PATCH] Renamed files and improved responsivity --- package-lock.json | 105 +++++++++++++++--- package.json | 5 +- .../layout/hexagons/BlueExampleHexagon.svelte | 14 --- .../layout/hexagons/EventHexagon.stories.ts | 35 ++++++ .../layout/hexagons/EventHexagon.svelte} | 20 ++-- src/lib/layout/hexagons/HexagonGrid.svelte | 5 +- .../layout/hexagons/RedExampleHexagon.svelte | 14 --- .../{dateInterval.ts => DateInterval.ts} | 0 src/model/{event.ts => Event.ts} | 2 +- src/routes/+page.svelte | 29 ----- .../previews}/bruno-rosendo.png | Bin 11 files changed, 141 insertions(+), 88 deletions(-) delete mode 100644 src/lib/layout/hexagons/BlueExampleHexagon.svelte create mode 100644 src/lib/layout/hexagons/EventHexagon.stories.ts rename src/{components/hexagons/HexagonEvent.svelte => lib/layout/hexagons/EventHexagon.svelte} (54%) delete mode 100644 src/lib/layout/hexagons/RedExampleHexagon.svelte rename src/model/{dateInterval.ts => DateInterval.ts} (100%) rename src/model/{event.ts => Event.ts} (81%) rename static/{members => images/previews}/bruno-rosendo.png (100%) diff --git a/package-lock.json b/package-lock.json index c42dd39c..32548b9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "website-frontend", "version": "0.0.1", + "dependencies": { + "svelte-select": "^5.6.1" + }, "devDependencies": { "@rgossiaux/svelte-headlessui": "^2.0.0", "@storybook/addon-a11y": "^7.0.26", @@ -51,6 +54,12 @@ "vitest": "^0.31.4" } }, + "@rgossiaux/svelte-headlessui": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-2.0.0.tgz", + "integrity": "sha512-ksh245HqMM8yqkzd/OyAK2FCHZYOSA3ldLIHab7C9S60FmifqT24JFVgi8tZpsDEMk3plbfQvfah93n5IEi8sg==", + "extraneous": true + }, "node_modules/@adobe/css-tools": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz", @@ -2578,6 +2587,19 @@ "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==", "dev": true }, + "node_modules/@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz", + "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==", + "dependencies": { + "@floating-ui/core": "^1.3.1" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -2724,15 +2746,6 @@ "engines": { "node": ">=8" } - }, - "node_modules/@rgossiaux/svelte-headlessui": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-2.0.0.tgz", - "integrity": "sha512-ksh245HqMM8yqkzd/OyAK2FCHZYOSA3ldLIHab7C9S60FmifqT24JFVgi8tZpsDEMk3plbfQvfah93n5IEi8sg==", - "dev": true, - "peerDependencies": { - "svelte": "^3.47.0" - } }, "node_modules/@istanbuljs/schema": { "version": "0.1.3", @@ -3866,6 +3879,15 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@rgossiaux/svelte-headlessui": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-2.0.0.tgz", + "integrity": "sha512-ksh245HqMM8yqkzd/OyAK2FCHZYOSA3ldLIHab7C9S60FmifqT24JFVgi8tZpsDEMk3plbfQvfah93n5IEi8sg==", + "dev": true, + "peerDependencies": { + "svelte": "^3.47.0" + } + }, "node_modules/@sideway/address": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", @@ -16572,13 +16594,6 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } - }, - "@rgossiaux/svelte-headlessui": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-2.0.0.tgz", - "integrity": "sha512-ksh245HqMM8yqkzd/OyAK2FCHZYOSA3ldLIHab7C9S60FmifqT24JFVgi8tZpsDEMk3plbfQvfah93n5IEi8sg==", - "dev": true, - "requires": {} }, "node_modules/optionator": { "version": "0.9.1", @@ -18939,6 +18954,15 @@ } } }, + "node_modules/svelte-floating-ui": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz", + "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==", + "dependencies": { + "@floating-ui/core": "^1.1.0", + "@floating-ui/dom": "^1.1.0" + } + }, "node_modules/svelte-hmr": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz", @@ -19020,6 +19044,15 @@ } } }, + "node_modules/svelte-select": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz", + "integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==", + "dependencies": { + "@floating-ui/dom": "^1.2.1", + "svelte-floating-ui": "1.2.8" + } + }, "node_modules/sveltedoc-parser": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/sveltedoc-parser/-/sveltedoc-parser-4.2.1.tgz", @@ -22350,6 +22383,19 @@ "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==", "dev": true }, + "@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" + }, + "@floating-ui/dom": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz", + "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==", + "requires": { + "@floating-ui/core": "^1.3.1" + } + }, "@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -23378,6 +23424,13 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "@rgossiaux/svelte-headlessui": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-2.0.0.tgz", + "integrity": "sha512-ksh245HqMM8yqkzd/OyAK2FCHZYOSA3ldLIHab7C9S60FmifqT24JFVgi8tZpsDEMk3plbfQvfah93n5IEi8sg==", + "dev": true, + "requires": {} + }, "@sideway/address": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", @@ -34485,6 +34538,15 @@ } } }, + "svelte-floating-ui": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz", + "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==", + "requires": { + "@floating-ui/core": "^1.1.0", + "@floating-ui/dom": "^1.1.0" + } + }, "svelte-hmr": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz", @@ -34512,6 +34574,15 @@ "strip-indent": "^3.0.0" } }, + "svelte-select": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz", + "integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==", + "requires": { + "@floating-ui/dom": "^1.2.1", + "svelte-floating-ui": "1.2.8" + } + }, "sveltedoc-parser": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/sveltedoc-parser/-/sveltedoc-parser-4.2.1.tgz", @@ -35722,4 +35793,4 @@ "dev": true } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index b5037251..be8f53b0 100644 --- a/package.json +++ b/package.json @@ -65,5 +65,8 @@ "vite": "^4.0.0", "vitest": "^0.31.4" }, - "type": "module" + "type": "module", + "dependencies": { + "svelte-select": "^5.6.1" + } } diff --git a/src/lib/layout/hexagons/BlueExampleHexagon.svelte b/src/lib/layout/hexagons/BlueExampleHexagon.svelte deleted file mode 100644 index 19a10946..00000000 --- a/src/lib/layout/hexagons/BlueExampleHexagon.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - -
- {data} -
- diff --git a/src/lib/layout/hexagons/EventHexagon.stories.ts b/src/lib/layout/hexagons/EventHexagon.stories.ts new file mode 100644 index 00000000..a52141a5 --- /dev/null +++ b/src/lib/layout/hexagons/EventHexagon.stories.ts @@ -0,0 +1,35 @@ +import { userEvent, within } from '@storybook/testing-library'; +import { expect } from '@storybook/jest'; +import EventHexagon from './EventHexagon.svelte'; + +export default { + title: 'Atoms/Hexagons/EventHexagon', + component: EventHexagon, + parameters: { + layout: 'centered', + controls: { exclude: ['event'] } + } +}; + +export const EventPageHexagon = { + args: { + event: { + title: 'Jantar de Curso', + description: 'Muito fixe', + teamMemberIds: [], + registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/', + dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2023-12-05') }, + location: 'Cervejaria Diu', + thumbnailPath: 'images/previews/bruno-rosendo.png' + } + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Hover over hexagon', async () => { + await userEvent.hover(await canvas.findByTestId('event-hexagon')); + const role = canvas.queryByText('Co-Gestor de Projetos'); + await expect(role).toBeTruthy(); + }); + } +}; diff --git a/src/components/hexagons/HexagonEvent.svelte b/src/lib/layout/hexagons/EventHexagon.svelte similarity index 54% rename from src/components/hexagons/HexagonEvent.svelte rename to src/lib/layout/hexagons/EventHexagon.svelte index a891e656..a90c5372 100644 --- a/src/components/hexagons/HexagonEvent.svelte +++ b/src/lib/layout/hexagons/EventHexagon.svelte @@ -1,14 +1,17 @@ -
+

{#if !event.dateInterval.endDate} {event.dateInterval.startDate @@ -17,7 +20,7 @@ month: 'long', year: 'numeric' }) - .replaceAll(' de ', ' ')} + .replaceAll(/(de\s)|(\.)/gi, '')} {:else} {event.dateInterval.startDate .toLocaleString('pt', { @@ -25,7 +28,7 @@ month: 'short', year: '2-digit' }) - .replaceAll(' de ', ' ') + + .replaceAll(/(de\s)|(\.)/gi, '') + ' - ' + event.dateInterval.endDate .toLocaleDateString('pt', { @@ -33,18 +36,17 @@ month: 'short', year: '2-digit' }) - .replaceAll(' de ', ' ')} + .replaceAll(/(de\s)|(\.)/gi, '')} {/if}

-

{event.title}

{event.location}

diff --git a/src/lib/layout/hexagons/HexagonGrid.svelte b/src/lib/layout/hexagons/HexagonGrid.svelte index 6c745dbe..cf36425e 100644 --- a/src/lib/layout/hexagons/HexagonGrid.svelte +++ b/src/lib/layout/hexagons/HexagonGrid.svelte @@ -1,6 +1,5 @@ - - -
- {data} -
- diff --git a/src/model/dateInterval.ts b/src/model/DateInterval.ts similarity index 100% rename from src/model/dateInterval.ts rename to src/model/DateInterval.ts diff --git a/src/model/event.ts b/src/model/Event.ts similarity index 81% rename from src/model/event.ts rename to src/model/Event.ts index 0cb42ef9..839734c7 100644 --- a/src/model/event.ts +++ b/src/model/Event.ts @@ -1,4 +1,4 @@ -import type { DateInterval } from './dateInterval'; +import type { DateInterval } from './DateInterval'; export type Event = { title: string; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 54867009..e69de29b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,29 +0,0 @@ - - -
- - - -
diff --git a/static/members/bruno-rosendo.png b/static/images/previews/bruno-rosendo.png similarity index 100% rename from static/members/bruno-rosendo.png rename to static/images/previews/bruno-rosendo.png