@a-type/ui 0.1.2 → 0.1.3

package/src/components/layouts/PageNowPlaying.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import {
-	createContext,
-	HTMLAttributes,
-	ReactNode,
-	useContext,
-	useMemo,
-	useState,
-} from 'react';
-import classNames from 'classnames';
-import { createPortal } from 'react-dom';
-import { NowPlayingContext } from './PageNowPlayingContext.js';
-
-export const NowPlayingProvider = ({ children }: { children: ReactNode }) => {
-	const [container, setContainer] = useState<HTMLDivElement>();
-	const value = useMemo(() => ({ container, setContainer }), [container]);
-
-	return (
-		<NowPlayingContext.Provider value={value}>
-			{children}
-		</NowPlayingContext.Provider>
-	);
-};
-
-export function PageNowPlaying({
-	className,
-	unstyled,
-	...props
-}: HTMLAttributes<HTMLDivElement> & { unstyled?: boolean }) {
-	const { container } = useContext(NowPlayingContext);
-	if (container) {
-		return createPortal(
-			<div
-				{...props}
-				className={classNames(
-					unstyled
-						? undefined
-						: 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center)',
-					className,
-				)}
-			/>,
-			container,
-		);
-	}
-	return null;
-}

package/src/components/layouts/PageNowPlayingContext.tsx

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-export const NowPlayingContext = createContext<{
-	container: HTMLDivElement | undefined;
-	setContainer: (container: HTMLDivElement) => void;
-}>({ container: undefined, setContainer: () => {} });

package/src/components/layouts/PageRoot.tsx

@@ -1,27 +0,0 @@
-import classNames from 'classnames';
-import { forwardRef, ReactNode } from 'react';
-
-export const PageRoot = forwardRef<
-	HTMLDivElement,
-	{
-		color?: 'default' | 'lemon';
-		children?: ReactNode;
-		className?: string;
-	}
->(function PageRoot({ className, children, ...props }, ref) {
-	return (
-		<div
-			ref={ref}
-			className={classNames(
-				'flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-col',
-				{
-					'bg-[var(--palette-yellow-70)]': props.color === 'lemon',
-				},
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-});

package/src/components/layouts/PageSection.tsx

@@ -1,23 +0,0 @@
-import { HTMLAttributes } from 'react';
-import classNames from 'classnames';
-import { withClassName } from '../../hooks/withClassName.js';
-
-export function PageSection({
-	className,
-	...props
-}: HTMLAttributes<HTMLDivElement>) {
-	return (
-		<div
-			{...props}
-			className={classNames(
-				'bg-white rounded-lg border-default p-4 w-full max-w-80vw md:min-w-0',
-				className,
-			)}
-		/>
-	);
-}
-
-export const PageSectionGrid = withClassName(
-	'div',
-	'grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 items-start',
-);

package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx

@@ -1,131 +0,0 @@
-'use client';
-
-import {
-	ChangeEvent,
-	FocusEvent,
-	forwardRef,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { debounce } from '@a-type/utils';
-import { Input, InputProps } from '../input/Input.js';
-import { TextArea } from '../textArea/TextArea.js';
-
-export type LiveUpdateTextFieldProps = {
-	value: string;
-	debounceMs?: number;
-	onChange: (value: string) => void;
-	textArea?: boolean;
-	className?: string;
-	onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-	onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-	autoComplete?: InputProps['autoComplete'];
-	autoFocus?: InputProps['autoFocus'];
-	required?: boolean;
-	placeholder?: string;
-	type?: InputProps['type'];
-};
-
-/**
- * An extension of TextField which keeps a local realtime value in state and
- * periodically reports changes to the parent. Use this to connect
- * to the API and update a value from the field directly.
- *
- * This component is optimistic and will not respond to external changes while focused.
- */
-export const LiveUpdateTextField = forwardRef<
-	HTMLInputElement | HTMLTextAreaElement,
-	LiveUpdateTextFieldProps
->(function LiveUpdateTextField(
-	{
-		value,
-		onChange,
-		debounceMs = 500,
-		onFocus,
-		onBlur,
-		textArea,
-		type,
-		...rest
-	},
-	ref,
-) {
-	const [displayValue, setDisplayValue] = useState(value || '');
-	const ignoreUpdates = useRef(false);
-	const didChange = useRef(false);
-
-	const handleFocus = useCallback(
-		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			onFocus?.(ev);
-			ignoreUpdates.current = true;
-		},
-		[onFocus],
-	);
-
-	const handleBlur = useCallback(
-		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			onBlur?.(ev);
-			ignoreUpdates.current = false;
-			// immediately send update if the user typed anything.
-			// otherwise pull the latest remote value
-			if (didChange.current) {
-				onChange?.(displayValue);
-			} else {
-				setDisplayValue(value || '');
-			}
-			didChange.current = false;
-		},
-		[onBlur, displayValue, onChange, value],
-	);
-
-	useEffect(() => {
-		if (ignoreUpdates.current) {
-			return;
-		}
-		setDisplayValue(value || '');
-	}, [value]);
-
-	// every once in a while, send an update to parent
-	const debouncedOnChange = useMemo(
-		() => debounce(onChange || (() => {}), debounceMs),
-		[onChange, debounceMs],
-	);
-
-	// update local state instantly and parent eventually
-	const handleChange = useCallback(
-		(ev: ChangeEvent<any>) => {
-			setDisplayValue(ev.target.value);
-			debouncedOnChange(ev.target.value);
-			didChange.current = true;
-		},
-		[debouncedOnChange],
-	);
-
-	if (textArea) {
-		return (
-			<TextArea
-				ref={ref as any}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				value={displayValue}
-				onChange={handleChange}
-				autoSize
-				{...rest}
-			/>
-		);
-	} else {
-		return (
-			<Input
-				ref={ref as any}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				value={displayValue}
-				onChange={handleChange}
-				type={type}
-				{...rest}
-			/>
-		);
-	}
-});

package/src/components/note/Note.tsx

@@ -1,21 +0,0 @@
-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/numberStepper/NumberStepper.tsx

@@ -1,74 +0,0 @@
-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-lg 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/particles/ParticleContext.tsx

@@ -1,11 +0,0 @@
-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.tsx

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

package/src/components/particles/index.ts

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