@seamapi/react 0.26.1 → 0.28.0

package/src/styles/_supported-devices.scss

@@ -3,6 +3,95 @@
 $row-padding: 8px;
 
 @mixin all {
+  .seam-supported-devices-filter-area {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 16px;
+
+    .seam-filters-wrap {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+    }
+
+    .seam-supported-devices-filter-area-search-bar-wrap {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+    }
+  }
+
+  .seam-supported-devices-filter-menu {
+    width: 100%;
+    padding: 8px 16px;
+
+    .seam-filter-menu-row {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+
+      &:not(:last-of-type) {
+        margin-bottom: 8px;
+      }
+
+      .seam-filter-checkbox-label {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: row;
+      }
+
+      .seam-filter-checkbox {
+        appearance: checkbox;
+      }
+    }
+
+    .seam-supported-devices-filter-menu-wrap {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+
+      & button {
+        appearance: none;
+        padding: 4px 8px;
+        padding-right: 24px;
+        margin: 0;
+        border: 0;
+        box-shadow: none;
+        border-radius: 4px;
+        background-color: colors.$bg-b;
+        position: relative;
+        cursor: pointer;
+
+        &:hover {
+          background-color: colors.$bg-c;
+        }
+
+        & span {
+          font-size: 14px;
+          font-weight: 500;
+        }
+
+        & svg {
+          position: absolute;
+          top: 2px;
+        }
+      }
+    }
+  }
+
   .seam-supported-devices-table-state-block {
     width: 100%;
     background-color: colors.$bg-a;
@@ -14,6 +103,31 @@ $row-padding: 8px;
     gap: 8px;
   }
 
+  .seam-supported-devices-table-message-row {
+    height: auto !important;
+  }
+
+  .seam-supported-devices-table-message {
+    width: 100%;
+    padding: 32px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 4px;
+
+    & p {
+      line-height: 1;
+      margin: 0;
+    }
+
+    & button {
+      cursor: pointer;
+      margin-top: 8px;
+    }
+  }
+
   .seam-supported-devices-table {
     width: 100%;
     overflow-x: auto;

package/src/styles/_tables.scss

@@ -4,9 +4,16 @@
   .seam-table-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     height: 56px;
     padding: 0 16px;
+
+    .seam-body {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
   }
 
   .seam-table-title {

package/lib/ui/SupportedDevices/SupportedDeviceRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDeviceRow.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDeviceRow.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,UAAU,kBAAkB,CAAC,EAAE,WAAW,EAA2B;IACzE,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,MAAM,CAAA;IAC3E,OAAO,CACL,yBACE,uBACE,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,QAAQ,GAAI,GACrD,EACL,uBAAK,WAAW,CAAC,aAAa,GAAM,EACpC,uBAAK,WAAW,CAAC,UAAU,GAAM,EACjC,uBAAK,WAAW,CAAC,qBAAqB,GAAM,EAC5C,uBAAK,WAAW,CAAC,eAAe,GAAM,EACtC,uBACE,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,UAAU,WAAW,EAAE,CAAC,YAElE,yBAAO,WAAW,CAAC,aAAa,GAAQ,GACpC,GACH,IACF,CACN,CAAA;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,QAAQ;CACtB,CAAA"}

package/lib/ui/SupportedDevices/SupportedDevices.d.ts

@@ -1 +0,0 @@
-export declare function SupportedDevices(): import("react/jsx-runtime").JSX.Element;

package/lib/ui/SupportedDevices/SupportedDevices.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
-import { Button } from '../../../lib/ui/Button.js';
-import { SupportedDeviceRow } from './SupportedDeviceRow.js';
-import { SupportedDevicesHeader } from './SupportedDevicesHeader.js';
-export function SupportedDevices() {
-    const { data, isLoading, isError, refetch } = useQuery({
-        queryKey: ['supported_devices'],
-        queryFn: async () => {
-            return await axios.get('https://devicedb.seam.co/api/device_models/list');
-        },
-    });
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: 'seam-supported-devices-table-wrap', children: [isLoading && (_jsx("div", { className: 'seam-supported-devices-table-state-block', children: _jsx("p", { children: "Loading device models..." }) })), isError && (_jsxs("div", { className: 'seam-supported-devices-table-state-block', children: [_jsx("p", { children: "There was an error fetching device models." }), _jsx(Button, { variant: 'solid', size: 'small', onClick: () => {
-                                void refetch();
-                            }, children: "Retry" })] })), !isLoading &&
-                    !isError &&
-                    data?.data?.device_models !== null &&
-                    Array.isArray(data?.data?.device_models) && (_jsxs("table", { className: 'seam-supported-devices-table', children: [_jsx(SupportedDevicesHeader, {}), _jsx("tbody", { children: data.data.device_models.map((deviceModel) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, deviceModel.manufacturer_model_id))) })] }))] }) }));
-}
-//# sourceMappingURL=SupportedDevices.js.map

package/lib/ui/SupportedDevices/SupportedDevices.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDevices.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevices.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,CAInD;QACD,QAAQ,EAAE,CAAC,mBAAmB,CAAC;QAC/B,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,OAAO,MAAM,KAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAA;QAC3E,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,mCAAmC,aAC/C,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,0CAA0C,YACvD,mDAA+B,GAC3B,CACP,EAEA,OAAO,IAAI,CACV,eAAK,SAAS,EAAC,0CAA0C,aACvD,qEAAiD,EACjD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,OAAO,EAAE,CAAA;4BAChB,CAAC,sBAGM,IACL,CACP,EAEA,CAAC,SAAS;oBACT,CAAC,OAAO;oBACR,IAAI,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI;oBAClC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,CAC1C,iBAAO,SAAS,EAAC,8BAA8B,aAC7C,KAAC,sBAAsB,KAAG,EAC1B,0BACG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,IAEjB,WAAW,EAAE,WAAW,IADnB,WAAW,CAAC,qBAAqB,CAEtC,CACH,CAAC,GACI,IACF,CACT,IACC,GACL,CACJ,CAAA;AACH,CAAC"}

package/lib/ui/SupportedDevices/SupportedDevicesHeader.d.ts

@@ -1 +0,0 @@
-export declare function SupportedDevicesHeader(): import("react/jsx-runtime").JSX.Element;

package/lib/ui/SupportedDevices/SupportedDevicesHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDevicesHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevicesHeader.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,sBAAsB;IACpC,OAAO,CACL,0BACE,yBACE,cAAM,EACN,oCAAiB,EACjB,sCAAmB,EACnB,iDAA8B,EAC9B,2CAAwB,EACxB,kCAAe,IACZ,GACC,CACT,CAAA;AACH,CAAC"}

package/lib/ui/SupportedDevices/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/types.ts"],"names":[],"mappings":""}

package/src/lib/ui/SupportedDevices/SupportedDevices.tsx

@@ -1,65 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import axios from 'axios'
-
-import { Button } from 'lib/ui/Button.js'
-import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
-
-import { SupportedDeviceRow } from './SupportedDeviceRow.js'
-import { SupportedDevicesHeader } from './SupportedDevicesHeader.js'
-
-export function SupportedDevices() {
-  const { data, isLoading, isError, refetch } = useQuery<{
-    data: {
-      device_models?: DeviceModel[]
-    }
-  }>({
-    queryKey: ['supported_devices'],
-    queryFn: async () => {
-      return await axios.get('https://devicedb.seam.co/api/device_models/list')
-    },
-  })
-
-  return (
-    <>
-      <div className='seam-supported-devices-table-wrap'>
-        {isLoading && (
-          <div className='seam-supported-devices-table-state-block'>
-            <p>Loading device models...</p>
-          </div>
-        )}
-
-        {isError && (
-          <div className='seam-supported-devices-table-state-block'>
-            <p>There was an error fetching device models.</p>
-            <Button
-              variant='solid'
-              size='small'
-              onClick={() => {
-                void refetch()
-              }}
-            >
-              Retry
-            </Button>
-          </div>
-        )}
-
-        {!isLoading &&
-          !isError &&
-          data?.data?.device_models !== null &&
-          Array.isArray(data?.data?.device_models) && (
-            <table className='seam-supported-devices-table'>
-              <SupportedDevicesHeader />
-              <tbody>
-                {data.data.device_models.map((deviceModel) => (
-                  <SupportedDeviceRow
-                    key={deviceModel.manufacturer_model_id}
-                    deviceModel={deviceModel}
-                  />
-                ))}
-              </tbody>
-            </table>
-          )}
-      </div>
-    </>
-  )
-}