creating cardRequest component

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@nivo/bar": "^0.79.1",
     "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@reduxjs/toolkit": "^1.7.1",

src/components/CardRequest/core/cardRequest.styles.ts

@@ -0,0 +1,75 @@
+import styled from 'styled-components'
+
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FontSizes,
+  FontWeights,
+  FONT_FAMILIES,
+  FONT_SIZES,
+  FONT_WEIGHTS,
+  SPACINGS,
+} from '../../../shared/style/constants'
+
+export const Row = styled.div`
+  display: flex;
+`
+
+export const Col = styled.div`
+  flex: 0 0 100px;
+  text-align: center;
+  align-self: center;
+`
+
+export const StyledCardRequest = styled['div']`
+  .wrapper {
+    background-color: #383b46;
+    border-radius: ${BORDER_RADIUS[1]};
+    padding: ${SPACINGS[3]};
+    flex-direction: column;
+  }
+  .counter {
+    font-weight: ${FONT_WEIGHTS[FontWeights.BOLD]};
+  }
+  .roundedColorResponse {
+    border-radius: 50px;
+    background: #73ad21;
+    margin-top: 3px;
+    width: 10px;
+    height: 10px;
+    margin-left: 10px;
+  }
+  .responseCode {
+    padding-left: 10px;
+  }
+  .rawResponseButton {
+    font-size: ${FONT_SIZES[FontSizes.BASE]};
+    font-family: ${FONT_FAMILIES.inter};
+    cursor: pointer;
+    background-color: transparent;
+    color: ${COLORS.grey2};
+    border: 1px solid ${COLORS.white};
+    padding: ${SPACINGS[3]};
+    width: 200px;
+    border-radius: ${BORDER_RADIUS[1]};
+    margin-right: 30px;
+  }
+  .rawResponseDiv {
+    margin-left: auto;
+  }
+  .iconRow {
+    padding-top: 5px;
+  }
+`
+
+export const StyledCardRequestContent = styled['div']`
+  height: 200px;
+  margin-top: ${SPACINGS[5]};
+
+  .tooltip {
+    background: #fff;
+    padding: 10px 20px;
+    color: #000;
+    border-radius: 10px;
+  }
+`

src/components/CardRequest/core/cardRequest.types.ts

@@ -0,0 +1,8 @@
+import { IStandardProps } from 'shared/types'
+
+export interface IProps extends IStandardProps {
+  index: number
+  responseCode: number
+  responseTime: number
+  responseSize: number
+}

src/components/CardRequest/index.tsx

@@ -0,0 +1,53 @@
+import { ExpansionPanel } from 'components/ExpansionPanel'
+import { FC } from 'react'
+import { CardRequestHeader } from './subcomponent/CardRequestHeader'
+import { IProps } from './core/cardRequest.types'
+import { Card } from 'components/Card'
+
+import { CardRequestContent } from './subcomponent/CardRequestContent'
+
+export const CardRequest: FC<IProps> = (props) => {
+  const data = [
+    {
+      name: 'DNSDone',
+      time: 2100730,
+    },
+    {
+      name: 'ConnectDone',
+      time: 7683944,
+    },
+    {
+      name: 'TLSHandshakeDone',
+      time: 21375560,
+    },
+    {
+      name: 'WroteHeaders',
+      time: 21737202,
+    },
+    {
+      name: 'WroteRequest',
+      time: 21753265,
+    },
+    {
+      name: 'GotFirstResponseByte',
+      time: 44387450,
+    },
+    {
+      name: 'BodyRead',
+      time: 44496009,
+    },
+  ]
+
+  return (
+    <Card className="mt-4">
+      <ExpansionPanel>
+        <ExpansionPanel.Header>
+          <CardRequestHeader {...props} />
+        </ExpansionPanel.Header>
+        <ExpansionPanel.Content>
+          <CardRequestContent data={data} />
+        </ExpansionPanel.Content>
+      </ExpansionPanel>
+    </Card>
+  )
+}

src/components/CardRequest/subcomponent/CardRequestContent/core/cardRequestContent.types.ts

@@ -0,0 +1,5 @@
+import { IStandardProps } from 'shared/types'
+
+export interface IProps extends IStandardProps {
+  data: { name: string; time: number }[]
+}

src/components/CardRequest/subcomponent/CardRequestContent/index.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react'
+
+import { StyledCardRequestContent } from '../../core/cardRequest.styles'
+import { IProps } from './core/cardRequestContent.types'
+import { ChartBar } from 'components/Charts/Bar'
+
+export const CardRequestContent: FC<IProps> = (props) => {
+  return (
+    <StyledCardRequestContent>
+      <ChartBar data={props.data} />
+    </StyledCardRequestContent>
+  )
+}

src/components/CardRequest/subcomponent/CardRequestHeader/core/cardRequestHeader.styles.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+import { BORDER_RADIUS } from 'shared/style/constants'
+
+type IProps = {
+  backgroundStatus: string
+}
+
+export const StyledCardRequestHeader = styled['div']<IProps>`
+  cursor: pointer;
+
+  .roundedColorResponse {
+    border-radius: ${BORDER_RADIUS[2]};
+    background: ${({ backgroundStatus }) => backgroundStatus};
+    width: 10px;
+    height: 10px;
+  }
+
+  .column {
+    width: 15%;
+  }
+
+  .grid {
+    width: 60%;
+  }
+`

src/components/CardRequest/subcomponent/CardRequestHeader/core/cardRequestHeader.types.tsx

@@ -0,0 +1,6 @@
+export interface IProps {
+  index: number
+  responseCode: number
+  responseTime: number
+  responseSize: number
+}

src/components/CardRequest/subcomponent/CardRequestHeader/index.tsx

@@ -0,0 +1,58 @@
+import { Button } from 'components/Button'
+import { ExpansionPanelContext } from 'components/ExpansionPanel'
+import { Text } from 'components/Text'
+import { FC, useContext } from 'react'
+import { ChevronDown } from 'react-feather'
+import {
+  ButtonAppearance,
+  COLORS,
+  Colors,
+  FontFamilies,
+  FontWeights,
+} from 'shared/style/constants'
+import { StyledCardRequestHeader } from './core/cardRequestHeader.styles'
+import { IProps } from './core/cardRequestHeader.types'
+
+export const CardRequestHeader: FC<IProps> = (props) => {
+  const { index, responseCode, responseSize, responseTime } = props
+  const expansionPanelContext = useContext(ExpansionPanelContext)
+  const { toggle } = { ...expansionPanelContext }
+  const backgroundStatus =
+    responseCode >= 200 && responseCode <= 310 ? COLORS.green : COLORS.DELETE
+  return (
+    <StyledCardRequestHeader
+      {...props}
+      onClick={toggle}
+      className="f f-jc-space-b pointer"
+      backgroundStatus={backgroundStatus}
+    >
+      <div className="f f-ai-center grid">
+        <Text
+          className="mr-5"
+          font={FontFamilies.POPPINS}
+          weight={FontWeights.BOLD}
+        >
+          #{index}
+        </Text>
+        <div className="f f-ai-center column">
+          <p className="roundedColorResponse mr-2" />
+          <Text>{responseCode}</Text>
+        </div>
+        <Text className="column">{responseTime} ms</Text>
+        <Text className="column">{responseSize} B</Text>
+      </div>
+      <div className="f f-ai-center">
+        <Button
+          appearance={ButtonAppearance.OUTLINE}
+          mainColor={Colors.WHITE}
+          secondaryColor={Colors.BLACK}
+          hover={true}
+          active={true}
+        >
+          Raw response
+        </Button>
+        <ChevronDown className="ml-2" size={16} />
+      </div>
+    </StyledCardRequestHeader>
+  )
+}

src/components/Charts/Bar/core/bar.stories.tsx

@@ -0,0 +1,46 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { ChartBar } from 'components'
+
+export default {
+  title: 'Atoms/Charts/Bar',
+  component: ChartBar,
+} as ComponentMeta<typeof ChartBar>
+
+const Template: ComponentStory<typeof ChartBar> = (args) => {
+  return <ChartBar {...args} />
+}
+
+export const Main = Template.bind({})
+Main.args = {
+  data: [
+    {
+      name: 'DNSDone',
+      time: 2100730,
+    },
+    {
+      name: 'ConnectDone',
+      time: 7683944,
+    },
+    {
+      name: 'TLSHandshakeDone',
+      time: 21375560,
+    },
+    {
+      name: 'WroteHeaders',
+      time: 21737202,
+    },
+    {
+      name: 'WroteRequest',
+      time: 21753265,
+    },
+    {
+      name: 'GotFirstResponseByte',
+      time: 44387450,
+    },
+    {
+      name: 'BodyRead',
+      time: 44496009,
+    },
+  ],
+}

src/components/Charts/Bar/core/bar.styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+import { IProps } from './bar.types'
+
+export const StyledLineChart = styled['div']<IProps>`
+  height: 200px;
+  .tooltip {
+    background: #fff;
+    padding: 10px 20px;
+    color: #000;
+    border-radius: 10px;
+  }
+`

src/components/Charts/Bar/core/bar.types.ts

@@ -0,0 +1,9 @@
+import { IStandardProps } from 'shared/types'
+
+export interface IProps extends IStandardProps {
+  data: { name: string; time: number }[]
+}
+
+export interface ITooltipProps extends IStandardProps {
+  event: { value: string | number; id: string | number }
+}