Feat/add shadcn and a button

apps/front/.eslintrc.cjs

@@ -13,6 +13,17 @@ module.exports = {
   settings: { react: { version: "18.2" } },
   plugins: ["react-refresh"],
   rules: {
+    "no-unused-vars": "off",
+    "no-console": "warn",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
     "react-refresh/only-export-components": [
       "warn",
       { allowConstantExport: true },

apps/front/app/globals.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/front/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "uno.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/front/package.json

@@ -11,20 +11,32 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.292.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.42.0",
+    "@mdx-js/rollup": "3.0.0",
+    "@types/node": "20.9.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@unocss/transformer-directives": "^0.55.7",
+    "@vitejs/plugin-react": "4.1.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "hast-util-to-string": "3.0.0",
+    "rehype-highlight": "7.0.0",
+    "unist-util-visit": "5.0.0",
     "unocss": "^0.55.7",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-pages": "0.31.0"
   }
-}
+}

apps/front/preset.shadcn.ts

@@ -0,0 +1,99 @@
+import { h, variantGetParameter } from '@unocss/preset-mini/utils'
+import type { Preset, VariantContext, VariantObject } from 'unocss'
+import type { PresetMiniOptions, Theme } from 'unocss/preset-mini'
+
+export interface PresetShadcnOptions extends PresetMiniOptions { }
+
+const variantGroupDataAttribute: VariantObject = {
+  name: 'group-data',
+  match(matcher, ctx: VariantContext<Theme>) {
+    const variant = variantGetParameter('group-data-', matcher, ctx.generator.config.separators)
+    if (variant) {
+      const [match, rest] = variant
+      const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? ''
+      if (dataAttribute) {
+        return {
+          matcher: `group-[[data-${dataAttribute}]]:${rest}`,
+        }
+      }
+    }
+  },
+}
+
+function handleMatchNumber(v: string, defaultVal = '0') {
+  return h.bracket.cssvar.global.auto.fraction.number(v || defaultVal)?.replace('%', '')
+}
+const handleMatchRem = (v: string, defaultVal = 'full') => h.bracket.cssvar.global.auto.fraction.rem(v || defaultVal)
+
+export function presetShadcn(options: PresetShadcnOptions = {}): Preset<Theme> {
+  return {
+    name: 'unocss-preset-shadcn',
+    preflights: [
+      {
+        getCSS: () => `
+          @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} }
+          @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } }
+          @keyframes shadcn-enter { from{ opacity: var(--un-enter-opacity, 1); transform: translate3d(var(--un-enter-translate-x, 0), var(--un-enter-translate-y, 0), 0) scale3d(var(--un-enter-scale, 1), var(--un-enter-scale, 1), var(--un-enter-scale, 1)) rotate(var(--un-enter-rotate, 0)) } }
+          @keyframes shadcn-exit { to{ opacity: var(--un-exit-opacity, 1); transform: translate3d(var(--un-exit-translate-x, 0), var(--un-exit-translate-y, 0), 0) scale3d(var(--un-exit-scale, 1), var(--un-exit-scale, 1), var(--un-exit-scale, 1)) rotate(var(--un-exit-rotate, 0)) } }
+        `,
+      },
+    ],
+    variants: [variantGroupDataAttribute.match],
+    rules: [
+      [
+        'accordion-down',
+        {
+          animation: 'shadcn-down 0.2s ease-out',
+        },
+      ],
+      [
+        'accordion-up',
+        {
+          animation: 'shadcn-up 0.2s ease-out',
+        },
+      ],
+      [
+        'animate-in',
+        {
+          'animation-name': 'shadcn-enter',
+          'animation-duration': 'var(--un-animate-duration)',
+          '--un-animate-duration': '150ms',
+          '--un-enter-opacity': 'initial',
+          '--un-enter-scale': 'initial',
+          '--un-enter-rotate': 'initial',
+          '--un-enter-translate-x': 'initial',
+          '--un-enter-translate-y': 'initial',
+        },
+      ],
+      [
+        'animate-out',
+        {
+          'animation-name': 'shadcn-exit',
+          'animation-duration': 'var(--un-animate-duration)',
+          '--un-animate-duration': '150ms',
+          '--un-exit-opacity': 'initial',
+          '--un-exit-scale': 'initial',
+          '--un-exit-rotate': 'initial',
+          '--un-exit-translate-x': 'initial',
+          '--un-exit-translate-y': 'initial',
+        },
+      ],
+      [/^fade-in-?(.+)?$/, ([, d]) => ({ '--un-enter-opacity': `${Number(handleMatchNumber(d) || 0) / 100}` })],
+      [/^fade-out-?(.+)?$/, ([, d]) => ({ '--un-exit-opacity': `${Number(handleMatchNumber(d) || 0) / 100}` })],
+      [/^zoom-in-?(.+)?$/, ([, d]) => ({ '--un-enter-scale': `${Number(handleMatchNumber(d) || 0) / 100}` })],
+      [/^zoom-out-?(.+)?$/, ([, d]) => ({ '--un-exit-scale': `${Number(handleMatchNumber(d) || 0) / 100}` })],
+      [/^spin-in-?(.+)?$/, ([, d]) => ({ '--un-enter-rotate': `${Number(handleMatchNumber(d) || 0)}deg` })],
+      [/^spin-out-?(.+)?$/, ([, d]) => ({ '--un-exit-rotate': `${Number(handleMatchNumber(d) || 0)}deg` })],
+      [/^slide-in-from-top-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-y': `-${handleMatchRem(d)}` })],
+      [/^slide-in-from-bottom-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-y': handleMatchRem(d) })],
+      [/^slide-in-from-left-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-x': `-${handleMatchRem(d)}` })],
+      [/^slide-in-from-right-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-x': handleMatchRem(d) })],
+      [/^slide-out-to-top-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-y': `-${handleMatchRem(d)}` })],
+      [/^slide-out-to-bottom-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-y': handleMatchRem(d) })],
+      [/^slide-out-to-left-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-x': `-${handleMatchRem(d)}` })],
+      [/^slide-out-to-right-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-x': handleMatchRem(d) })],
+    ],
+  }
+}
+
+export default presetShadcn

apps/front/src/App.jsx

@@ -1,9 +1,11 @@
+import { Button } from './components/ui/button'
 import Background from './components/Background'
 
 export default function App() {
   return (
     <>
       <Background />
+      <Button >Button</Button>
     </>
   )
 }

apps/front/src/components/Background/index.jsx

@@ -3,23 +3,23 @@ export default function Background() {
     <>
       {/* Lines Background */}
       <div
-        className="absolute inset-0 bg-repeat mix-blend-overlay"
+        className="absolute inset-0 bg-repeat mix-blend-overlay -z-10"
         style={{
           background: 'url("/background-lines.png")',
           backgroundSize: '1180px',
         }}
       />
       {/* Square Tile Background */}
       <div
-        className="absolute inset-0 bg-repeat mix-blend-overlay"
+        className="absolute inset-0 bg-repeat mix-blend-overlay -z-10"
         style={{
           background: 'url("/background-squares-tile.png")',
           backgroundSize: '256px',
         }}
       />
       {/* Noise Background */}
       <div
-        className="absolute inset-0 bg-repeat mix-blend-overlay"
+        className="absolute inset-0 bg-repeat mix-blend-overlay -z-10"
         style={{
           background: 'url("/background-noise.png")',
           backgroundSize: '1920px',

apps/front/src/components/ui/button.jsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+const buttonVariants = cva(
+  'w-fit rounded-md',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white text-black',
+      },
+      size: {
+        default: 'py-3 px-3.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+// TODO: remove eslint disable line from error: https://github.com/jsx-eslint/eslint-plugin-react/issues/3284
+// eslint-disable-next-line react/prop-types
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button'
+  return (
+    (<Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props} />)
+  )
+})
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

apps/front/src/index.css

@@ -12,4 +12,4 @@ body {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-}
+}

apps/front/src/lib/utils.js

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

apps/front/src/lib/utils.ts

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

apps/front/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "docs"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

apps/front/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "preset.shadcn.ts"]
+}