feat(opentrons-ai-client): Header component with progressbar

opentrons-ai-client/src/assets/localization/en/protocol_generator.json

@@ -1,4 +1,5 @@
 {
+  "ai": "AI",
   "api": "API: An API level is 2.15",
   "application": "Application: Your protocol's name, describing what it does.",
   "commands": "Commands: List the protocol's steps, specifying quantities in microliters (uL) and giving exact source and destination locations.",
@@ -15,6 +16,7 @@
   "make_sure_your_prompt": "Write a prompt in a natural language for OpentronsAI to generate a protocol using the Opentrons Python Protocol API v2. The better the prompt, the better the quality of the protocol produced by OpentronsAI.",
   "modules_and_adapters": "Modules and adapters: Specify the modules and labware adapters required by your protocol.",
   "notes": "A few important things to note:",
+  "opentrons": "Opentrons",
   "opentronsai": "OpentronsAI",
   "ot2_pipettes": "OT-2 pipettes: Include volume, number of channels, and generation.",
   "pcr_flex": "PCR (Flex)",

opentrons-ai-client/src/molecules/Header/Header.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Header as HeaderComponent } from '.'
+import { COLORS, Flex, SPACING } from '@opentrons/components'
+
+const meta: Meta<typeof HeaderComponent> = {
+  title: 'AI/Molecules/Header',
+  component: HeaderComponent,
+  decorators: [
+    Story => (
+      <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing40}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof HeaderComponent>
+
+export const ChatHeaderExample: Story = {}

opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx

@@ -0,0 +1,23 @@
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { Header } from '../index'
+import { describe, it } from 'vitest'
+import { screen } from '@testing-library/react'
+
+const render = (): ReturnType<typeof renderWithProviders> => {
+  return renderWithProviders(<Header />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('Header', () => {
+  it('should render Header component', () => {
+    render()
+    screen.getByText('Opentrons')
+  })
+
+  it('should render log out button', () => {
+    render()
+    screen.getByText('Logout')
+  })
+})

opentrons-ai-client/src/molecules/Header/index.tsx

@@ -0,0 +1,63 @@
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import {
+  Flex,
+  StyledText,
+  Link as LinkButton,
+  POSITION_ABSOLUTE,
+  TYPOGRAPHY,
+  COLORS,
+  POSITION_RELATIVE,
+  ALIGN_CENTER,
+  JUSTIFY_SPACE_BETWEEN,
+} from '@opentrons/components'
+import { useAuth0 } from '@auth0/auth0-react'
+
+const HeaderBar = styled(Flex)`
+  position: ${POSITION_RELATIVE};
+  background-color: ${COLORS.white};
+  width: 100%;
+  align-items: ${ALIGN_CENTER};
+  height: 60px;
+`
+
+const HeaderBarContent = styled(Flex)`
+  position: ${POSITION_ABSOLUTE};
+  padding: 18px 32px;
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  width: 100%;
+`
+
+const HeaderGradientTitle = styled(StyledText)`
+  background: linear-gradient(90deg, #562566 0%, #893ba4 47.5%, #c189d4 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 16px;
+`
+
+const HeaderTitle = styled(StyledText)`
+  font-size: 16px;
+`
+
+const LogoutButton = styled(LinkButton)`
+  color: ${COLORS.grey50};
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+`
+
+export function Header(): JSX.Element {
+  const { t } = useTranslation('protocol_generator')
+  const { logout } = useAuth0()
+
+  return (
+    <HeaderBar>
+      <HeaderBarContent>
+        <Flex>
+          <HeaderTitle>{t('opentrons')}</HeaderTitle>
+          <HeaderGradientTitle>{t('ai')}</HeaderGradientTitle>
+        </Flex>
+        <LogoutButton onClick={() => logout()}>{t('logout')}</LogoutButton>
+      </HeaderBarContent>
+    </HeaderBar>
+  )
+}

opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { HeaderWithMeter as HeaderWithMeterComponent } from '.'
+import { COLORS, Flex, SPACING } from '@opentrons/components'
+
+const meta: Meta<typeof HeaderWithMeterComponent> = {
+  title: 'AI/Molecules/HeaderWithMeter',
+  component: HeaderWithMeterComponent,
+  decorators: [
+    Story => (
+      <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing40}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof HeaderWithMeterComponent>
+
+export const HeaderWithMeterExample: Story = {}

opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx

@@ -0,0 +1,51 @@
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { HeaderWithMeter } from '../index'
+import { describe, expect, it } from 'vitest'
+import { screen, render as rtlRender } from '@testing-library/react'
+
+const render = (): ReturnType<typeof renderWithProviders> => {
+  return renderWithProviders(<HeaderWithMeter progressPercentage={0.3} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('HeaderWithMeter', () => {
+  it('should render Header component', () => {
+    render()
+    screen.getByText('Opentrons')
+  })
+
+  it('should render progress bar', () => {
+    render()
+    screen.getByRole('progressbar')
+  })
+
+  it('should render progress bar with correct value', () => {
+    render()
+    const progressBar = screen.getByRole('progressbar')
+    expect(progressBar).toHaveAttribute('value', '0.3')
+  })
+
+  it('should update when progressPercentage prop changes', () => {
+    const { rerender } = rtlRender(
+      <HeaderWithMeter progressPercentage={0.3} />,
+      {}
+    )
+
+    const progressBar = screen.getByRole('progressbar')
+    expect(progressBar).toHaveAttribute('value', '0.3')
+
+    rerender(<HeaderWithMeter progressPercentage={0.6} />)
+    expect(progressBar).toHaveAttribute('value', '0.6')
+
+    rerender(<HeaderWithMeter progressPercentage={1} />)
+    expect(progressBar).toHaveAttribute('value', '1')
+
+    rerender(<HeaderWithMeter progressPercentage={0} />)
+    expect(progressBar).toHaveAttribute('value', '0')
+
+    rerender(<HeaderWithMeter progressPercentage={0.2} />)
+    expect(progressBar).toHaveAttribute('value', '0.2')
+  })
+})

opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx

@@ -0,0 +1,50 @@
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
+  COLORS,
+} from '@opentrons/components'
+import { Header } from '../Header'
+import styled from 'styled-components'
+
+const SquareProgressBar = styled.progress`
+  width: 100%;
+  height: 4px;
+  border-radius: 0;
+  appearance: none;
+
+  &::-webkit-progress-bar {
+    background-color: ${COLORS.grey30}; /* Background color of the progress bar */
+    border-radius: 0;
+  }
+
+  &::-webkit-progress-value {
+    background-color: ${COLORS.blue50}; /* Color of the progress value */
+    border-radius: 0;
+    transition: width 1s;
+  }
+
+  &::-moz-progress-bar {
+    background-color: ${COLORS.blue50}; /* Color of the progress value for Firefox */
+    border-radius: 0;
+  }
+`
+
+export interface ChatHeaderProps {
+  progressPercentage: number
+}
+
+export function HeaderWithMeter({
+  progressPercentage = 0.5,
+}: ChatHeaderProps): JSX.Element {
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width="100%"
+    >
+      <Header />
+      <SquareProgressBar value={progressPercentage}></SquareProgressBar>
+    </Flex>
+  )
+}