这是indexloc提供的服务，不要输入任何密码
Skip to content

feat: upgrade to tailwind v4 #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 7, 2025
Merged

feat: upgrade to tailwind v4 #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3bfc60c
feat: upgrade to tailwind v4
krzysu Feb 6, 2025
ec9124b
feat: upgrade to tailwind v4
krzysu Feb 6, 2025
b97e035
continue
krzysu Feb 6, 2025
bd7cef8
remove tailwind animate
krzysu Feb 6, 2025
bec7de3
move tailwind config to css
krzysu Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,11 @@
"dependencies": {
"@circle-fin/developer-controlled-wallets": "^7.0.0",
"@web3icons/react": "^3.16.0",
"lucide-react": "^0.462.0",
"lucide-react": "^0.474.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.54.2",
"tailwindcss": "^3.4.4",
"tailwindcss-animate": "^1.0.7",
"tailwindcss": "^4.0.4",
"typescript": "^5.7.2"
},
"private": true,
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-demo-webapp/app/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as React from 'react';
import { cn } from '~/lib/utils';

export const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-demo-webapp/app/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-demo-webapp/app/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
error ? 'border-destructive' : '',
className,
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-demo-webapp/app/components/ui/inputWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const InputWithIcon = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'border border-input py-2 justify-between h-10 flex w-full px-8 rounded-md bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'border border-input py-2 justify-between h-10 flex w-full px-8 rounded-md bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className,
)}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-demo-webapp/app/components/ui/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className,
)}
ref={ref}
Expand Down
8 changes: 4 additions & 4 deletions packages/circle-demo-webapp/app/components/ui/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
<ToastPrimitives.Viewport
ref={ref}
className={cn(
'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
className,
)}
{...props}
Expand All @@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;

const toastVariants = cva(
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full',
{
variants: {
variant: {
Expand Down Expand Up @@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive',
className,
)}
{...props}
Expand All @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
<ToastPrimitives.Close
ref={ref}
className={cn(
'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600',
className,
)}
toast-close=""
Expand Down
3 changes: 1 addition & 2 deletions packages/circle-demo-webapp/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { Sidebar } from '~/components/Sidebar';
import { Toaster } from '~/components/ui/toaster';
import { cachedWalletSets } from '~/lib/memcache';

import '@circle-libs/react-elements/styles.css';
import './tailwind.css';

export const meta: MetaFunction = () => {
Expand Down Expand Up @@ -58,7 +57,7 @@ export default function App() {

<div className="flex-1 overflow-y-auto bg-secondary/40 relative">
{navigation.state === 'loading' && (
<div className="absolute inset-0 flex items-center justify-center bg-background/80 z-50">
<div className="absolute inset-0 flex items-center justify-center bg-white/80 z-50">
<LoaderCircle className="animate-spin" strokeWidth={1} size={64} />
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-demo-webapp/app/routes/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function Page() {
return (
<div className="p-8 pt-12 max-w-4xl mx-auto min-h-[calc(100vh-4rem)] flex flex-col">
<div className="flex-grow space-y-8">
<div className="grow space-y-8">
<div className="space-y-4">
<h1 className="text-3xl font-semibold">Welcome to Circle Elements Demo</h1>
<p className="text-muted-foreground">
Expand Down
29 changes: 8 additions & 21 deletions packages/circle-demo-webapp/app/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@import '@circle-libs/react-elements/styles.css';
Copy link
Contributor Author

@krzysu krzysu Feb 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you import react-elements css in the app css file now @avkos


@layer base {
:root {
/* Background Colors */
--background: 0 0% 100%; /* White background for light mode */
--foreground: 240 10% 3.9%; /* Dark text for light mode */
@custom-variant dark (&:is(.dark *));

/* Primary Brand Color - Jelly 400 */
--primary: 255 82% 64%; /* Jelly 400 - Vibrant purple */
--primary-foreground: 0 0% 98%; /* White text for contrast */
}

.dark {
/* Background Colors */
--background: 240 10% 3.9%; /* Dark background for dark mode */
--foreground: 0 0% 98%;
:root {
--primary: hsl(255 82% 64%); /* Overwrite to match your theme. */
}

/* Primary Brand Color - Jelly 400 */
--primary: 255 82% 64%; /* Jelly 400 - Vibrant purple */
--primary-foreground: 0 0% 98%; /* White text for contrast */
}
.dark {
--primary: hsl(255 82% 64%);
}
4 changes: 2 additions & 2 deletions packages/circle-demo-webapp/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"config": "",
"css": "app/tailwind.css",
"baseColor": "zinc",
"cssVariables": true,
Expand Down
11 changes: 5 additions & 6 deletions packages/circle-demo-webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,35 +41,34 @@
"clsx": "^2.1.1",
"ethereum-blockies-base64": "^1.0.2",
"isbot": "^4.0.0",
"lucide-react": "^0.462.0",
"lucide-react": "^0.474.0",
"qrcode.react": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.54.2",
"tailwind-merge": "^2.5.5",
"tailwind-merge": "^3.0.1",
"zod": "^3.24.1"
},
"devDependencies": {
"@remix-run/dev": "^2.15.0",
"@tailwindcss/vite": "^4.0.4",
"@types/node": "^22.9.0",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^8.18.1",
"@typescript-eslint/parser": "^8.18.1",
"autoprefixer": "^10.4.19",
"eslint": "^9.17.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^5.1.0",
"postcss": "^8.4.38",
"prettier": "^3.4.1",
"tailwindcss": "^3.4.4",
"tailwindcss": "^4.0.4",
"typescript": "^5.7.2",
"typescript-eslint": "^8.11.0",
"vite": "^5.1.0",
"vite": "^5.2.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
6 changes: 0 additions & 6 deletions packages/circle-demo-webapp/postcss.config.js
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions packages/circle-demo-webapp/tailwind.config.ts
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions packages/circle-demo-webapp/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import path from 'path';

import { vitePlugin as remix } from '@remix-run/dev';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

Expand All @@ -27,6 +28,7 @@ export default defineConfig({
},
}),
tsconfigPaths(),
tailwindcss(),
],
resolve: {
alias: {
Expand Down
34 changes: 15 additions & 19 deletions packages/circle-react-elements/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,47 +60,43 @@ This package requires the following peer dependencies:
{
"@circle-fin/developer-controlled-wallets": "^7.0.0", // Circle SDK
"@web3icons/react": "^3.16.0", // Blockchain icons
"lucide-react": "^0.462.0", // Icon library
"lucide-react": "^0.474.0", // Icon library
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.54.2", // Form validation
"tailwindcss": "^3.4.4", // CSS framework
"tailwindcss-animate": "^1.0.7" // Animation utilities
"tailwindcss": "^4.0.4" // CSS framework
}
```

Install them all in a single command:

```bash
npm install @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss tailwindcss-animate
npm install @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss
```

or

```bash
yarn add @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss tailwindcss-animate
yarn add @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss
```

## Tailwind CSS Setup

1. Add the package's Tailwind preset to your `tailwind.config.ts`:
Import the Circle React Elements CSS in your app's `tailwind.css` file:

```typescript
import circlePreset from '@circle-libs/react-elements/tailwind.preset';
import type { Config } from 'tailwindcss';
```css
@import 'tailwindcss';
@import '@circle-libs/react-elements/styles.css';

export default {
content: [
// ... your content paths
],
presets: [circlePreset],
} satisfies Config;
```
@custom-variant dark (&:is(.dark *));

2. Import the CSS in your app's entry point:
:root {
--primary: hsl(255 82% 64%); /* Overwrite to match your theme. */
}

```typescript
import '@circle-libs/react-elements/styles.css';
.dark {
--primary: hsl(255 82% 64%); /* Overwrite to match your theme. */
}
```

## Quick Start
Expand Down
6 changes: 3 additions & 3 deletions packages/circle-react-elements/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/tailwind.css",
"config": "",
"css": "app/tailwind.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
Expand Down
2 changes: 1 addition & 1 deletion packages/circle-react-elements/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default tseslint.config(
'dist',
'.storybook',
'storybook-static',
'tailwind.config.ts',
'tsup.config.ts',
'vite.config.ts',
],
},
Expand Down
Loading