[DSDK 175] Add LedgerHQ UI library

apps/sample/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["next/core-web-vitals", "@ledgerhq/dsdk"],
+  extends: ["next", "@ledgerhq/dsdk"],
   parserOptions: {
     project: true,
     tsconfigRootDir: __dirname,

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,16 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ledgerhq/react-ui": "^0.14.13",
+    "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
+    "@ledgerhq/eslint-config-dsdk": "workspace:*",
+    "@ledgerhq/tsconfig-dsdk": "workspace:*",
+    "@types/react": "^18",
+    "@types/styled-components": "^5.1.25",
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint-config-next": "14.0.4",
-    "@ledgerhq/tsconfig-dsdk": "workspace:*",
-    "@ledgerhq/eslint-config-dsdk": "workspace:*"
+    "postcss": "^8"
   }
 }

apps/sample/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

apps/sample/src/pages/_app.tsx

@@ -0,0 +1,30 @@
+/**
+ * _app.tsx
+ *
+ * This is a special Next.js file used to wrap the entire application and provide a common
+ * layout or functionality across all pages. It allows you to maintain state, apply global
+ * styles, and handle other aspects that should persist across different pages.
+ *
+ * The `App` component in this file is initialized once for the entire application and is
+ * used to customize the rendering of pages. For more information, refer to the Next.js
+ * documentation on customizing the App component:
+ * https://nextjs.org/docs/advanced-features/custom-app
+ */
+
+import { CustomThemeProvider } from "@/providers/theme";
+import { GlobalStyle } from "@/styles/globalstyles";
+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>
+        <GlobalStyle />
+        <Component {...pageProps} />
+      </CustomThemeProvider>
+    </main>
+  );
+}

apps/sample/src/pages/_document.tsx

@@ -0,0 +1,41 @@
+/**
+ * _document.tsx
+ *
+ * This is a special Next.js file used to create a custom document layout. It allows you
+ * to enhance and optimize the server-side rendering of your application by customizing
+ * the HTML document structure. This file is crucial for implementing global styles, meta
+ * tags, and other layout-related configurations that should be applied on the server side.
+ *
+ * Keep in mind that changes made in this file affect the entire application's HTML structure,
+ * so use it judiciously. For more information, refer to the Next.js documentation on customizing
+ * the document: https://nextjs.org/docs/advanced-features/custom-document
+ */
+
+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,18 @@
+"use client";
+import React from "react";
+import { Box } from "@ledgerhq/react-ui/index";
+import styled, { DefaultTheme } from "styled-components";
+
+const MainContainer = styled(Box)`
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme.colors.background.main};
+  color: ${({ theme }: { theme: DefaultTheme }) => 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/src/styles/globalstyles.tsx

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

apps/sample/tsconfig.json

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