Merge branch 'develop' into dependabot/npm_and_yarn/eslint-plugin-sim…

…ple-import-sort-12.1.1

apps/sample/src/app/device-actions/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+
+import { DeviceActionsView } from "@/components/DeviceActionsView";
+
+const DeviceActions: React.FC = () => {
+  return <DeviceActionsView />;
+};
+
+export default DeviceActions;

apps/sample/src/components/Block.tsx

@@ -0,0 +1,10 @@
+import { Flex } from "@ledgerhq/react-ui";
+import styled from "styled-components";
+
+export const Block = styled(Flex).attrs({
+  flexDirection: "column",
+  backgroundColor: "opacityDefault.c05",
+  p: 5,
+  borderRadius: 2,
+  rowGap: 4,
+})``;

apps/sample/src/components/ClickableListItem.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Flex, Text, Icons } from "@ledgerhq/react-ui";
+import styled from "styled-components";
+
+const ListItemWrapper = styled(Flex)`
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  cursor: pointer;
+`;
+
+export const ClickableListItem: React.FC<{
+  title: string;
+  description: string;
+  onClick(): void;
+}> = ({ title, description, onClick }) => {
+  return (
+    <ListItemWrapper
+      flexDirection="row"
+      alignItems="center"
+      p={6}
+      backgroundColor={"opacityDefault.c05"}
+      borderRadius={2}
+      onClick={onClick}
+    >
+      <Flex flex={1} flexDirection="column" rowGap={4}>
+        <Text variant="large" fontWeight="semiBold">
+          {title}
+        </Text>
+        <Text variant="body" fontWeight="regular" color="opacityDefault.c60">
+          {description}
+        </Text>
+      </Flex>
+      <Icons.ChevronRight size="M" color="opacityDefault.c50" />
+    </ListItemWrapper>
+  );
+};

apps/sample/src/components/CommandsView/Command.tsx

@@ -1,35 +1,12 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import {
-  Flex,
-  Text,
-  Icons,
-  Drawer,
-  Button,
-  InfiniteLoader,
-} from "@ledgerhq/react-ui";
-import styled from "styled-components";
+import { Flex, Icons, Button, InfiniteLoader } from "@ledgerhq/react-ui";
 import { CommandForm, ValueSelector } from "./CommandForm";
 import { FieldType } from "@/hooks/useForm";
 import { CommandResponse, CommandResponseProps } from "./CommandResponse";
-
-const Wrapper = styled(Flex)`
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  cursor: pointer;
-`;
-
-const Container = styled(Flex).attrs({
-  flexDirection: "column",
-  backgroundColor: "opacityDefault.c05",
-  p: 5,
-  borderRadius: 2,
-  rowGap: 4,
-})``;
+import { Block } from "../Block";
+import { ClickableListItem } from "../ClickableListItem";
+import { StyledDrawer } from "../StyledDrawer";
 
 export type CommandProps<
   CommandArgs extends Record<string, FieldType> | void,
@@ -51,7 +28,7 @@ export function Command<
 
   const [values, setValues] = useState<CommandArgs>(initialValues);
 
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const [responses, setResponses] = useState<CommandResponseProps<Response>[]>(
     [],
@@ -105,81 +82,66 @@ export function Command<
   }, [responses]);
 
   return (
-    <Wrapper
-      flexDirection="row"
-      alignItems="center"
-      p={6}
-      backgroundColor={"opacityDefault.c05"}
-      borderRadius={2}
-      onClick={openDrawer}
-    >
-      <Flex flex={1} flexDirection="column" rowGap={4}>
-        <Text variant="large" fontWeight="semiBold">
-          {title}
-        </Text>
-        <Text variant="body" fontWeight="regular" color="opacityDefault.c60">
-          {description}
-        </Text>
-      </Flex>
-      <Icons.ChevronRight size="M" color="opacityDefault.c50" />
-      <Drawer isOpen={isOpen} onClose={closeDrawer} big title={title}>
-        <Flex flexDirection="column" rowGap={4} flex={1} overflowY="hidden">
-          <Text
-            variant="body"
-            fontWeight="regular"
-            color="opacityDefault.c60"
-            mb={5}
+    <>
+      <ClickableListItem
+        title={title}
+        description={description}
+        onClick={openDrawer}
+      />
+      <StyledDrawer
+        isOpen={isOpen}
+        onClose={closeDrawer}
+        big
+        title={title}
+        description={description}
+      >
+        <Block>
+          <CommandForm
+            initialValues={values}
+            onChange={setValues}
+            valueSelector={valueSelector}
+          />
+          <Button
+            variant="main"
+            onClick={handleClickSend}
+            disabled={loading}
+            Icon={() =>
+              loading ? <InfiniteLoader size={20} /> : <Icons.ArrowRight />
+            }
+          >
+            Send
+          </Button>
+        </Block>
+        <Block flex={1} overflowY="hidden">
+          <Flex
+            ref={responseBoxRef}
+            flexDirection="column"
+            rowGap={4}
+            flex={1}
+            overflowY="scroll"
+          >
+            {responses.map(({ args, date, response, loading }, index) => (
+              <CommandResponse
+                args={args}
+                key={date.toISOString()}
+                date={date}
+                response={response}
+                loading={loading}
+                isLatest={index === responses.length - 1}
+              />
+            ))}
+          </Flex>
+          <Button
+            variant="main"
+            outline
+            onClick={handleClickClear}
+            disabled={responses.length === 0}
           >
-            {description}
-          </Text>
-          <Container>
-            <CommandForm
-              initialValues={values}
-              onChange={setValues}
-              valueSelector={valueSelector}
-            />
-            <Button
-              variant="main"
-              onClick={handleClickSend}
-              disabled={loading}
-              Icon={() =>
-                loading ? <InfiniteLoader size={20} /> : <Icons.ArrowRight />
-              }
-            >
-              Send
-            </Button>
-          </Container>
-          <Container flex={1} overflowY="hidden">
-            <Flex
-              ref={responseBoxRef}
-              flexDirection="column"
-              rowGap={4}
-              flex={1}
-              overflowY="scroll"
-            >
-              {responses.map(({ args, date, response, loading }, index) => (
-                <CommandResponse
-                  args={args}
-                  key={date.toISOString()}
-                  date={date}
-                  response={response}
-                  loading={loading}
-                  isLatest={index === responses.length - 1}
-                />
-              ))}
-            </Flex>
-            <Button
-              variant="main"
-              outline
-              onClick={handleClickClear}
-              disabled={responses.length === 0}
-            >
-              Clear responses
-            </Button>
-          </Container>
-        </Flex>
-      </Drawer>
-    </Wrapper>
+            Clear responses
+          </Button>
+        </Block>
+      </StyledDrawer>
+    </>
   );
 }
 

apps/sample/src/components/CommandsView/CommandForm.tsx

@@ -25,10 +25,12 @@ export function CommandForm<Args extends Record<string, FieldType>>({
   initialValues,
   onChange,
   valueSelector,
+  disabled,
 }: {
   initialValues: Args;
   onChange: (values: Args) => void;
   valueSelector?: ValueSelector<FieldType>;
+  disabled?: boolean;
 }) {
   const { formValues, setFormValue } = useForm(initialValues);
 
@@ -54,6 +56,7 @@ export function CommandForm<Args extends Record<string, FieldType>>({
           {valueSelector?.[key] ? (
             <Flex flexDirection="row" flexWrap="wrap" rowGap={2} columnGap={2}>
               <SelectInput
+                isDisabled={disabled}
                 placeholder={key}
                 value={valueSelector[key].find((val) => val.value === value)}
                 isMulti={false}
@@ -67,13 +70,15 @@ export function CommandForm<Args extends Record<string, FieldType>>({
               name="key"
               checked={value}
               onChange={() => setFormValue(key, !value)}
+              disabled={disabled}
             />
           ) : typeof value === "string" ? (
             <Input
               id={key}
               value={value}
               placeholder={key}
               onChange={(newVal) => setFormValue(key, newVal)}
+              disabled={disabled}
             />
           ) : (
             <Input
@@ -82,6 +87,7 @@ export function CommandForm<Args extends Record<string, FieldType>>({
               placeholder={key}
               onChange={(newVal) => setFormValue(key, newVal ?? 0)}
               type="number"
+              disabled={disabled}
             />
           )}
         </Flex>

apps/sample/src/components/CommandsView/index.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
-import { Divider, Flex, Grid, Text } from "@ledgerhq/react-ui";
-import styled from "styled-components";
+import { Grid } from "@ledgerhq/react-ui";
 
 import { useDeviceSessionsContext } from "@/providers/DeviceSessionsProvider";
 import Command, { CommandProps } from "./Command";
@@ -23,28 +22,7 @@ import {
 import { useRouter } from "next/navigation";
 import { BatteryStatusType } from "@ledgerhq/device-sdk-core/src/api/command/os/GetBatteryStatusCommand.js";
 import { getValueSelectorFromEnum } from "./CommandForm";
-
-const Root = styled(Flex).attrs({ mx: 15, mt: 10, mb: 5 })`
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Container = styled(Flex)`
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  border-radius: 12px;
-`;
-
-const Header = styled(Flex).attrs({ py: 6 })``;
-
-const Title = styled(Text).attrs({
-  variant: "h5Inter",
-  fontWeight: "semiBold",
-  fontSize: 18,
-})``;
+import { PageWithHeader } from "../PageWithHeader";
 
 export const CommandsView: React.FC = () => {
   const {
@@ -150,25 +128,15 @@ export const CommandsView: React.FC = () => {
   }
 
   return (
-    <Root overflow="hidden">
-      <Container>
-        <Header>
-          <Title>Commands</Title>
-        </Header>
-        <Divider my={4} />
-        <Grid columns={1} rowGap={6} overflowY="scroll">
-          {commands.map((command) => (
-            <Command
-              key={`${command.title}_${command.description}`} // if this is not unique we have another problem
-              title={command.title}
-              description={command.description}
-              sendCommand={command.sendCommand}
-              initialValues={command.initialValues}
-              valueSelector={command.valueSelector}
-            />
-          ))}
-        </Grid>
-      </Container>
-    </Root>
+    <PageWithHeader title="Commands">
+      <Grid columns={1} rowGap={6} overflowY="scroll">
+        {commands.map((command) => (
+          <Command
+            key={`${command.title}_${command.description}`} // if this is not unique we have another problem
+            {...command}
+          />
+        ))}
+      </Grid>
+    </PageWithHeader>
   );
 };