react/src/lib/seam/components/AccessCodeTable/AccessCodeHealthBar.stories.tsx at 6b501debbe81922d7f9c4e630d2b80288a3fd761 · seamapi/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { Box } from '@mui/material'
import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'

import {
  type AccessCodeFilter,
  AccessCodeHealthBar,
} from 'lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js'

const meta: Meta<typeof AccessCodeHealthBar> = {
  title: 'Library/AccessCodeHealthBar',
  component: AccessCodeHealthBar,
  tags: ['autodocs'],
}

export default meta

type Story = StoryObj<typeof AccessCodeHealthBar>

export const Content: Story = {
  render: () => {
    const [filter, setFilter] = useState<AccessCodeFilter | null>(null)
    return (
      <Box display='grid' gap={3} gridTemplateColumns='1fr'>
        <AccessCodeHealthBar
          filter={null}
          onFilterSelect={() => {}}
          accessCodes={[]}
          errorFilter={() => true}
          warningFilter={() => true}
        />
        <AccessCodeHealthBar
          filter={filter}
          onFilterSelect={setFilter}
          accessCodes={[
            {
              device_id: 'device_1',
              name: 'Code 1',
              access_code_id: 'code_1',
              created_at: '2023-05-08T22:38:30.963Z',
              type: 'ongoing',
              code: '1234',
              status: 'setting',
              workspace_id: 'workspace_1',
              is_managed: true,
              is_one_time_use: false,
              is_offline_access_code: false,
              is_backup: false,
              is_backup_access_code_available: false,
              common_code_key: null,
              is_external_modification_allowed: false,
              errors: [
                {
                  error_code: 'account_disconnected',
                  is_connected_account_error: true,
                  created_at: '2023-05-08T22:38:30.963Z',
                  message:
                    'Account Disconnected, you may need to reconnect the account with a new webview.',
                },
              ],
              warnings: [
                {
                  warning_code: 'delay_in_removing_from_device',
                  message:
                    'There was a delay removing this access code from the device.',
                },
              ],
            },
            {
              device_id: 'device_1',
              name: 'Code 2',
              access_code_id: 'code_2',
              created_at: '2023-05-08T22:38:30.963Z',
              type: 'ongoing',
              code: '1234',
              status: 'setting',
              workspace_id: 'workspace_1',
              is_backup_access_code_available: false,
              is_managed: true,
              is_one_time_use: false,
              is_offline_access_code: false,
              is_backup: false,
              common_code_key: null,
              is_external_modification_allowed: false,
              errors: [
                {
                  error_code: 'account_disconnected',
                  is_connected_account_error: true,
                  created_at: '2023-05-08T22:38:30.963Z',
                  message:
                    'Account Disconnected, you may need to reconnect the account with a new webview.',
                },
              ],
              warnings: [
                {
                  warning_code: 'delay_in_removing_from_device',
                  message:
                    'There was a delay removing this access code from the device.',
                },
              ],
            },
          ]}
          errorFilter={() => true}
          warningFilter={() => true}
        />
      </Box>
    )
  },
}