Merge pull request #4 from hasan-deriv/pr-1319-css-setup

Hasan/Pr 1319 smarttrader css setup

.prettierrc

@@ -7,5 +7,8 @@
     "printWidth": 120,
     "jsxSingleQuote": true,
     "arrowParens": "avoid",
-    "proseWrap": "preserve"
+    "proseWrap": "preserve",
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
 }

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/main.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "Components/*",
+    "utils": "Utils/*"
+  }
+}

package.json

@@ -13,8 +13,12 @@
         "test:coverage": "vitest run --coverage"
     },
     "dependencies": {
+        "clsx": "^2.0.0",
+        "class-variance-authority": "^0.7.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^6.1.3",
@@ -27,11 +31,15 @@
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
         "@vitest/coverage-v8": "^0.34.6",
+        "autoprefixer": "^10.4.16",
         "eslint": "^8.45.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
         "jsdom": "^22.1.0",
+        "postcss": "^8.4.31",
         "prettier": "3.0.3",
+        "prettier-plugin-tailwindcss": "^0.5.5",
+        "tailwindcss": "^3.3.3",
         "typescript": "^5.0.2",
         "vite": "^4.4.5",
         "vitest": "^0.34.5"

postcss.config.cjs

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

src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
+import 'Styles/main.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>

src/styles/fonts.css

@@ -0,0 +1,53 @@
+/* roboto-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url('./fonts/roboto/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* roboto-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* roboto-700 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url('./fonts/roboto/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-sans-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url('./fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-sans-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-sans-500 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url('./fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

src/styles/main.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply font-ibm text-prominent leading-body text-base font-normal overflow-x-hidden;
+    }
+    p {
+        @apply mb-4;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6{
+        @apply font-ibm text-prominent leading-base font-bold;
+    }
+    h3,
+    .h3 {
+        @apply text-[1.375rem];
+    }
+}

src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

tailwind.config.js

@@ -0,0 +1,88 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.tsx"],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          "dark-grey": "#0e0e0e",
+          "orange": "#ff6444",
+          "orange-1": "#e98024",
+          "secondary": "#85acb0"
+        },
+        general: {
+          "section-1": "#f2f3f4",
+        },
+        purchase: {
+          "section-1": "#3d9494",
+          "section-2": "#d33636",
+        },
+        primary:  {
+          DEFAULT: "#ff444f",
+          hover: "#eb3e48"
+        },
+        secondary: "#999999",
+        disabled: {
+          DEFAULT: "#eaeced",
+          100: "#e6e9e9",
+          200: "#d6d6d6"
+        },
+        prominent:" #333333",
+        "colored-barrier": "#008000",
+        active: "#d6dadb",
+        danger: "#ec3f3f",
+        success: "#4bb4b3",
+        warning: "#ffad3a",
+        info: "#377cfc",
+        transparent: "transparent",
+      },
+      backgroundImage: {
+        "gradient-success": "linear-gradient(to top, #ffffff, rgba(75, 180, 179, 0.16))",
+        "gradient-danger": "linear-gradient(to top, #ffffff, rgba(255, 68, 79, 0.16))",
+      },
+      fontSize: {
+        base: "1rem",
+        xxs: "1.2rem",
+        xs: "1.4rem",
+        s: "1.6rem",
+        sm: "2rem",
+        m: "2.4rem",
+        l: "3.2rem",
+        xl: "4.8rem",
+        xxl: "6.4rem",
+      },
+      fontFamily: {
+        roboto: ["Roboto", "sans-serif"],
+        ibm: ["IBM Plex Sans", "sans-serif"],
+      },
+      lineHeight: {
+        body: 1.375,
+        base: 1
+      },
+      screens: {
+        sm: "576px",
+        // => @media (min-width: 576px) { ... }
+
+        md: "768px",
+        // => @media (min-width: 768px) { ... }
+      }
+    },
+  },
+  corePlugins: {
+    container: false,
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    function addComponentsFunc({ addComponents }) {
+      addComponents({
+          ".container": {
+              maxWidth: "960px",
+              marginInline: "auto",
+              paddingInline: "10px",
+              position: "relative",
+              zIndex: 10,
+          },
+      });
+    },
+  ],
+}

tsconfig.json

@@ -28,7 +28,8 @@
       "Constants/*": ["constants/*"],
       "Contexts/*": ["contexts/*"],
       "Hooks/*": ["hooks/*"],
-      "Utils/*": ["utils/*"]
+      "Utils/*": ["utils/*"],
+      "Styles/*": ["styles/*"]
     }
   },
   "include": ["src"],

vite.config.ts

@@ -8,6 +8,7 @@ const ALIASES = {
   Contexts: resolve(__dirname, "./src/contexts"),
   Hooks: resolve(__dirname, "./src/hooks"),
   Utils: resolve(__dirname, "./src/utils"),
+  Styles: resolve(__dirname, "./src/styles"),
 };
 
 // https://vitejs.dev/config/