arcway 0.1.0

package/client/ui/field.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldSet,
+  FieldLegend,
+} from './field.jsx';
+import { Input } from './input.jsx';
+const meta = {
+  title: 'UI/Field',
+  component: Field,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Field>
+      <FieldLabel htmlFor="name">Name</FieldLabel>
+      <Input id="name" placeholder="Enter your name" />
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const field = canvasElement.querySelector('[data-slot="field"]');
+    await expect(field).toBeInTheDocument();
+    await expect(canvas.getByText('Name')).toBeInTheDocument();
+    await expect(canvas.getByPlaceholderText('Enter your name')).toBeInTheDocument();
+  },
+};
+const WithDescription = {
+  render: () => (
+    <Field>
+      <FieldLabel htmlFor="email">Email</FieldLabel>
+      <Input id="email" placeholder="you@example.com" />
+      <FieldDescription>We will never share your email.</FieldDescription>
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('We will never share your email.')).toBeInTheDocument();
+  },
+};
+const WithError = {
+  render: () => (
+    <Field>
+      <FieldLabel htmlFor="password">Password</FieldLabel>
+      <Input id="password" type="password" />
+      <FieldError>Password is required</FieldError>
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('alert')).toBeInTheDocument();
+    await expect(canvas.getByText('Password is required')).toBeInTheDocument();
+  },
+};
+const WithErrorObjects = {
+  render: () => (
+    <Field>
+      <FieldLabel htmlFor="field">Field</FieldLabel>
+      <Input id="field" />
+      <FieldError errors={[{ message: 'Too short' }, { message: 'Must contain a number' }]} />
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Too short')).toBeInTheDocument();
+    await expect(canvas.getByText('Must contain a number')).toBeInTheDocument();
+  },
+};
+const Horizontal = {
+  render: () => (
+    <FieldGroup>
+      <Field orientation="horizontal">
+        <FieldLabel htmlFor="h-name">Name</FieldLabel>
+        <Input id="h-name" placeholder="Name" />
+      </Field>
+    </FieldGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const field = canvasElement.querySelector('[data-slot="field"]');
+    await expect(field?.getAttribute('data-orientation')).toBe('horizontal');
+  },
+};
+const FieldSetStory = {
+  name: 'FieldSet',
+  render: () => (
+    <FieldSet>
+      <FieldLegend>Account Details</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="fs-name">Name</FieldLabel>
+          <Input id="fs-name" placeholder="Name" />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="fs-email">Email</FieldLabel>
+          <Input id="fs-email" placeholder="Email" />
+        </Field>
+      </FieldGroup>
+    </FieldSet>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Account Details')).toBeInTheDocument();
+  },
+};
+export {
+  Default,
+  FieldSetStory,
+  Horizontal,
+  WithDescription,
+  WithError,
+  WithErrorObjects,
+  stdin_default as default,
+};

package/client/ui/form.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+function Form({ form, children, className = '', ...rest }) {
+  return (
+    <form
+      data-form
+      data-submitting={form.isSubmitting || void 0}
+      onSubmit={form.handleSubmit}
+      className={`flex flex-col gap-4 ${className}`}
+      {...rest}
+    >
+      <fieldset disabled={form.isSubmitting} className="flex flex-col gap-4">
+        {children}
+      </fieldset>
+    </form>
+  );
+}
+export { Form };

package/client/ui/hooks/use-mobile.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+  return !!isMobile;
+}
+export { useIsMobile };

package/client/ui/hover-card.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function HoverCard({ ...props }) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+function HoverCardTrigger({ ...props }) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+function HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'cn-hover-card-content z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/client/ui/hover-card.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card.jsx';
+const meta = {
+  title: 'UI/HoverCard',
+  component: HoverCard,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <a href="#" style={{ textDecoration: 'underline' }}>
+          Hover over me
+        </a>
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <p>Hover card content with details.</p>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByText('Hover over me');
+    await expect(trigger).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };