Storage and API

'use client';

import { createStorage } from '@akhatmirzo/core';
import { Button, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const store = createStorage({ prefix: 'docs-demo:' });

export default function CoreStorage() {
  const [value, setValue] = useState('Sarvar');
  const [result, setResult] = useState('—');

  const save = (ttl?: number) => {
    const ok = store.set('ism', value, { ttl });
    setResult(
      ok ? `Saqlandi${ttl ? ` (${ttl / 1000} soniya)` : ' (muddatsiz)'}` : "Saqlab bo'lmadi",
    );
  };

  const read = () => {
    const saved = store.get<string>('ism');
    setResult(saved === null ? "null — yo'q yoki muddati o'tgan" : JSON.stringify(saved));
  };

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field label="Qiymat" description="Kalit: docs-demo:ism">
        <Input value={value} onChange={(e) => setValue(e.target.value)} />
      </Field>
      <div className="flex flex-wrap gap-2">
        <Button variant="primary" onClick={() => save(5000)}>
          5 soniyaga saqlash
        </Button>
        <Button variant="outline" onClick={() => save()}>
          Muddatsiz
        </Button>
        <Button variant="ghost" onClick={read}>
          O'qish
        </Button>
      </div>
      <p className="text-sm text-text-muted">
        Natija: <code className="font-mono text-text">{result}</code>
      </p>
    </div>
  );
}

'use client';

import { createApiClient, isApiError, type FetchLike } from '@akhatmirzo/core';
import { Badge, Button } from '@akhatmirzo/ui';
import { useState } from 'react';

// Haqiqiy server o'rniga: `/status/404` → 404 javob, `/sekin` → hech qachon javob bermaydi
const fakeFetch: FetchLike = (url, init) =>
  new Promise((resolve, reject) => {
    if (url.endsWith('/sekin')) {
      init.signal?.addEventListener('abort', () => reject(new Error('aborted')));
      return;
    }
    const status = Number(url.split('/').pop());
    resolve({ ok: status < 400, status, headers: { get: () => null }, text: async () => '' });
  });

const api = createApiClient({ baseUrl: '/api', timeout: 1500, fetch: fakeFetch });

export default function CoreApiErrors() {
  const [result, setResult] = useState<{ code: string; message: string } | null>(null);

  const request = async (path: string) => {
    try {
      await api.get(path);
      setResult({ code: 'OK', message: 'Muvaffaqiyatli' });
    } catch (error) {
      if (isApiError(error)) setResult({ code: error.code, message: error.message });
    }
  };

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-wrap gap-2">
        {['401', '403', '404', '422', '500'].map((s) => (
          <Button key={s} size="sm" variant="outline" onClick={() => request(`/status/${s}`)}>
            {s}
          </Button>
        ))}
        <Button size="sm" variant="outline" onClick={() => request('/sekin')}>
          Timeout
        </Button>
      </div>
      {result && (
        <div className="flex items-center gap-2 text-sm">
          <Badge color={result.code === 'OK' ? 'success' : 'danger'}>{result.code}</Badge>
          <span className="text-text">{result.message}</span>
        </div>
      )}
    </div>
  );
}