[DSDK-176][FEAT][SMPL] Create Home skeleton (#10)

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Box } from "@ledgerhq/react-ui";
+import styled, { DefaultTheme } from "styled-components";
+
+const Root = styled(Box).attrs({ p: 6, mb: 8, borderRadius: 2 })`
+  background: ${({ theme }: { theme: DefaultTheme }) =>
+    theme.colors.neutral.c30};
+`;
+
+export const Device: React.FC = () => {
+  return <Root>No device connected</Root>;
+};

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { Button, Flex, Icons, Text } from "@ledgerhq/react-ui";
+import styled, { DefaultTheme } from "styled-components";
+import Image from "next/image";
+
+const Root = styled(Flex)`
+  flex-direction: column;
+  flex: 1;
+`;
+
+const Header = styled(Flex).attrs({ py: 3, px: 10, gridGap: 8 })`
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+const Actions = styled(Flex)`
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1 0 0;
+`;
+
+const IconBox = styled(Flex).attrs({ p: 3 })`
+  cursor: pointer;
+  align-items: center;
+  opacity: 0.7;
+`;
+
+const Container = styled(Flex)`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const Description = styled(Text).attrs({ my: 6 })`
+  color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c70};
+`;
+
+const NanoLogo = styled(Image).attrs({ mb: 8 })`
+  transform: rotate(23deg);
+`;
+
+export const MainView: React.FC = () => {
+  return (
+    <Root>
+      <Header>
+        <Actions>
+          <IconBox>
+            <Icons.Question size={"M"} />
+          </IconBox>
+          <IconBox>
+            <Icons.Settings size={"M"} />
+          </IconBox>
+        </Actions>
+      </Header>
+
+      <Container>
+        <NanoLogo
+          src={"/nano-x.png"}
+          alt={"nano-x-logo"}
+          width={155}
+          height={250}
+        />
+        <Text
+          variant={"h2Inter"}
+          fontWeight={"semiBold"}
+          textTransform={"none"}
+        >
+          Ledger Device SDK
+        </Text>
+        <Description variant={"body"}>
+          Use this application to test Ledger hardware device features.
+        </Description>
+
+        <Button variant="main" backgroundColor="main" size="large">
+          Select a device
+        </Button>
+      </Container>
+    </Root>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { Flex, Icons, Text } from "@ledgerhq/react-ui";
+import styled from "styled-components";
+
+const MenuItem = styled(Flex).attrs({ p: 3, pl: 5 })`
+  align-items: center;
+`;
+
+const MenuTitle = styled(Text).attrs({
+  variant: "paragraph",
+  fontWeight: "semiBold",
+  ml: 5,
+})``;
+
+export const Menu: React.FC = () => {
+  return (
+    <>
+      <MenuItem>
+        <Icons.PlusCircle />
+        <MenuTitle>App session</MenuTitle>
+      </MenuItem>
+      <MenuItem>
+        <Icons.LedgerDevices />
+        <MenuTitle>Device action</MenuTitle>
+      </MenuItem>
+      <MenuItem>
+        <Icons.WirelessCharging />
+        <MenuTitle>APDU</MenuTitle>
+      </MenuItem>
+      <MenuItem>
+        <Icons.Apps />
+        <MenuTitle>Install app</MenuTitle>
+      </MenuItem>
+    </>
+  );
+};

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Flex, Icons, Text } from "@ledgerhq/react-ui";
+import styled, { DefaultTheme } from "styled-components";
+import { Menu } from "../Menu";
+import { Device } from "../Device";
+
+const Root = styled(Flex).attrs({ py: 8, px: 6 })`
+  flex-direction: column;
+  width: 280px;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme.colors.background.main};
+`;
+
+const Title = styled(Text).attrs({ mb: 8 })`
+  opacity: 0.5;
+`;
+
+const Subtitle = styled(Text).attrs({ mb: 5 })``;
+
+const MenuContainer = styled(Box)`
+  flex: 1;
+  opacity: 0.2;
+`;
+
+const BottomContainer = styled(Flex)`
+  opacity: 0.2;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const LogsContainer = styled(Flex).attrs({ mb: 6 })`
+  flex-direction: row;
+  align-items: center;
+`;
+
+const LogsText = styled(Text).attrs({ ml: 3 })``;
+
+const VersionText = styled(Text)`
+  color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c50};
+`;
+
+export const Sidebar: React.FC = () => {
+  return (
+    <Root>
+      <Title variant={"large"}>Ledger Device SDK</Title>
+
+      <Subtitle variant={"tiny"}>Device</Subtitle>
+      <Device />
+
+      <MenuContainer>
+        <Subtitle variant={"tiny"}>Menu</Subtitle>
+        <Menu />
+      </MenuContainer>
+
+      <BottomContainer>
+        <LogsContainer>
+          <Icons.ExternalLink />
+          <LogsText variant={"paragraph"}>Share logs</LogsText>
+        </LogsContainer>
+        <VersionText variant={"body"}>
+          Ledger device SDK version 0.0.1
+        </VersionText>
+        <VersionText variant={"body"}>App version 0.1</VersionText>
+      </BottomContainer>
+    </Root>
+  );
+};

apps/sample/src/pages/_app.tsx

@@ -11,20 +11,17 @@
  * https://nextjs.org/docs/advanced-features/custom-app
  */
 
-import { CustomThemeProvider } from "@/providers/theme";
 import { GlobalStyle } from "@/styles/globalstyles";
+import { StyleProvider } from "@ledgerhq/react-ui";
 import type { AppProps } from "next/app";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <main className={inter.className}>
-      <CustomThemeProvider>
+    <main>
+      <StyleProvider selectedPalette="dark" fontsPath="/fonts">
         <GlobalStyle />
         <Component {...pageProps} />
-      </CustomThemeProvider>
+      </StyleProvider>
     </main>
   );
 }

apps/sample/src/pages/index.tsx

@@ -1,18 +1,23 @@
 "use client";
 import React from "react";
-import { Box } from "@ledgerhq/react-ui/index";
+import { Flex } from "@ledgerhq/react-ui";
 import styled, { DefaultTheme } from "styled-components";
+import { Sidebar } from "@/components/Sidebar";
+import { MainView } from "@/components/MainView";
 
-const MainContainer = styled(Box)`
-  width: 100%;
-  height: 100%;
-  background-color: ${({ theme }: { theme: DefaultTheme }) =>
-    theme.colors.background.main};
+const Root = styled(Flex)`
   color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c90};
+  flex-direction: row;
+  height: 100%;
 `;
 
 const Home: React.FC = () => {
-  return <MainContainer>Test</MainContainer>;
+  return (
+    <Root>
+      <Sidebar />
+      <MainView />
+    </Root>
+  );
 };
 
 export default Home;