Merge pull request #35 from status-im/ra.add-even-more-stories

testing: add stories for `StandardGauge`, `HealthInfoSection` & `QuickStartBar`

src/components/HealthInfoSection.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import HealthInfoSection from './HealthInfoSection'
+
+const meta = {
+  title: 'Device Health/HealthInfoSection',
+  component: HealthInfoSection,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof HealthInfoSection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AllGoodStats: Story = {
+  args: {
+    usedStorage: 79 * 1024 * 1024 * 1024,
+    maxStorage: 100 * 1024 * 1024 * 1024,
+    usedRamMemory: 32 * 1024 * 1024 * 1024,
+    maxRamMemory: 64 * 1024 * 1024 * 1024,
+    cpuClockRate: 2.4,
+    networkLatency: 50,
+  },
+}
+
+export const StorageBad: Story = {
+  args: {
+    usedStorage: 80 * 1024 * 1024 * 1024,
+    maxStorage: 100 * 1024 * 1024 * 1024,
+    usedRamMemory: 32 * 1024 * 1024 * 1024,
+    maxRamMemory: 64 * 1024 * 1024 * 1024,
+    cpuClockRate: 2.5,
+    networkLatency: 50,
+  },
+}
+
+export const CpuBad: Story = {
+  args: {
+    usedStorage: 79 * 1024 * 1024 * 1024,
+    maxStorage: 100 * 1024 * 1024 * 1024,
+    usedRamMemory: 32 * 1024 * 1024 * 1024,
+    maxRamMemory: 64 * 1024 * 1024 * 1024,
+    cpuClockRate: 2.3,
+    networkLatency: 50,
+  },
+}
+
+export const RamBad: Story = {
+  args: {
+    usedStorage: 79 * 1024 * 1024 * 1024,
+    maxStorage: 100 * 1024 * 1024 * 1024,
+    usedRamMemory: 56 * 1024 * 1024 * 1024,
+    maxRamMemory: 64 * 1024 * 1024 * 1024,
+    cpuClockRate: 2.4,
+    networkLatency: 50,
+  },
+}
+
+export const LatencyBad: Story = {
+  args: {
+    usedStorage: 79 * 1024 * 1024 * 1024,
+    maxStorage: 100 * 1024 * 1024 * 1024,
+    usedRamMemory: 32 * 1024 * 1024 * 1024,
+    maxRamMemory: 64 * 1024 * 1024 * 1024,
+    cpuClockRate: 2.4,
+    networkLatency: 101,
+  },
+}

src/components/HealthInfoSection.tsx

@@ -26,7 +26,7 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => {
 
   const usedStoragePercentage = (usedStorage / maxStorage) * 100
   const usedRamMemoryPercentage = (usedRamMemory / maxRamMemory) * 100
-  const cpuClockRatePercentage = cpuClockRate > 2.4 ? 100 : 0
+  const cpuClockRatePercentage = cpuClockRate < 2.4 ? 100 : 0
   const networkLatencyPercentage = networkLatency > 100 ? 100 : 0
 
   return (

src/components/QuickStartBar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import QuickStartBar from './QuickStartBar'
+
+const meta = {
+  title: 'General/QuickStartBar',
+  component: QuickStartBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof QuickStartBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

src/components/StandardGauge.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import StandardGauge from './StandardGauge'
+
+const meta = {
+  title: 'General/StandardGauge',
+  component: StandardGauge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ height: '25vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof StandardGauge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithDataPoints: Story = {
+  args: {
+    data: [
+      { id: '1', color: 'red', label: 'Red', value: 42 },
+      { id: '2', color: 'blue', label: 'Blue', value: 1337 },
+    ],
+  },
+}
+
+export const WithoutDataPoints: Story = {
+  args: {
+    data: [],
+  },
+}

src/components/StandardGauge.tsx

@@ -1,13 +1,14 @@
 import { ResponsivePie } from '@nivo/pie'
 
-interface Data {
+export interface GaugeDataPoint {
   id: string
   label: string
   value: number
   color: string
 }
+
 interface StandardGaugeProps {
-  data: Data[]
+  data: GaugeDataPoint[]
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (