Feature/app components (#564)

package.json

@@ -10,10 +10,10 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@storybook/source-loader": "^6.4.9",
-    "@types/jest": "^29.5.1",
+    "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
-    "babel-jest": "^29.5.0",
+    "babel-jest": "^29.7.0",
     "chromatic": "^6.2.3",
     "css-loader": "^6.5.1",
     "doctoc": "^2.1.0",
@@ -24,8 +24,8 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lerna": "^6.6.1",
     "lint-staged": "^13.1.2",
     "patch-package": "^6.5.1",

packages/ui/__stories__/AppHeader.stories.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+
+import { Button } from '../src/Button'
+import { AppHeader as AppHeaderComponent } from '../src/AppHeader'
+
+export default {
+  title: 'App/Header',
+  component: AppHeaderComponent,
+}
+
+export const Default = () => {
+  const [cluster, setCluster] = useState<string | null>(null)
+
+  return (
+    <AppHeaderComponent
+      name="Management Center"
+      logoProps={{
+        LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+      }}
+      clusterSelectProps={{
+        clusterName: cluster,
+        clusterNames: ['Cluster-1', 'Cluster-2'],
+        clusterVersions: { 'Cluster-1': '5.5', 'Cluster-2': '6.0', 'Cluster-3': '3.1.2' },
+        onChange: setCluster,
+      }}
+      menuContent={() => (
+        <>
+          <span>Item</span>
+        </>
+      )}
+    />
+  )
+}
+
+export const WithBadge = () => {
+  const [cluster, setCluster] = useState<string | null>(null)
+
+  return (
+    <AppHeaderComponent
+      name="Management Center"
+      clusterSelectProps={{
+        clusterName: cluster,
+        clusterNames: ['Cluster-1', 'Cluster-2'],
+        clusterVersions: { 'Cluster-1': '5.5', 'Cluster-2': '6.0', 'Cluster-3': '3.1.2' },
+        onChange: setCluster,
+      }}
+      menuContent={() => (
+        <>
+          <Button color="light" variant="text">
+            Item 1
+          </Button>
+        </>
+      )}
+      environment="production"
+      logoProps={{
+        LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+      }}
+    />
+  )
+}
+
+export const WithoutSelectCluster = () => (
+  <AppHeaderComponent
+    name="Management Center"
+    logoProps={{
+      LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+    }}
+    menuContent={() => (
+      <>
+        <Button color="light" variant="text">
+          Item 1
+        </Button>
+      </>
+    )}
+  />
+)
+
+export const DisabledSelectCluster = () => {
+  const [cluster, setCluster] = useState<string | null>(null)
+
+  return (
+    <AppHeaderComponent
+      name="Management Center"
+      clusterSelectProps={{
+        clusterNames: [],
+        clusterName: cluster,
+        onChange: setCluster,
+      }}
+      logoProps={{
+        LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+      }}
+      menuContent={() => (
+        <>
+          <Button color="light" variant="text">
+            Item 1
+          </Button>
+        </>
+      )}
+    />
+  )
+}
+
+export const WithoutMenu = () => {
+  const [cluster, setCluster] = useState<string | null>(null)
+
+  return (
+    <AppHeaderComponent
+      name="Management Center"
+      clusterSelectProps={{
+        clusterName: cluster,
+        clusterNames: ['Cluster-1', 'Cluster-2'],
+        clusterVersions: { 'Cluster-1': '5.5', 'Cluster-2': '6.0', 'Cluster-3': '3.1.2' },
+        onChange: setCluster,
+      }}
+      logoProps={{
+        LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+      }}
+    />
+  )
+}

packages/ui/__stories__/AppSidebar.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Story } from '@storybook/react'
+import { Disc, HardDrive, Wifi, Activity, Droplet, Airplay } from 'react-feather'
+
+import {
+  AppSidebar,
+  AppSidebarSection,
+  AppSidebarMenuItemCounter,
+  AppSidebarItem,
+  AppSidebarProps,
+  AppSidebarFavorites,
+} from '../src/AppSidebar'
+
+export default {
+  title: 'App/Sidebar',
+  component: AppSidebar,
+}
+
+const Template: Story<Partial<AppSidebarProps>> = (props) => (
+  <AppSidebar footer={<span>24/08/14 01:49 PM Ver. 5.5.0</span>} {...props}>
+    <AppSidebarFavorites>{({ items }) => items.map((item) => <AppSidebarItem key={item} id={item} title={item} />)}</AppSidebarFavorites>
+    <AppSidebarSection active id="maps" title="Maps wan replication" ariaLabel="maps" icon={Disc}>
+      <AppSidebarItem id="1" title="Test" active wrapper={({ children }) => <a href="/">{children}</a>} />
+      <AppSidebarItem title="Wan healthcheck replication" />
+      <AppSidebarItem title="Test 2" />
+    </AppSidebarSection>
+    <AppSidebarSection active={false} id="cluster" title="Cluster" ariaLabel="cluster" icon={HardDrive}>
+      <AppSidebarItem id="2" title="Cluster-1" adornment={<AppSidebarMenuItemCounter>13</AppSidebarMenuItemCounter>} />
+      <AppSidebarItem title="Cluster-2" adornment={<AppSidebarMenuItemCounter>3</AppSidebarMenuItemCounter>} />
+    </AppSidebarSection>
+    <AppSidebarSection active={false} id="members" title="Memebers" ariaLabel="memebers" icon={Wifi}>
+      <AppSidebarItem title="Cluster-1" adornment={<AppSidebarMenuItemCounter>13</AppSidebarMenuItemCounter>} />
+      <AppSidebarItem title="Cluster-2" adornment={<AppSidebarMenuItemCounter>3</AppSidebarMenuItemCounter>} />
+    </AppSidebarSection>
+    <AppSidebarSection active={false} id="storage" title="Storage" ariaLabel="storage" icon={Activity}>
+      <AppSidebarItem title="Cluster-1" adornment={<AppSidebarMenuItemCounter>13</AppSidebarMenuItemCounter>} />
+    </AppSidebarSection>
+    <AppSidebarSection title="TOOLS">
+      <AppSidebarItem title="SQL" icon={Airplay} iconAriaLabel="SQL" onClick={console.log} />
+      <AppSidebarItem title="Flow" color="authPrimary" icon={Droplet} iconAriaLabel="Flow" available={false} onClick={console.log} />
+    </AppSidebarSection>
+  </AppSidebar>
+)
+
+export const Default = () => <Template open />
+
+export const WithScroll = () => {
+  return (
+    <div style={{ height: 200, overflow: 'hidden' }}>
+      <Template open />
+    </div>
+  )
+}
+
+export const Collapsed = () => <Template open={false} />
+
+export const CollapsedWithScroll = () => {
+  return (
+    <div style={{ height: 200, overflow: 'hidden' }}>
+      <Template open={false} />
+    </div>
+  )
+}

packages/ui/__stories__/Button.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { Info, ChevronDown } from 'react-feather'
 import cn from 'classnames'
@@ -22,6 +22,10 @@ export default {
   },
 } as ComponentMeta<typeof Button>
 
+const DarkBackground = ({ children }: { children: ReactNode }) => (
+  <span style={{ display: 'inline-block', background: '#000', padding: 4 }}>{children}</span>
+)
+
 const Template: ComponentStory<typeof Button> = ({ className, ...args }) => {
   const props = {
     ...args,
@@ -68,6 +72,15 @@ const Template: ComponentStory<typeof Button> = ({ className, ...args }) => {
         <Button {...props} color="authSecondary" disabled size="medium" />
         <Button {...props} variant="outlined" color="authSecondary" size="medium" />
         <Button {...props} variant="text" color="authSecondary" size="medium" />
+        <DarkBackground>
+          <Button {...props} color="light" />
+        </DarkBackground>
+        <DarkBackground>
+          <Button {...props} variant="outlined" color="light" />
+        </DarkBackground>
+        <DarkBackground>
+          <Button {...props} variant="text" color="light" />
+        </DarkBackground>
       </div>
     </div>
   )
@@ -87,7 +100,7 @@ Focused.args = {
 
 export const Active = Template.bind({})
 Active.args = {
-  className: styles.active,
+  active: true,
 }
 
 export const Disabled = Template.bind({})

packages/ui/__stories__/Tooltip.stories.tsx

@@ -22,14 +22,21 @@ export default {
 } as Meta<TooltipProps>
 
 const Template: Story<TooltipProps> = (args) => (
-  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 320 }}>
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 380, height: 320 }}>
     <Tooltip {...args}>
       {(ref) => (
         <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
           This button has a tooltip
         </Button>
       )}
     </Tooltip>
+    <Tooltip color="dark" {...args}>
+      {(ref) => (
+        <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
+          This button has a tooltip
+        </Button>
+      )}
+    </Tooltip>
   </div>
 )
 

packages/ui/__tests__/AppHeader/AppHeader.test.tsx

@@ -0,0 +1,51 @@
+import React, { ComponentType } from 'react'
+import { act } from 'react-dom/test-utils'
+import { userEvent } from '@testing-library/user-event'
+import { screen, render } from '@testing-library/react'
+import { DataTestProp } from '@hazelcast/helpers'
+
+import { AppHeader } from '../../src/AppHeader'
+
+const LinkComponent: ComponentType<DataTestProp> = ({ children, 'data-test': dataTest }) => <div data-test={dataTest}>{children}</div>
+
+describe('AppHeader', () => {
+  it('renders basic version', () => {
+    render(<AppHeader name="Test App" logoProps={{ LinkComponent }} />)
+
+    expect(screen.queryByText('Test App')).toBeInTheDocument()
+    expect(screen.queryByTestId('logo-link')).toBeInTheDocument()
+    expect(screen.queryByTestId('environment-badge')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('select-cluster')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('app-header-menu-toggle')).not.toBeInTheDocument()
+  })
+
+  it('renders menu content', async () => {
+    render(<AppHeader name="Test App" logoProps={{ LinkComponent }} menuContent={() => <span>Menu content</span>} />)
+
+    expect(screen.queryByTestId('app-header-menu-toggle')).toBeInTheDocument()
+    expect(screen.queryByText('Menu content')).not.toBeInTheDocument()
+
+    await act(async () => {
+      await userEvent.click(screen.getByTestId('app-header-menu-toggle'))
+    })
+
+    expect(screen.queryByText('Menu content')).toBeInTheDocument()
+  })
+
+  it('renders select cluster', () => {
+    render(
+      <AppHeader
+        name="Test App"
+        logoProps={{ LinkComponent }}
+        clusterSelectProps={{
+          clusterName: 'Cluster-1',
+          clusterNames: ['Cluster-1', 'Cluster-2'],
+          clusterVersions: { 'Cluster-1': '5.5', 'Cluster-2': '6.0', 'Cluster-3': '3.1.2' },
+          onChange: jest.fn(),
+        }}
+      />,
+    )
+
+    expect(screen.queryByTestId('select-cluster')).toBeInTheDocument()
+  })
+})