Merge branch 'main' into showcase

design-system/pkg/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @keystar/ui
 
+## 0.3.1
+
+### Patch Changes
+
+- bcb3b8ec: Support constrained proportions on cloud image block and field.
+  Refactor `Tooltip` styles to allow consumer overrides via style props.
+
 ## 0.3.0
 
 ### Minor Changes

design-system/pkg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keystar/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "main": "",
   "module": "",
@@ -6219,7 +6219,7 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@keystar/ui": "^0.3.0",
+    "@keystar/ui": "^0.3.1",
     "@keystar/ui-storybook": "^0.0.1",
     "@react-aria/landmark": "3.0.0-beta.2",
     "@svgr/core": "^6.5.1",

design-system/pkg/src/breadcrumbs/stories/Breadcrumbs.stories.tsx

@@ -2,6 +2,7 @@ import { Box } from '@keystar/ui/layout';
 import { action } from '@keystar/ui-storybook';
 
 import { Breadcrumbs, BreadcrumbsProps, Item } from '..';
+import { ReactNode } from 'react';
 
 export default {
   title: 'Components/Breadcrumbs',
@@ -82,9 +83,9 @@ function renderBreadcrumbs(children: React.ReactNode) {
   );
 }
 
-interface Render extends Function {
+type Render = (() => ReactNode) & {
   storyName?: string;
-}
+};
 
 function render<T>(props: Partial<BreadcrumbsProps<T>> = {}): Render {
   return renderBreadcrumbs(

design-system/pkg/src/text-field/stories/TextArea.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { action, Parameters } from '@keystar/ui-storybook';
 import { Grid } from '@keystar/ui/layout';
 
@@ -74,9 +74,9 @@ export const CustomWidth = render({
     'Error messages inform the user when the input does not meet validation criteria.',
 });
 
-interface Render extends Function {
+type Render = ((args: Parameters) => ReactNode) & {
   storyName?: string;
-}
+};
 
 function render(props = {}): Render {
   return function renderWithArgs(args: Parameters) {

packages/keystatic/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @keystatic/core
 
+## 0.1.4
+
+### Patch Changes
+
+- bcb3b8ec: Support constrained proportions on cloud image block and field.
+  Refactor `Tooltip` styles to allow consumer overrides via style props.
+- 43f0b61f: Fixed bundle size increase when using `@keystatic/core/reader` with
+  React server components
+- Updated dependencies [bcb3b8ec]
+  - @keystar/ui@0.3.1
+
 ## 0.1.3
 
 ### Patch Changes

packages/keystatic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keystatic/core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -171,7 +171,7 @@
     "@floating-ui/react": "^0.24.0",
     "@hapi/iron": "^7.0.0",
     "@internationalized/string": "^3.1.1",
-    "@keystar/ui": "^0.3.0",
+    "@keystar/ui": "^0.3.1",
     "@markdoc/markdoc": "^0.3.0",
     "@react-aria/focus": "^3.13.0",
     "@react-aria/i18n": "^3.8.0",
@@ -284,6 +284,18 @@
     "#sha1": {
       "node": "./src/sha1/node.ts",
       "default": "./src/sha1/webcrypto.ts"
+    },
+    "#field-ui/*": {
+      "react-server": "./src/form/fields/empty-field-ui.tsx",
+      "default": "./src/form/fields/*/ui.tsx"
+    },
+    "#component-block-primitives": {
+      "react-server": "./src/form/fields/document/DocumentEditor/primitives/blank-for-react-server.tsx",
+      "default": "./src/form/fields/document/DocumentEditor/primitives/index.tsx"
+    },
+    "#cloud-image-preview": {
+      "react-server": "./src/component-blocks/blank-for-react-server.tsx",
+      "default": "./src/component-blocks/cloud-image-preview.tsx"
     }
   }
 }

packages/keystatic/src/app/useItemData.ts

@@ -18,7 +18,7 @@ import {
   KEYSTATIC_CLOUD_HEADERS,
   MaybePromise,
 } from './utils';
-import { toFormattedFormDataError } from '../form/errors';
+import { toFormattedFormDataError } from '../form/error-formatting';
 import { serializeRepoConfig } from './repo-config';
 
 function parseEntry(args: UseItemDataArgs, files: Map<string, Uint8Array>) {

packages/keystatic/src/component-blocks/blank-for-react-server.tsx

@@ -0,0 +1 @@
+export function CloudImagePreview() {}

packages/keystatic/src/component-blocks/cloud-image-preview.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 import { useSelected, useSlateStatic } from 'slate-react';
 import { useOverlayTriggerState } from '@react-stately/overlays';

packages/keystatic/src/component-blocks/cloud-image.tsx

@@ -1,5 +1,5 @@
 import { component } from '..';
-import { CloudImagePreview } from './cloud-image-preview';
+import { CloudImagePreview } from '#cloud-image-preview';
 import { cloudImageSchema } from './cloud-image-schema';
 
 /** @deprecated Experimental */

packages/keystatic/src/form/error-formatting.ts

@@ -0,0 +1,32 @@
+import { FieldDataError } from './fields/error';
+import { PropValidationError } from './parse-props';
+
+function flattenErrors(error: unknown): unknown[] {
+  if (error instanceof AggregateError) {
+    return error.errors.flatMap(flattenErrors);
+  }
+  return [error];
+}
+
+export function formatFormDataError(error: unknown) {
+  const flatErrors = flattenErrors(error);
+
+  return flatErrors
+    .map(error => {
+      if (error instanceof PropValidationError) {
+        const path = error.path.join('.');
+        return `${path}: ${
+          error.cause instanceof FieldDataError
+            ? error.cause.message
+            : `Unexpected error: ${error.cause}`
+        }`;
+      }
+      return `Unexpected error: ${error}`;
+    })
+    .join('\n');
+}
+
+export function toFormattedFormDataError(error: unknown) {
+  const formatted = formatFormDataError(error);
+  return new Error(`Field validation failed:\n` + formatted);
+}

packages/keystatic/src/form/errors.ts

@@ -1,40 +1,10 @@
 import { getSlugFromState } from '../app/utils';
 import { ComponentSchema } from './api';
 import { SlugFieldInfo } from './fields/text/path-slug-context';
-import { FieldDataError } from './fields/error';
 import { PropValidationError } from './parse-props';
 import { ReadonlyPropPath } from './fields/document/DocumentEditor/component-blocks/utils';
 import { validateArrayLength } from './validate-array-length';
-
-function flattenErrors(error: unknown): unknown[] {
-  if (error instanceof AggregateError) {
-    return error.errors.flatMap(flattenErrors);
-  }
-  return [error];
-}
-
-export function formatFormDataError(error: unknown) {
-  const flatErrors = flattenErrors(error);
-
-  return flatErrors
-    .map(error => {
-      if (error instanceof PropValidationError) {
-        const path = error.path.join('.');
-        return `${path}: ${
-          error.cause instanceof FieldDataError
-            ? error.cause.message
-            : `Unexpected error: ${error.cause}`
-        }`;
-      }
-      return `Unexpected error: ${error}`;
-    })
-    .join('\n');
-}
-
-export function toFormattedFormDataError(error: unknown) {
-  const formatted = formatFormDataError(error);
-  return new Error(`Field validation failed:\n` + formatted);
-}
+import { toFormattedFormDataError } from './error-formatting';
 
 export function clientSideValidateProp(
   schema: ComponentSchema,
@@ -50,7 +20,7 @@ export function clientSideValidateProp(
   }
 }
 
-export function validateValueWithSchema(
+function validateValueWithSchema(
   schema: ComponentSchema,
   value: any,
   slugField: SlugFieldInfo | undefined,

packages/keystatic/src/form/fields/blocks/index.tsx

@@ -6,7 +6,7 @@ import {
   BasicFormField,
   fields,
 } from '../../api';
-import { BlocksFieldInput } from './ui';
+import { BlocksFieldInput } from '#field-ui/blocks';
 
 export function blocks<Schemas extends Record<string, ComponentSchema>>(
   blocks: {

packages/keystatic/src/form/fields/blocks/ui.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useLocalizedStringFormatter } from '@react-aria/i18n';
 import { ActionButton, ButtonGroup, Button } from '@keystar/ui/button';
 import {

packages/keystatic/src/form/fields/checkbox.tsx → packages/keystatic/src/form/fields/checkbox/index.tsx

@@ -1,8 +1,7 @@
-import { Checkbox } from '@keystar/ui/checkbox';
-import { Text } from '@keystar/ui/typography';
-import { BasicFormField } from '../api';
-import { FieldDataError } from './error';
-import { basicFormFieldWithSimpleReaderParse } from './utils';
+import { CheckboxFieldInput } from '#field-ui/checkbox';
+import { BasicFormField } from '../../api';
+import { FieldDataError } from '../error';
+import { basicFormFieldWithSimpleReaderParse } from '../utils';
 
 export function checkbox({
   label,
@@ -14,12 +13,13 @@ export function checkbox({
   description?: string;
 }): BasicFormField<boolean> {
   return basicFormFieldWithSimpleReaderParse({
-    Input({ value, onChange, autoFocus }) {
+    Input(props) {
       return (
-        <Checkbox isSelected={value} onChange={onChange} autoFocus={autoFocus}>
-          <Text>{label}</Text>
-          {description && <Text slot="description">{description}</Text>}
-        </Checkbox>
+        <CheckboxFieldInput
+          {...props}
+          label={label}
+          description={description}
+        />
       );
     },
     defaultValue() {

packages/keystatic/src/form/fields/checkbox/ui.tsx

@@ -0,0 +1,21 @@
+import { FormFieldInputProps } from '../../api';
+import { Checkbox } from '@keystar/ui/checkbox';
+import { Text } from '@keystar/ui/typography';
+
+export function CheckboxFieldInput(
+  props: FormFieldInputProps<boolean> & {
+    label: string;
+    description?: string;
+  }
+) {
+  return (
+    <Checkbox
+      isSelected={props.value}
+      onChange={props.onChange}
+      autoFocus={props.autoFocus}
+    >
+      <Text>{props.label}</Text>
+      {props.description && <Text slot="description">{props.description}</Text>}
+    </Checkbox>
+  );
+}

packages/keystatic/src/form/fields/cloudImage/index.tsx

@@ -3,7 +3,7 @@ import { ObjectField } from '../../api';
 import { integer } from '../integer';
 import { object } from '../object';
 import { text } from '../text';
-import { CloudImageFieldInput } from './ui';
+import { CloudImageFieldInput } from '#field-ui/cloudImage';
 
 export function cloudImage({
   label,

packages/keystatic/src/form/fields/cloudImage/ui.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useId, useState } from 'react';
 
 import { ActionButton, ClearButton, ToggleButton } from '@keystar/ui/button';

packages/keystatic/src/form/fields/date/index.tsx

@@ -5,7 +5,7 @@ import {
   assertRequired,
   basicFormFieldWithSimpleReaderParse,
 } from '../utils';
-import { DateFieldInput } from './ui';
+import { DateFieldInput } from '#field-ui/date';
 import { validateDate } from './validateDate';
 
 export function date<IsRequired extends boolean | undefined>({

packages/keystatic/src/form/fields/date/ui.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { TextField } from '@keystar/ui/text-field';
 import { useReducer } from 'react';
 import { validateDate } from './validateDate';

packages/keystatic/src/form/fields/datetime/index.tsx

@@ -5,7 +5,7 @@ import {
   assertRequired,
   basicFormFieldWithSimpleReaderParse,
 } from '../utils';
-import { DatetimeFieldInput } from './ui';
+import { DatetimeFieldInput } from '#field-ui/datetime';
 import { validateDatetime } from './validateDatetime';
 
 export function datetime<IsRequired extends boolean | undefined>({

packages/keystatic/src/form/fields/datetime/ui.tsx

@@ -1,5 +1,5 @@
 //ui.tsx
-'use client';
+
 import { TextField } from '@keystar/ui/text-field';
 import { useReducer } from 'react';
 import { validateDatetime } from './validateDatetime';

packages/keystatic/src/form/fields/document/DocumentEditor/primitives/blank-for-react-server.tsx

@@ -0,0 +1,3 @@
+export function BlockWrapper() {}
+export function NotEditable() {}
+export function ToolbarSeparator() {}

packages/keystatic/src/form/fields/document/DocumentEditor/primitives/index.tsx

@@ -1,4 +1,3 @@
-'use client';
 export {
   ActiveBlockPopoverProvider,
   BlockPopover,

packages/keystatic/src/form/fields/document/index.tsx

@@ -17,7 +17,7 @@ import {
   FormFieldStoredValue,
 } from '../../api';
 import { text } from '../text';
-import { DocumentFieldInput } from './ui';
+import { DocumentFieldInput } from '#field-ui/document';
 import { createDocumentEditorForNormalization } from './DocumentEditor/create-editor';
 import { object } from '../object';
 import { FieldDataError } from '../error';

packages/keystatic/src/form/fields/document/ui.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Field, FieldProps } from '@keystar/ui/field';
 import { useState } from 'react';