Merge pull request #267 from outerbase/develop

deployment 2025-01-26

Author: invisal

.vscode/settings.json

@@ -1,5 +1,9 @@
 {
-    "editor.formatOnSave": true,
-    "typescript.tsdk": "node_modules\\typescript\\lib",
-    "files.eol": "\n"
-}
+  "editor.formatOnSave": true,
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "files.eol": "\n",
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  }
+}

docs/README.md

@@ -0,0 +1,28 @@
+This is working in progress about how to extend our studio functionality
+
+## Extensions
+
+We have transitioned our architecture to an extension-based approach, where most features will be implemented as extensions. This shift allows new contributors to easily contribute to the codebase without requiring in-depth knowledge of the entire system.
+
+This is the minimalist example of extension
+
+```typescript
+export default class SampleExtension extends StudioExtension {
+  extensionName = "sample-extension";
+
+  init(studio: StudioExtensionContext): void {
+    // this is where we extend studio functionality
+  }
+}
+```
+
+- All of the extension is located at `/src/extensions`.
+- Once you finish implement your extension, you can attach it to studio at `/src/core/standard-extension.tsx`
+
+Below is a list of areas where extensions can build upon our core Outerbase Studio.
+
+- [Sidebar](sidebar.md)
+- [Window Tab](window-tab.md)
+- Resource Creation Menu
+- Resource Context Menu
+- Query Hook

docs/sidebar.md

@@ -0,0 +1,41 @@
+## Extending Sidebar
+
+To create extension that add new sidebar with content.
+
+```tsx
+function SampleSidebar() {
+  return <div>Sidebar Content</div>;
+}
+
+export default class SampleExtension extends StudioExtension {
+  extensionName = "sample-extension";
+
+  init(studio: StudioExtensionContext): void {
+    studio.registerSidebar({
+      key: "sample-extension-sidebar",
+      name: "Sample",
+      icon: <LucideArrow />,
+      content: <SampleSidebar />,
+    });
+  }
+}
+```
+
+You can also create sidebar without content. You need just need to provide `onClick` instead of `content`
+
+```tsx
+export default class SampleExtension extends StudioExtension {
+  extensionName = "sample-extension";
+
+  init(studio: StudioExtensionContext): void {
+    studio.registerSidebar({
+      key: "sample-extension-sidebar",
+      name: "Sample",
+      icon: <LucideArrow />,
+      onClick: () => {
+        // do something
+      },
+    });
+  }
+}
+```

docs/window-tab.md

@@ -0,0 +1,72 @@
+# Extending Window Tab
+
+To create window tab, you need to use `createTabExtension`
+
+- `key`: This is used to define the uniqueness of the tab. If no other tab has the same key, a new tab will be opened. Otherwise, it will attempt to reopen the previously opened tab with the same key. **Note: The key generated by the `key()` function will have the name appended to to avoid conflicts with other extensions.**
+- `generate`: This is used to define the component of the tab.
+
+```typescript
+function SampleTabContent() {
+  return <div>This is tab</div>;
+}
+
+export const sampleExtensionTab = createTabExtension({
+  name: "sample-extension",
+  key: () => "sample-extension-type",
+  generate: () => ({
+    title: "Sample Extension",
+    component: <SampleTabContent />,
+    icon: LucideCog,
+  }),
+});
+```
+
+Now you can open this tab from any other code simply by
+
+```typescript
+sampleExtensionTab.open();
+```
+
+## Passing Parameters
+
+You can pass additional parameters to tab as the following
+
+```typescript
+function SampleTabContent(
+    { schema, table }:
+    { schema: string, table: string }
+) {
+  return <div>This is tab for {table} of {schema}</div>;
+}
+
+export const sampleExtensionTab = createTabExtension<{
+    schema: string,
+    table: string,
+}>({
+  name: "sample-extension",
+  key: ({ schema, table }) => `${schema}-${table}`,
+  generate: ({ schema, table }) => ({
+    title: "Sample Extension",
+    component: <SampleTabContent schema={schema} table={table} />,
+    icon: LucideCog,
+  }),
+});
+```
+
+To open the tab
+
+```typescript
+sampleExtensionTab.open({
+  schema: "public",
+  table: "users",
+});
+```
+
+You can also close the tab
+
+```typescript
+sampleExtensionTab.close({
+  schema: "public",
+  table: "users",
+});
+```

next.config.js

@@ -9,6 +9,14 @@ const nextConfig = {
   env: {
     NEXT_PUBLIC_STUDIO_VERSION: pkg.version,
   },
+  async rewrites() {
+    return [
+      {
+        source: "/api/v1/:path*",
+        destination: `${process.env.NEXT_PUBLIC_OB_API ?? "https://app.dev.outerbase.com/api/v1"}/:path*`,
+      },
+    ];
+  },
 };
 
 module.exports = withMDX(nextConfig);