feat: add storybook

.eslintrc.json

@@ -12,15 +12,15 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "@typescript-eslint/no-non-null-assertion": "off",

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,23 @@
+import type { Preview } from '@storybook/react'
+import React from 'react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ direction: 'rtl' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default preview

package.json

@@ -55,7 +55,9 @@
     "test:unit:ci": "vitest run",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
-    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "browserslist": {
     "production": [
@@ -71,6 +73,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.37.1",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -88,10 +98,12 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "jsdom": "^22.1.0",
     "openapi-typescript-codegen": "^0.23.0",
     "playwright-advanced-har": "^1.0.2",
     "prettier": "^2.7.1",
+    "storybook": "^7.5.3",
     "vitest": "^0.34.6"
   }
 }

src/pages/components/MapLayers/BusToolTip.scss

@@ -2,32 +2,32 @@
   width: 350px;
   direction: rtl;
   text-align: right;
+}
 
-  .bus-tooltip {
-    > ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
+.bus-tooltip {
+  >ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
-      > li {
-        font-weight: bold;
+    >li {
+      font-weight: bold;
 
-        > span {
-          font-weight: normal;
-        }
+      >span {
+        font-weight: normal;
       }
     }
+  }
 
-    > .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
+  >.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
 
-      img {
-        width: 50px;
-        height: 50px;
-      }
+    img {
+      width: 50px;
+      height: 50px;
     }
   }
 }

src/pages/components/MapLayers/BusToolTip.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { BusToolTip, BusToolTipProps } from './BusToolTip'
+
+const meta = {
+  title: 'Components/MapLayers/BusToolTip',
+  component: BusToolTip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['map', 'tooltip', 'autodocs'],
+} satisfies Meta<typeof BusToolTip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultArgs: BusToolTipProps = {
+  position: {
+    loc: [31.799982, 34.786926],
+    color: 22,
+    operator: 3,
+    bearing: 106,
+    recorded_at_time: 1698809440000,
+    point: {
+      id: 2838516282,
+      siri_snapshot_id: 919509,
+      siri_ride_stop_id: 1370461085,
+      recorded_at_time: '2023-11-01T03:30:40+00:00',
+      lon: 34.786926,
+      lat: 31.799982,
+      bearing: 106,
+      velocity: 22,
+      distance_from_journey_start: 636,
+      distance_from_siri_ride_stop_meters: 278,
+      siri_snapshot__snapshot_id: '2023/11/01/03/30',
+      siri_route__id: 973,
+      siri_route__line_ref: 2974,
+      siri_route__operator_ref: 3,
+      siri_ride__id: 52703935,
+      siri_ride__journey_ref: '2023-11-01-56650774',
+      siri_ride__scheduled_start_time: '2023-11-01T03:30:00+00:00',
+      siri_ride__vehicle_ref: '23321002',
+      siri_ride__first_vehicle_location_id: 2838509585,
+      siri_ride__last_vehicle_location_id: 2838555351,
+      siri_ride__duration_minutes: 27,
+      siri_ride__gtfs_ride_id: 57365030,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
+  },
+  icon: '/bus-logos/3.svg',
+}
+
+export const Default: Story = {
+  args: defaultArgs,
+}

src/pages/components/MapLayers/BusToolTip.tsx

@@ -10,7 +10,9 @@ import { TEXTS } from 'src/resources/texts'
 import { Spin } from 'antd'
 import cn from 'classnames'
 
-export function BusToolTip({ position, icon }: { position: Point; icon: string }) {
+export type BusToolTipProps = { position: Point; icon: string }
+
+export function BusToolTip({ position, icon }: BusToolTipProps) {
   const [siriRide, setSiriRide] = useState<SiriRideWithRelatedPydanticModel | undefined>()
   const [isLoading, setIsLoading] = useState(false)
   const [showJson, setShowJson] = useState(false)