Init

src/Gridler/stories/Examples.goapi.tsx

@@ -0,0 +1,79 @@
+import { Divider, Stack, TextInput } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+
+import type { GridlerColumns } from '../components/Column';
+
+import { APIAdaptorGoLangv2 } from '../components/APIAdaptorGoLangv2';
+import { Gridler } from '../Gridler';
+
+export const GridlerGoAPIExampleEventlog = () => {
+  const [apiUrl, setApiUrl] = useLocalStorage({
+    defaultValue: 'http://localhost:8080/api',
+    key: 'apiurl',
+  });
+  const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
+
+  const columns: GridlerColumns = [
+    {
+      id: 'rid_atevent',
+      title: 'RID',
+      width: 100,
+    },
+    {
+      Cell: (_row, _col, _colindex, value) => {
+        return {
+          cursor: 'crosshair',
+          data: value,
+          displayData: `- ${value}`,
+          kind: 'text',
+        };
+      },
+      grow: 1,
+      id: 'changedate',
+      title: 'Date',
+      width: 200,
+    },
+    {
+      id: 'changetime',
+      title: 'Time',
+      width: 200,
+    },
+    {
+      id: 'changeuser',
+      title: 'User',
+    },
+
+    {
+      id: 'actionx',
+      title: 'Action',
+      width: 100,
+    },
+  ];
+
+  return (
+    <Stack h="80vh">
+      <h2>Demo Using Go API Adaptor</h2>
+      <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
+      <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
+      <Divider />
+      <Gridler
+        columns={columns}
+        getMenuItems={(id, _state, row, col, defaultItems) => {
+          return [
+            ...(defaultItems ?? []),
+            {
+              id: 'test',
+              label: `Test ${id}`,
+              onClick: () => {
+                console.log('Test clicked', row, col);
+              },
+            },
+          ];
+        }}
+        uniqueid="gridtest"
+      >
+        <APIAdaptorGoLangv2 authtoken={apiKey} url={`${apiUrl}/core/atevent`} />
+      </Gridler>
+    </Stack>
+  );
+};

src/Gridler/stories/Gridler.goapi.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '@mantine/core';
+import { fn } from 'storybook/test';
+
+import { GridlerGoAPIExampleEventlog } from './Examples.goapi';
+
+const Renderable = (props: any) => {
+  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerGoAPIExampleEventlog {...props} /></Box>;
+};
+
+const meta = {
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  component: Renderable,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  title: 'Grid/Gridler API',
+} satisfies Meta<typeof Renderable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const BasicExample: Story = {
+  args: {
+    label: 'Test',
+  },
+};

src/Gridler/stories/Gridler.localdata.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '@mantine/core';
+import { fn } from 'storybook/test';
+
+import { GridlerLocaldataExampleEventlog } from './Examples.localdata';
+
+const Renderable = (props: any) => {
+  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerLocaldataExampleEventlog {...props} /></Box>;
+};
+
+const meta = {
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  component: Renderable,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  title: 'Grid/Gridler Local',
+} satisfies Meta<typeof Renderable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const BasicExample: Story = {
+  args: {
+    label: 'Test',
+  },
+};