import React, { useState, createContext, useContext } from 'react';
import { View, Text, Pressable } from 'react-native';
import { ThemeProvider, useT, T, Screen, Scroll, Header, NavBar, Card, Group, Row, Button, Segmented, Chip, Pill, Avatar, Checkbox, Stat, Progress, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, alpha } from './ui/kit';
const ACCENT = '#8B5CF6';
const THEME = { dark: { bg: '#0A0812', card: '#15111F', card2: '#1F192D', line: '#241D33', text2: '#A59BBF', text3: '#655C7C' }, light: { bg: '#F3F1FA', card: '#FFFFFF', card2: '#E6E1F3' } };
const COLS = [{ id: 'todo', name: 'To do', c: '#8B5CF6' }, { id: 'doing', name: 'In progress', c: '#F59E42' }, { id: 'review', name: 'Review', c: '#38BDF8' }, { id: 'done', name: 'Done', c: '#22C55E' }];
const TAGS = { Backend: '#8B5CF6', Design: '#EC4899', Content: '#F59E42', Frontend: '#38BDF8', Infra: '#22C55E' };
const CARDS_INIT = [
{ id: 1, title: 'Auth flow', tag: 'Backend', col: 'todo', who: 'Sam Ortiz', due: 'Thu', sub: [1, 3] },
{ id: 2, title: 'Empty states', tag: 'Design', col: 'todo', who: 'Lena Park', due: 'Fri', sub: [0, 4] },
{ id: 3, title: 'Onboarding copy', tag: 'Content', col: 'todo', who: 'Ava Chen', due: 'Mon', sub: [0, 2] },
{ id: 4, title: 'Wall masonry', tag: 'Frontend', col: 'doing', who: 'Noah Reed', due: 'Today', sub: [2, 5] },
{ id: 5, title: 'Capture worker', tag: 'Infra', col: 'doing', who: 'Sam Ortiz', due: 'Wed', sub: [3, 3] },
{ id: 6, title: 'Pricing page', tag: 'Design', col: 'review', who: 'Lena Park', due: 'Today', sub: [4, 4] },
{ id: 7, title: 'Search index', tag: 'Backend', col: 'done', who: 'Sam Ortiz', due: 'Mon', sub: [6, 6] },
{ id: 8, title: 'Brand kit', tag: 'Design', col: 'done', who: 'Lena Park', due: 'Fri', sub: [3, 3] },
];
const Store = createContext(null);
function KanbanCard({ c, onPress }) {
const t = useT();
return (
{c.title}
{c.sub[0]}/{c.sub[1]}{c.due}
);
}
function BoardScreen({ nav }) {
const t = useT();
const { cards } = useContext(Store);
return (
{['Sam Ortiz', 'Lena Park', 'Noah Reed'].map((p, i) => )}} />
{COLS.map((col) => {
const list = cards.filter((c) => c.col === col.id);
return (
{col.name}
{list.length}
{list.map((c) => nav.push('card', { id: c.id })} />)}
[{ borderRadius: 16, borderWidth: 1, borderStyle: 'dashed', borderColor: t.line, padding: 12, alignItems: 'center' }, pressed && { opacity: 0.6 }]}>+ Add card
);
})}
);
}
function ListScreen({ nav }) {
const t = useT();
const { cards } = useContext(Store);
const [f, setF] = useState('mine');
const list = f === 'mine' ? cards.filter((c) => c.who === 'Sam Ortiz') : f === 'today' ? cards.filter((c) => c.due === 'Today') : cards;
return (
{list.map((c) => x.id === c.col).c }} />} title={c.title} subtitle={COLS.find((x) => x.id === c.col).name + ' · ' + c.tag + ' · ' + c.due} right={} chevron onPress={() => nav.push('card', { id: c.id })} />)}
);
}
function InsightsScreen() {
const t = useT();
const { cards } = useContext(Store);
const done = cards.filter((c) => c.col === 'done').length;
return (
{COLS.map((col) => {
const n = cards.filter((c) => c.col === col.id).length;
return (
{col.name}{n}
);
})}
{['Sam Ortiz', 'Lena Park', 'Noah Reed', 'Ava Chen'].map((p, i) => { const n = cards.filter((c) => c.who === p && c.col !== 'done').length; return |
} title={p} subtitle={n + ' open cards'} right={} />; })}
);
}
function CardDetail({ nav, params }) {
const t = useT();
const { cards, move } = useContext(Store);
const c = cards.find((x) => x.id === params.id) || cards[0];
const [subs, setSubs] = useState(Array.from({ length: c.sub[1] }).map((_, i) => i < c.sub[0]));
const col = COLS.find((x) => x.id === c.col);
return (
} />
{c.title}
|
} title="Assignee" value={c.who} chevron onPress={() => {}} />
{}} />
{}} />
({ label: x.name === 'In progress' ? 'Doing' : x.name, value: x.id }))} value={c.col} onChange={(v) => move(c.id, v)} />
{subs.map((s, i) => setSubs((x) => { const n = x.slice(); n[i] = !n[i]; return n; })} />} title={['Write the spec', 'Design review', 'Implement', 'Tests', 'QA pass', 'Ship'][i] || 'Step ' + (i + 1)} titleStyle={s ? { color: t.text3, textDecorationLine: 'line-through' } : null} />)}
|
} title="Lena moved this to Review" subtitle="2 hours ago" />
|
} title="Sam commented" subtitle="Yesterday · Looks good, one nit on spacing" />
);
}
function Root({ nav }) {
const [tab, setTab] = useState('board');
return (
, list: , insights: }} />
);
}
const SCREENS = { root: Root, card: CardDetail };
export default function App() {
const [cards, setCards] = useState(CARDS_INIT);
const move = (id, col) => setCards((cs) => cs.map((c) => (c.id === id ? Object.assign({}, c, { col }) : c)));
return (
);
}