Added keyword support, more styling options

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: dashKbar
 Title: cmd + k interface for dash applications
-Version: 0.2.0
+Version: 0.3.0
 Description: cmd + k interface for dash applications
 Depends: R (>= 3.0.2)
 Imports: 

Project.toml

@@ -2,7 +2,7 @@
 name = "DashKbar"
 uuid = "1b08a953-4be3-4667-9a23-770bbfc0845d"
 authors = ["Najeem Muhammed <[email protected]>"]
-version = "0.2.0"
+version = "0.3.0"
 
 [deps]
 Dash = "1b08a953-4be3-4667-9a23-3db579824955"

R/internal.R

@@ -1,12 +1,12 @@
 .dashKbar_js_metadata <- function() {
 deps_metadata <- list(`dash_kbar` = structure(list(name = "dash_kbar",
-version = "0.2.0", src = list(href = NULL,
+version = "0.3.0", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_kbar.min.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashKbar",
 all_files = FALSE), class = "html_dependency"),
 `dash_kbar` = structure(list(name = "dash_kbar",
-version = "0.2.0", src = list(href = NULL,
+version = "0.3.0", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_kbar.min.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashKbar",

README.md

@@ -49,6 +49,7 @@ Actions should be a list of dictionaries with the following keys.
 | `name` | Name of the action | `str` | Yes |
 | `id` | ID of the action | `str` | Yes |
 | `subtitle` | Subtitle of the action | `str` | No |
+| `keywords` | Keywords of the action | `list[str]` | No |
 | `section` | Section of the action | `str` | No |
 | `icon` | Icon of the action | `str` | No |
 | `parent` | If this is a child item, give the id of the parent | `str` | No |
@@ -74,4 +75,9 @@ Style should be a dictionary with one or more of the following keys.
 | `selectedBackground` | Background color of the selected item | `rgba(34, 139, 230, 0.1)` |
 | `selectedTextColor` | Text color of the selected item | `grey` |
 | `selectedLeftBorderColor` | Left border color of the selected item | `rgba(34, 139, 230, 1)` |
-
+| `boxShadow` | Box shadow of the kbar | `0 0 20px rgba(0, 0, 0, 0.1)` |
+| `borderRadius` | Border radius of the kbar | `8px` |
+| `searchBoxFontSize` | Font size of the search input box | `16px` |
+| `resultFontSize` | Font size of the items | `14px` |
+| `subtitleFontSize` | Font size of the item subtitles | `12px` |
+| `sectionTitleFontSize` | Font size of the section titles | `10px` |

dash_kbar/DashKbar.py

@@ -26,7 +26,7 @@ class DashKbar(Component):
 
     - id (string; required)
 
-    - keywords (string; optional)
+    - keywords (list of strings; optional)
 
     - name (string; required)
 

dash_kbar/metadata.json

@@ -87,7 +87,10 @@
                 "required": false
               },
               "keywords": {
-                "name": "string",
+                "name": "arrayOf",
+                "value": {
+                  "name": "string"
+                },
                 "required": false
               },
               "section": {

dash_kbar/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "dash_kbar",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "cmd + k interface for dash applications",
   "main": "build/index.js",
   "scripts": {

man/''DashKbar.Rd

@@ -24,7 +24,7 @@ those elements have the following types:
   - id (character; required)
   - name (character; required)
   - shortcut (character | list of characters; optional)
-  - keywords (character; optional)
+  - keywords (list of characters; optional)
   - section (character; optional)
   - icon (character; optional)
   - subtitle (character; optional)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash_kbar",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "cmd + k interface for dash applications",
   "main": "build/index.js",
   "scripts": {

src/DashKbar.jl

@@ -3,7 +3,7 @@ module DashKbar
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.2.0"
+const version = "0.3.0"
 
 include("jl/''_dashkbar.jl")
 

src/jl/''_dashkbar.jl

@@ -18,7 +18,7 @@ Those elements have the following types:
   - `id` (String; required)
   - `name` (String; required)
   - `shortcut` (String | Array of Strings; optional)
-  - `keywords` (String; optional)
+  - `keywords` (Array of Strings; optional)
   - `section` (String; optional)
   - `icon` (String; optional)
   - `subtitle` (String; optional)

src/lib/components/DashKbar.react.js

@@ -11,6 +11,7 @@ import {
     useRegisterActions,
 } from 'kbar';
 import PropTypes from 'prop-types';
+import {prop} from 'ramda';
 
 const DashKbar = (props) => {
     const {id, setProps, actions, children, debug, style} = props;
@@ -29,6 +30,12 @@ const DashKbar = (props) => {
         selectedBackground: 'rgba(34, 139, 230, 0.1)',
         selectedTextColor: 'grey',
         selectedLeftBorderColor: 'rgba(34, 139, 230, 1)',
+        boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
+        borderRadius: '8px',
+        searchBoxFontSize: '16px',
+        resultFontSize: '14px',
+        subtitleFontSize: '12px',
+        sectionTitleFontSize: '10px',
     };
 
     useEffect(() => {
@@ -48,9 +55,9 @@ const DashKbar = (props) => {
                         style={{
                             maxWidth: mergedStyle.maxWidth,
                             width: mergedStyle.width,
-                            borderRadius: '8px',
+                            borderRadius: mergedStyle.borderRadius,
                             overflow: 'hidden',
-                            boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
+                            boxShadow: mergedStyle.boxShadow,
                             background: mergedStyle.background,
                             color: 'grey',
                             fontFamily: mergedStyle.fontFamily,
@@ -59,7 +66,7 @@ const DashKbar = (props) => {
                         <KBarSearch
                             style={{
                                 padding: '12px 16px',
-                                fontSize: '16px',
+                                fontSize: mergedStyle.searchBoxFontSize,
                                 width: '100%',
                                 boxSizing: 'border-box',
                                 outline: 'none',
@@ -104,7 +111,7 @@ function RenderResults(props) {
                     <div
                         style={{
                             padding: '8px 16px',
-                            fontSize: '10px',
+                            fontSize: props.mergedStyle.sectionTitleFontSize,
                             textTransform: 'uppercase',
                             color: props.mergedStyle.sectionTitleTextColor,
                         }}
@@ -173,7 +180,7 @@ const ResultItem = React.forwardRef(
                         display: 'flex',
                         gap: '8px',
                         alignItems: 'center',
-                        fontSize: 14,
+                        fontSize: props.mergedStyle.resultFontSize,
                     }}
                 >
                     {action.icon && action.icon}
@@ -204,7 +211,8 @@ const ResultItem = React.forwardRef(
                         {action.subtitle && (
                             <span
                                 style={{
-                                    fontSize: 12,
+                                    fontSize:
+                                        props.mergedStyle.subtitleFontSize,
                                     color: props.mergedStyle
                                         .itemSubtitleTextColor,
                                 }}
@@ -289,7 +297,7 @@ DashKbar.propTypes = {
                 PropTypes.string,
                 PropTypes.arrayOf(PropTypes.string),
             ]),
-            keywords: PropTypes.string,
+            keywords: PropTypes.arrayOf(PropTypes.string),
             section: PropTypes.string,
             icon: PropTypes.string,
             subtitle: PropTypes.string,

usage.py

@@ -18,7 +18,7 @@
                 {"name": "Light", "id": "theme_light", "parent": "theme_parent", "icon": "☀️", "shortcut": ["t", "l"]},
                 {"name": "Action 1", "id": "action1", "section": "Section 1", "shortcut": ["a", "1"]},
                 {"name": "Action 2", "id": "action2", "section": "Section 1", "shortcut": ["a", "2"]},
-                {"name": "Action 3", "id": "action3", "section": "Section 1", "shortcut": ["a", "3"]},
+                {"name": "Action 3", "id": "action3", "section": "Section 1", "shortcut": ["a", "3"], "keywords": ["action", "three"]},
                 {
                     "name": "Action 4",
                     "id": "action4",
@@ -30,6 +30,7 @@
             debug=True,
             style={
                 "itemSubtitleTextColor": "steelblue",
+                "sectionTitleTextColor": "darkred",
                 # This will be replaced if style is updated by callback
                 # So use State("input", "style") as an input to the callback
                 # and update the dict
@@ -55,15 +56,17 @@ def update_actions(n_clicks, actions):
 
 
 @callback(
-    Output("output", "children"), Output("input", "style"), Input("input", "selected")
+    Output("output", "children"), Output("input", "style"), Input("input", "selected"), State("input", "style")
 )
-def update_output(selected):
+def update_output(selected, style):
     if selected is None:
         return "No action selected", no_update
     if selected == "theme_dark":
-        return no_update, {"background": "#121212"}
+        style["background"] = "#121212"
+        return no_update, style
     elif selected == "theme_light":
-        return no_update, {"background": "#ffffff"}
+        style["background"] = "#ffffff"
+        return no_update, style
     return f"Action {selected} selected", no_update