From 595a4a9c7cb7ee535c103669b788297bdbf004c3 Mon Sep 17 00:00:00 2001 From: Aditya Agarwal Date: Sun, 3 Apr 2022 23:58:00 +0530 Subject: [PATCH] add basic integration in install docs --- .../snippets/installation-define-actions.html | 25 +++++++++++++++++++ .../installation-integrate-components.html | 23 +++++++++++++++++ public/snippets/installation-packages.html | 6 +++++ .../installation-define-actions.snippet.tsx | 24 ++++++++++++++++++ ...tallation-integrate-components.snippet.tsx | 22 ++++++++++++++++ ...et.sh => installation-packages.snippet.sh} | 0 .../docs/introduction/Installation.view.tsx | 20 ++++++++++++--- .../views/docs/introduction/Overview.view.tsx | 22 ++++++++++++++-- 8 files changed, 136 insertions(+), 6 deletions(-) create mode 100644 public/snippets/installation-define-actions.html create mode 100644 public/snippets/installation-integrate-components.html create mode 100644 public/snippets/installation-packages.html create mode 100644 snippets/installation-define-actions.snippet.tsx create mode 100644 snippets/installation-integrate-components.snippet.tsx rename snippets/{installation-setup.snippet.sh => installation-packages.snippet.sh} (100%) diff --git a/public/snippets/installation-define-actions.html b/public/snippets/installation-define-actions.html new file mode 100644 index 0000000..37f1f6e --- /dev/null +++ b/public/snippets/installation-define-actions.html @@ -0,0 +1,25 @@ +
import { defineAction } from 'solid-command-palette';
+
+const minimalAction = defineAction({
+  id: 'minimal',
+  title: 'Minimal Action',
+  run: () => {
+    console.log('ran minimal action');
+  },
+});
+
+const incrementCounterAction = defineAction({
+  id: 'increment-counter',
+  title: 'Increment Counter by 1',
+  subtitle: 'Press CMD + E to trigger this.',
+  shortcut: '$mod+e', // $mod = Command on Mac & Control on Windows.
+  run: ({ rootContext }) => {
+    rootContext.increment();
+  },
+});
+
+export const actions = {
+  [minimalAction.id]: minimalAction,
+  [incrementCounterAction.id]: incrementCounterAction,
+};
+
\ No newline at end of file diff --git a/public/snippets/installation-integrate-components.html b/public/snippets/installation-integrate-components.html new file mode 100644 index 0000000..9ed75b0 --- /dev/null +++ b/public/snippets/installation-integrate-components.html @@ -0,0 +1,23 @@ +
import { Root, CommandPalette } from 'solid-command-palette';
+import { actions } from './actions';
+import 'solid-command-palette/pkg-dist/style.css';
+
+const App = () => {
+  const actionsContext = {
+    increment() {
+      console.log('increment count state by 1');
+    },
+  };
+
+  return (
+    <div class="my-app">
+      <Root
+        actions={actions}
+        actionsContext={actionsContext}
+      >
+        <CommandPalette />
+      </Root>
+    </div>
+  );
+};
+
\ No newline at end of file diff --git a/public/snippets/installation-packages.html b/public/snippets/installation-packages.html new file mode 100644 index 0000000..15b6331 --- /dev/null +++ b/public/snippets/installation-packages.html @@ -0,0 +1,6 @@ +
# Core Library
+npm install solid-command-palette
+
+# Peer Dependencies
+npm install solid-transition-group tinykeys fuse.js
+
\ No newline at end of file diff --git a/snippets/installation-define-actions.snippet.tsx b/snippets/installation-define-actions.snippet.tsx new file mode 100644 index 0000000..998aea9 --- /dev/null +++ b/snippets/installation-define-actions.snippet.tsx @@ -0,0 +1,24 @@ +import { defineAction } from 'solid-command-palette'; + +const minimalAction = defineAction({ + id: 'minimal', + title: 'Minimal Action', + run: () => { + console.log('ran minimal action'); + }, +}); + +const incrementCounterAction = defineAction({ + id: 'increment-counter', + title: 'Increment Counter by 1', + subtitle: 'Press CMD + E to trigger this.', + shortcut: '$mod+e', // $mod = Command on Mac & Control on Windows. + run: ({ rootContext }) => { + rootContext.increment(); + }, +}); + +export const actions = { + [minimalAction.id]: minimalAction, + [incrementCounterAction.id]: incrementCounterAction, +}; diff --git a/snippets/installation-integrate-components.snippet.tsx b/snippets/installation-integrate-components.snippet.tsx new file mode 100644 index 0000000..8baf57a --- /dev/null +++ b/snippets/installation-integrate-components.snippet.tsx @@ -0,0 +1,22 @@ +import { Root, CommandPalette } from 'solid-command-palette'; +import { actions } from './actions'; +import 'solid-command-palette/pkg-dist/style.css'; + +const App = () => { + const actionsContext = { + increment() { + console.log('increment count state by 1'); + }, + }; + + return ( +
+ + + +
+ ); +}; diff --git a/snippets/installation-setup.snippet.sh b/snippets/installation-packages.snippet.sh similarity index 100% rename from snippets/installation-setup.snippet.sh rename to snippets/installation-packages.snippet.sh diff --git a/src/app/views/docs/introduction/Installation.view.tsx b/src/app/views/docs/introduction/Installation.view.tsx index af4c71e..cfffb4e 100644 --- a/src/app/views/docs/introduction/Installation.view.tsx +++ b/src/app/views/docs/introduction/Installation.view.tsx @@ -4,10 +4,22 @@ import docsStyles from '../docsUtils.module.css'; const InstallationView: Component = () => { return ( -
-

Installation

- -
+
+
+

Install Packages

+ +
+
+
+

Define Actions

+ +
+
+
+

Integrate with Components

+ +
+
); }; diff --git a/src/app/views/docs/introduction/Overview.view.tsx b/src/app/views/docs/introduction/Overview.view.tsx index dca7c8c..688de67 100644 --- a/src/app/views/docs/introduction/Overview.view.tsx +++ b/src/app/views/docs/introduction/Overview.view.tsx @@ -1,15 +1,21 @@ import { Component, onMount } from 'solid-js'; import sdk from '@stackblitz/sdk'; +import utilStyles from '../../../utils.module.css'; import docsStyles from '../docsUtils.module.css'; +const embedExampleData = { + projectId: 'solid-command-palette-example-lite', + initialFile: 'src/App.tsx', +}; + const OverviewView: Component = () => { let exampleElem: HTMLDivElement; onMount(() => { - sdk.embedProjectId(exampleElem, 'solid-command-palette-example-lite', { + sdk.embedProjectId(exampleElem, embedExampleData.projectId, { view: 'editor', forceEmbedLayout: true, - openFile: 'src/App.tsx', + openFile: embedExampleData.initialFile, clickToLoad: true, height: 600, }); @@ -23,6 +29,18 @@ const OverviewView: Component = () => { mouse around. Users can fuzzy search to find the action. If the action has a keyboard shortcut then they can trigger it from anywhere. This increases their productivity by 10x.

+ +

Live Example

+
+ + Open in Stackblitz + +