State manager for any app

import { atom, computed, effect } from '@reatom/core'

const counter = atom(0).actions((target) => ({
  increment: (amount = 1) => target.set((prev) => prev + amount),
  decrement: (amount = 1) => target.set((prev) => prev - amount),
  reset: () => target.set(0),
}))

const isEven = computed(() => counter() % 2 === 0)

effect(() => console.log(isEven()))
// log: false

counter.increment()
// log: true

counter.decrement(2)
// log nothing (memoized)

import { atom } from "@reatom/core"
import { reatomComponent } from "@reatom/react"

const data = atom([])
  .extend(() => ({
    isLoading: atom(false),
  }))
  .actions((target) => ({
    async load() {
      target.isLoading.set(true)
      const payload = await api.getData()
      target.set(payload)
      target.isLoading.set(false)
    },
  }))

const UserPage = reatomComponent(() => {
  if (data.isLoading()) return <div>Loading...</div>

  return (
    <ul>
      {data().map((item) => (
        <li key={item.id}>{item.value}</li>
      ))}
    </ul>
  )
})

import { reatomForm } from '@reatom/core'
import { reatomComponent, bindField } from '@reatom/react'
import { Button, TextInput, PasswordInput, Stack } from '@mantine/core'

export const loginForm = reatomForm({
  username: '',
  password: '',
}, {
  validateOnBlur: true,
  onSubmit: async (values) => { 
    return await api.login(values)
  },
})

export const LoginForm = reatomComponent(() => {
  const { submit, fields } = loginForm
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        submit()
      }}
    >
      <Stack>
        <TextInput
          label="Username"
          placeholder="Enter your username"
          {...bindField(fields.username)}
        />

        <PasswordInput
          label="Password"
          placeholder="Enter your password"
          {...bindField(fields.password)}
        />

        <Button type="submit" loading={!submit.ready()}>
          Login
        </Button>
      </Stack>
    </form>
  )
})

import { route } from "@reatom/core"
import { reatomComponent } from "@reatom/react"

export const goodsRoute = route("goods/:category")

export const goodsBrandRoute = goodsRoute.route({
  path: ":brand",
  search: z.object({
    sort: z.enum(["asc", "desc"]).optional(),
  }),
  async loader(params) {
    const url = `/api/goods/${params.category}/${params.brand}?sort=${params.sort}`
    const resp = await fetch(url)
    return resp.json()
  },
})

export const BrandGoodsTable = reatomComponent(() => {
  const { data, error, ready } = goodsBrandRoute.loader
  if (!ready()) {
    return <div>Loading...</div>
  }

  if (error()) {
    return <div>Error: {error().message}</div>
  }

  return (
    <Table>
      {data().map((item) => (
        <Table.Row key={item.id}>
          <Table.Cell>{item.id}</Table.Cell>
          <Table.Cell>{item.name}</Table.Cell>
          <Table.Cell>{item.price}</Table.Cell>
        </Table.Row>
      ))}
    </Table>
  )
})