Skip to content

Commit

Permalink
feat: ui for selecting and installing apfel component
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbohlender
bbohlender committed Mar 5, 2024
1 parent 81c671a commit 17ef1c3
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 58 deletions.
148 changes: 111 additions & 37 deletions examples/apfel/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Canvas } from '@react-three/fiber'
import { Fullscreen, Text, Container, setPreferredColorScheme } from '@react-three/uikit'
import { BoxSelect, ChevronRight, Info } from '@react-three/uikit-lucide'
import { Perf } from 'r3f-perf'
import { Fullscreen, Text, Container } from '@react-three/uikit'
import { BoxSelect, ChevronRight, Copy, Info } from '@react-three/uikit-lucide'
import { XWebPointers, noEvents } from '@coconut-xr/xinteraction/react'
import { Card } from '@/card'
import { Checkbox } from '@/checkbox'
Expand All @@ -13,28 +12,82 @@ import { Loading } from '@/loading'
import { Slider } from '@/slider'
import { TabBar, TabBarItem } from '@/tab-bar'
import { Defaults } from '@/theme'
import { useState } from 'react'

const componentPages = {
card: CardPage,
checkbox: CheckboxesPage,
button: ButtonsPage,
list: ListsPage,
slider: SlidersPage,
tabs: TabsPage,
tabBar: TabBarsPage,
progress: ProgressPage,
loading: LoadingPage,
}
const defaultComponent = 'button'

export default function App() {
const [component, set] = useState<keyof typeof componentPages>(() => {
const params = new URLSearchParams(window.location.search)
let selected = params.get('component')
if (selected == null || !(selected in componentPages)) {
selected = defaultComponent
}
return selected as keyof typeof componentPages
})
const setComponent = (value: keyof typeof componentPages) => {
const params = new URLSearchParams(window.location.search)
params.set('component', value)
history.replaceState(null, '', '?' + params.toString())
set(value)
}
const ComponentPage = componentPages[component]
return (
<Canvas events={noEvents} style={{ height: '100dvh', touchAction: 'none' }} gl={{ localClippingEnabled: true }}>
<XWebPointers />
<Perf />
<color attach="background" args={['black']} />
<ambientLight intensity={0.5} />
<directionalLight intensity={1} position={[-5, 5, 10]} />
<Fullscreen
scrollbarColor="black"
backgroundColor="white"
alignItems="center"
justifyContent="center"
padding={32}
>
<Defaults>
<Container flexDirection="row" justifyContent="center" width="100%" maxWidth={500}>
<ButtonsPage />
<Defaults>
<Fullscreen
overflow="scroll"
scrollbarColor="black"
backgroundColor="white"
gap={32}
paddingX={32}
alignItems="center"
padding={32}
>
<Card overflow="scroll" borderRadius={32} gap={32} padding={16}>
<Tabs value={component} onValueChange={setComponent}>
{Object.keys(componentPages).map((name) => (
<TabsButton value={name} key={name}>
<Text>
{name[0].toUpperCase()}
{name.slice(1)}
</Text>
</TabsButton>
))}
</Tabs>
</Card>
<Container flexGrow={1} flexDirection="row" justifyContent="center" alignItems="center">
<ComponentPage />
</Container>
</Defaults>
</Fullscreen>

<Card padding={8} flexDirection="row" gap={8} alignItems="center">
<Text backgroundColor="black" padding={8} borderRadius={16} marginLeft={8}>
npx uikit component add apfel {component}
</Text>
<Button
onClick={() => navigator.clipboard.writeText(`npx uikit component add apfel ${component}`)}
variant="icon"
>
<Copy />
</Button>
</Card>
</Fullscreen>
</Defaults>
</Canvas>
)
}
Expand All @@ -48,9 +101,20 @@ export function CheckboxesPage() {
)
}

export function CardPage() {
return (
<Card borderRadius={32} padding={32} gap={8} flexDirection="column">
<Text fontSize={32}>Hello World!</Text>
<Text fontSize={24} opacity={0.7}>
This is the apfel kit.
</Text>
</Card>
)
}

export function ButtonsPage() {
return (
<Container flexDirection="row" alignItems="center" gapColumn={32}>
<Container flexDirection="column" md={{ flexDirection: 'row' }} alignItems="center" gap={32}>
<Card borderRadius={32} padding={16}>
<Container flexDirection="row" gapColumn={16}>
<Container flexDirection="column" justifyContent="space-between" alignItems="center" gapRow={16}>
Expand Down Expand Up @@ -227,8 +291,8 @@ export function ButtonsPage() {

export function ListsPage() {
return (
<Container flexDirection="column" gapRow={32}>
<Container flexDirection="row" gapColumn={32}>
<Container flexDirection="column" gapRow={32} alignItems="center">
<Container flexDirection="column" md={{ flexDirection: 'row' }} gap={32}>
<Card borderRadius={32} padding={16}>
<List type="plain" width={400}>
<ListItem
Expand Down Expand Up @@ -287,7 +351,7 @@ export function ListsPage() {
</List>
</Card>
</Container>
<Container flexDirection="row" gapColumn={32}>
<Container flexDirection="column" md={{ flexDirection: 'row' }} gap={32}>
<Card borderRadius={32} padding={16}>
<List type="inset" width={400}>
<ListItem
Expand Down Expand Up @@ -352,26 +416,29 @@ export function ListsPage() {
)
}

export function ProgressIndicatorsPage() {
export function ProgressPage() {
return (
<Container flexDirection="column" gapRow={32}>
<Card borderRadius={32} padding={16} flexDirection="column" gapRow={16}>
<Progress value={0} />
<Progress value={0.25} />
<Progress value={0.5} />
<Progress value={0.75} />
<Progress value={1} />
</Card>
<Card borderRadius={32} padding={16} flexDirection="row" gapColumn={16}>
<Loading size="sm" />
<Loading size="md" />
<Loading size="lg" />
</Card>
</Container>
<Card width={200} borderRadius={32} padding={16} flexDirection="column" gapRow={16}>
<Progress value={0} />
<Progress value={0.25} />
<Progress value={0.5} />
<Progress value={0.75} />
<Progress value={1} />
</Card>
)
}

export function LoadingPage() {
return (
<Card borderRadius={32} padding={16} flexDirection="row" gapColumn={16}>
<Loading size="sm" />
<Loading size="md" />
<Loading size="lg" />
</Card>
)
}

export function SegmentedControlsPage() {
export function TabsPage() {
return (
<Card borderRadius={32} padding={16} flexDirection="column" alignItems="flex-start" gapRow={16}>
<Tabs defaultValue="1">
Expand Down Expand Up @@ -432,7 +499,14 @@ export function SegmentedControlsPage() {

export function SlidersPage() {
return (
<Card borderRadius={32} padding={16} flexDirection="row" gapColumn={16}>
<Card
borderRadius={32}
padding={16}
flexDirection="column"
md={{ flexDirection: 'row' }}
gapColumn={16}
gapRow={32}
>
<Container flexDirection="column" gapRow={16} width={250}>
<Slider size="xs" defaultValue={25} />
<Slider size="sm" defaultValue={50} />
Expand Down
1 change: 1 addition & 0 deletions packages/kits/apfel/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export function Card({ children, ...props }: ComponentPropsWithoutRef<typeof Con
border={4}
borderBend={0.3}
backgroundMaterialClass={GlassMaterial}
borderRadius={32}
{...props}
>
<DefaultProperties color={colors.cardForeground}>{children}</DefaultProperties>
Expand Down
38 changes: 17 additions & 21 deletions packages/kits/apfel/tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,11 @@ export function Tabs({
<TabsContext.Provider value={context}>
<Container
height={36}
backgroundOpacity={opacity}
border={2}
backgroundOpacity={opacity}
borderOpacity={opacity}
backgroundColor={colors.background}
borderColor={colors.background}
borderOpacity={opacity}
borderBend={disabled ? 0 : -0.3}
borderRadius={18}
backgroundMaterialClass={GlassMaterial}
Expand All @@ -69,37 +69,33 @@ type SegmentedControlButtonProps = ComponentPropsWithoutRef<typeof Container> &
export function TabsButton({ children, value, disabled, ...props }: SegmentedControlButtonProps) {
const { value: currentValue, onValueChange, disabled: tabsDisabled } = useContext(TabsContext) as TabsContext

const selected = currentValue === value && !tabsDisabled

return (
<Container
height={32}
paddingX={20}
positionType="relative"
cursor={tabsDisabled || disabled ? undefined : 'pointer'}
{...props}
onClick={(e) => {
if (disabled) return
onValueChange?.(value)
props.onClick?.(e)
}}
backgroundColor={colors.foreground}
borderColor={colors.foreground}
backgroundOpacity={selected ? 0.3 : 0}
borderOpacity={selected ? 0.3 : 0}
border={2}
borderRadius={16}
borderBend={0.3}
backgroundMaterialClass={GlassMaterial}
flexDirection="row"
alignItems="center"
gapColumn={10}
>
{currentValue === value && !tabsDisabled && (
<Container
positionType="absolute"
inset={0}
backgroundColor={colors.foreground}
borderColor={colors.foreground}
backgroundOpacity={0.3}
border={2}
borderOpacity={0.3}
borderRadius={16}
borderBend={0.3}
backgroundMaterialClass={GlassMaterial}
/>
)}
<DefaultProperties fontSize={16} color={colors.foreground} opacity={disabled || tabsDisabled ? 0.4 : 1}>
<Container height="100%" flexDirection="row" alignItems="center" gapColumn={10}>
{children}
</Container>
<DefaultProperties color={colors.foreground} opacity={disabled || tabsDisabled ? 0.4 : 1}>
{children}
</DefaultProperties>
</Container>
)
Expand Down

0 comments on commit 17ef1c3

Please sign in to comment.