@xetwa/design-system 1.0.2

package/src/components/Navigation/WorldProgressMap/WorldProgressMap.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WorldProgressMap } from './WorldProgressMap';
+import type { WorldMapStation } from './WorldProgressMap';
+
+const meta = {
+  title: 'Components/Navigation/WorldProgressMap',
+  component: WorldProgressMap,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'O **WorldProgressMap** é um mapa interativo premium com rolagem horizontal e vertical. Apresenta continentes desenhados geograficamente, rotas pontilhadas conectando países francófonos em várias partes do mundo, bandeiras e uma interface de viagem imersiva.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    activeStationId: {
+      control: { type: 'number' },
+      description: 'O ID da paragem atualmente ativa (Estás Aqui).',
+    },
+    onStationPress: { action: 'stationPressed' },
+    onContinuePress: { action: 'continuePressed' },
+    onBackPress: { action: 'backPressed' },
+    onFlightPress: { action: 'flightPressed' },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// Geographic coordinate reference points (1200x800 canvas)
+// Americas: X: 150-350, Y: 100-700
+// Europe: X: 450-650, Y: 150-350
+// Africa: X: 450-750, Y: 400-700
+// Asia/Oceania: X: 800-1100, Y: 200-700
+
+const stations: WorldMapStation[] = [
+  {
+    id: 1,
+    label: 'Montréal',
+    levelCode: 'A1',
+    countryCode: 'CA', // Canada
+    status: 'visited',
+    x: 200,
+    y: 200,
+  },
+  {
+    id: 2,
+    label: 'Port-au-Prince',
+    levelCode: 'A1',
+    countryCode: 'HT', // Haiti
+    status: 'visited',
+    x: 250,
+    y: 380,
+  },
+  {
+    id: 3,
+    label: 'Paris',
+    levelCode: 'A2',
+    countryCode: 'FR', // France
+    status: 'visited',
+    x: 500,
+    y: 200,
+  },
+  {
+    id: 4,
+    label: 'Bruxelles',
+    levelCode: 'A2',
+    countryCode: 'BE', // Belgium
+    status: 'current',
+    x: 550,
+    y: 150,
+  },
+  {
+    id: 5,
+    label: 'Genève',
+    levelCode: 'B1',
+    countryCode: 'CH', // Switzerland
+    status: 'locked',
+    x: 590,
+    y: 220,
+  },
+  {
+    id: 6,
+    label: 'Dakar',
+    levelCode: 'B1',
+    countryCode: 'SN', // Senegal
+    status: 'locked',
+    x: 440,
+    y: 420,
+  },
+  {
+    id: 7,
+    label: 'Abidjan',
+    levelCode: 'B2',
+    countryCode: 'CI', // Ivory Coast
+    status: 'locked',
+    x: 480,
+    y: 520,
+  },
+  {
+    id: 8,
+    label: 'Yaoundé',
+    levelCode: 'B2',
+    countryCode: 'CM', // Cameroon
+    status: 'locked',
+    x: 560,
+    y: 550,
+  },
+  {
+    id: 9,
+    label: 'Antananarivo',
+    levelCode: 'C1',
+    countryCode: 'MG', // Madagascar
+    status: 'locked',
+    x: 680,
+    y: 650,
+  },
+  {
+    id: 10,
+    label: 'Port Vila',
+    levelCode: 'C1',
+    countryCode: 'VU', // Vanuatu
+    status: 'locked',
+    x: 950,
+    y: 550,
+  },
+];
+
+export const DefaultMap: Story = {
+  args: {
+    title: 'A ROTA DA FRANCOFONIA',
+    subtitle: '10 destinos · Viagem Global',
+    stations,
+    activeStationId: 4,
+    height: 700, // Custom viewport height constraint for testing
+  },
+  render: (args: any) => (
+    <div style={{ width: '100%', height: '700px', maxWidth: '600px', margin: '0 auto', border: '1px solid #ddd' }}>
+      <WorldProgressMap {...args} />
+    </div>
+  ),
+};
+
+// Start of the journey
+export const MapStart: Story = {
+  args: {
+    ...DefaultMap.args,
+    activeStationId: 1,
+    stations: stations.map((s) =>
+      s.id === 1 ? { ...s, status: 'current' } : { ...s, status: 'locked' }
+    ),
+  },
+  render: DefaultMap.render,
+};
+
+// End of the journey
+export const MapEnd: Story = {
+  args: {
+    ...DefaultMap.args,
+    activeStationId: 10,
+    stations: stations.map((s) =>
+      s.id === 10 ? { ...s, status: 'current' } : { ...s, status: 'visited' }
+    ),
+  },
+  render: DefaultMap.render,
+};