@dxos/react-ui-gameboard 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.4-main.9735255",
+  "version": "0.8.4-main.9be5663bfe",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,15 +30,15 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-context": "1.1.1",
     "chess.js": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/debug": "0.8.4-main.9735255",
-    "@dxos/invariant": "0.8.4-main.9735255",
-    "@dxos/log": "0.8.4-main.9735255",
-    "@dxos/node-std": "0.8.4-main.9735255",
-    "@dxos/util": "0.8.4-main.9735255"
+    "@dxos/debug": "0.8.4-main.9be5663bfe",
+    "@dxos/invariant": "0.8.4-main.9be5663bfe",
+    "@dxos/log": "0.8.4-main.9be5663bfe",
+    "@dxos/util": "0.8.4-main.9be5663bfe",
+    "@dxos/node-std": "0.8.4-main.9be5663bfe"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
@@ -48,16 +48,16 @@
     "lodash.defaultsdeep": "^4.6.1",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.9735255",
-    "@dxos/ui-theme": "0.8.4-main.9735255",
-    "@dxos/storybook-utils": "0.8.4-main.9735255"
+    "vite": "^7.1.11",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
+    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9735255",
-    "@dxos/ui-theme": "0.8.4-main.9735255"
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Chessboard/Chessboard.stories.tsx

@@ -11,7 +11,6 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
 import { Gameboard, type GameboardRootProps, type Move, type Player } from '../Gameboard';
-
 import { ChessModel } from './chess';
 import { Chessboard, type ChessboardProps } from './Chessboard';
 
@@ -66,7 +65,7 @@ const GridStory = () => {
   }, []);
 
   return (
-    <div className='bs-full aspect-square mx-auto'>
+    <div className='h-full aspect-square mx-auto'>
       <div className='grid grid-cols-3 gap-2'>
         {models.map((model, i) => (
           <div key={i} className='aspect-square'>
@@ -84,7 +83,7 @@ const meta = {
   title: 'ui/react-ui-gameboard/Chessboard',
   component: Chessboard,
   render: DefaultStory,
-  decorators: [withRegistry, withTheme, withLayout({ layout: 'column' })],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Chessboard>;
 
 export default meta;
@@ -109,5 +108,6 @@ export const Debug: Story = {
 };
 
 export const Grid = {
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   render: GridStory,
 };

package/src/components/Chessboard/Chessboard.tsx

@@ -21,12 +21,16 @@ import {
   locationToString,
   useGameboardContext,
 } from '../Gameboard';
-
 import { type ChessModel, type ChessPiece, ChessPieces, boardStyles, getSquareColor, locationToPos } from './chess';
 
 /** Fallback atom for when model is undefined. */
 const EMPTY_PIECES_ATOM = Atom.make<PieceMap<ChessPiece>>({});
 
+/**
+ * Chessboard layout.
+ */
+const CHESSBOARD_NAME = 'Chessboard';
+
 export type ChessboardProps = ThemedClassName<
   PropsWithChildren<{
     orientation?: Player;
@@ -37,14 +41,11 @@ export type ChessboardProps = ThemedClassName<
   }>
 >;
 
-/**
- * Chessboard layout.
- */
 const ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
   ({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
     const targetRef = useForwardedRef(forwardedRef);
     const { width, height } = useResizeDetector({ targetRef, refreshRate: 200 });
-    const { model, promoting, onPromotion } = useGameboardContext<ChessModel>(Chessboard.displayName!);
+    const { model, promoting, onPromotion } = useGameboardContext<ChessModel>(CHESSBOARD_NAME);
     const pieces = useAtomValue(model?.pieces ?? EMPTY_PIECES_ATOM);
 
     // Board squares.
@@ -61,7 +62,7 @@ const ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
           <div
             key={locationToString(location)}
             {...{
-              ['data-location' as const]: locationToString(location),
+              'data-location': locationToString(location),
             }}
           />
         );
@@ -103,7 +104,7 @@ const ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
     }, [grid, pieces, promoting]);
 
     return (
-      <div ref={targetRef} tabIndex={0} className={mx('relative outline-none', classNames)}>
+      <div ref={targetRef} tabIndex={0} className={mx('dx-expander relative outline-hidden', classNames)}>
         {/* DOM Layout. */}
         <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
           {layout}
@@ -153,7 +154,7 @@ const ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
   },
 );
 
-ChessboardComponent.displayName = 'Chessboard';
+ChessboardComponent.displayName = CHESSBOARD_NAME;
 
 export const Chessboard = memo(ChessboardComponent);
 

package/src/components/Gameboard/Gameboard.tsx

@@ -33,19 +33,13 @@ const useGameboardContext = <M extends GameboardModel<any>>(consumerName: string
 
 type GameboardRootProps<M extends GameboardModel<any>> = PropsWithChildren<{
   model?: M;
-  moveNumber?: number;
   onDrop?: (move: Move) => boolean;
 }>;
 
 /**
  * Generic board container.
  */
-const GameboardRoot = <M extends GameboardModel<any>>({
-  children,
-  model,
-  moveNumber,
-  onDrop,
-}: GameboardRootProps<M>) => {
+const GameboardRoot = <M extends GameboardModel<any>>({ children, model, onDrop }: GameboardRootProps<M>) => {
   const [dragging, setDragging] = useState(false);
   const [promoting, setPromoting] = useState<PieceRecord | undefined>();
 
@@ -113,10 +107,10 @@ const GameboardContent = forwardRef<HTMLDivElement, GameboardContentProps>(
     return (
       <div
         role='none'
-        className={mx(grow && 'grid is-full bs-full size-container place-content-center', classNames)}
+        className={mx(grow && 'dx-size-container dx-expander grid place-content-center', classNames)}
         ref={forwardedRef}
       >
-        {contain ? <div className='is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]'>{children}</div> : children}
+        {contain ? <div className='w-[min(100cqw,100cqh)] h-[min(100cqw,100cqh)]'>{children}</div> : children}
       </div>
     );
   },

package/src/components/Gameboard/Piece.tsx

@@ -26,8 +26,10 @@ export type PieceProps = ThemedClassName<{
   onClick?: () => void;
 }>;
 
+const PIECE_NAME = 'Piece';
+
 export const Piece = memo(({ classNames, Component, piece, bounds, label, onClick }: PieceProps) => {
-  const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName!);
+  const { model, dragging: isDragging, promoting } = useGameboardContext(PIECE_NAME);
   const promotingRef = useDynamicRef(promoting);
   const [dragging, setDragging] = useState(false);
   const [preview, setPreview] = useState<HTMLElement>();
@@ -134,4 +136,4 @@ export const Piece = memo(({ classNames, Component, piece, bounds, label, onClic
   );
 });
 
-Piece.displayName = 'Piece';
+Piece.displayName = PIECE_NAME;

package/src/components/Gameboard/Square.tsx

@@ -22,10 +22,12 @@ export type SquareProps = ThemedClassName<{
   label?: string;
 }>;
 
+const SQUARE_NAME = 'Square';
+
 export const Square = memo(({ location, bounds, label, classNames }: SquareProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<HoveredState>('idle');
-  const { model } = useGameboardContext(Square.displayName!);
+  const { model } = useGameboardContext(SQUARE_NAME);
 
   useEffect(() => {
     const el = ref.current;
@@ -71,4 +73,4 @@ export const Square = memo(({ location, bounds, label, classNames }: SquareProps
   );
 });
 
-Square.displayName = 'Square';
+Square.displayName = SQUARE_NAME;