Merge branch 'feat/favourite_button' into alpha

src/components/ui/Dropdown/Dropdown.stories.tsx

@@ -57,6 +57,7 @@ Default.args = {
     await new Promise((resolve) => setTimeout(resolve, 1000));
     return exampleData;
   },
+  header: <div>This is a header</div>,
   children: (
     <button
       style={{

src/components/ui/Dropdown/Dropdown.tsx

@@ -1,21 +1,31 @@
-import { memo, useCallback, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
 import { Dropdown as AntDropdown } from "antd";
-import { DropdownProps } from "./Dropdown.types";
+import { DropdownProps, DropdownRef } from "./Dropdown.types";
 import { DropdownMenu, flattenDropdownItems } from "./DropdownMenu";
 import ErrorBoundary from "antd/es/alert/ErrorBoundary";
 
-export const Dropdown: React.FC<DropdownProps> = memo(
-  ({
-    onRetrieveData,
-    onItemClick,
-    disabled = false,
-    searchable = "auto",
-    children,
-    trigger = ["click"],
-    placement,
-    maxHeight,
-    onOpenChange,
-  }: DropdownProps) => {
+const DropdownComponent = forwardRef<DropdownRef, DropdownProps>(
+  (
+    {
+      onRetrieveData,
+      onItemClick,
+      disabled = false,
+      searchable = "auto",
+      children,
+      trigger = ["click"],
+      placement,
+      maxHeight,
+      header,
+      onOpenChange,
+    },
+    ref,
+  ) => {
     const [internalOpen, setInternalOpen] = useState(false);
     const [emptyMenu, setEmptyMenu] = useState(false);
 
@@ -25,12 +35,17 @@ export const Dropdown: React.FC<DropdownProps> = memo(
       return data;
     }, [onRetrieveData]);
 
+    useImperativeHandle(ref, () => ({
+      close: () => setInternalOpen(false),
+    }));
+
     return (
       <ErrorBoundary>
         <AntDropdown
           dropdownRender={() => {
             return (
               <DropdownMenu
+                header={header}
                 maxHeight={maxHeight}
                 searchable={searchable}
                 onRetrieveData={onRetrieveDataCallback}
@@ -58,4 +73,6 @@ export const Dropdown: React.FC<DropdownProps> = memo(
   },
 );
 
+export const Dropdown = memo(DropdownComponent);
+DropdownComponent.displayName = "DropdownComponent";
 Dropdown.displayName = "Dropdown";

src/components/ui/Dropdown/Dropdown.types.ts

@@ -5,6 +5,7 @@ export type BaseDropdownProps = {
   searchable?: true | false | "auto";
   onItemClick?: (item: DropdownMenuItem) => void;
   onRetrieveData: () => Promise<DropdownMenuGroup[]>;
+  header?: ReactNode;
 };
 
 declare const Placements: readonly [
@@ -51,3 +52,7 @@ export type DropdownMenuItem = DropdownMenuItemType &
 export type DropdownMenuItemType = {
   type?: "item" | "divider";
 };
+
+export type DropdownRef = {
+  close: () => void;
+};

src/components/ui/Dropdown/DropdownMenu.tsx

@@ -25,6 +25,7 @@ export const DropdownMenu = ({
   searchable,
   onItemClick,
   maxHeight,
+  header = null,
 }: BaseDropdownProps) => {
   const inputRef = useRef<any>(null);
   const [searchValue, setSearchValue] = useState<string>();
@@ -99,6 +100,7 @@ export const DropdownMenu = ({
 
   return (
     <Root>
+      {header}
       {mustShowSearch && (
         <div style={{ padding: 5 }}>
           <Search

src/components/ui/FavouriteButton/FavouriteButton.stories.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+import { FavouriteButton } from "./FavouriteButton";
+import { FavouriteButtonProps } from "./FavouriteButton.types";
+import { Default as DefaultStory } from "../Dropdown/Dropdown.stories";
+
+export default {
+  title: "Components/FavouriteButton",
+  component: FavouriteButton,
+};
+
+const Template: FC<FavouriteButtonProps> = (args) => (
+  <FavouriteButton {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  onRetrieveData: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return DefaultStory.exampleData;
+  },
+  header: <strong>Your shortcuts</strong>,
+  label: "FavouriteButton",
+};

src/components/ui/FavouriteButton/FavouriteButton.tsx

@@ -0,0 +1,49 @@
+import { StarOutlined, StarFilled, DownOutlined } from "@ant-design/icons";
+import { Button } from "antd";
+import { FavouriteButtonProps } from "./FavouriteButton.types";
+import { Fragment, forwardRef, useImperativeHandle, useRef } from "react";
+import { Dropdown, DropdownRef } from "@/components";
+
+export const FavouriteButton = forwardRef<DropdownRef, FavouriteButtonProps>(
+  ({ isFavourite, onToggleFavourite, ...rest }, ref) => {
+    const dropdownRef = useRef<DropdownRef>(null);
+
+    useImperativeHandle(ref, () => ({
+      close: () => dropdownRef.current?.close(),
+    }));
+
+    return (
+      <Fragment>
+        <Button
+          type={isFavourite ? "primary" : "default"}
+          icon={
+            isFavourite ? (
+              <StarFilled style={{ color: "white" }} />
+            ) : (
+              <StarOutlined />
+            )
+          }
+          style={{
+            width: 50,
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
+          onClick={onToggleFavourite}
+        ></Button>
+        <Dropdown ref={dropdownRef} {...rest}>
+          <Button
+            style={{
+              width: 25,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}
+            icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
+            onClick={(e) => e.preventDefault()}
+          ></Button>
+        </Dropdown>
+      </Fragment>
+    );
+  },
+);
+
+FavouriteButton.displayName = "FavouriteButton";

src/components/ui/FavouriteButton/FavouriteButton.types.tsx

@@ -0,0 +1,6 @@
+import { DropdownProps } from "@/components";
+
+export type FavouriteButtonProps = {
+  isFavourite: boolean;
+  onToggleFavourite: () => void;
+} & DropdownProps;

src/components/ui/FavouriteButton/index.ts

@@ -0,0 +1,2 @@
+export * from "./FavouriteButton";
+export * from "./FavouriteButton.types";

src/components/ui/index.ts

@@ -3,3 +3,4 @@ export * from "./Label";
 export * from "./Separator";
 export * from "./FieldSet";
 export * from "./Dropdown";
+export * from "./FavouriteButton";