Examples

import { create } from 'storken'

const [useStorken] = create({
  initialValues: {
    counter: 0
  }
})

function Counter() {
  const [count, setCount, resetCount] = useStorken<number>('counter')
  
  return (
    <div className="p-6 border rounded-lg">
      <h2 className="text-xl font-semibold mb-4">Counter: {count}</h2>
      <div className="space-x-2">
        <button 
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          +1
        </button>
        <button 
          onClick={() => setCount(prev => prev - 1)}
          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
        >
          -1
        </button>
        <button 
          onClick={resetCount}
          className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
        >
          Reset
        </button>
      </div>
    </div>
  )
}

const [useStorken] = create({
  getters: {
    user: async (storken, userId: string) => {
      const response = await fetch(`/api/users/${userId}`)
      if (!response.ok) throw new Error('Failed to fetch user')
      return response.json()
    }
  }
})

function UserProfile({ userId }) {
  const [user, setUser, resetUser, loading, refetch] = useStorken<User>('user')
  
  useEffect(() => {
    if (!user && userId) {
      refetch(userId)
    }
  }, [user, userId, refetch])
  
  if (loading) return <div>Loading user...</div>
  
  return (
    <div>
      <h1>Welcome {user?.name}</h1>
      <button onClick={refetch}>Refresh Data</button>
    </div>
  )
}

interface Todo {
  id: string
  text: string
  completed: boolean
  createdAt: Date
}

const [useStorken] = create({
  initialValues: {
    todos: [] as Todo[],
    filter: 'all' as 'all' | 'active' | 'completed'
  }
})

function TodoApp() {
  const [todos, setTodos] = useStorken<Todo[]>('todos')
  
  const addTodo = (text: string) => {
    const newTodo = {
      id: Date.now().toString(),
      text: text.trim(),
      completed: false,
      createdAt: new Date()
    }
    setTodos([...todos, newTodo])
  }
  
  const toggleTodo = (id: string) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ))
  }
  
  return (
    <div>
      <h1>Todo List</h1>
      {/* Todo implementation */}
    </div>
  )
}