feat: add input component to research panel (#784)

src/components/common/CustomIcon/components/UpArrowIcon/upArrowIcon.tsx

@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import { JSX } from "react";
+
+/**
+ * Custom up arrow icon.
+ */
+
+export const UpArrowIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* SvgIconProps */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M8.24985 6.60005L6.07485 8.77505C5.93735 8.91255 5.76235 8.9813 5.54985 8.9813C5.33735 8.9813 5.16235 8.91255 5.02485 8.77505C4.88735 8.63755 4.8186 8.46255 4.8186 8.25005C4.8186 8.03755 4.88735 7.86255 5.02485 7.72505L8.47485 4.27505C8.62485 4.12505 8.79985 4.05005 8.99985 4.05005C9.19985 4.05005 9.37485 4.12505 9.52485 4.27505L12.9749 7.72505C13.1124 7.86255 13.1811 8.03755 13.1811 8.25005C13.1811 8.46255 13.1124 8.63755 12.9749 8.77505C12.8374 8.91255 12.6624 8.9813 12.4499 8.9813C12.2374 8.9813 12.0624 8.91255 11.9249 8.77505L9.74985 6.60005V12.75C9.74985 12.9625 9.67798 13.1407 9.53423 13.2844C9.39048 13.4282 9.21235 13.5 8.99985 13.5C8.78735 13.5 8.60923 13.4282 8.46548 13.2844C8.32173 13.1407 8.24985 12.9625 8.24985 12.75V6.60005Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

src/styles/common/mui/inputBase.ts

@@ -0,0 +1,38 @@
+import { InputBaseProps } from "@mui/material";
+
+type InputBasePropsOptions = {
+  COLOR: typeof COLOR;
+  MARGIN: typeof MARGIN;
+  SIZE: typeof SIZE;
+  TYPE: typeof TYPE;
+};
+
+const COLOR: Record<string, InputBaseProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const MARGIN: Record<string, InputBaseProps["margin"]> = {
+  DENSE: "dense",
+  NONE: "none",
+};
+
+const SIZE: Record<string, InputBaseProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const TYPE: Record<string, InputBaseProps["type"]> = {
+  TEXT: "text",
+};
+
+export const INPUT_BASE_PROPS: InputBasePropsOptions = {
+  COLOR,
+  MARGIN,
+  SIZE,
+  TYPE,
+};

src/styles/common/mui/stack.ts

@@ -0,0 +1,33 @@
+import { StackProps } from "@mui/material";
+
+type StackPropsOptions = {
+  ALIGN_ITEMS: typeof ALIGN_ITEMS;
+  DIRECTION: typeof DIRECTION;
+  FLEX_WRAP: typeof FLEX_WRAP;
+};
+
+const ALIGN_ITEMS: Record<string, StackProps["alignItems"]> = {
+  BASELINE: "baseline",
+  CENTER: "center",
+  FLEX_END: "flex-end",
+  FLEX_START: "flex-start",
+  STRETCH: "stretch",
+} as const;
+
+const DIRECTION: Record<string, StackProps["direction"]> = {
+  COLUMN: "column",
+  COLUMN_REVERSE: "column-reverse",
+  ROW: "row",
+  ROW_REVERSE: "row-reverse",
+} as const;
+
+const FLEX_WRAP: Record<string, StackProps["flexWrap"]> = {
+  WRAP: "wrap",
+  WRAP_REVERSE: "wrap-reverse",
+} as const;
+
+export const STACK_PROPS: StackPropsOptions = {
+  ALIGN_ITEMS,
+  DIRECTION,
+  FLEX_WRAP,
+};

src/views/ExploreView/research/panel/components/Input/constants.ts

@@ -0,0 +1,15 @@
+import { InputBaseProps } from "@mui/material";
+import { INPUT_BASE_PROPS as MUI_INPUT_BASE_PROPS } from "../../../../../../styles/common/mui/inputBase";
+
+export const INPUT_BASE_PROPS: InputBaseProps = {
+  autoFocus: true,
+  color: MUI_INPUT_BASE_PROPS.COLOR.PRIMARY,
+  fullWidth: true,
+  inputProps: { autoComplete: "off", spellCheck: false },
+  margin: MUI_INPUT_BASE_PROPS.MARGIN.DENSE,
+  maxRows: 4,
+  minRows: 1,
+  multiline: true,
+  name: "ai-prompt",
+  placeholder: "Ask anything",
+};

src/views/ExploreView/research/panel/components/Input/input.styles.ts

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../../../../components/common/Paper/components/RoundedPaper/roundedPaper";
+
+export const StyledPaper = styled(RoundedPaper)`
+  display: flex;
+  flex-direction: column;
+  margin: 16px;
+
+  .MuiInputBase-root {
+    padding: 16px;
+  }
+
+  .MuiStack-root {
+    justify-content: flex-end;
+    padding: 8px;
+  }
+`;

src/views/ExploreView/research/panel/components/Input/input.tsx

@@ -0,0 +1,30 @@
+import { IconButton, InputBase, InputBaseProps, Stack } from "@mui/material";
+import { JSX } from "react";
+import { INPUT_BASE_PROPS } from "./constants";
+import { StyledPaper } from "./input.styles";
+import { UpArrowIcon } from "../../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
+import { ICON_BUTTON_PROPS } from "../../../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS } from "../../../../../../styles/common/mui/svgIcon";
+import { STACK_PROPS } from "../../../../../../styles/common/mui/stack";
+
+/**
+ * Renders an input component for the research panel.
+ * @param props - Input component props.
+ * @returns Research panel input component.
+ */
+export const Input = (props: InputBaseProps): JSX.Element => {
+  return (
+    <StyledPaper elevation={0}>
+      <InputBase {...INPUT_BASE_PROPS} {...props} />
+      <Stack direction={STACK_PROPS.DIRECTION.ROW} gap={2}>
+        <IconButton
+          color={ICON_BUTTON_PROPS.COLOR.SECONDARY}
+          size={ICON_BUTTON_PROPS.SIZE.XSMALL}
+          type="submit"
+        >
+          <UpArrowIcon fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL} />
+        </IconButton>
+      </Stack>
+    </StyledPaper>
+  );
+};

src/views/ExploreView/research/panel/components/Input/stories/input.stories.tsx

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from "@storybook/nextjs-vite";
+import { Input } from "../input";
+import { Box } from "@mui/material";
+import { JSX } from "react";
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: "412px" }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/views/ExploreView/research/panel/panel.tsx

@@ -1,10 +1,15 @@
 import { JSX } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
+import { Input } from "./components/Input/input";
 
 /**
  * Renders the research panel.
  * @returns The research panel container element.
  */
 export const Panel = (): JSX.Element => {
-  return <div data-testid={TEST_IDS.RESEARCH_PANEL}>research panel</div>;
+  return (
+    <div data-testid={TEST_IDS.RESEARCH_PANEL}>
+      <Input />
+    </div>
+  );
 };

src/views/ExploreView/research/panel/stories/panel.stories.tsx

@@ -0,0 +1,32 @@
+import { type Meta, type StoryObj } from "@storybook/nextjs-vite";
+import { Panel } from "../panel";
+import { Box } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { JSX } from "react";
+
+const meta: Meta<typeof Panel> = {
+  component: Panel,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box
+        sx={{
+          backgroundColor: PALETTE.BACKGROUND_DEFAULT,
+          height: "100vh",
+          minHeight: 0,
+          width: "412px",
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
+  parameters: { layout: "padding" },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};