Introduce tailwind & basic styling

ensdomains · Sep 24, 2024 · 2cba688 · 2cba688
1 parent a79ba5a
commit 2cba688
Show file tree

Hide file tree

Showing 8 changed files with 1,052 additions and 13 deletions.
diff --git a/examples/profile/package.json b/examples/profile/package.json
@@ -2,14 +2,21 @@
     "name": "example-profile",
     "version": "0.0.0",
     "private": true,
+    "type": "module",
     "dependencies": {
         "@ensdomains/ensjs": "4.0.1-alpha.0",
         "@ensdomains/ensjs-react": "^0.0.3",
+        "@ensdomains/thorin": "1.0.0-beta.9",
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.7",
         "@wagmi/chains": "^1.8.0",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.47",
+        "postcss-nested": "^6.2.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "tailwindcss": "^3.4.13",
+        "ts-node": "^10.9.2",
         "viem": "^1.21.4",
         "vite": "^5.4.7",
         "wagmi": "~1.3.11"
@@ -20,6 +27,7 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@types/tailwindcss": "^3.1.0",
         "typescript": "^5.6.2"
     }
 }
diff --git a/examples/profile/pnpm-lock.yaml b/examples/profile/pnpm-lock.yaml
diff --git a/examples/profile/postcss.config.js b/examples/profile/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+        'postcss-nested': {},
+    },
+};
diff --git a/examples/profile/src/App.tsx b/examples/profile/src/App.tsx
@@ -1,7 +1,25 @@
+import { Card, Button, Profile, Input, Typography } from '@ensdomains/thorin';
+
+// Import thorin css
+import "@ensdomains/thorin/style.css";
+
+// Create component
 export const App = () => {
     return (
-        <div>
-            hi
+        <div className="p-4 bg-ens-grey1 min-h-screen">
+            <div className="flex items-center justify-end gap-4 pb-8">
+                <Button borderRadius={"$full"} width={"$52"}>Connect</Button>
+            </div>
+            <div className="w-full max-w-screen-lg mx-auto">
+                <Card>
+                    <Profile address='0x225f137127d9067788314bc7fcc1f36746a3c3B5' />
+                    <Typography fontVariant='headingOne'>
+                        Heading One
+                    </Typography>
+                    <Input label={'Input'} />
+                    <Button>Button</Button>
+                </Card>
+            </div>
         </div>
     )
-}
+}
diff --git a/examples/profile/src/main.tsx b/examples/profile/src/main.tsx
@@ -4,6 +4,9 @@ import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi';
 import { publicProvider } from 'wagmi/providers/public';
 
 import { App } from './App';
+import { ThemeProvider } from '@ensdomains/thorin';
+
+import "./style.css";
 
 const { chains, publicClient, webSocketPublicClient } = configureChains(
   [mainnet],
@@ -16,12 +19,15 @@ const config = createConfig({
   webSocketPublicClient,
 });
 
-const root = createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
 
+// Wrap app in ThemeProvider
 root.render(
   <StrictMode>
-    <WagmiConfig config={config}>
-      <App />
-    </WagmiConfig>
+    <ThemeProvider>
+      <WagmiConfig config={config}>
+        <App />
+      </WagmiConfig>
+    </ThemeProvider>
   </StrictMode>
 );
diff --git a/examples/profile/src/style.css b/examples/profile/src/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/profile/tailwind.config.ts b/examples/profile/tailwind.config.ts
@@ -0,0 +1,69 @@
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+
+const config: Config = {
+    content: [
+        './src/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+    darkMode: 'class',
+    plugins: [
+        plugin(({ addVariant, matchVariant, theme }) => {
+            // Tailwind variant for not disabled
+            addVariant('not-disabled', ['&:not([disabled])']);
+
+            matchVariant('vh', (value) => `@media (min-height: ${value})`, {
+                values: theme('screens'),
+            });
+
+            matchVariant('max-vh', (value) => `@media (max-height: ${value})`, {
+                values: theme('screens'),
+            });
+        }),
+    ],
+    theme: {
+        fontFamily: {
+            sans: ['Satoshi', 'sans-serif'],
+            serif: ['Mitr', 'sans-serif'],
+        },
+        extend: {
+            screens: {
+                xs: '480px',
+            },
+            maxWidth: {
+                '8xl': '1440px',
+            },
+            aspectRatio: {
+                cover: '1920 / 1080',
+            },
+            colors: {
+                ens: {
+                    blue: '#5298FF',
+                    blue2: 'rgba(82, 152, 255, 0.6)',
+                    blue3: 'rgba(82, 152, 255, 0.25)',
+                    green: '#49B393',
+                    indigo: '#5854D6',
+                    orange: '#FF9500',
+                    pink: '#FF2D55',
+                    purple: '#AF52DE',
+                    red: '#D55555',
+                    teal: '#5AC8FA',
+                    yellow: '#E8B811',
+                    grey1: '#F6F6F6',
+                    grey2: '#9B9BA7',
+                    grey3: '#454545',
+                    'gradient-blue':
+                        'linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)',
+                    'gradient-purple':
+                        'linear-gradient(323.31deg, #DE82FF -15.56%, #7F6AFF 108.43%)',
+                    'gradient-green':
+                        'linear-gradient(323.31deg, #73A6F2 -15.56%, #42C2AB 108.43%)',
+                },
+            },
+            borderRadius: {
+                ens: '16px',
+            },
+        },
+    },
+};
+
+export default config;
diff --git a/examples/profile/tsconfig.json b/examples/profile/tsconfig.json
@@ -1,8 +1,29 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "target": "es2022",
+        "allowJs": true,
+        "resolveJsonModule": true,
+        "moduleDetection": "force",
+        "isolatedModules": true,
+        "verbatimModuleSyntax": true,
+        "strict": true,
+        "noUncheckedIndexedAccess": true,
+        "noImplicitOverride": true,
+        "noEmit": true,
+        "lib": [
+            "es2022",
+            "dom",
+            "dom.iterable"
+        ],
         "jsx": "react-jsx",
-        "lib": ["DOM", "ES2022"],
-        "moduleResolution": "node",
-        "target": "ES2022"
-    }
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "baseUrl": ".",
+        "incremental": true,
+        "strictNullChecks": true
+    },
+    "include": ["**/*.ts", "**/*.tsx", "postcss.config.js"],
+    "exclude": ["node_modules"]
 }