@djangocfg/ui-core 2.1.382 → 2.1.384

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

@@ -1,264 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import { LanguageSelect, type TLanguageCode } from './language-select';
-import { Label } from '../forms/label';
-
-export default defineStory({
-  title: 'Core/LanguageSelect',
-  component: LanguageSelect,
-  description: 'Language selector. 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 language</Label>
-      <LanguageSelect
-        value={value}
-        onChange={setValue}
-        placeholder="Choose a language..."
-      />
-      {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 languages</Label>
-      <LanguageSelect
-        multiple
-        value={value}
-        onChange={setValue}
-        placeholder="Choose languages..."
-      />
-      {value.length > 0 && (
-        <p className="text-sm text-muted-foreground">Selected: {value.join(', ')}</p>
-      )}
-    </div>
-  );
-};
-
-export const WithDefaultValue = () => {
-  const [value, setValue] = useState<string[]>(['en', 'es', 'fr']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Preselected languages</Label>
-      <LanguageSelect
-        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>
-      <LanguageSelect
-        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 language</Label>
-      <LanguageSelect
-        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 languages</Label>
-      <LanguageSelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        maxHeight={300}
-      />
-    </div>
-  );
-};
-
-export const InlineWithNativeNames = () => {
-  const [value, setValue] = useState<string[]>(['ko', 'ja']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Languages with native names</Label>
-      <LanguageSelect
-        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>
-      <LanguageSelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        showSearch={false}
-        maxHeight={200}
-      />
-    </div>
-  );
-};
-
-// ============================================================================
-// Filtered Languages
-// ============================================================================
-
-const EUROPEAN_LANGUAGES: TLanguageCode[] = ['en', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'pl', 'sv', 'da', 'no', 'fi'];
-const ASIAN_LANGUAGES: TLanguageCode[] = ['zh', 'ja', 'ko', 'vi', 'th', 'id', 'ms', 'tl'];
-const TTS_SUPPORTED: TLanguageCode[] = ['en', 'es', 'fr', 'de', 'it', 'pt', 'ja', 'ko', 'zh', 'ru', 'ar', 'hi'];
-
-export const FilteredEuropean = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>European Languages only</Label>
-      <LanguageSelect
-        variant="inline"
-        multiple
-        value={value}
-        onChange={setValue}
-        allowedLanguages={EUROPEAN_LANGUAGES}
-        maxHeight={300}
-      />
-    </div>
-  );
-};
-
-export const FilteredAsian = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Asian Languages</Label>
-      <LanguageSelect
-        multiple
-        value={value}
-        onChange={setValue}
-        allowedLanguages={ASIAN_LANGUAGES}
-        showNativeName
-      />
-    </div>
-  );
-};
-
-export const TTSSupportedLanguages = () => {
-  const [value, setValue] = useState<string[]>(['en']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>TTS Supported Languages</Label>
-      <LanguageSelect
-        value={value}
-        onChange={setValue}
-        allowedLanguages={TTS_SUPPORTED}
-        showNativeName
-      />
-      <p className="text-xs text-muted-foreground">
-        Only languages with TTS support are shown
-      </p>
-    </div>
-  );
-};
-
-// ============================================================================
-// States
-// ============================================================================
-
-export const Disabled = () => (
-  <div className="max-w-sm space-y-4">
-    <div className="space-y-2">
-      <Label>Disabled dropdown</Label>
-      <LanguageSelect
-        value={['en']}
-        onChange={() => {}}
-        disabled
-      />
-    </div>
-    <div className="space-y-2">
-      <Label>Disabled inline</Label>
-      <LanguageSelect
-        variant="inline"
-        multiple
-        value={['en', 'es']}
-        onChange={() => {}}
-        disabled
-        maxHeight={150}
-      />
-    </div>
-  </div>
-);
-
-export const MaxDisplayBadges = () => {
-  const [value, setValue] = useState<string[]>(['en', 'es', 'fr', 'de', 'it', 'pt']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Max 2 badges displayed</Label>
-      <LanguageSelect
-        multiple
-        value={value}
-        onChange={setValue}
-        maxDisplay={2}
-      />
-    </div>
-  );
-};

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

@@ -1,122 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import { MultiSelect, type MultiSelectOption } from './multi-select';
-import { Label } from '../forms/label';
-
-export default defineStory({
-  title: 'Core/MultiSelect',
-  component: MultiSelect,
-  description: 'Multi-select dropdown with badges.',
-});
-
-const frameworks: MultiSelectOption[] = [
-  { value: 'react', label: 'React' },
-  { value: 'vue', label: 'Vue' },
-  { value: 'angular', label: 'Angular' },
-  { value: 'svelte', label: 'Svelte' },
-  { value: 'solid', label: 'Solid' },
-  { value: 'preact', label: 'Preact' },
-];
-
-const languages: MultiSelectOption[] = [
-  { value: 'typescript', label: 'TypeScript', description: 'Typed JavaScript' },
-  { value: 'javascript', label: 'JavaScript', description: 'Dynamic scripting' },
-  { value: 'python', label: 'Python', description: 'General purpose' },
-  { value: 'rust', label: 'Rust', description: 'Systems programming' },
-  { value: 'go', label: 'Go', description: 'Backend services' },
-  { value: 'java', label: 'Java', description: 'Enterprise apps' },
-];
-
-export const Default = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm">
-      <MultiSelect
-        options={frameworks}
-        value={value}
-        onChange={setValue}
-        placeholder="Select frameworks..."
-      />
-    </div>
-  );
-};
-
-export const WithLabel = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Frameworks</Label>
-      <MultiSelect
-        options={frameworks}
-        value={value}
-        onChange={setValue}
-        placeholder="Select frameworks..."
-        searchPlaceholder="Search frameworks..."
-        emptyText="No frameworks found."
-      />
-    </div>
-  );
-};
-
-export const WithDescriptions = () => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Languages</Label>
-      <MultiSelect
-        options={languages}
-        value={value}
-        onChange={setValue}
-        placeholder="Select languages..."
-      />
-    </div>
-  );
-};
-
-export const WithDefaultValue = () => {
-  const [value, setValue] = useState<string[]>(['react', 'vue']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Selected Frameworks</Label>
-      <MultiSelect
-        options={frameworks}
-        value={value}
-        onChange={setValue}
-        placeholder="Select frameworks..."
-      />
-    </div>
-  );
-};
-
-export const MaxDisplay = () => {
-  const [value, setValue] = useState<string[]>(['react', 'vue', 'angular', 'svelte']);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <Label>Frameworks (max 2 displayed)</Label>
-      <MultiSelect
-        options={frameworks}
-        value={value}
-        onChange={setValue}
-        placeholder="Select frameworks..."
-        maxDisplay={2}
-      />
-    </div>
-  );
-};
-
-export const Disabled = () => (
-  <div className="max-w-sm">
-    <MultiSelect
-      options={frameworks}
-      value={['react']}
-      onChange={() => {}}
-      placeholder="Select frameworks..."
-      disabled
-    />
-  </div>
-);

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

@@ -1,112 +0,0 @@
-import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.';
-import { Label } from '../forms/label';
-
-export default defineStory({
-  title: 'Core/Select',
-  component: Select,
-  description: 'Dropdown select component for choosing from options.',
-});
-
-export const Interactive = () => {
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable select',
-  });
-
-  return (
-    <div className="max-w-xs space-y-2">
-      <Label>Framework</Label>
-      <Select disabled={disabled}>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a framework" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="react">React</SelectItem>
-          <SelectItem value="vue">Vue</SelectItem>
-          <SelectItem value="angular">Angular</SelectItem>
-          <SelectItem value="svelte">Svelte</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};
-
-export const Default = () => (
-  <div className="max-w-xs">
-    <Select>
-      <SelectTrigger>
-        <SelectValue placeholder="Select an option" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="option1">Option 1</SelectItem>
-        <SelectItem value="option2">Option 2</SelectItem>
-        <SelectItem value="option3">Option 3</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-);
-
-export const WithDefaultValue = () => (
-  <div className="max-w-xs">
-    <Select defaultValue="vue">
-      <SelectTrigger>
-        <SelectValue placeholder="Select a framework" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="react">React</SelectItem>
-        <SelectItem value="vue">Vue</SelectItem>
-        <SelectItem value="angular">Angular</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="max-w-xs">
-    <Select disabled>
-      <SelectTrigger>
-        <SelectValue placeholder="Disabled select" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="option1">Option 1</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-);
-
-export const Countries = () => (
-  <div className="max-w-xs space-y-2">
-    <Label>Country</Label>
-    <Select>
-      <SelectTrigger>
-        <SelectValue placeholder="Select country" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="us">United States</SelectItem>
-        <SelectItem value="uk">United Kingdom</SelectItem>
-        <SelectItem value="de">Germany</SelectItem>
-        <SelectItem value="fr">France</SelectItem>
-        <SelectItem value="jp">Japan</SelectItem>
-        <SelectItem value="kr">South Korea</SelectItem>
-        <SelectItem value="cn">China</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-);
-
-export const WithDisabledItems = () => (
-  <div className="max-w-xs">
-    <Select>
-      <SelectTrigger>
-        <SelectValue placeholder="Select plan" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="free">Free</SelectItem>
-        <SelectItem value="pro">Pro - $9/mo</SelectItem>
-        <SelectItem value="enterprise" disabled>Enterprise (Coming Soon)</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-);

package/src/components/specialized/copy/copy.story.tsx

@@ -1,77 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { CopyButton, CopyField } from '.';
-
-export default defineStory({
-  title: 'Core/Copy',
-  component: CopyButton,
-  description: 'Copy to clipboard components.',
-});
-
-export const Button = () => (
-  <CopyButton value="Hello, World!" />
-);
-
-export const ButtonWithText = () => (
-  <CopyButton value="npm install @djangocfg/ui-core">
-    Copy command
-  </CopyButton>
-);
-
-export const ButtonVariants = () => (
-  <div className="flex gap-2">
-    <CopyButton value="Text" variant="default" />
-    <CopyButton value="Text" variant="outline" />
-    <CopyButton value="Text" variant="ghost" />
-  </div>
-);
-
-export const ButtonSizes = () => (
-  <div className="flex items-center gap-2">
-    <CopyButton value="Text" size="sm" />
-    <CopyButton value="Text" size="default" />
-    <CopyButton value="Text" size="icon" />
-  </div>
-);
-
-export const Field = () => (
-  <div className="max-w-md">
-    <CopyField value="npm install @djangocfg/ui-core" />
-  </div>
-);
-
-export const FieldWithLabel = () => (
-  <div className="max-w-md space-y-2">
-    <label className="text-sm font-medium">Installation command</label>
-    <CopyField value="npm install @djangocfg/ui-core" />
-  </div>
-);
-
-export const ApiKey = () => (
-  <div className="max-w-md space-y-2">
-    <label className="text-sm font-medium">API Key</label>
-    <CopyField value="sk-1234567890abcdefghijklmnopqrstuvwxyz" />
-  </div>
-);
-
-export const URLs = () => (
-  <div className="max-w-lg space-y-4">
-    <div className="space-y-2">
-      <label className="text-sm font-medium">Share Link</label>
-      <CopyField value="https://example.com/share/abc123" />
-    </div>
-    <div className="space-y-2">
-      <label className="text-sm font-medium">Embed Code</label>
-      <CopyField value='<iframe src="https://example.com/embed/abc123"></iframe>' />
-    </div>
-  </div>
-);
-
-export const InCard = () => (
-  <div className="rounded-lg border p-4 max-w-md">
-    <h4 className="font-medium mb-2">Invite Link</h4>
-    <p className="text-sm text-muted-foreground mb-4">
-      Share this link with your team members.
-    </p>
-    <CopyField value="https://app.example.com/invite/team-abc123" />
-  </div>
-);

package/src/components/specialized/flag/flag.story.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-
-import { defineStory, useSelect } from '@djangocfg/playground';
-
-import { Flag, LanguageFlag } from '.';
-import { Input } from '../../forms/input';
-
-export default defineStory({
-  title: 'Core/Flag',
-  component: Flag,
-  description:
-    'SVG country flag (3:2). Flag takes a country code; LanguageFlag resolves a locale → country.',
-});
-
-export const Default = () => <Flag countryCode="US" className="h-6 w-9" />;
-
-export const Rounded = () => (
-  <div className="flex items-center gap-3">
-    <Flag countryCode="US" className="h-6 w-9" />
-    <Flag countryCode="US" rounded className="h-6 w-9" />
-  </div>
-);
-
-export const Interactive = () => {
-  const [code] = useSelect('country', {
-    options: ['US', 'JP', 'BR', 'DE', 'FR', 'KR', 'CN', 'RU', 'GB', 'IL'] as const,
-    defaultValue: 'US',
-    label: 'Country code',
-  });
-  const [size] = useSelect('size', {
-    options: ['h-3 w-4', 'h-4 w-6', 'h-6 w-9', 'h-10 w-14'] as const,
-    defaultValue: 'h-6 w-9',
-    label: 'Size',
-  });
-  return <Flag countryCode={code} rounded className={size} />;
-};
-
-export const LanguageInteractive = () => {
-  const [code, setCode] = React.useState('pt-BR');
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-3 text-sm">
-        <LanguageFlag code={code} rounded className="h-6 w-9" />
-        <span className="font-mono text-muted-foreground">{code}</span>
-      </div>
-      <Input
-        value={code}
-        onChange={(e) => setCode(e.target.value)}
-        placeholder="Locale (en, pt-BR, zh-CN, …)"
-        className="max-w-xs"
-      />
-    </div>
-  );
-};
-
-export const Grid = () => {
-  const codes = [
-    'US', 'GB', 'CA', 'BR', 'DE', 'FR', 'IT', 'ES', 'PT',
-    'NL', 'SE', 'NO', 'DK', 'FI', 'PL', 'CZ', 'GR', 'TR',
-    'RU', 'UA', 'JP', 'KR', 'CN', 'IN', 'TH', 'VN', 'ID', 'IL', 'SA',
-  ];
-  return (
-    <div className="grid grid-cols-6 gap-3">
-      {codes.map((c) => (
-        <div key={c} className="flex flex-col items-center gap-1">
-          <Flag countryCode={c} rounded className="h-6 w-9" />
-          <span className="font-mono text-xs text-muted-foreground">{c}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const UnknownCode = () => (
-  <div className="text-sm text-muted-foreground">
-    Unknown code renders nothing:{' '}
-    <span className="inline-flex items-center gap-1.5">
-      <Flag countryCode="ZZ" className="h-3 w-4" />
-      <span>(no flag here →)</span>
-    </span>
-  </div>
-);