fix: plate component can not be displayed in storybook

src/Plate/index.stories.tsx

@@ -3,7 +3,13 @@ import React from 'react';
 
 import { PALETTE } from '../theme';
 
-import { Plate, PlateProps } from './index';
+import {
+  COORDINATES_COLUMNS,
+  COORDINATES_ROWS,
+  Plate,
+  PlateProps,
+  PlateWell,
+} from './index';
 
 export default {
   title: 'Plate',
@@ -12,23 +18,34 @@ export default {
   },
 };
 
-export const Default: Story<Partial<PlateProps>> = (args) => (
-  <Plate
-    data={[
-      {
-        coordinates: { row: 'A', column: 7 },
-        content: <i>It renders any ReactNode</i>,
-      },
-      {
-        coordinates: { row: 'A', column: 8 },
-        content: 'Test',
-        color: PALETTE.red,
-      },
-      {
-        coordinates: { row: 'B', column: 3 },
-        content: 'Some text',
-      },
-    ]}
-    {...args}
-  />
+const data: Array<PlateWell> = [
+  {
+    coordinates: { row: COORDINATES_ROWS[0], column: COORDINATES_COLUMNS[6] },
+    content: <i>It renders any ReactNode</i>,
+  },
+  {
+    coordinates: { row: COORDINATES_ROWS[0], column: COORDINATES_COLUMNS[7] },
+    content: 'Test',
+    color: PALETTE.red,
+  },
+  {
+    coordinates: { row: COORDINATES_ROWS[1], column: COORDINATES_COLUMNS[2] },
+    content: 'Some text',
+  },
+];
+
+const Template: Story<Partial<PlateProps>> = (args) => (
+  <Plate data={null} {...args} />
 );
+export const Default = Template.bind({});
+Default.args = {
+  data,
+};
+/* TODO: delete after https://github.com/storybookjs/storybook/issues/11554 is resolved */
+Default.parameters = {
+  docs: {
+    source: {
+      code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+    },
+  },
+};