feat: add COORDINATE_SYSTEM_12X8, CoordinateSystem12X8

BREAKING CHANGE: rename COORDINATE_SYSTEM_96_WELL,CoordinateSystem96Well
mll-lab · Oct 2, 2024 · b0a765b · b0a765b
1 parent afb6970
commit b0a765b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 56 deletions.
diff --git a/src/ImageMap/index.stories.tsx b/src/ImageMap/index.stories.tsx
@@ -2,7 +2,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 import { Plate } from '../Plate';
-import { COORDINATE_SYSTEM_96_WELL } from '../Plate/coordinateSystem96Well';
+import { COORDINATE_SYSTEM_12X8 } from '../Plate/coordinateSystem12x8';
 import { TecanLayout } from '../index';
 
 import { HiddenArea } from './HiddenArea';
@@ -23,7 +23,7 @@ export const TecanLayoutExample: Story = function Default() {
           content: (
             <Plate
               data={[{ coordinates: { row: 'A', column: 3 }, content: 'test' }]}
-              coordinateSystem={COORDINATE_SYSTEM_96_WELL}
+              coordinateSystem={COORDINATE_SYSTEM_12X8}
             />
           ),
         },
@@ -56,7 +56,7 @@ export const Default: Story<ImageMapProps> = function Default(args) {
         content={
           <Plate
             data={[{ coordinates: { row: 'A', column: 3 }, content: 'test' }]}
-            coordinateSystem={COORDINATE_SYSTEM_96_WELL}
+            coordinateSystem={COORDINATE_SYSTEM_12X8}
           />
         }
       />

diff --git a/src/Plate/coordinateSystem96Well.ts → src/Plate/coordinateSystem12x8.ts b/src/Plate/coordinateSystem96Well.ts → src/Plate/coordinateSystem12x8.ts
@@ -1,8 +1,8 @@
 import { CoordinateSystem } from './types';
 
-export const COORDINATE_SYSTEM_96_WELL = {
+export const COORDINATE_SYSTEM_12X8 = {
   rows: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
   columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
 } as const satisfies CoordinateSystem;
 
-export type CoordinateSystem96Well = typeof COORDINATE_SYSTEM_96_WELL;
+export type CoordinateSystem12X8 = typeof COORDINATE_SYSTEM_12X8;
diff --git a/src/Plate/index.stories.tsx b/src/Plate/index.stories.tsx
@@ -5,9 +5,9 @@ import React from 'react';
 import { PALETTE } from '../theme';
 
 import {
-  COORDINATE_SYSTEM_96_WELL,
-  CoordinateSystem96Well,
-} from './coordinateSystem96Well';
+  COORDINATE_SYSTEM_12X8,
+  CoordinateSystem12X8,
+} from './coordinateSystem12x8';
 import { PlateProps, PlateWell } from './types';
 import { allCoordinateSystemPositions, coordinatesForPosition } from './utils';
 
@@ -21,33 +21,33 @@ export default {
   },
 };
 
-const data: Array<PlateWell<CoordinateSystem96Well>> = [
+const data: Array<PlateWell<CoordinateSystem12X8>> = [
   {
     coordinates: {
-      row: COORDINATE_SYSTEM_96_WELL.rows[0],
-      column: COORDINATE_SYSTEM_96_WELL.columns[6],
+      row: COORDINATE_SYSTEM_12X8.rows[0],
+      column: COORDINATE_SYSTEM_12X8.columns[6],
     },
     content: <i>It renders any ReactNode</i>,
   },
   {
     coordinates: {
-      row: COORDINATE_SYSTEM_96_WELL.rows[0],
-      column: COORDINATE_SYSTEM_96_WELL.columns[7],
+      row: COORDINATE_SYSTEM_12X8.rows[0],
+      column: COORDINATE_SYSTEM_12X8.columns[7],
     },
     content: 'Test',
     color: PALETTE.red,
   },
   {
     coordinates: {
-      row: COORDINATE_SYSTEM_96_WELL.rows[1],
-      column: COORDINATE_SYSTEM_96_WELL.columns[2],
+      row: COORDINATE_SYSTEM_12X8.rows[1],
+      column: COORDINATE_SYSTEM_12X8.columns[2],
     },
     content: 'Some text',
   },
   {
     coordinates: {
-      row: COORDINATE_SYSTEM_96_WELL.rows[2],
-      column: COORDINATE_SYSTEM_96_WELL.columns[2],
+      row: COORDINATE_SYSTEM_12X8.rows[2],
+      column: COORDINATE_SYSTEM_12X8.columns[2],
     },
     content: (
       <>
@@ -61,31 +61,27 @@ const data: Array<PlateWell<CoordinateSystem96Well>> = [
 ];
 
 const COORDINATE_SYSTEM_96_WELL_POSITIONS = allCoordinateSystemPositions(
-  COORDINATE_SYSTEM_96_WELL,
+  COORDINATE_SYSTEM_12X8,
 );
 
-const rowFlowData: Array<PlateWell<CoordinateSystem96Well>> =
+const rowFlowData: Array<PlateWell<CoordinateSystem12X8>> =
   COORDINATE_SYSTEM_96_WELL_POSITIONS.map((well) => ({
-    coordinates: coordinatesForPosition(well, 'row', COORDINATE_SYSTEM_96_WELL),
+    coordinates: coordinatesForPosition(well, 'row', COORDINATE_SYSTEM_12X8),
     content: well,
   }));
 
-const columnFlowData: Array<PlateWell<CoordinateSystem96Well>> =
+const columnFlowData: Array<PlateWell<CoordinateSystem12X8>> =
   COORDINATE_SYSTEM_96_WELL_POSITIONS.map((well) => ({
-    coordinates: coordinatesForPosition(
-      well,
-      'column',
-      COORDINATE_SYSTEM_96_WELL,
-    ),
+    coordinates: coordinatesForPosition(well, 'column', COORDINATE_SYSTEM_12X8),
     content: well,
   }));
 
-const Template: Story<Partial<PlateProps<CoordinateSystem96Well>>> =
+const Template: Story<Partial<PlateProps<CoordinateSystem12X8>>> =
   function Template(args) {
     return (
       <Plate
         data={null}
-        coordinateSystem={COORDINATE_SYSTEM_96_WELL}
+        coordinateSystem={COORDINATE_SYSTEM_12X8}
         dndContextProps={{
           onDragEnd: action('onDragEnd'), // dataLocation: `const sourceData = e.active.data.current; const targetData = e.over?.data.current;`
         }}

diff --git a/src/Plate/index.test.tsx b/src/Plate/index.test.tsx
@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { COORDINATE_SYSTEM_96_WELL } from './coordinateSystem96Well';
+import { COORDINATE_SYSTEM_12X8 } from './coordinateSystem12x8';
 
 import { Plate } from './index';
 
 describe('Plate', () => {
   it('renders without data', () => {
-    render(<Plate data={null} coordinateSystem={COORDINATE_SYSTEM_96_WELL} />);
+    render(<Plate data={null} coordinateSystem={COORDINATE_SYSTEM_12X8} />);
   });
 });
diff --git a/src/Plate/index.tsx b/src/Plate/index.tsx
@@ -16,7 +16,7 @@ import {
 } from './utils';
 
 export * from './constants';
-export * from './coordinateSystem96Well';
+export * from './coordinateSystem12x8';
 export * from './coordinateSystem2x16';
 export * from './types';
 export * from './utils';

diff --git a/src/Plate/utils.test.tsx b/src/Plate/utils.test.tsx
@@ -1,7 +1,7 @@
 import {
-  COORDINATE_SYSTEM_96_WELL,
-  CoordinateSystem96Well,
-} from './coordinateSystem96Well';
+  COORDINATE_SYSTEM_12X8,
+  CoordinateSystem12X8,
+} from './coordinateSystem12x8';
 import { Coordinates, CoordinateSystem } from './types';
 import {
   allCoordinateSystemCoordinates,
@@ -80,13 +80,13 @@ const data = [
 describe.each(data)('rowForPosition', (dataSet) => {
   it('provides the row for a position depending on the flow', () => {
     expect(
-      rowForPosition(dataSet.rowFlowPosition, 'row', COORDINATE_SYSTEM_96_WELL),
+      rowForPosition(dataSet.rowFlowPosition, 'row', COORDINATE_SYSTEM_12X8),
     ).toBe(dataSet.row);
     expect(
       rowForPosition(
         dataSet.columnFlowPosition,
         'column',
-        COORDINATE_SYSTEM_96_WELL,
+        COORDINATE_SYSTEM_12X8,
       ),
     ).toBe(dataSet.row);
   });
@@ -95,17 +95,13 @@ describe.each(data)('rowForPosition', (dataSet) => {
 describe.each(data)('columnForPosition', (dataSet) => {
   it('provides the column for a position depending on the flow', () => {
     expect(
-      columnForPosition(
-        dataSet.rowFlowPosition,
-        'row',
-        COORDINATE_SYSTEM_96_WELL,
-      ),
+      columnForPosition(dataSet.rowFlowPosition, 'row', COORDINATE_SYSTEM_12X8),
     ).toBe(dataSet.column);
     expect(
       columnForPosition(
         dataSet.columnFlowPosition,
         'column',
-        COORDINATE_SYSTEM_96_WELL,
+        COORDINATE_SYSTEM_12X8,
       ),
     ).toBe(dataSet.column);
   });
@@ -116,7 +112,7 @@ describe.each(data)('convertPositionFromColumnToRowFlow', (dataSet) => {
     expect(
       convertPositionFromColumnToRowFlow(
         dataSet.columnFlowPosition,
-        COORDINATE_SYSTEM_96_WELL,
+        COORDINATE_SYSTEM_12X8,
       ),
     ).toBe(dataSet.rowFlowPosition);
   });
@@ -127,7 +123,7 @@ describe.each(data)('convertPositionFromRowToColumnFlow', (dataSet) => {
     expect(
       convertPositionFromRowToColumnFlow(
         dataSet.rowFlowPosition,
-        COORDINATE_SYSTEM_96_WELL,
+        COORDINATE_SYSTEM_12X8,
       ),
     ).toBe(dataSet.columnFlowPosition);
   });
@@ -136,43 +132,40 @@ describe.each(data)('convertPositionFromRowToColumnFlow', (dataSet) => {
 describe('ensureCoordinatesInRange', () => {
   it('throws on invalid rows', () => {
     expect(() =>
-      ensureCoordinatesInRange(
-        { row: 'X', column: 2 },
-        COORDINATE_SYSTEM_96_WELL,
-      ),
+      ensureCoordinatesInRange({ row: 'X', column: 2 }, COORDINATE_SYSTEM_12X8),
     ).toThrow();
   });
 
   it('throws on invalid columns', () => {
     expect(() =>
       ensureCoordinatesInRange(
         { row: 'B', column: 23 },
-        COORDINATE_SYSTEM_96_WELL,
+        COORDINATE_SYSTEM_12X8,
       ),
     ).toThrow();
   });
 
   it('works with valid coordinates', () => {
-    const coordinates: Coordinates<CoordinateSystem96Well> = {
+    const coordinates: Coordinates<CoordinateSystem12X8> = {
       row: 'A',
       column: 3,
     };
-    expect(
-      ensureCoordinatesInRange(coordinates, COORDINATE_SYSTEM_96_WELL),
-    ).toBe(coordinates);
+    expect(ensureCoordinatesInRange(coordinates, COORDINATE_SYSTEM_12X8)).toBe(
+      coordinates,
+    );
   });
 });
 
 describe('areEqualCoordinates', () => {
   it('match', () => {
-    const a: Coordinates<CoordinateSystem96Well> = { row: 'A', column: 2 };
+    const a: Coordinates<CoordinateSystem12X8> = { row: 'A', column: 2 };
     expect(areEqualCoordinates(a, a)).toBe(true);
     expect(areEqualCoordinates(a, { ...a, foo: 'bar' })).toBe(true);
   });
 
   it('no match', () => {
-    const a: Coordinates<CoordinateSystem96Well> = { row: 'A', column: 2 };
-    const b: Coordinates<CoordinateSystem96Well> = { row: 'B', column: 3 };
+    const a: Coordinates<CoordinateSystem12X8> = { row: 'A', column: 2 };
+    const b: Coordinates<CoordinateSystem12X8> = { row: 'B', column: 3 };
     expect(areEqualCoordinates(a, b)).toBe(false);
     expect(areEqualCoordinates(a, { ...b, foo: 'bar' })).toBe(false);
   });