@djangocfg/ui-core 2.1.382 → 2.1.384

package/src/components/select/combobox-async.story.tsx

@@ -1,215 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { defineStory, useBoolean } from '@djangocfg/playground';
-
-import { ComboboxAsync, type ComboboxAsyncOption } from '.';
-import { Label } from '../forms/label';
-
-export default defineStory({
-  title: 'Core/ComboboxAsync',
-  component: ComboboxAsync,
-  description:
-    'Single-select combobox where the parent owns search + loading. Pairs with `MultiSelectProAsync` for the "pick one" case against a server-side typeahead endpoint.',
-});
-
-// ─── Fake "server" ──────────────────────────────────────────────────
-//
-// In real usage, ``options`` would come from an SWR / RQ hook keyed off
-// the debounced search value. For the playground we simulate latency
-// with a setTimeout so the loading affordance and seedOptions story
-// can be exercised without a real backend.
-
-interface Person {
-  id: string;
-  name: string;
-  email: string;
-  team: string;
-}
-
-const PEOPLE: Person[] = [
-  { id: 'p-1', name: 'Alice Lee', email: 'alice@x.co', team: 'Platform' },
-  { id: 'p-2', name: 'Bob Schmidt', email: 'bob@x.co', team: 'Platform' },
-  { id: 'p-3', name: 'Carla Romero', email: 'carla@x.co', team: 'Growth' },
-  { id: 'p-4', name: 'Dmitri Volkov', email: 'dmitri@x.co', team: 'Growth' },
-  { id: 'p-5', name: 'Evelyn Park', email: 'evelyn@x.co', team: 'Design' },
-  { id: 'p-6', name: 'Farah Patel', email: 'farah@x.co', team: 'Design' },
-  { id: 'p-7', name: 'Greta Hahn', email: 'greta@x.co', team: 'Engineering' },
-  { id: 'p-8', name: 'Hiro Tanaka', email: 'hiro@x.co', team: 'Engineering' },
-];
-
-function fakeSearch(query: string): Promise<Person[]> {
-  return new Promise((resolve) => {
-    const q = query.trim().toLowerCase();
-    const matches = q
-      ? PEOPLE.filter(
-          (p) =>
-            p.name.toLowerCase().includes(q) ||
-            p.email.toLowerCase().includes(q) ||
-            p.team.toLowerCase().includes(q),
-        )
-      : PEOPLE.slice(0, 6);
-    setTimeout(() => resolve(matches), 350);
-  });
-}
-
-function toOption(p: Person): ComboboxAsyncOption {
-  return {
-    value: p.id,
-    label: p.name,
-    description: `${p.email} · ${p.team}`,
-  };
-}
-
-// ─── Stories ────────────────────────────────────────────────────────
-
-export const Interactive = () => {
-  const [value, setValue] = useState<string | null>(null);
-  const [search, setSearch] = useState('');
-  const [options, setOptions] = useState<ComboboxAsyncOption[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable picker',
-  });
-  const [clearable] = useBoolean('clearable', {
-    defaultValue: true,
-    label: 'Clearable',
-    description: 'Show inline × to reset selection',
-  });
-
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    void fakeSearch(search).then((rows) => {
-      if (cancelled) return;
-      setOptions(rows.map(toOption));
-      setIsLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [search]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Assignee</Label>
-      <ComboboxAsync
-        options={options}
-        value={value}
-        onValueChange={setValue}
-        searchValue={search}
-        onSearchChange={setSearch}
-        isLoading={isLoading}
-        placeholder="Pick a teammate…"
-        searchPlaceholder="Search by name, email, team…"
-        emptyText="No teammates found"
-        loadingText="Searching…"
-        disabled={disabled}
-        clearable={clearable}
-      />
-      <p className="text-xs text-muted-foreground">
-        Selected: {value ?? '∅'}
-      </p>
-    </div>
-  );
-};
-
-export const Default = Interactive;
-
-export const Loading = () => {
-  // Force ``isLoading`` true and an empty options list to show the
-  // initial spinner state — the same row that renders before the
-  // first server response lands.
-  const [value, setValue] = useState<string | null>(null);
-  const [search, setSearch] = useState('');
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Assignee</Label>
-      <ComboboxAsync
-        options={[]}
-        value={value}
-        onValueChange={setValue}
-        searchValue={search}
-        onSearchChange={setSearch}
-        isLoading
-        placeholder="Pick a teammate…"
-      />
-    </div>
-  );
-};
-
-export const Empty = () => {
-  // Loaded but no matches — distinct visual from the loading row above.
-  const [value, setValue] = useState<string | null>(null);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Assignee</Label>
-      <ComboboxAsync
-        options={[]}
-        value={value}
-        onValueChange={setValue}
-        searchValue="zzznoresult"
-        onSearchChange={() => {}}
-        isLoading={false}
-        emptyText="No teammates found"
-      />
-    </div>
-  );
-};
-
-export const SeedOption = () => {
-  // The dialog opens with a pre-existing value whose row isn't part of
-  // the live results. ``seedOptions`` keeps the trigger from rendering
-  // a raw id while the user starts typing.
-  const [value, setValue] = useState<string | null>('p-stale');
-  const [search, setSearch] = useState('');
-  const [options, setOptions] = useState<ComboboxAsyncOption[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    void fakeSearch(search).then((rows) => {
-      if (cancelled) return;
-      setOptions(rows.map(toOption));
-      setIsLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [search]);
-
-  const seedOptions = useMemo<ComboboxAsyncOption[]>(
-    () => [
-      {
-        value: 'p-stale',
-        label: 'Pre-selected (offline)',
-        description: 'Fetched once, kept around as a seed',
-      },
-    ],
-    [],
-  );
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Assignee</Label>
-      <ComboboxAsync
-        options={options}
-        value={value}
-        onValueChange={setValue}
-        searchValue={search}
-        onSearchChange={setSearch}
-        isLoading={isLoading}
-        seedOptions={seedOptions}
-        placeholder="Pick a teammate…"
-      />
-      <p className="text-xs text-muted-foreground">
-        Selected id: <code>{value ?? '∅'}</code> — note the trigger shows the
-        seed label even though <code>p-stale</code> isn't in the search results.
-      </p>
-    </div>
-  );
-};

package/src/components/select/combobox.story.tsx

@@ -1,226 +0,0 @@
-import { useState } from 'react';
-import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Combobox, type ComboboxOption } from '.';
-import { Label } from '../forms/label';
-
-export default defineStory({
-  title: 'Core/Combobox',
-  component: Combobox,
-  description: 'Searchable select with autocomplete.',
-});
-
-const frameworks: ComboboxOption[] = [
-  { value: 'next.js', label: 'Next.js' },
-  { value: 'sveltekit', label: 'SvelteKit' },
-  { value: 'nuxt.js', label: 'Nuxt.js' },
-  { value: 'remix', label: 'Remix' },
-  { value: 'astro', label: 'Astro' },
-];
-
-const countries: ComboboxOption[] = [
-  { value: 'us', label: 'United States' },
-  { value: 'uk', label: 'United Kingdom' },
-  { value: 'de', label: 'Germany' },
-  { value: 'fr', label: 'France' },
-  { value: 'jp', label: 'Japan' },
-  { value: 'kr', label: 'South Korea' },
-  { value: 'cn', label: 'China' },
-  { value: 'au', label: 'Australia' },
-  { value: 'ca', label: 'Canada' },
-  { value: 'br', label: 'Brazil' },
-];
-
-export const Interactive = () => {
-  const [value, setValue] = useState('');
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable combobox',
-  });
-
-  return (
-    <div className="max-w-xs space-y-2">
-      <Label>Framework</Label>
-      <Combobox
-        options={frameworks}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select framework..."
-        searchPlaceholder="Search framework..."
-        emptyText="No framework found."
-        disabled={disabled}
-      />
-    </div>
-  );
-};
-
-export const Default = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div className="max-w-xs">
-      <Combobox
-        options={frameworks}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select framework..."
-        searchPlaceholder="Search framework..."
-        emptyText="No framework found."
-      />
-    </div>
-  );
-};
-
-export const WithDefaultValue = () => {
-  const [value, setValue] = useState('next.js');
-
-  return (
-    <div className="max-w-xs">
-      <Combobox
-        options={frameworks}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select framework..."
-      />
-    </div>
-  );
-};
-
-export const Countries = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div className="max-w-xs space-y-2">
-      <Label>Country</Label>
-      <Combobox
-        options={countries}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select country..."
-        searchPlaceholder="Search countries..."
-        emptyText="No country found."
-      />
-    </div>
-  );
-};
-
-export const Disabled = () => (
-  <div className="max-w-xs">
-    <Combobox
-      options={frameworks}
-      value=""
-      onValueChange={() => {}}
-      placeholder="Select framework..."
-      disabled
-    />
-  </div>
-);
-
-export const Form = () => {
-  const [framework, setFramework] = useState('');
-  const [country, setCountry] = useState('');
-
-  return (
-    <div className="max-w-xs space-y-4">
-      <div className="space-y-2">
-        <Label>Framework</Label>
-        <Combobox
-          options={frameworks}
-          value={framework}
-          onValueChange={setFramework}
-          placeholder="Select framework..."
-        />
-      </div>
-      <div className="space-y-2">
-        <Label>Country</Label>
-        <Combobox
-          options={countries}
-          value={country}
-          onValueChange={setCountry}
-          placeholder="Select country..."
-        />
-      </div>
-    </div>
-  );
-};
-
-// Trading symbols for custom filter demo
-const symbols: ComboboxOption[] = [
-  { value: 'BTCUSDT', label: 'BTCUSDT', description: 'BTC/USDT' },
-  { value: 'ETHUSDT', label: 'ETHUSDT', description: 'ETH/USDT' },
-  { value: 'ETHBTC', label: 'ETHBTC', description: 'ETH/BTC' },
-  { value: 'BNBUSDT', label: 'BNBUSDT', description: 'BNB/USDT' },
-  { value: 'BNBBTC', label: 'BNBBTC', description: 'BNB/BTC' },
-  { value: 'SOLUSDT', label: 'SOLUSDT', description: 'SOL/USDT' },
-  { value: 'SOLBTC', label: 'SOLBTC', description: 'SOL/BTC' },
-  { value: 'ADAUSDT', label: 'ADAUSDT', description: 'ADA/USDT' },
-  { value: 'DOGEUSDT', label: 'DOGEUSDT', description: 'DOGE/USDT' },
-  { value: 'XRPUSDT', label: 'XRPUSDT', description: 'XRP/USDT' },
-];
-
-/**
- * Multi-word filter: all search terms must match.
- * "btc eth" matches ETHBTC (contains both "btc" and "eth")
- */
-function multiWordFilter(option: ComboboxOption, search: string): boolean {
-  const terms = search.toLowerCase().trim().split(/\s+/).filter(Boolean);
-  if (terms.length === 0) return true;
-
-  const text = [option.label, option.value, option.description || '']
-    .join(' ')
-    .toLowerCase();
-
-  return terms.every((term) => text.includes(term));
-}
-
-export const CustomFilter = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div className="max-w-xs space-y-2">
-      <Label>Symbol (try "btc eth" or "usdt sol")</Label>
-      <Combobox
-        options={symbols}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select symbol..."
-        searchPlaceholder="Search... (e.g. btc usdt)"
-        emptyText="No symbols found."
-        filterFunction={multiWordFilter}
-        renderOption={(option) => (
-          <div className="flex items-center justify-between w-full">
-            <span className="font-medium">{option.label}</span>
-            <span className="text-xs text-muted-foreground">{option.description}</span>
-          </div>
-        )}
-      />
-      <p className="text-xs text-muted-foreground">
-        Custom filter: space-separated terms (all must match)
-      </p>
-    </div>
-  );
-};
-
-export const WithDescriptions = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div className="max-w-xs space-y-2">
-      <Label>Trading Pair</Label>
-      <Combobox
-        options={symbols}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select trading pair..."
-        searchPlaceholder="Search pairs..."
-        emptyText="No pairs found."
-        renderOption={(option) => (
-          <div className="flex items-center justify-between w-full">
-            <span className="font-medium">{option.label}</span>
-            <span className="text-xs text-muted-foreground">{option.description}</span>
-          </div>
-        )}
-      />
-    </div>
-  );
-};

package/src/components/select/country-select.story.tsx

@@ -1,261 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import { CountrySelect, type TCountryCode } from './country-select';
-import { Label } from '../forms/label';
-
-export default defineStory({
-  title: 'Core/CountrySelect',
-  component: CountrySelect,
-  description: 'Country selector with emoji flags. Supports dropdown and inline variants, single and multiple selection.',
-});
-
-// ============================================================================
-// Dropdown Variants
-// ============================================================================
-
-export const SingleDropdown = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Select country</Label>
-      <CountrySelect
-        value={value}
-        onChange={setValue}
-        placeholder="Choose a country..."
-      />
-      {value.length > 0 && (
-        <p className="text-sm text-muted-foreground">Selected: {value[0]}</p>
-      )}
-    </div>
-  );
-};
-
-export const MultipleDropdown = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Select countries</Label>
-      <CountrySelect
-        multiple
-        value={value}
-        onChange={setValue}
-        placeholder="Choose countries..."
-      />
-      {value.length > 0 && (
-        <p className="text-sm text-muted-foreground">Selected: {value.join(', ')}</p>
-      )}
-    </div>
-  );
-};
-
-export const WithDefaultValue = () => {
-  const [value, setValue] = useState<string[]>(['US', 'GB', 'DE']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Preselected countries</Label>
-      <CountrySelect
-        multiple
-        value={value}
-        onChange={setValue}
-      />
-    </div>
-  );
-};
-
-export const WithNativeNames = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>With native names</Label>
-      <CountrySelect
-        multiple
-        value={value}
-        onChange={setValue}
-        showNativeName
-      />
-    </div>
-  );
-};
-
-// ============================================================================
-// Inline Variants
-// ============================================================================
-
-export const InlineSingle = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Select your country</Label>
-      <CountrySelect
-        variant="inline"
-        value={value}
-        onChange={setValue}
-        maxHeight={250}
-      />
-      {value.length > 0 && (
-        <p className="text-sm text-muted-foreground">Selected: {value[0]}</p>
-      )}
-    </div>
-  );
-};
-
-export const InlineMultiple = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Select target markets</Label>
-      <CountrySelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        maxHeight={300}
-      />
-    </div>
-  );
-};
-
-export const InlineWithNativeNames = () => {
-  const [value, setValue] = useState<string[]>(['KR', 'JP']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Countries with native names</Label>
-      <CountrySelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        showNativeName
-        maxHeight={300}
-      />
-    </div>
-  );
-};
-
-export const InlineNoSearch = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Without search</Label>
-      <CountrySelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        showSearch={false}
-        maxHeight={200}
-      />
-    </div>
-  );
-};
-
-// ============================================================================
-// Filtered Countries
-// ============================================================================
-
-const CIS_COUNTRIES: TCountryCode[] = ['RU', 'KZ', 'UZ', 'KG', 'TJ', 'TM', 'AZ', 'AM', 'GE', 'BY', 'MD', 'UA'];
-const ASIAN_AUTO_MARKETS: TCountryCode[] = ['KR', 'JP', 'CN', 'TH', 'MY', 'ID', 'VN', 'PH'];
-
-export const FilteredCISCountries = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>CIS Countries only</Label>
-      <CountrySelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        allowedCountries={CIS_COUNTRIES}
-        maxHeight={300}
-      />
-    </div>
-  );
-};
-
-export const FilteredAsianMarkets = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Asian Auto Markets</Label>
-      <CountrySelect
-        multiple
-        value={value}
-        onChange={setValue}
-        allowedCountries={ASIAN_AUTO_MARKETS}
-        showNativeName
-      />
-    </div>
-  );
-};
-
-export const ExcludeSanctioned = () => {
-  const [value, setValue] = useState<string[]>([]);
-  const excluded: TCountryCode[] = ['KP', 'IR', 'SY', 'CU'];
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>All except sanctioned</Label>
-      <CountrySelect
-        multiple
-        value={value}
-        onChange={setValue}
-        excludedCountries={excluded}
-      />
-    </div>
-  );
-};
-
-// ============================================================================
-// States
-// ============================================================================
-
-export const Disabled = () => (
-  <div className="max-w-sm space-y-4">
-    <div className="space-y-2">
-      <Label>Disabled dropdown</Label>
-      <CountrySelect
-        value={['US']}
-        onChange={() => {}}
-        disabled
-      />
-    </div>
-    <div className="space-y-2">
-      <Label>Disabled inline</Label>
-      <CountrySelect
-        variant="inline"
-        multiple
-        value={['US', 'GB']}
-        onChange={() => {}}
-        disabled
-        maxHeight={150}
-      />
-    </div>
-  </div>
-);
-
-export const MaxDisplayBadges = () => {
-  const [value, setValue] = useState<string[]>(['US', 'GB', 'DE', 'FR', 'IT', 'ES']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Max 2 badges displayed</Label>
-      <CountrySelect
-        multiple
-        value={value}
-        onChange={setValue}
-        maxDisplay={2}
-      />
-    </div>
-  );
-};