feat: expose function components

gorules · Feb 7, 2025 · bff0cec · bff0cec
1 parent 6d21b2f
commit bff0cec
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 47 deletions.
diff --git a/packages/jdm-editor/src/components/decision-graph/dg-panel.tsx b/packages/jdm-editor/src/components/decision-graph/dg-panel.tsx
@@ -28,6 +28,7 @@ export const GraphPanel: React.FC = () => {
     <Resizable
       className={'grl-dg__panel'}
       defaultSize={{ height: defaultHeight }}
+      handleClasses={{ top: 'grl-dg__resizeHandle grl-dg__resizeHandle__vertical' }}
       handleStyles={{
         bottom: { display: 'none' },
         left: { display: 'none' },

diff --git a/packages/jdm-editor/src/components/function/function-debugger.tsx b/packages/jdm-editor/src/components/function/function-debugger.tsx
@@ -1,12 +1,12 @@
-import { ExportOutlined, FormatPainterOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Tabs, Tooltip, Typography } from 'antd';
+import { FormatPainterOutlined } from '@ant-design/icons';
+import { Button, Tabs, Tooltip } from 'antd';
 import type { editor } from 'monaco-editor';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { match } from 'ts-pattern';
 
-import typeScriptIcon from '../../assets/typescript.svg?inline';
 import type { SimulationTrace, SimulationTraceDataFunction } from '../decision-graph/simulator/simulation.types';
 import { FunctionDebuggerLog } from './function-debugger-log';
+import { FunctionLibraryItem } from './function-library-item';
 import { type FunctionLibrary } from './helpers/libs';
 
 enum TabKey {
@@ -91,42 +91,3 @@ export const FunctionDebugger: React.FC<FunctionDebuggerProps> = ({ trace, edito
     </div>
   );
 };
-
-const FunctionLibraryItem: React.FC<{ lib: FunctionLibrary; onImport?: () => void; editorValue?: string }> = ({
-  lib,
-  onImport,
-  editorValue,
-}) => {
-  const canImport = useMemo(() => {
-    if (!editorValue) {
-      return true;
-    }
-
-    return !editorValue.includes(`from "${lib.name}"`) && !editorValue.includes(`from '${lib.name}'`);
-  }, [lib.name, editorValue]);
-
-  return (
-    <div key={lib.name} className='grl-function__libraries__item'>
-      <img alt='TypeScript Library' src={typeScriptIcon} height={18} />
-      <Typography.Text strong>{lib.name}</Typography.Text>
-      <Typography.Text type='secondary' style={{ fontSize: 12, marginTop: 1.5 }}>
-        {lib.tagline}
-      </Typography.Text>
-      <div className='grl-function__libraries__item__actions'>
-        <Tooltip title='Import library' placement='bottomLeft'>
-          <Button type='text' size='small' icon={<PlusOutlined />} disabled={!canImport} onClick={onImport} />
-        </Tooltip>
-        <Tooltip title='Go to documentation' placement='bottomLeft'>
-          <Button
-            type='text'
-            size='small'
-            icon={<ExportOutlined />}
-            href={lib.documentationUrl}
-            target='_blank'
-            disabled={!lib.documentationUrl}
-          />
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/jdm-editor/src/components/function/function-library-item.tsx b/packages/jdm-editor/src/components/function/function-library-item.tsx
@@ -0,0 +1,47 @@
+import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Tooltip, Typography } from 'antd';
+import React, { useMemo } from 'react';
+
+import typeScriptIcon from '../../assets/typescript.svg?inline';
+import type { FunctionLibrary } from './helpers/libs';
+
+type FunctionLibraryItemProps = {
+  lib: FunctionLibrary;
+  onImport?: () => void;
+  editorValue?: string;
+};
+
+export const FunctionLibraryItem: React.FC<FunctionLibraryItemProps> = ({ lib, onImport, editorValue }) => {
+  const canImport = useMemo(() => {
+    if (!editorValue) {
+      return true;
+    }
+
+    return !editorValue.includes(`from "${lib.name}"`) && !editorValue.includes(`from '${lib.name}'`);
+  }, [lib.name, editorValue]);
+
+  return (
+    <div key={lib.name} className='grl-function__libraries__item'>
+      <img alt='TypeScript Library' src={typeScriptIcon} height={18} />
+      <Typography.Text strong>{lib.name}</Typography.Text>
+      <Typography.Text type='secondary' style={{ fontSize: 12, marginTop: 1.5 }}>
+        {lib.tagline}
+      </Typography.Text>
+      <div className='grl-function__libraries__item__actions'>
+        <Tooltip title='Import library' placement='bottomLeft'>
+          <Button type='text' size='small' icon={<PlusOutlined />} disabled={!canImport} onClick={onImport} />
+        </Tooltip>
+        <Tooltip title='Go to documentation' placement='bottomLeft'>
+          <Button
+            type='text'
+            size='small'
+            icon={<ExportOutlined />}
+            href={lib.documentationUrl}
+            target='_blank'
+            disabled={!lib.documentationUrl}
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/jdm-editor/src/components/function/function.tsx b/packages/jdm-editor/src/components/function/function.tsx
@@ -289,6 +289,7 @@ export const Function: React.FC<FunctionProps> = ({
 const monacoOptions: editor.IStandaloneEditorConstructionOptions = {
   automaticLayout: true,
   contextmenu: false,
+  fixedOverflowWidgets: true,
   fontSize: 13,
   fontFamily: 'var(--mono-font-family)',
   tabSize: 2,

diff --git a/packages/jdm-editor/src/components/function/helpers/libs.ts b/packages/jdm-editor/src/components/function/helpers/libs.ts
@@ -28,8 +28,8 @@ export const functionLibraries: FunctionLibrary[] = [
     name: 'big.js',
     tagline: 'Arbitrary-precision decimal arithmetic',
     importName: 'Big',
-    typeDef: bigJs,
     documentationUrl: 'https://mikemcl.github.io/big.js/',
+    typeDef: bigJs,
   },
   {
     name: 'dayjs',
@@ -52,7 +52,7 @@ export const functionLibraries: FunctionLibrary[] = [
   {
     name: 'zod',
     tagline: 'Schema validation',
-    importName: 'z',
+    importName: '{ z }',
     typeDef: zod,
     documentationUrl: 'https://zod.dev/',
   },

diff --git a/packages/jdm-editor/src/components/function/index.ts b/packages/jdm-editor/src/components/function/index.ts
@@ -1 +1,3 @@
 export * from './function';
+export { FunctionDebuggerLog } from './function-debugger-log';
+export { FunctionLibraryItem } from './function-library-item';
diff --git a/packages/jdm-editor/src/styles.scss b/packages/jdm-editor/src/styles.scss
@@ -160,3 +160,63 @@
     margin: 0 !important;
   }
 }
+
+[data-resize-handle] {
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    transition: .1s ease;
+    z-index: 999;
+  }
+
+  &[data-panel-group-direction="horizontal"]::after {
+    height: 100%;
+    width: 2px;
+    transform: translateX(-1px);
+  }
+
+  &[data-panel-group-direction="vertical"]::after {
+    height: 2px;
+    width: 100%;
+    transform: translateY(-1px);
+  }
+
+  &[data-resize-handle-state="hover"], &[data-resize-handle-state="drag"] {
+    &::after {
+      background: var(--grl-color-primary-hover);
+    }
+  }
+}
+
+.grl-dg__resizeHandle {
+  &__vertical {
+    &::after {
+      height: 2px;
+      width: 100%;
+      transform: translateY(-1px);
+      top: 50%;
+    }
+  }
+
+  &__horizontal {
+    &::after {
+      height: 100%;
+      width: 2px;
+      transform: translateX(-1px);
+      left: 50%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    transition: .1s ease;
+    z-index: 999;
+  }
+
+  &:hover::after {
+    background: var(--grl-color-primary-hover);
+  }
+}
diff --git a/packages/jdm-editor/tsconfig.json b/packages/jdm-editor/tsconfig.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "rootDir": "src",
     "baseUrl": "..",
-    "allowJs": true
+    "allowJs": true,
+    "types": ["vite/client"]
   },
   "include": ["src", ".storybook"]
 }
diff --git a/packages/jdm-editor/vite.config.ts b/packages/jdm-editor/vite.config.ts
@@ -30,7 +30,12 @@ export default defineConfig({
       formats: ['es'],
     },
     rollupOptions: {
-      external: ['react/jsx-runtime', 'react', 'react-dom', ...Object.keys(packageJson.dependencies)],
+      external: [
+        'react/jsx-runtime',
+        'react',
+        'react-dom',
+        ...Object.keys(packageJson.dependencies).filter((s) => s !== 'antd`'),
+      ],
       output: {
         globals: {
           'react-dom': 'ReactDOM',