dpnmw/agents
1
0
Fork 0
mirror of https://github.com/wshobson/agents.git synced 2026-03-18 17:47:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: format all files with prettier

Browse Source
This commit is contained in:
Seth Hobson
2026-01-19 17:07:03 -05:00
parent 8d37048deb
commit 56848874a2
355 changed files with 15215 additions and 10241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
plugins/ui-design/skills/interaction-design/references/microinteraction-patterns.md
View File

@@ -5,7 +5,7 @@
### Loading Button
```tsx
import { motion, AnimatePresence } from 'framer-motion';
import { motion, AnimatePresence } from "framer-motion";
interface LoadingButtonProps {
isLoading: boolean;
@@ -71,17 +71,19 @@ function Spinner({ className }: { className?: string }) {
```tsx
function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [state, setState] = useState<"idle" | "loading" | "success" | "error">(
"idle",
);
const handleClick = async () => {
setState('loading');
setState("loading");
try {
await onSubmit();
setState('success');
setTimeout(() => setState('idle'), 2000);
setState("success");
setTimeout(() => setState("idle"), 2000);
} catch {
setState('error');
setTimeout(() => setState('idle'), 2000);
setState("error");
setTimeout(() => setState("idle"), 2000);
}
};
@@ -93,18 +95,20 @@ function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
};
const colors = {
idle: 'bg-blue-600 hover:bg-blue-700',
loading: 'bg-blue-600',
success: 'bg-green-600',
error: 'bg-red-600',
idle: "bg-blue-600 hover:bg-blue-700",
loading: "bg-blue-600",
success: "bg-green-600",
error: "bg-red-600",
};
return (
<motion.button
onClick={handleClick}
disabled={state === 'loading'}
disabled={state === "loading"}
className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg transition-colors ${colors[state]}`}
animate={{ scale: state === 'success' || state === 'error' ? [1, 1.05, 1] : 1 }}
animate={{
scale: state === "success" || state === "error" ? [1, 1.05, 1] : 1,
}}
>
<AnimatePresence mode="wait">
{icons[state] && (
@@ -118,10 +122,10 @@ function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
</motion.span>
)}
</AnimatePresence>
{state === 'idle' && 'Submit'}
{state === 'loading' && 'Submitting...'}
{state === 'success' && 'Done!'}
{state === 'error' && 'Failed'}
{state === "idle" && "Submit"}
{state === "loading" && "Submitting..."}
{state === "success" && "Done!"}
{state === "error" && "Failed"}
</motion.button>
);
}
@@ -132,10 +136,16 @@ function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
### Floating Label Input
```tsx
import { useState, useId } from 'react';
import { useState, useId } from "react";
function FloatingInput({ label, type = 'text' }: { label: string; type?: string }) {
const [value, setValue] = useState('');
function FloatingInput({
label,
type = "text",
}: {
label: string;
type?: string;
}) {
const [value, setValue] = useState("");
const [isFocused, setIsFocused] = useState(false);
const id = useId();
@@ -156,9 +166,10 @@ function FloatingInput({ label, type = 'text' }: { label: string; type?: string
<label
htmlFor={id}
className={`absolute left-4 transition-all duration-200 pointer-events-none
${isFloating
? 'top-0 -translate-y-1/2 text-xs bg-white px-1 text-blue-600'
: 'top-1/2 -translate-y-1/2 text-gray-500'
${
isFloating
? "top-0 -translate-y-1/2 text-xs bg-white px-1 text-blue-600"
: "top-1/2 -translate-y-1/2 text-gray-500"
}`}
>
{label}
@@ -171,7 +182,7 @@ function FloatingInput({ label, type = 'text' }: { label: string; type?: string
### Shake on Error
```tsx
import { motion, useAnimation } from 'framer-motion';
import { motion, useAnimation } from "framer-motion";
function ShakeInput({ error, ...props }: InputProps & { error?: string }) {
const controls = useAnimation();
@@ -190,7 +201,7 @@ function ShakeInput({ error, ...props }: InputProps & { error?: string }) {
<input
{...props}
className={`w-full px-4 py-2 border rounded-lg ${
error ? 'border-red-500' : 'border-gray-300'
error ? "border-red-500" : "border-gray-300"
}`}
/>
{error && (
@@ -211,7 +222,7 @@ function ShakeInput({ error, ...props }: InputProps & { error?: string }) {
```tsx
function TextareaWithCount({ maxLength = 280 }: { maxLength?: number }) {
const [value, setValue] = useState('');
const [value, setValue] = useState("");
const remaining = maxLength - value.length;
const isNearLimit = remaining <= 20;
const isOverLimit = remaining < 0;
@@ -226,7 +237,11 @@ function TextareaWithCount({ maxLength = 280 }: { maxLength?: number }) {
/>
<motion.span
className={`absolute bottom-2 right-2 text-sm ${
isOverLimit ? 'text-red-500' : isNearLimit ? 'text-yellow-500' : 'text-gray-400'
isOverLimit
? "text-red-500"
: isNearLimit
? "text-yellow-500"
: "text-gray-400"
}`}
animate={{ scale: isNearLimit ? [1, 1.1, 1] : 1 }}
transition={{ duration: 0.2 }}
@@ -243,23 +258,23 @@ function TextareaWithCount({ maxLength = 280 }: { maxLength?: number }) {
### Toast Notifications
```tsx
import { motion, AnimatePresence } from 'framer-motion';
import { createContext, useContext, useState, useCallback } from 'react';
import { motion, AnimatePresence } from "framer-motion";
import { createContext, useContext, useState, useCallback } from "react";
interface Toast {
id: string;
message: string;
type: 'success' | 'error' | 'info';
type: "success" | "error" | "info";
}
const ToastContext = createContext<{
addToast: (message: string, type: Toast['type']) => void;
addToast: (message: string, type: Toast["type"]) => void;
} | null>(null);
export function ToastProvider({ children }: { children: React.ReactNode }) {
const [toasts, setToasts] = useState<Toast[]>([]);
const addToast = useCallback((message: string, type: Toast['type']) => {
const addToast = useCallback((message: string, type: Toast["type"]) => {
const id = Date.now().toString();
setToasts((prev) => [...prev, { id, message, type }]);
setTimeout(() => {
@@ -279,8 +294,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, x: 100, scale: 0.95 }}
className={`px-4 py-3 rounded-lg shadow-lg ${
toast.type === 'success' ? 'bg-green-600' :
toast.type === 'error' ? 'bg-red-600' : 'bg-blue-600'
toast.type === "success"
? "bg-green-600"
: toast.type === "error"
? "bg-red-600"
: "bg-blue-600"
} text-white`}
>
{toast.message}
@@ -294,7 +312,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
export function useToast() {
const context = useContext(ToastContext);
if (!context) throw new Error('useToast must be within ToastProvider');
if (!context) throw new Error("useToast must be within ToastProvider");
return context;
}
```
@@ -304,7 +322,7 @@ export function useToast() {
```tsx
function ConfirmButton({
onConfirm,
confirmText = 'Click again to confirm',
confirmText = "Click again to confirm",
children,
}: {
onConfirm: () => void;
@@ -333,13 +351,13 @@ function ConfirmButton({
<motion.button
onClick={handleClick}
className={`px-4 py-2 rounded-lg transition-colors ${
isPending ? 'bg-red-600 text-white' : 'bg-gray-200 text-gray-800'
isPending ? "bg-red-600 text-white" : "bg-gray-200 text-gray-800"
}`}
animate={{ scale: isPending ? [1, 1.02, 1] : 1 }}
>
<AnimatePresence mode="wait">
<motion.span
key={isPending ? 'confirm' : 'idle'}
key={isPending ? "confirm" : "idle"}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
@@ -357,8 +375,8 @@ function ConfirmButton({
### Active Link Indicator
```tsx
import { motion } from 'framer-motion';
import { usePathname } from 'next/navigation';
import { motion } from "framer-motion";
import { usePathname } from "next/navigation";
function Navigation({ items }: { items: { href: string; label: string }[] }) {
const pathname = usePathname();
@@ -372,14 +390,14 @@ function Navigation({ items }: { items: { href: string; label: string }[] }) {
key={item.href}
href={item.href}
className={`relative px-4 py-2 text-sm font-medium ${
isActive ? 'text-white' : 'text-gray-600 hover:text-gray-900'
isActive ? "text-white" : "text-gray-600 hover:text-gray-900"
}`}
>
{isActive && (
<motion.div
layoutId="activeNav"
className="absolute inset-0 bg-blue-600 rounded-md"
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>
)}
<span className="relative z-10">{item.label}</span>
@@ -400,9 +418,9 @@ function MenuIcon({ isOpen }: { isOpen: boolean }) {
<motion.span
className="absolute left-0 h-0.5 w-6 bg-current"
animate={{
top: isOpen ? '50%' : '25%',
top: isOpen ? "50%" : "25%",
rotate: isOpen ? 45 : 0,
translateY: isOpen ? '-50%' : 0,
translateY: isOpen ? "-50%" : 0,
}}
transition={{ duration: 0.2 }}
/>
@@ -414,9 +432,9 @@ function MenuIcon({ isOpen }: { isOpen: boolean }) {
<motion.span
className="absolute left-0 h-0.5 w-6 bg-current"
animate={{
bottom: isOpen ? '50%' : '25%',
bottom: isOpen ? "50%" : "25%",
rotate: isOpen ? -45 : 0,
translateY: isOpen ? '50%' : 0,
translateY: isOpen ? "50%" : 0,
}}
transition={{ duration: 0.2 }}
/>
@@ -453,7 +471,7 @@ function LikeButton({ postId, initialLiked, initialCount }) {
<motion.button
onClick={handleLike}
whileTap={{ scale: 0.9 }}
className={`flex items-center gap-2 ${liked ? 'text-red-500' : 'text-gray-500'}`}
className={`flex items-center gap-2 ${liked ? "text-red-500" : "text-gray-500"}`}
>
<motion.span
animate={{ scale: liked ? [1, 1.3, 1] : 1 }}
@@ -479,7 +497,7 @@ function LikeButton({ postId, initialLiked, initialCount }) {
### Pull to Refresh
```tsx
import { motion, useMotionValue, useTransform } from 'framer-motion';
import { motion, useMotionValue, useTransform } from "framer-motion";
function PullToRefresh({ onRefresh, children }) {
const y = useMotionValue(0);