@pickle-ui/react-native 1.0.0-beta.1 → 1.0.0-beta.3

package/src/components/form/Textarea.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+
+const sizeClasses = {
+  lg: 'min-h-18 px-[11px]',
+  md: 'min-h-17.5 px-[11px]',
+  sm: 'min-h-16 px-[9px]',
+} as const;
+
+export type TextareaProps = Omit<
+  React.ComponentProps<typeof TextInput>,
+  'multiline'
+> & {
+  /** Class overrides for the inner `TextInput`; `className` styles the control around it. */
+  classNames?: { textarea?: string };
+  /** Dims the field and stops editing, like the web's `disabled`. */
+  disabled?: boolean;
+  /** Marks the value as invalid, like the web's `aria-invalid`. */
+  invalid?: boolean;
+  size?: 'lg' | 'md' | 'sm';
+};
+
+/**
+ * A multi-line text field that grows with its content from three lines, like
+ * `Textarea` in @pickle-ui/react. Set a `min-h-*` class on
+ * `classNames.textarea` to change the minimum.
+ */
+export function Textarea({
+  className,
+  classNames,
+  disabled = false,
+  editable = true,
+  invalid = false,
+  onBlur,
+  onFocus,
+  size = 'md',
+  ...props
+}: TextareaProps) {
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <InputFrame
+      className={className}
+      disabled={disabled}
+      focused={focused}
+      invalid={invalid}
+    >
+      <TextInput
+        accessibilityState={{ disabled }}
+        className={cn(
+          'text-foreground web:field-sizing-content web:resize-none flex-1 py-2 font-sans text-sm outline-none',
+          sizeClasses[size],
+          classNames?.textarea,
+        )}
+        editable={editable && !disabled}
+        multiline
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur?.(event);
+        }}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus?.(event);
+        }}
+        placeholderTextColorClassName="accent-muted-foreground/72"
+        textAlignVertical="top"
+        {...props}
+      />
+    </InputFrame>
+  );
+}

package/src/entries/checkbox.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from '../components/form/Checkbox';
+export type { CheckboxProps } from '../components/form/Checkbox';

package/src/entries/flex.ts

@@ -0,0 +1,2 @@
+export { Flex } from '../components/Flex';
+export type { FlexProps } from '../components/Flex';

package/src/entries/form.ts

@@ -0,0 +1,13 @@
+export { Form } from '../components/form/Form';
+export type {
+  FormCheckboxProps,
+  FormDescriptionProps,
+  FormErrorProps,
+  FormFieldProps,
+  FormInputGroupProps,
+  FormInputProps,
+  FormLabelProps,
+  FormProps,
+  FormRadioGroupProps,
+  FormTextareaProps,
+} from '../components/form/Form';

package/src/entries/grid.ts

@@ -0,0 +1,2 @@
+export { Grid } from '../components/Grid';
+export type { GridProps } from '../components/Grid';

package/src/entries/input-group.ts

@@ -0,0 +1,8 @@
+export { InputGroup } from '../components/form/InputGroup';
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextProps,
+} from '../components/form/InputGroup';

package/src/entries/input.ts

@@ -0,0 +1,2 @@
+export { Input } from '../components/form/Input';
+export type { InputProps } from '../components/form/Input';

package/src/entries/radio-group.ts

@@ -0,0 +1,5 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+export type {
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from '../components/form/RadioGroup';

package/src/entries/separator.ts

@@ -0,0 +1,2 @@
+export { Separator } from '../components/Separator';
+export type { SeparatorProps } from '../components/Separator';

package/src/entries/spinner.ts

@@ -0,0 +1,2 @@
+export { Spinner } from '../components/Spinner';
+export type { SpinnerProps } from '../components/Spinner';

package/src/entries/textarea.ts

@@ -0,0 +1,2 @@
+export { Textarea } from '../components/form/Textarea';
+export type { TextareaProps } from '../components/form/Textarea';

package/src/entries/x-stack.ts

@@ -0,0 +1,2 @@
+export { XStack } from '../components/XStack';
+export type { XStackProps } from '../components/XStack';

package/src/entries/y-stack.ts

@@ -0,0 +1,2 @@
+export { YStack } from '../components/YStack';
+export type { YStackProps } from '../components/YStack';

package/src/fonts.test.tsx

@@ -0,0 +1,244 @@
+/// <reference types="node" />
+import {
+  render,
+  renderHook,
+  type RenderHookOptions,
+  screen,
+} from '@testing-library/react-native';
+import { execFileSync } from 'node:child_process';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { useForm } from 'react-hook-form';
+import { type StyleProp, StyleSheet, type TextStyle } from 'react-native';
+import { ScopedVariables, useResolveClassNames } from 'uniwind';
+
+import { Badge } from './components/Badge';
+import { Button } from './components/Button';
+import { Card } from './components/Card';
+import { Checkbox } from './components/form/Checkbox';
+import { Form } from './components/form/Form';
+import { Input } from './components/form/Input';
+import { InputGroup } from './components/form/InputGroup';
+import { RadioGroup } from './components/form/RadioGroup';
+import { Textarea } from './components/form/Textarea';
+import { Text } from './components/Text';
+
+// Resolves the components' classes the way an app does: `styles.css`
+// compiled by Uniwind for iOS, followed by the app's own CSS, then loaded
+// into Uniwind's runtime.
+
+type HostElement = { props: { className?: string; style?: TextStyle } };
+
+/** The family the element renders with: its classes, then its `style`. */
+async function fontFamily(
+  element: HostElement,
+  options?: RenderHookOptions<unknown>,
+) {
+  const { result } = await renderHook(
+    () => useResolveClassNames(element.props.className ?? ''),
+    options,
+  );
+  // Uniwind's components render `style={[classNameStyle, props.style]}`.
+  const style: StyleProp<TextStyle> = [result.current, element.props.style];
+  return StyleSheet.flatten(style)?.fontFamily;
+}
+
+function FormFields() {
+  const form = useForm({ defaultValues: { email: '', name: '' } });
+
+  return (
+    <Form form={form} onSubmit={() => {}}>
+      <Form.Field
+        description="Field description"
+        label="Field label"
+        name="name"
+      >
+        <Form.Input placeholder="Form input" />
+      </Form.Field>
+      <Form.Field error="Field error" name="email">
+        <Form.Input />
+      </Form.Field>
+    </Form>
+  );
+}
+
+/** Compiles `styles.css` and `css` as an app's `global.css` and loads them. */
+function loadStyles(css: string) {
+  // Inside the package, so the compiled module's `require('uniwind')` resolves.
+  const cache = join(__dirname, '../node_modules/.cache');
+  mkdirSync(cache, { recursive: true });
+  const dir = mkdtempSync(join(cache, 'pickle-fonts-'));
+  const file = join(dir, 'global.css');
+  writeFileSync(file, `@import '${join(__dirname, 'styles.css')}';\n${css}`);
+  try {
+    const code = execFileSync(
+      process.execPath,
+      [join(__dirname, '../test/compile-uniwind.mjs'), file, 'ios'],
+      { encoding: 'utf8' },
+    );
+    writeFileSync(join(dir, 'styles.js'), code);
+    jest.requireActual(join(dir, 'styles.js'));
+  } finally {
+    rmSync(dir, { force: true, recursive: true });
+  }
+}
+
+async function renderComponents() {
+  await render(
+    <>
+      <Text>Body text</Text>
+      <Text variant="h1">Heading 1</Text>
+      <Text variant="h2">Heading 2</Text>
+      <Text variant="h3">Heading 3</Text>
+      <Text variant="code">pnpm test</Text>
+      <Card>
+        <Card.Header>
+          <Card.Title>Card title</Card.Title>
+          <Card.Description>Card description</Card.Description>
+        </Card.Header>
+      </Card>
+      <Badge>Badge label</Badge>
+      <Button>Button label</Button>
+      <Input placeholder="Input" />
+      <Textarea placeholder="Textarea" />
+      <InputGroup>
+        <InputGroup.Addon>@</InputGroup.Addon>
+        <InputGroup.Input placeholder="Group input" />
+        <InputGroup.Addon align="inline-end">
+          <InputGroup.Text>.com</InputGroup.Text>
+        </InputGroup.Addon>
+      </InputGroup>
+      <Checkbox label="Checkbox label" />
+      <RadioGroup>
+        <RadioGroup.Item label="Radio label" value="a" />
+      </RadioGroup>
+      <FormFields />
+    </>,
+  );
+}
+
+const SANS_TEXT = [
+  'Body text',
+  'Heading 3',
+  'Card description',
+  'Badge label',
+  'Button label',
+  '@',
+  '.com',
+  'Checkbox label',
+  'Radio label',
+  'Field label',
+  'Field description',
+  'Field error',
+];
+const HEADING_TEXT = ['Heading 1', 'Heading 2', 'Card title'];
+const FIELDS = ['Input', 'Textarea', 'Group input', 'Form input'];
+
+function elements(names: string[]) {
+  return names.map((name) => ({
+    element: FIELDS.includes(name)
+      ? screen.getByPlaceholderText(name)
+      : screen.getByText(name),
+    name,
+  }));
+}
+
+function every(names: string[], value: unknown) {
+  return Object.fromEntries(names.map((name) => [name, value]));
+}
+
+/** Finds every element first: `renderHook` replaces what `screen` queries. */
+async function fontFamilies(
+  names: string[],
+  options?: RenderHookOptions<unknown>,
+) {
+  const families: Record<string, unknown> = {};
+  for (const { element, name } of elements(names)) {
+    families[name] = await fontFamily(element, options);
+  }
+  return families;
+}
+
+const ALL = [...SANS_TEXT, ...HEADING_TEXT, ...FIELDS];
+
+describe('fonts', () => {
+  describe('when the app sets no font', () => {
+    beforeAll(() => loadStyles(''), 60_000);
+
+    it('sets no family, so text keeps the system font', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual(every(ALL, undefined));
+    });
+
+    it('keeps the monospace font for code', async () => {
+      await renderComponents();
+
+      expect(await fontFamily(screen.getByText('pnpm test'))).toBe('Menlo');
+    });
+  });
+
+  describe('when the app sets --font-sans', () => {
+    beforeAll(() => loadStyles("@theme { --font-sans: 'Nunito'; }"), 60_000);
+
+    it('applies it to every component, headings included', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual(every(ALL, 'Nunito'));
+    });
+
+    it('keeps the monospace font for code', async () => {
+      await renderComponents();
+
+      expect(await fontFamily(screen.getByText('pnpm test'))).toBe('Menlo');
+    });
+  });
+
+  describe('when the app sets --font-sans and --font-heading', () => {
+    beforeAll(
+      () =>
+        loadStyles("@theme { --font-sans: 'Nunito'; --font-heading: 'Lora'; }"),
+      60_000,
+    );
+
+    it('applies --font-heading to h1, h2 and Card.Title', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual({
+        ...every([...SANS_TEXT, ...FIELDS], 'Nunito'),
+        ...every(HEADING_TEXT, 'Lora'),
+      });
+    });
+  });
+
+  describe('when the app sets --font-sans in a :root rule', () => {
+    beforeAll(
+      () => loadStyles("@layer theme { :root { --font-sans: 'Nunito'; } }"),
+      60_000,
+    );
+
+    it('applies it', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual(every(ALL, 'Nunito'));
+    });
+  });
+
+  describe('when the app sets --font-sans at runtime', () => {
+    beforeAll(() => loadStyles(''), 60_000);
+
+    it('applies it inside ScopedVariables, headings included', async () => {
+      await renderComponents();
+
+      expect(
+        await fontFamilies(ALL, {
+          wrapper: ({ children }) => (
+            <ScopedVariables variables={{ '--font-sans': 'Nunito' }}>
+              {children}
+            </ScopedVariables>
+          ),
+        }),
+      ).toEqual(every(ALL, 'Nunito'));
+    });
+  });
+});

package/src/index.ts

@@ -3,7 +3,19 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
 export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';

package/src/styles.css

@@ -10,3 +10,15 @@
 @import 'uniwind';
 @import '@pickle-ui/tokens/native.css';
 @import './base.css';
+
+/*
+ * The tokens' `--font-*` variables read the app's own on the web, where an
+ * unset one falls back to the inherited font. Uniwind resolves them to
+ * themselves and overflows the stack, so take the native defaults from
+ * `base.css` again. Declare your own `--font-*` after importing this file.
+ */
+@theme {
+  --font-sans: var(--pickle-no-font);
+  --font-heading: var(--font-sans);
+  --font-mono: var(--pickle-no-font);
+}

package/dist/components/_internal/Spinner.d.ts

@@ -1,9 +0,0 @@
-/**
- * The web `Spinner`'s look on native: a three-quarter ring turning once a
- * second. Color it with a `border-*` class. Decorative: the control showing
- * it reports the busy state.
- */
-export declare function Spinner({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
-//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/_internal/Spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/Spinner.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAsC5D"}

package/dist/components/_internal/Spinner.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
-import { cn } from '../../lib/cn';
-/**
- * The web `Spinner`'s look on native: a three-quarter ring turning once a
- * second. Color it with a `border-*` class. Decorative: the control showing
- * it reports the busy state.
- */
-export function Spinner({ className }) {
-    const [turn] = useState(() => new Animated.Value(0));
-    useEffect(() => {
-        const loop = Animated.loop(Animated.timing(turn, {
-            duration: 1000,
-            easing: Easing.linear,
-            toValue: 1,
-            // react-native-web has no native driver and warns when asked for it.
-            useNativeDriver: Platform.OS !== 'web',
-        }));
-        loop.start();
-        return () => loop.stop();
-    }, [turn]);
-    const rotate = turn.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
-    });
-    return (_jsx(Animated.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { transform: [{ rotate }] }, children: _jsx(View, { className: cn('border-foreground size-3 rounded-full border-[1.5px] opacity-80', className, 
-            // After the color, which would otherwise override the open side.
-            'border-t-transparent') }) }));
-}
-//# sourceMappingURL=Spinner.js.map

package/dist/components/_internal/Spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/_internal/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,EAA0B;IAC3D,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CACxB,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE;YACpB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,CAAC;YACV,qEAAqE;YACrE,eAAe,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK;SACvC,CAAC,CACH,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,2BAA2B,QAC3B,yBAAyB,EAAC,qBAAqB,EAC/C,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAElC,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE,SAAS;YACT,iEAAiE;YACjE,sBAAsB,CACvB,GACD,GACY,CACjB,CAAC;AACJ,CAAC"}

package/src/components/_internal/Spinner.tsx

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
-
-import { cn } from '../../lib/cn';
-
-/**
- * The web `Spinner`'s look on native: a three-quarter ring turning once a
- * second. Color it with a `border-*` class. Decorative: the control showing
- * it reports the busy state.
- */
-export function Spinner({ className }: { className?: string }) {
-  const [turn] = useState(() => new Animated.Value(0));
-
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.timing(turn, {
-        duration: 1000,
-        easing: Easing.linear,
-        toValue: 1,
-        // react-native-web has no native driver and warns when asked for it.
-        useNativeDriver: Platform.OS !== 'web',
-      }),
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [turn]);
-
-  const rotate = turn.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <Animated.View
-      accessibilityElementsHidden
-      importantForAccessibility="no-hide-descendants"
-      style={{ transform: [{ rotate }] }}
-    >
-      <View
-        className={cn(
-          'border-foreground size-3 rounded-full border-[1.5px] opacity-80',
-          className,
-          // After the color, which would otherwise override the open side.
-          'border-t-transparent',
-        )}
-      />
-    </Animated.View>
-  );
-}