feat(wallet-dashboard): kickoff apps-ui-kit setup (#3636)

* fix: kickoff apps-ui-kit setup

* fix format

* fix: avoid depending on node_modules

* fix: update import

apps/wallet-dashboard/app/dashboard/layout.tsx

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 'use client';
 
-import { Button, Notifications, RouteLink } from '@/components/index';
+import { Notifications, RouteLink } from '@/components/index';
 import React, { useState, type PropsWithChildren } from 'react';
 import { ConnectButton } from '@iota/dapp-kit';
+import { Button } from '@iota/apps-ui-kit';
 
 const routes = [
     { title: 'Home', path: '/dashboard/home' },
@@ -36,7 +37,7 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
                 {routes.map((route) => {
                     return <RouteLink key={route.title} {...route} />;
                 })}
-                <Button onClick={toggleDarkMode}>{isDarkMode ? 'Light Mode' : 'Dark Mode'}</Button>
+                <Button onClick={toggleDarkMode} text={isDarkMode ? 'Light Mode' : 'Dark Mode'} />
                 <ConnectButton />
             </section>
             <div>{children}</div>

apps/wallet-dashboard/package.json

@@ -15,6 +15,7 @@
         "node": ">= v18.17.0"
     },
     "dependencies": {
+        "@iota/apps-ui-kit": "workspace:*",
         "@iota/core": "workspace:*",
         "@iota/dapp-kit": "workspace:*",
         "@iota/iota-sdk": "workspace:*",

apps/wallet-dashboard/tailwind.config.ts

@@ -2,24 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Config } from 'tailwindcss';
+// Note: exception for the tailwind preset import
+import uiKitResponsivePreset from '../../apps/ui-kit/src/lib/tailwind/responsive.preset';
 
-const config: Config = {
+export default {
+    presets: [uiKitResponsivePreset],
     content: [
         './app/**/*.{js,ts,jsx,tsx,mdx}',
         './pages/**/*.{js,ts,jsx,tsx,mdx}',
         './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}',
     ],
     darkMode: 'class',
     theme: {
-        extend: {
-            backgroundImage: {
-                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                'gradient-conic':
-                    'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-            },
-        },
+        extend: {},
         plugins: [],
     },
-};
-
-export default config;
+} satisfies Partial<Config>;