@a-type/ui 0.3.1 → 0.3.3

package/src/components/navBar/NavBar.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { withClassName } from '../../hooks.js';
+import { ReactNode, forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+export const navBarItemClass = classNames(
+	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-inherit)',
+	'layer-components:sm:(flex-row-reverse h-auto justify-start gap-2 overflow-visible)',
+	'layer-components:hover:bg-primaryWash',
+	'layer-components:focus-visible:(outline-none bg-primaryWash)',
+	'layer-components:active:bg-primaryWash',
+);
+
+export interface NavBarItemProps {
+	asChild?: boolean;
+	className?: string;
+	children?: ReactNode;
+}
+
+export const NavBarItem = forwardRef<HTMLDivElement, NavBarItemProps>(
+	function NavBarItem({ asChild, className, ...rest }, ref) {
+		const Comp = asChild ? Slot : 'div';
+
+		return (
+			<Comp
+				ref={ref}
+				className={classNames(navBarItemClass, className)}
+				{...rest}
+			/>
+		);
+	},
+);
+
+export const NavBarItemIconWrapper = withClassName(
+	'div',
+	'relative flex sm:(p-6px rounded-full bg-lightBlend)',
+);
+
+export const NavBarItemText = withClassName(
+	'span',
+	'overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis sm:(text-md leading-normal)',
+);
+
+export const NavBarItemIcon = withClassName(
+	'div',
+	'relative z-1 [a[data-active=true]_&]:fill-primary-light',
+);
+
+export const NavBarItemPip = withClassName(
+	'div',
+	'absolute top-6px right-6px w-6px h-6px rounded-full bg-attention shadow-sm',
+);
+
+export const NavBarRoot = withClassName(
+	'div',
+	'flex flex-row items-stretch justify-around w-full rounded-0 rounded-t-lg shadow-lg overflow-hidden z-50 bg-wash border-t border-t-solid border-gray5 p-1 h-auto',
+	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
+	'sm:(bg-transparent flex flex-col rounded-0 border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
+);

package/src/components/navBar/index.ts

@@ -0,0 +1 @@
+export * from './NavBar.js';

package/src/components/navBar.ts

@@ -0,0 +1 @@
+export * from './navBar/index.js';

package/src/components/note/Note.tsx

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import classNames from 'classnames';
+
+export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
+	children?: ReactNode;
+}
+
+export function Note({ className, children, ...rest }: NoteProps) {
+	return (
+		<div className={classNames('pr-20px', className)} {...rest}>
+			<div className="flex flex-col p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0">
+				{children}
+				<div className="w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash">
+					<div
+						className={`absolute top--20px left-0 border-10px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:(content-[""] absolute top--7px left--9px border-8px border-solid border-transparent border-b-primary-wash border-l-primary-wash)`}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/note/index.ts

@@ -0,0 +1 @@
+export * from './Note.js';

package/src/components/note.ts

@@ -0,0 +1 @@
+export * from './note/index.js';

package/src/components/numberStepper/NumberStepper.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NumberStepper } from './NumberStepper.js';
+
+const meta = {
+	title: 'NumberStepper',
+	component: NumberStepper,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof NumberStepper>;
+
+export default meta;
+
+type Story = StoryObj<typeof NumberStepper>;
+
+export const Default: Story = {
+	args: {
+		value: 0,
+	},
+};

package/src/components/numberStepper/NumberStepper.tsx

@@ -0,0 +1,74 @@
+import { fractionToText } from '@a-type/utils';
+import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+import { Button } from '../button.js';
+
+export interface NumberStepperProps {
+	value: number;
+	onChange: (value: number) => void;
+	highlightChange?: boolean;
+	steps?: number[];
+	increment?: number;
+	renderValue?: (value: number) => ReactNode;
+	className?: string;
+}
+
+export function NumberStepper({
+	value,
+	onChange,
+	highlightChange,
+	steps,
+	increment: incrementAmount = 1,
+	renderValue = fractionToText,
+	className,
+	...rest
+}: NumberStepperProps) {
+	const index = steps?.indexOf(value) ?? 0;
+
+	const increment = () => {
+		if (steps) {
+			if (index === steps.length - 1) {
+				return;
+			}
+			onChange(steps[index + 1]);
+		} else {
+			onChange(value + incrementAmount);
+		}
+	};
+
+	const decrement = () => {
+		if (steps) {
+			if (index === 0) {
+				return;
+			}
+			onChange(steps[index - 1]);
+		} else {
+			onChange(value - incrementAmount);
+		}
+	};
+
+	const canIncrement = steps ? index < steps.length - 1 : true;
+	const canDecrement = steps ? index > 0 : true;
+
+	return (
+		<div
+			className={classNames(
+				'flex items-center border-default rounded-full overflow-hidden w-min-content flex-shrink-0',
+				{
+					'bg-accent-wash color-black': !!highlightChange && value !== 1,
+				},
+				className,
+			)}
+			{...rest}
+		>
+			<Button color="ghost" onClick={decrement} disabled={!canDecrement}>
+				<MinusIcon />
+			</Button>
+			<div className="w-80px text-center">{renderValue(value)}</div>
+			<Button color="ghost" onClick={increment} disabled={!canIncrement}>
+				<PlusIcon />
+			</Button>
+		</div>
+	);
+}

package/src/components/numberStepper/index.ts

@@ -0,0 +1 @@
+export * from './NumberStepper.js';

package/src/components/numberStepper.ts

@@ -0,0 +1 @@
+export * from './numberStepper/index.js';

package/src/components/particles/ParticleContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+import { Particles } from './particlesState.js';
+
+const ParticleContext = createContext<Particles | null>(null);
+
+export function useParticles() {
+	const particles = useContext(ParticleContext);
+	return particles;
+}
+
+export const ParticlesProvider = ParticleContext.Provider;

package/src/components/particles/ParticleLayer.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ParticleLayer } from './ParticleLayer.js';
+import { Button } from '../button.js';
+import { useParticles } from './ParticleContext.js';
+import { MouseEvent } from 'react';
+
+const meta = {
+	title: 'ParticleLayer',
+	component: ParticleLayer,
+	argTypes: {},
+	parameters: {},
+} satisfies Meta<typeof ParticleLayer>;
+
+export default meta;
+
+type Story = StoryObj<typeof ParticleLayer>;
+
+export const Default: Story = {
+	render() {
+		return (
+			<div className="w-full h-[100vh] relative flex flex-col items-center justify-center">
+				<ParticleLayer noPortal>
+					<DemoButton />
+				</ParticleLayer>
+			</div>
+		);
+	},
+};
+
+function DemoButton() {
+	const particles = useParticles();
+	if (!particles) throw new Error('Must be used inside ParticleLayer');
+	const burst = (ev: MouseEvent) => {
+		particles.addParticles(
+			particles.elementExplosion({
+				element: ev.currentTarget as HTMLElement,
+				count: 10,
+			}),
+		);
+	};
+	return (
+		<Button size="icon" onClick={burst}>
+			💥
+		</Button>
+	);
+}

package/src/components/particles/ParticleLayer.tsx

@@ -0,0 +1,28 @@
+import { ReactNode, useState } from 'react';
+import { Particles } from './particlesState.js';
+import { createPortal } from 'react-dom';
+import { ParticlesProvider } from './ParticleContext.js';
+
+export function ParticleLayer({
+	children,
+	noPortal,
+}: {
+	children: ReactNode;
+	noPortal?: boolean;
+}) {
+	const [particles] = useState(() => new Particles({ initialPoolSize: 100 }));
+
+	const canvas = (
+		<canvas
+			ref={particles.setCanvas}
+			className="fixed inset-0 w-full h-full z-overdraw pointer-events-none"
+		/>
+	);
+
+	return (
+		<ParticlesProvider value={particles}>
+			{noPortal ? canvas : createPortal(canvas, document.body)}
+			{children}
+		</ParticlesProvider>
+	);
+}

package/src/components/particles/index.ts

@@ -0,0 +1,7 @@
+export { ParticleLayer } from './ParticleLayer.js';
+export { useParticles } from './ParticleContext.js';
+export {
+  createCircleParticles,
+  elementExplosion as circleParticleExplosion,
+  createElementBorderInitializer,
+} from './particlesState.js';