Merge branch 'main' into perf/dashboard-test

.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",

.gitignore

@@ -30,3 +30,12 @@ yarn-error.log*
 
 **/traces
 **/node_modules
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.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",
@@ -87,11 +97,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.2.1",
     "prettier": "^2.7.1",
+    "storybook": "^7.5.3",
     "vitest": "^0.34.6"
-  },
-  "packageManager": "[email protected]"
+  }
 }

src/App.scss

@@ -9,37 +9,6 @@
     > .sidebar {
         height: 100vh;
         background-color: white;
-        padding: 10px;
-
-       .sidebar-logo {
-            position: relative;
-            margin: 20px 50px 26px 0;
-            width: 119px;
-            font-size: 30px;
-            border-top: 6px solid gray;
-            border-bottom: 8px solid gray;
-            padding-bottom: 0;
-            line-height: 25px;
-        }
-        .sidebar-logo::before {
-            height: 10px;
-            width: 10px;
-            border-radius: 5px;
-            position: absolute;
-            background: gray;
-            top: 28px;
-            right: 24px;
-            content: ' ' 
-        }
-        .sidebar-logo::after {
-            height: 10px;
-            width: 10px;
-            border-radius: 5px;
-            position: absolute;
-            background: gray;
-            top: 28px;
-            left: 17px;
-            content: ' ' 
-        }        
+        padding: 10px;     
     }
 }

src/App.tsx

@@ -22,6 +22,8 @@ import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 
 import RoutesList, { PAGES } from './routes'
+import MainHeader from './pages/components/header/Header'
+import LayoutContext from './layout/LayoutContext'
 const { Content } = Layout
 
 const StyledLayout = styled(Layout)`
@@ -107,14 +109,17 @@ const App = () => {
           <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
             <ConfigProvider direction="rtl" locale={heIL}>
               <StyledLayout className="main">
-                <SideBar />
-                <Layout>
-                  <StyledContent>
-                    <StyledBody>
-                      <RoutesList />
-                    </StyledBody>
-                  </StyledContent>
-                </Layout>
+                <LayoutContext>
+                  <SideBar />
+                  <Layout>
+                    <MainHeader />
+                    <StyledContent>
+                      <StyledBody>
+                        <RoutesList />
+                      </StyledBody>
+                    </StyledContent>
+                  </Layout>
+                </LayoutContext>
               </StyledLayout>
             </ConfigProvider>
           </LocalizationProvider>

src/layout/LayoutContext.tsx

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren, createContext, useState } from 'react'
+
+export interface LayoutContextInterface {
+  setDrawerOpen: (isOpen: boolean) => void
+  drawerOpen: boolean
+}
+export const LayoutCtx = createContext({} as LayoutContextInterface)
+const LayoutContext: FC<PropsWithChildren> = ({ children }) => {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  return <LayoutCtx.Provider value={{ drawerOpen, setDrawerOpen }}>{children}</LayoutCtx.Provider>
+}
+export default LayoutContext

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)

src/pages/components/header/Header.tsx

@@ -0,0 +1,16 @@
+import { Layout } from 'antd'
+import { MenuOutlined } from '@ant-design/icons'
+import { useContext } from 'react'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
+
+const { Header } = Layout
+
+const MainHeader = () => {
+  const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+  return (
+    <Header style={{ background: 'white' }} className="hideOnDesktop">
+      <MenuOutlined onClick={() => setDrawerOpen(true)} />
+    </Header>
+  )
+}
+export default MainHeader

src/pages/components/header/sidebar/SideBar.tsx

@@ -1,24 +1,33 @@
-import { useState } from 'react'
 import Menu from './menu/Menu'
-import { MenuOutlined } from '@ant-design/icons'
 import './sidebar.scss'
-import cn from 'classnames'
+import { Drawer } from 'antd'
+import { useContext } from 'react'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 
-const SidebarToggle = ({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) => (
-  <div className="sidebar-menu-toggle" onClick={() => setOpen(!open)}>
-    <MenuOutlined />
+const Logo = () => (
+  <div style={{ overflow: 'hidden' }}>
+    <h1 className={'sidebar-logo'}>דאטאבוס</h1>
   </div>
 )
 
-const Logo = () => <h1 className={'sidebar-logo'}>דאטאבוס</h1>
-
 export default function SideBar() {
-  const [open, setOpen] = useState(false)
+  const { drawerOpen, setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+
   return (
-    <aside className={cn('sidebar', { open })}>
-      <Logo />
-      <SidebarToggle open={open} setOpen={setOpen} />
-      <Menu />
-    </aside>
+    <>
+      <Drawer
+        placement="right"
+        mask
+        width={280}
+        onClose={() => setDrawerOpen(false)}
+        open={drawerOpen}
+        className="hideOnDesktop">
+        <Menu />
+      </Drawer>
+      <aside className={'sidebar hideOnMobile'}>
+        <Logo />
+        <Menu />
+      </aside>
+    </>
   )
 }