From 8900839157060dc56fd7f842c359bda5236cffc3 Mon Sep 17 00:00:00 2001 From: MohamedBassem Date: Sat, 23 Mar 2024 15:29:04 +0000 Subject: [PATCH] chore: Refactor tailwind in all apps to use the tooling package --- apps/browser-extension/tsconfig.json | 2 - apps/landing/app/layout.tsx | 2 +- apps/landing/tailwind.config.ts | 87 +---- apps/mobile/globals.css | 81 +---- apps/mobile/tailwind.config.ts | 70 +--- apps/web/app/globals.css | 76 ----- apps/web/app/layout.tsx | 2 +- apps/web/package.json | 2 - apps/web/tailwind.config.ts | 87 +---- docs/tsconfig.json | 1 - pnpm-lock.yaml | 311 +++++++++++++++++- tooling/tailwind/base.ts | 14 +- .../app => tooling/tailwind}/globals.css | 0 tooling/tailwind/native.ts | 10 +- tooling/tailwind/package.json | 7 +- tooling/tailwind/web.ts | 19 +- 16 files changed, 347 insertions(+), 424 deletions(-) delete mode 100644 apps/web/app/globals.css rename {apps/landing/app => tooling/tailwind}/globals.css (100%) diff --git a/apps/browser-extension/tsconfig.json b/apps/browser-extension/tsconfig.json index 3a88f0af..d1cd8091 100644 --- a/apps/browser-extension/tsconfig.json +++ b/apps/browser-extension/tsconfig.json @@ -6,7 +6,6 @@ "module": "ESNext", "skipLibCheck": true, - /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, @@ -14,7 +13,6 @@ "noEmit": true, "jsx": "react-jsx", - /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, diff --git a/apps/landing/app/layout.tsx b/apps/landing/app/layout.tsx index ab7f2a50..22f3c6ed 100644 --- a/apps/landing/app/layout.tsx +++ b/apps/landing/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import "./globals.css"; +import "@hoarder/tailwind-config/globals.css"; import React from "react"; diff --git a/apps/landing/tailwind.config.ts b/apps/landing/tailwind.config.ts index 521ba51c..1c042f0e 100644 --- a/apps/landing/tailwind.config.ts +++ b/apps/landing/tailwind.config.ts @@ -1,89 +1,10 @@ import type { Config } from "tailwindcss"; +import web from "@hoarder/tailwind-config/web"; + const config = { - darkMode: ["class"], - content: [ - "./pages/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", - ], - prefix: "", - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - "pulse-border": { - "0%, 100%": { - "box-shadow": "0 0 0 0 gray", - }, - "50%": { - "box-shadow": "0 0 0 2px gray", - }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "pulse-border": "pulse-border 1s ease-in-out infinite", - }, - }, - }, - plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], + content: web.content, + presets: [web], } satisfies Config; export default config; diff --git a/apps/mobile/globals.css b/apps/mobile/globals.css index de1cf559..7d537499 100644 --- a/apps/mobile/globals.css +++ b/apps/mobile/globals.css @@ -1,80 +1 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --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%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --radius: 0.5rem; - } - - .dark:root { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 0.5rem; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} +@import "@hoarder/tailwind-config/globals"; diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts index fef31daf..9eb1eb4a 100644 --- a/apps/mobile/tailwind.config.ts +++ b/apps/mobile/tailwind.config.ts @@ -1,74 +1,10 @@ import type { Config } from "tailwindcss"; -import { hairlineWidth } from "nativewind/theme"; +import base from "@hoarder/tailwind-config/native"; const config = { - content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"], + content: base.content, plugins: [], - presets: [require("nativewind/preset")], - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderWidth: { - // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment - hairline: hairlineWidth(), - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, - }, + presets: [base, require("nativewind/preset")], } satisfies Config; export default config; diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css deleted file mode 100644 index 8abdb15c..00000000 --- a/apps/web/app/globals.css +++ /dev/null @@ -1,76 +0,0 @@ -@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; - } -} diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 395d7297..f5ad19f6 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import "./globals.css"; +import "@hoarder/tailwind-config/globals.css"; import type { Viewport } from "next"; import React from "react"; diff --git a/apps/web/package.json b/apps/web/package.json index a81079f5..88692c31 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -58,7 +58,6 @@ "react-select": "^5.8.0", "superjson": "^2.2.1", "tailwind-merge": "^2.2.1", - "tailwindcss-animate": "^1.0.7", "zod": "^3.22.4", "zustand": "^4.5.1" }, @@ -67,7 +66,6 @@ "@hoarder/prettier-config": "workspace:^0.1.0", "@hoarder/tailwind-config": "workspace:^0.1.0", "@hoarder/tsconfig": "workspace:^0.1.0", - "@tailwindcss/typography": "^0.5.10", "@types/emoji-mart": "^3.0.14", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts index 521ba51c..1c042f0e 100644 --- a/apps/web/tailwind.config.ts +++ b/apps/web/tailwind.config.ts @@ -1,89 +1,10 @@ import type { Config } from "tailwindcss"; +import web from "@hoarder/tailwind-config/web"; + const config = { - darkMode: ["class"], - content: [ - "./pages/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", - ], - prefix: "", - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - "pulse-border": { - "0%, 100%": { - "box-shadow": "0 0 0 0 gray", - }, - "50%": { - "box-shadow": "0 0 0 2px gray", - }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "pulse-border": "pulse-border 1s ease-in-out infinite", - }, - }, - }, - plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], + content: web.content, + presets: [web], } satisfies Config; export default config; diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 314eab8a..d250afae 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,5 +1,4 @@ { - // This file is not used in compilation. It is here just for a nice editor experience. "extends": "@docusaurus/tsconfig", "compilerOptions": { "baseUrl": "." diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b87e252..cb3b5f7e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -463,9 +463,6 @@ importers: tailwind-merge: specifier: ^2.2.1 version: 2.2.1 - tailwindcss-animate: - specifier: ^1.0.7 - version: 1.0.7(tailwindcss@3.4.1) zod: specifier: ^3.22.4 version: 3.22.4 @@ -485,9 +482,6 @@ importers: '@hoarder/tsconfig': specifier: workspace:^0.1.0 version: link:../../tooling/typescript - '@tailwindcss/typography': - specifier: ^0.5.10 - version: 0.5.10(tailwindcss@3.4.1) '@types/emoji-mart': specifier: ^3.0.14 version: 3.0.14 @@ -833,6 +827,12 @@ importers: tooling/tailwind: dependencies: + '@tailwindcss/typography': + specifier: ^0.5.10 + version: 0.5.10(tailwindcss@3.4.1) + nativewind: + specifier: ^4.0.1 + version: 4.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1) postcss: specifier: ^8.4.35 version: 8.4.35 @@ -12233,6 +12233,15 @@ snapshots: '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.9) dev: false + '@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.0)': + dependencies: + '@babel/core': 7.24.0 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.0) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.0) + dev: false + '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.23.9)': dependencies: '@babel/core': 7.23.9 @@ -12262,6 +12271,13 @@ snapshots: '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.23.9) dev: false + '@babel/plugin-proposal-export-default-from@7.23.3(@babel/core@7.24.0)': + dependencies: + '@babel/core': 7.24.0 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.24.0) + dev: false + '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.23.9)': dependencies: '@babel/core': 7.23.9 @@ -12283,6 +12299,13 @@ snapshots: '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.9) dev: false + '@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.0)': + dependencies: + '@babel/core': 7.24.0 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.0) + dev: false + '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.23.9)': dependencies: '@babel/compat-data': 7.23.5 @@ -12310,6 +12333,13 @@ snapshots: '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.9) dev: false + '@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.0)': + dependencies: + '@babel/core': 7.24.0 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.0) + dev: false + '@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.23.9)': dependencies: '@babel/core': 7.23.9 @@ -12396,6 +12426,12 @@ snapshots: '@babel/helper-plugin-utils': 7.24.0 dev: false + '@babel/plugin-syntax-export-default-from@7.23.3(@babel/core@7.24.0)': + dependencies: + '@babel/core': 7.24.0 + '@babel/helper-plugin-utils': 7.24.0 + dev: false + '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.9)': dependencies: '@babel/core': 7.23.9 @@ -13194,8 +13230,6 @@ snapshots: dependencies: '@babel/core': 7.24.0 '@babel/helper-plugin-utils': 7.24.0 - dev: true - optional: true '@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.9)': dependencies: @@ -13207,8 +13241,6 @@ snapshots: dependencies: '@babel/core': 7.24.0 '@babel/helper-plugin-utils': 7.24.0 - dev: true - optional: true '@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9)': dependencies: @@ -16185,6 +16217,14 @@ snapshots: - supports-color dev: false + '@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.0(@babel/core@7.24.0))': + dependencies: + '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + transitivePeerDependencies: + - '@babel/preset-env' + - supports-color + dev: false + '@react-native/babel-preset@0.73.21(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))': dependencies: '@babel/core': 7.23.9 @@ -16234,6 +16274,55 @@ snapshots: - supports-color dev: false + '@react-native/babel-preset@0.73.21(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))': + dependencies: + '@babel/core': 7.24.0 + '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.0) + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.0) + '@babel/plugin-proposal-export-default-from': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.0) + '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.0) + '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.0) + '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.0) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.0) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.0) + '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.0) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.0) + '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-classes': 7.23.8(@babel/core@7.24.0) + '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.0) + '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-runtime': 7.24.0(@babel/core@7.24.0) + '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.24.0) + '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.24.0) + '@babel/template': 7.24.0 + '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.0) + react-refresh: 0.14.0 + transitivePeerDependencies: + - '@babel/preset-env' + - supports-color + dev: false + '@react-native/codegen@0.73.3(@babel/preset-env@7.24.0(@babel/core@7.23.9))': dependencies: '@babel/parser': 7.24.0 @@ -16248,6 +16337,20 @@ snapshots: - supports-color dev: false + '@react-native/codegen@0.73.3(@babel/preset-env@7.24.0(@babel/core@7.24.0))': + dependencies: + '@babel/parser': 7.24.0 + '@babel/preset-env': 7.24.0(@babel/core@7.24.0) + flow-parser: 0.206.0 + glob: 7.2.3 + invariant: 2.2.4 + jscodeshift: 0.14.0(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + mkdirp: 0.5.6 + nullthrows: 1.1.1 + transitivePeerDependencies: + - supports-color + dev: false + '@react-native/community-cli-plugin@0.73.16(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))': dependencies: '@react-native-community/cli-server-api': 12.3.2 @@ -16270,6 +16373,28 @@ snapshots: - utf-8-validate dev: false + '@react-native/community-cli-plugin@0.73.16(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))': + dependencies: + '@react-native-community/cli-server-api': 12.3.2 + '@react-native-community/cli-tools': 12.3.2 + '@react-native/dev-middleware': 0.73.7 + '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + chalk: 4.1.2 + execa: 5.1.1 + metro: 0.80.6 + metro-config: 0.80.6 + metro-core: 0.80.6 + node-fetch: 2.7.0 + readline: 1.3.0 + transitivePeerDependencies: + - '@babel/core' + - '@babel/preset-env' + - bufferutil + - encoding + - supports-color + - utf-8-validate + dev: false + '@react-native/debugger-frontend@0.73.3': dev: false @@ -16327,6 +16452,17 @@ snapshots: - supports-color dev: false + '@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))': + dependencies: + '@babel/core': 7.24.0 + '@react-native/babel-preset': 0.73.21(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + hermes-parser: 0.15.0 + nullthrows: 1.1.1 + transitivePeerDependencies: + - '@babel/preset-env' + - supports-color + dev: false + '@react-native/normalize-color@2.1.0': dev: false @@ -16340,6 +16476,13 @@ snapshots: react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0) dev: false + '@react-native/virtualized-lists@0.73.4(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))': + dependencies: + invariant: 2.2.4 + nullthrows: 1.1.1 + react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0) + dev: false + '@react-navigation/bottom-tabs@6.5.18(@react-navigation/native@6.1.15(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native-safe-area-context@4.8.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native-screens@3.29.0(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0)': dependencies: '@react-navigation/elements': 1.3.28(@react-navigation/native@6.1.15(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native-safe-area-context@4.8.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0) @@ -16816,7 +16959,6 @@ snapshots: lodash.merge: 4.6.2 postcss-selector-parser: 6.0.10 tailwindcss: 3.4.1 - dev: true '@tanstack/eslint-plugin-query@5.20.1(eslint@8.57.0)(typescript@5.3.3)': dependencies: @@ -18051,6 +18193,18 @@ snapshots: - supports-color dev: false + babel-plugin-tester@11.0.4(@babel/core@7.24.0): + dependencies: + '@babel/core': 7.24.0 + core-js: 3.36.0 + debug: 4.3.4 + lodash.mergewith: 4.6.2 + prettier: 2.8.8 + strip-indent: 3.0.0 + transitivePeerDependencies: + - supports-color + dev: false + babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.23.9): dependencies: '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9) @@ -18058,6 +18212,13 @@ snapshots: - '@babel/core' dev: false + babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.0): + dependencies: + '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.24.0) + transitivePeerDependencies: + - '@babel/core' + dev: false + babel-preset-expo@10.0.1(@babel/core@7.23.9): dependencies: '@babel/plugin-proposal-decorators': 7.24.0(@babel/core@7.23.9) @@ -22054,6 +22215,32 @@ snapshots: - supports-color dev: false + jscodeshift@0.14.0(@babel/preset-env@7.24.0(@babel/core@7.24.0)): + dependencies: + '@babel/core': 7.24.0 + '@babel/parser': 7.24.0 + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.0) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.0) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.0) + '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.24.0) + '@babel/preset-env': 7.24.0(@babel/core@7.24.0) + '@babel/preset-flow': 7.24.0(@babel/core@7.24.0) + '@babel/preset-typescript': 7.23.3(@babel/core@7.24.0) + '@babel/register': 7.23.7(@babel/core@7.24.0) + babel-core: 7.0.0-bridge.0(@babel/core@7.24.0) + chalk: 4.1.2 + flow-parser: 0.206.0 + graceful-fs: 4.2.11 + micromatch: 4.0.5 + neo-async: 2.6.2 + node-dir: 0.1.17 + recast: 0.21.5 + temp: 0.8.4 + write-file-atomic: 2.4.3 + transitivePeerDependencies: + - supports-color + dev: false + jsdom@24.0.0: dependencies: cssstyle: 4.0.1 @@ -22365,8 +22552,7 @@ snapshots: p-locate: 6.0.0 dev: false - lodash.castarray@4.4.0: - dev: true + lodash.castarray@4.4.0: {} lodash.debounce@4.0.8: dev: false @@ -22377,8 +22563,7 @@ snapshots: lodash.isarguments@3.1.0: dev: false - lodash.isplainobject@4.0.6: - dev: true + lodash.isplainobject@4.0.6: {} lodash.memoize@4.1.2: dev: false @@ -23649,6 +23834,20 @@ snapshots: - supports-color dev: false + nativewind@4.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1): + dependencies: + react-native-css-interop: 0.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1) + tailwindcss: 3.4.1 + transitivePeerDependencies: + - '@babel/core' + - react + - react-native + - react-native-reanimated + - react-native-safe-area-context + - react-native-svg + - supports-color + dev: false + natural-compare@1.4.0: {} ncp@2.0.0: @@ -24581,7 +24780,6 @@ snapshots: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 - dev: true postcss-selector-parser@6.0.15: dependencies: @@ -25135,6 +25333,22 @@ snapshots: - supports-color dev: false + react-native-css-interop@0.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1): + dependencies: + '@babel/helper-module-imports': 7.22.15 + '@babel/traverse': 7.24.0 + '@babel/types': 7.24.0 + babel-plugin-tester: 11.0.4(@babel/core@7.24.0) + lightningcss: 1.22.0 + react: 18.2.0 + react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0) + react-native-reanimated: 3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0) + tailwindcss: 3.4.1 + transitivePeerDependencies: + - '@babel/core' + - supports-color + dev: false + react-native-fit-image@1.5.5: dependencies: prop-types: 15.8.1 @@ -25165,6 +25379,21 @@ snapshots: react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0) dev: false + react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0): + dependencies: + '@babel/core': 7.24.0 + '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.24.0) + '@babel/preset-typescript': 7.23.3(@babel/core@7.24.0) + convert-source-map: 2.0.0 + invariant: 2.2.4 + react: 18.2.0 + react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0) + dev: false + react-native-safe-area-context@4.8.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0): dependencies: react: 18.2.0 @@ -25237,6 +25466,56 @@ snapshots: - utf-8-validate dev: false + react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0): + dependencies: + '@jest/create-cache-key-function': 29.7.0 + '@react-native-community/cli': 12.3.2 + '@react-native-community/cli-platform-android': 12.3.2 + '@react-native-community/cli-platform-ios': 12.3.2 + '@react-native/assets-registry': 0.73.1 + '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + '@react-native/community-cli-plugin': 0.73.16(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0)) + '@react-native/gradle-plugin': 0.73.4 + '@react-native/js-polyfills': 0.73.1 + '@react-native/normalize-colors': 0.73.2 + '@react-native/virtualized-lists': 0.73.4(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0)) + abort-controller: 3.0.0 + anser: 1.4.10 + ansi-regex: 5.0.1 + base64-js: 1.5.1 + chalk: 4.1.2 + deprecated-react-native-prop-types: 5.0.0 + event-target-shim: 5.0.1 + flow-enums-runtime: 0.0.6 + invariant: 2.2.4 + jest-environment-node: 29.7.0 + jsc-android: 250231.0.0 + memoize-one: 5.2.1 + metro-runtime: 0.80.6 + metro-source-map: 0.80.6 + mkdirp: 0.5.6 + nullthrows: 1.1.1 + pretty-format: 26.6.2 + promise: 8.3.0 + react: 18.2.0 + react-devtools-core: 4.28.5 + react-refresh: 0.14.0 + react-shallow-renderer: 16.15.0(react@18.2.0) + regenerator-runtime: 0.13.11 + scheduler: 0.24.0-canary-efb381bbf-20230505 + stacktrace-parser: 0.1.10 + whatwg-fetch: 3.6.20 + ws: 6.2.2 + yargs: 17.7.2 + transitivePeerDependencies: + - '@babel/core' + - '@babel/preset-env' + - bufferutil + - encoding + - supports-color + - utf-8-validate + dev: false + react-refresh@0.13.0: dev: true diff --git a/tooling/tailwind/base.ts b/tooling/tailwind/base.ts index 15fd759a..6316beb2 100644 --- a/tooling/tailwind/base.ts +++ b/tooling/tailwind/base.ts @@ -2,8 +2,20 @@ import type { Config } from "tailwindcss"; export default { darkMode: ["class"], - content: ["src/**/*.{ts,tsx}"], + content: [ + "pages/**/*.{ts,tsx}", + "components/**/*.{ts,tsx}", + "app/**/*.{ts,tsx}", + "src/**/*.{ts,tsx}", + ], theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, extend: { colors: { border: "hsl(var(--border))", diff --git a/apps/landing/app/globals.css b/tooling/tailwind/globals.css similarity index 100% rename from apps/landing/app/globals.css rename to tooling/tailwind/globals.css diff --git a/tooling/tailwind/native.ts b/tooling/tailwind/native.ts index 7441221e..2ecab671 100644 --- a/tooling/tailwind/native.ts +++ b/tooling/tailwind/native.ts @@ -1,9 +1,17 @@ import type { Config } from "tailwindcss"; +import { hairlineWidth } from "nativewind/theme"; import base from "./base"; export default { content: base.content, presets: [base], - theme: {}, + theme: { + extend: { + borderWidth: { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment + hairline: hairlineWidth(), + }, + }, + }, } satisfies Config; diff --git a/tooling/tailwind/package.json b/tooling/tailwind/package.json index 9ee573a5..a5f4824f 100644 --- a/tooling/tailwind/package.json +++ b/tooling/tailwind/package.json @@ -5,7 +5,8 @@ "type": "module", "exports": { "./native": "./native.ts", - "./web": "./web.ts" + "./web": "./web.ts", + "./globals.css": "./globals.css" }, "license": "MIT", "scripts": { @@ -17,7 +18,9 @@ "dependencies": { "postcss": "^8.4.35", "tailwindcss": "^3.4.1", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "@tailwindcss/typography": "^0.5.10", + "nativewind": "^4.0.1" }, "devDependencies": { "@hoarder/eslint-config": "workspace:^0.2.0", diff --git a/tooling/tailwind/web.ts b/tooling/tailwind/web.ts index 0729477a..a88268ec 100644 --- a/tooling/tailwind/web.ts +++ b/tooling/tailwind/web.ts @@ -1,4 +1,5 @@ import type { Config } from "tailwindcss"; +import typography from "@tailwindcss/typography"; import animate from "tailwindcss-animate"; import base from "./base"; @@ -7,13 +8,6 @@ export default { content: base.content, presets: [base], theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, extend: { borderRadius: { lg: "var(--radius)", @@ -29,12 +23,21 @@ export default { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, + "pulse-border": { + "0%, 100%": { + "box-shadow": "0 0 0 0 gray", + }, + "50%": { + "box-shadow": "0 0 0 2px gray", + }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", + "pulse-border": "pulse-border 1s ease-in-out infinite", }, }, }, - plugins: [animate], + plugins: [animate, typography], } satisfies Config;