feat(packages): add ledgerhq react-ui dependency

apps/sample/next.config.js

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
 
-module.exports = nextConfig
+const nextConfig = {
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+};
+
+module.exports = nextConfig;

apps/sample/package.json

@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ledgerhq/react-ui": "^0.14.13",
     "next": "14.0.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@ledgerhq/eslint-config-dsdk": "workspace:*",

apps/sample/src/components/globalstyles.tsx

@@ -0,0 +1,12 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  html,
+  body,
+  #__next {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+`;

apps/sample/src/pages/_app.tsx

@@ -0,0 +1,14 @@
+import { CustomThemeProvider } from "@/providers/theme";
+import { GlobalStyle } from "@/components/globalstyles";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <CustomThemeProvider>
+        <GlobalStyle />
+        <Component {...pageProps} />
+      </CustomThemeProvider>
+    </>
+  );
+}

apps/sample/src/pages/_document.tsx

@@ -0,0 +1,28 @@
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

apps/sample/src/pages/index.tsx

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

apps/sample/src/providers/theme.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from "react";
+import { defaultTheme, palettes } from "@ledgerhq/react-ui/styles/index";
+import { ThemeProvider } from "styled-components";
+
+interface CustomThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({
+  children,
+}) => {
+  const selectedPalettes: "dark" | "light" = "dark";
+
+  const theme = useMemo(
+    () => ({
+      ...defaultTheme,
+      theme: selectedPalettes,
+      colors: {
+        ...defaultTheme.colors,
+        ...palettes[selectedPalettes],
+      },
+    }),
+    []
+  );
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};

apps/sample/tsconfig.json

@@ -8,8 +8,15 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/components/layout.tsx.old"
+  ],
   "exclude": ["node_modules"]
 }