fork refine

packages/kbar/src/components/commandBar/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { KBarPortal, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
+
+import { RenderResults } from "@components";
+
+export const CommandBar: React.FC = () => {
+    const searchStyle = {
+        padding: "12px 16px",
+        fontSize: "16px",
+        width: "100%",
+        boxSizing: "border-box" as React.CSSProperties["boxSizing"],
+        outline: "none",
+        border: "none",
+        background: "rgb(252 252 252)",
+        color: "black",
+    };
+
+    const animatorStyle = {
+        maxWidth: "600px",
+        width: "100%",
+        background: "white",
+        color: "black",
+        borderRadius: "8px",
+        overflow: "hidden",
+        boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+    };
+
+    const positionerStyle = {
+        opacity: 1,
+        transition: "background 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s",
+        backdropFilter: "saturate(180%) blur(1px)",
+        background: "rgba(0, 0, 0, 0.1)",
+        zIndex: "9999",
+    };
+
+    return (
+        <KBarPortal>
+            <KBarPositioner style={positionerStyle}>
+                <KBarAnimator style={animatorStyle}>
+                    <KBarSearch style={searchStyle} />
+                    <RenderResults />
+                </KBarAnimator>
+            </KBarPositioner>
+        </KBarPortal>
+    );
+};

packages/kbar/src/components/index.ts

@@ -0,0 +1,4 @@
+export { CommandBar } from "./commandBar";
+export { RenderResults } from "./renderResults";
+export { ResultItem } from "./resultItem";
+export { RefineKbar } from "./refineKbar";

packages/kbar/src/components/refineKbar/index.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from "react";
+
+import { RefineKbarPropsContext } from "./../../index";
+import { useRefineKbar } from "@hooks";
+import { CommandBar } from "@components";
+
+export const RefineKbar: React.FC<{
+    commandBarProps?: React.ComponentProps<typeof CommandBar>;
+}> = ({ commandBarProps }) => {
+    const context = useContext(RefineKbarPropsContext);
+    useRefineKbar();
+    const props = { ...context, ...commandBarProps };
+
+    return <CommandBar {...props} />;
+};

packages/kbar/src/components/renderResults/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { ActionId, KBarResults, useMatches } from "kbar";
+
+import { ResultItem } from "@components";
+
+const groupNameStyle = {
+    padding: "8px 16px",
+    fontSize: "14px",
+    textTransform: "uppercase" as const,
+    fontWeight: "bold",
+    opacity: 0.5,
+};
+export const RenderResults: React.FC = () => {
+    const { results, rootActionId } = useMatches();
+
+    return (
+        <KBarResults
+            items={results}
+            onRender={({ item, active }) => {
+                return typeof item === "string" ? (
+                    <div style={groupNameStyle}>{item}</div>
+                ) : (
+                    <ResultItem
+                        action={item}
+                        active={active}
+                        currentRootActionId={rootActionId as ActionId}
+                    />
+                );
+            }}
+        />
+    );
+};

packages/kbar/src/components/resultItem/index.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { ActionImpl, ActionId } from "kbar";
+
+interface IResultITemProps {
+    action: ActionImpl;
+    active: boolean;
+    currentRootActionId: ActionId;
+}
+export const ResultItem = React.forwardRef<HTMLDivElement, IResultITemProps>(
+    ({ action, active, currentRootActionId }, ref) => {
+        const ancestors = React.useMemo(() => {
+            if (!currentRootActionId) return action.ancestors;
+            const index = action.ancestors.findIndex(
+                (ancestor) => ancestor.id === currentRootActionId,
+            );
+            return action.ancestors.slice(index + 1);
+        }, [action.ancestors, currentRootActionId]);
+
+        return (
+            <div
+                ref={ref}
+                style={{
+                    padding: "12px 16px",
+                    background: active ? "rgba(0 0 0 / 0.05)" : "transparent",
+                    borderLeft: `2px solid ${
+                        active ? "rgb(28 28 29)" : "transparent"
+                    }`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    cursor: "pointer",
+                }}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        gap: "8px",
+                        alignItems: "center",
+                        fontSize: 14,
+                    }}
+                >
+                    {action.icon && action.icon}
+                    <div style={{ display: "flex", flexDirection: "column" }}>
+                        <div>
+                            {ancestors.length > 0 &&
+                                ancestors.map((ancestor) => (
+                                    <React.Fragment key={ancestor.id}>
+                                        <span
+                                            style={{
+                                                opacity: 0.5,
+                                                marginRight: 8,
+                                            }}
+                                        >
+                                            {ancestor.name}
+                                        </span>
+                                        <span
+                                            style={{
+                                                marginRight: 8,
+                                            }}
+                                        >
+                                            &rsaquo;
+                                        </span>
+                                    </React.Fragment>
+                                ))}
+                            <span
+                                style={{
+                                    color:
+                                        action.name.toLocaleUpperCase() ===
+                                        "DELETE"
+                                            ? "red"
+                                            : "black",
+                                }}
+                            >
+                                {action.name}
+                            </span>
+                        </div>
+                        {action.subtitle && (
+                            <span style={{ fontSize: 12 }}>
+                                {action.subtitle}
+                            </span>
+                        )}
+                    </div>
+                </div>
+                {action.shortcut?.length ? (
+                    <div
+                        aria-hidden
+                        style={{
+                            display: "grid",
+                            gridAutoFlow: "column",
+                            gap: "4px",
+                        }}
+                    >
+                        {action.shortcut.map((sc) => (
+                            <kbd
+                                key={sc}
+                                style={{
+                                    padding: "4px 6px",
+                                    background: "rgba(0 0 0 / .1)",
+                                    borderRadius: "4px",
+                                    fontSize: 14,
+                                }}
+                            >
+                                {sc}
+                            </kbd>
+                        ))}
+                    </div>
+                ) : null}
+            </div>
+        );
+    },
+);
+
+ResultItem.displayName = "ResultItem";