@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/cardview/index.tsx

@@ -1,14 +1,31 @@
 // @ts-nocheck
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/CardView.tsx
+
+// Port of packages/@react-spectrum/s2/src/CardView.tsx.
+
 import {
-  type JSX,
+  Show,
   createContext,
   createEffect,
   createMemo,
   createSignal,
   onCleanup,
-  onMount,
-  splitProps,
+  onSettled,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Collection,
   GridList as HeadlessGridList,
@@ -27,6 +44,7 @@ import type { UnsafeClassName } from "../s2-internal/style-utils";
 import { getAllowedOverrides } from "../s2-internal/style-utils" with { type: "macro" };
 import type { RefLike, SpectrumContextValue } from "../button/spectrum-context";
 import { mergeContextRefs } from "../button/spectrum-context";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type CardViewLayout = "grid" | "waterfall";
 export type CardViewSize = "XS" | "S" | "M" | "L" | "XL";
@@ -157,15 +175,7 @@ const cardViewStyles = style<
         },
       },
     },
-    gridTemplateColumns: {
-      size: {
-        XS: "[repeat(auto-fit,minmax(100px,140px))]",
-        S: "[repeat(auto-fit,minmax(150px,210px))]",
-        M: "[repeat(auto-fit,minmax(200px,280px))]",
-        L: "[repeat(auto-fit,minmax(270px,370px))]",
-        XL: "[repeat(auto-fit,minmax(340px,460px))]",
-      },
-    },
+    gridTemplateColumns: "[repeat(var(--cardview-columns,1),minmax(0,1fr))]",
     ...focusRing(),
     outlineStyle: {
       default: "none",
@@ -227,7 +237,8 @@ export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element
   const selectionStyle = (): CardViewSelectionStyle => local.selectionStyle ?? "checkbox";
   const isLoading = () =>
     local.isLoading || local.loadingState === "loading" || local.loadingState === "loadingMore";
-  const [maxSizeIndex, setMaxSizeIndex] = createSignal(SIZES.length - 1);
+  const [maxSizeIndex, setMaxSizeIndex] = createSignal(SIZES.length - 1, { ownedWrite: true });
+  const [viewportWidth, setViewportWidth] = createSignal(0, { ownedWrite: true });
   let rootElement: HTMLDivElement | undefined;
   const assignRootRef = mergeContextRefs(local.ref, (element: HTMLDivElement) => {
     rootElement = element;
@@ -235,6 +246,7 @@ export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element
 
   const updateSize = () => {
     const width = rootElement?.clientWidth ?? 0;
+    setViewportWidth(width);
     if (width <= 0) {
       setMaxSizeIndex(SIZES.length - 1);
       return;
@@ -251,7 +263,7 @@ export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element
     setMaxSizeIndex(index);
   };
 
-  onMount(() => {
+  onSettled(() => {
     updateSize();
     if (typeof ResizeObserver !== "function" || !rootElement) {
       return;
@@ -259,25 +271,39 @@ export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element
 
     const observer = new ResizeObserver(updateSize);
     observer.observe(rootElement);
-    onCleanup(() => observer.disconnect());
+    return () => observer.disconnect();
   });
 
-  createEffect(() => {
-    density();
-    requestedSize();
-    updateSize();
-  });
+  createEffect(
+    () => {
+      density();
+      requestedSize();
+    },
+    () => {
+      updateSize();
+    },
+  );
 
   const size = (): CardViewSize =>
     SIZES[Math.min(maxSizeIndex(), Math.max(0, SIZES.indexOf(requestedSize())))];
+  const packing = () => layoutOptions[size()][density()];
+  const columnCount = () => {
+    const width = viewportWidth();
+    const { minItemSize, minSpace } = packing();
+    if (width <= 0) return 1;
+    return Math.max(1, Math.floor((width + minSpace) / (minItemSize + minSpace)));
+  };
+  const gridColumnCount = createMemo(() => (layout() === "waterfall" ? 1 : columnCount()));
   const [actionSelectedKeys, setActionSelectedKeys] = createSignal<"all" | Set<Key>>(
     selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
+    { ownedWrite: true },
+  );
+  createEffect(
+    () => selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
+    (keys) => {
+      setActionSelectedKeys(keys);
+    },
   );
-  createEffect(() => {
-    setActionSelectedKeys(
-      selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
-    );
-  });
   const onSelectionChange = (keys: "all" | Set<Key>) => {
     setActionSelectedKeys(keys === "all" ? "all" : new Set(keys));
     headlessProps.onSelectionChange?.(keys);
@@ -301,16 +327,19 @@ export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element
       .join(" ");
 
   const cardView = (
-    <InternalCardViewContext.Provider
-      value={{ ElementType: HeadlessGridListItem, layout: layout() }}
-    >
-      <CardContext.Provider value={{ size: size(), variant: variant() }}>
+    <InternalCardViewContext value={{ ElementType: HeadlessGridListItem, layout: layout() }}>
+      <CardContext value={{ size: size(), variant: variant() }}>
         <ImageCoordinator>
           <HeadlessGridList
             {...headlessProps}
             ref={(element: HTMLDivElement) => assignRootRef(element)}
             class={className}
-            style={local.UNSAFE_style}
+            style={{
+              ...local.UNSAFE_style,
+              "--cardview-columns": String(columnCount()),
+            }}
+            layout="grid"
+            columnCount={gridColumnCount()}
             selectionBehavior={selectionStyle() === "highlight" ? "replace" : "toggle"}
             onSelectionChange={onSelectionChange}
             isLoading={isLoading()}
@@ -326,19 +355,17 @@ export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element
             {(item: T) => local.children(item)}
           </HeadlessGridList>
         </ImageCoordinator>
-      </CardContext.Provider>
-    </InternalCardViewContext.Provider>
+      </CardContext>
+    </InternalCardViewContext>
   );
 
-  if (!local.renderActionBar) {
-    return cardView;
-  }
-
   return (
-    <div class={wrapperStyles({}, local.styles)} style={local.UNSAFE_style}>
-      {cardView}
-      {local.renderActionBar(actionSelectedKeys())}
-    </div>
+    <Show when={Boolean(local.renderActionBar)} fallback={cardView}>
+      <div class={wrapperStyles({}, local.styles)} style={local.UNSAFE_style}>
+        {cardView}
+        {local.renderActionBar?.(actionSelectedKeys())}
+      </div>
+    </Show>
   );
 }
 

package/src/checkbox/index.tsx

@@ -1,13 +1,27 @@
 // @ts-nocheck
-import {
-  createContext,
-  createUniqueId,
-  type JSX,
-  splitProps,
-  mergeProps,
-  Show,
-  useContext,
-} from "solid-js";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Checkbox.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Field.tsx
+
+// Port of packages/@react-spectrum/s2/src/Checkbox.tsx.
+// Port of packages/@react-spectrum/s2/src/CheckboxGroup.tsx.
+// Port of packages/@react-spectrum/s2/src/Field.tsx.
+
+import { createContext, createUniqueId, Show, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   CheckboxField as HeadlessCheckboxField,
   CheckboxButton as HeadlessCheckboxButton,
@@ -24,12 +38,11 @@ import {
 // aria-describedby via this WeakMap). We render the visible HelpText ourselves
 // (renderHelpText={false}) but read the id back from here so all three — group
 // node, item inputs, and our <Text> — resolve to the same element.
-import { checkboxGroupData } from "@proyecto-viviana/solidaria";
+import { mergeProps, checkboxGroupData } from "@proyecto-viviana/solidaria";
 import { Text } from "../text";
 import type { StyleString } from "../style";
 import { baseColor, focusRing, space, style } from "../style" with { type: "macro" };
 import {
-  controlBorderRadius,
   controlFont,
   controlSize,
   field,
@@ -39,10 +52,13 @@ import {
 import { CenterBaseline } from "../icon/center-baseline";
 import AlertTriangleIcon from "../icon/s2wf-icons/AlertTriangleIcon";
 import AsteriskIcon from "../icon/ui-icons/Asterisk";
+import { createStringFormatter } from "@proyecto-viviana/solidaria";
+import { s2IntlStrings } from "../intl";
 import CheckmarkIcon from "../icon/ui-icons/Checkmark";
 import DashIcon from "../icon/ui-icons/Dash";
 import { useProviderProps } from "../provider";
 import { FormContext, useFormProps, useIsInForm } from "../form";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -230,7 +246,7 @@ const checkboxGroupHelpText = style<CheckboxGroupStyleState>({
   color: {
     default: "neutral-subdued",
     isInvalid: {
-      default: "negative",
+      default: "negative-1000",
       forcedColors: "Mark",
     },
     isDisabled: {
@@ -339,7 +355,7 @@ const checkboxHelpText = style<
   color: {
     default: "neutral-subdued",
     isInvalid: {
-      default: "negative",
+      default: "negative-1000",
       forcedColors: "Mark",
     },
     isDisabled: {
@@ -365,7 +381,19 @@ const checkboxHelpText = style<
 
 const checkboxBox = style<CheckboxStyleState>({
   ...focusRing(),
-  ...controlBorderRadius("sm"),
+  /* Terminal Glass draws the choice box as a PIXEL square, not a rounded control:
+   * the checkpoint quiz marks each answer with a 14x14 box at `border: 2px solid`
+   * and no radius at all ("Terminal Glass App.dc.html":242). Size S is where that
+   * geometry lands, because `controlSize("sm")` already resolves S to 14px — the
+   * handoff's own measurement — so the register only has to flatten the corner and
+   * double the edge there. M/L/XL keep the Spectrum 5px corner and 1px edge: they
+   * are the form-density sizes, not the one the register draws. */
+  borderRadius: {
+    default: "control",
+    size: {
+      S: "none",
+    },
+  },
   size: controlSize("sm"),
   flexShrink: 0,
   display: "flex",
@@ -377,7 +405,14 @@ const checkboxBox = style<CheckboxStyleState>({
   // itself — control() unconditionally emits display/paddingX/minWidth/font,
   // all of which would break a square choice box — so it carries the literal.
   // The identical hand-rolled block in menu/s2-menu-styles.ts must move with it.
-  borderWidth: 1,
+  // Size S is the exception, and it is the register's own: the quiz box is drawn at
+  // 2px so a 14px square still reads as a hard-edged mark rather than a hairline.
+  borderWidth: {
+    default: 1,
+    size: {
+      S: 2,
+    },
+  },
   boxSizing: "border-box",
   borderStyle: "solid",
   transition: "default",
@@ -436,8 +471,16 @@ const checkboxIcon = style({
   pointerEvents: "none",
   "--iconPrimary": {
     type: "fill",
+    /* The mark inside a filled box is the DEEP well, not paper. The handoff punches
+     * the correct answer's dot in `--well2` over the `--status-info` fill
+     * ("Terminal Glass App.dc.html":520, `dot: right ? 'var(--well2)'`), which is
+     * `--surface-well-deep` here. `gray-25` was the Spectrum answer — pure #ffffff in
+     * light — and it made the checkmark read as a hole in the fill rather than as
+     * something stamped into it. In dark the two values are within a hair of each
+     * other, so this only moves the light scheme, where it stays well clear of the
+     * 3:1 graphical floor against the accent fill. */
     value: {
-      default: "gray-25",
+      default: "[var(--surface-well-deep)]",
       forcedColors: "HighlightText",
     },
   },
@@ -520,8 +563,16 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
   const isInForm = useIsInForm();
   const isInCheckboxGroup = !!useContext(HeadlessCheckboxGroupStateContext);
   const providerProps = useProviderProps(useFormProps(props));
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(CheckboxContext), props.slot);
-  const merged = mergeProps(providerProps, contextProps ?? {}, props);
+  const merged = mergeProps(flags, contextProps ?? {}, props);
 
   const [local, headlessProps] = splitProps(merged, [
     "size",
@@ -693,6 +744,14 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
   const isInForm = useIsInForm();
   const formContext = useContext(FormContext);
   const providerProps = useProviderProps(useFormProps(props));
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(CheckboxGroupContext), props.slot);
   const defaultProps: Partial<CheckboxGroupProps> = {
     orientation: "vertical",
@@ -700,7 +759,7 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
     labelAlign: "start",
     necessityIndicator: "icon",
   };
-  const mergedProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps(defaultProps, flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "size",
     "orientation",
@@ -724,6 +783,7 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
   const labelPosition = () => local.labelPosition ?? "top";
   const labelAlign = () => local.labelAlign ?? "start";
   const necessityIndicator = () => local.necessityIndicator ?? "icon";
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const idBase = createUniqueId();
   const labelId = `${idBase}-label`;
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
@@ -783,7 +843,9 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
                   when={necessityIndicator() === "icon"}
                   fallback={
                     <span aria-hidden={headlessProps.isRequired ? true : undefined}>
-                      {headlessProps.isRequired ? "(required)" : "(optional)"}
+                      {stringFormatter().format(
+                        headlessProps.isRequired ? "label.(required)" : "label.(optional)",
+                      )}
                     </span>
                   }
                 >
@@ -809,7 +871,7 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
           orientation: local.orientation,
         })}
       >
-        <FormContext.Provider
+        <FormContext
           value={{
             ...(formContext ?? {}),
             get size() {
@@ -818,7 +880,7 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
             isRequired: undefined,
           }}
         >
-          <CheckboxContext.Provider
+          <CheckboxContext
             value={{
               get isEmphasized() {
                 return local.isEmphasized;
@@ -826,8 +888,8 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
             }}
           >
             {local.children}
-          </CheckboxContext.Provider>
-        </FormContext.Provider>
+          </CheckboxContext>
+        </FormContext>
       </div>
       {/* Byte-faithful to upstream Field.tsx HelpText: the description renders a
           RAC `<Text slot="description">` (a `<span>`), not a `<div>`. */}
@@ -860,7 +922,7 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
   );
 
   return (
-    <CheckboxGroupStyleContext.Provider
+    <CheckboxGroupStyleContext
       value={{
         get size() {
           return local.size;
@@ -895,6 +957,6 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
       >
         {renderChildren}
       </HeadlessCheckboxGroup>
-    </CheckboxGroupStyleContext.Provider>
+    </CheckboxGroupStyleContext>
   );
 }

package/src/color/ColorEditor.tsx

@@ -1,9 +1,10 @@
-import { type JSX, splitProps } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   ColorEditor as HeadlessColorEditor,
   type ColorEditorProps as HeadlessColorEditorProps,
 } from "@proyecto-viviana/solidaria-components";
 import { css } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ColorEditorProps extends Omit<HeadlessColorEditorProps, "class" | "style"> {
   /** Additional CSS class name. */

package/src/color/ColorSwatchPicker.tsx

@@ -1,4 +1,21 @@
-import { type JSX, createContext, mergeProps, Show, splitProps, useContext } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
+
+// Port of packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx.
+import { createContext, Show, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   ColorSwatch as HeadlessColorSwatch,
   ColorSwatchPicker as HeadlessColorSwatchPicker,
@@ -13,13 +30,14 @@ import type { Color } from "@proyecto-viviana/solid-stately";
 import { focusRing, space, style } from "../style" with { type: "macro" };
 import type { StylesProp, UnsafeClassName } from "../s2-internal/style-utils";
 import { getAllowedOverrides } from "../s2-internal/style-utils" with { type: "macro" };
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import {
   getSlottedContextProps,
   mergeContextStyles,
   mergeContextUnsafeStyle,
   type SpectrumContextValue,
 } from "../button/spectrum-context";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   InternalColorSwatchContext,
   type InternalColorSwatchRounding,
@@ -188,9 +206,17 @@ function getColorSwatchStyle(renderProps: ColorSwatchRenderProps): JSX.CSSProper
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
 export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as ColorSwatchPickerProps & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(ColorSwatchPickerContext), props.slot);
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps<ColorSwatchPickerProps>(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "density",
     "size",
@@ -256,15 +282,19 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
       }
       style={mergedUnsafeStyle()}
     >
-      <InternalColorSwatchContext.Provider
+      <InternalColorSwatchContext
         value={{
           useWrapper,
-          size: size(),
-          rounding: rounding(),
+          get size() {
+            return size();
+          },
+          get rounding() {
+            return rounding();
+          },
         }}
       >
         {local.children}
-      </InternalColorSwatchContext.Provider>
+      </InternalColorSwatchContext>
     </HeadlessColorSwatchPicker>
   );
 }
@@ -321,9 +351,9 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
     >
       {(renderProps) => (
         <>
-          <InternalColorSwatchContext.Provider value={null}>
+          <InternalColorSwatchContext value={null}>
             {renderChildren(renderProps)}
-          </InternalColorSwatchContext.Provider>
+          </InternalColorSwatchContext>
           <Show when={renderProps.isSelected}>
             <div aria-hidden="true" class={colorSwatchPickerSelectedOverlay} />
           </Show>

package/src/color/color-swatch-internal.ts

@@ -1,4 +1,21 @@
-import { createContext, type Accessor, type JSX } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSwatch.tsx
+
+// Port of packages/@react-spectrum/s2/src/ColorSwatch.tsx.
+import { createContext } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Color } from "@proyecto-viviana/solid-stately";
 
 export type InternalColorSwatchSize = "XS" | "S" | "M" | "L";