Feat/integration changed values display

src/__fixtures__/index.ts

@@ -5,5 +5,6 @@ export * from "./context_files";
 export * from "./prompts";
 export * from "./integrations";
 export * from "./survey_questions";
+export * from "./integration";
 export * from "./chat_links_response";
 export * from "./chat_config_thread";

src/__fixtures__/integration.ts

@@ -0,0 +1,110 @@
+import { Integration } from "../services/refact/integrations";
+
+export const INTEGRATION_GET_RESPONSE: Integration = {
+  project_path: "",
+  integr_name: "postgres",
+  integr_config_path: "/Users/marc/.config/refact/integrations.d/postgres.yaml",
+  integr_schema: {
+    fields: {
+      host: {
+        f_type: "string_long",
+        f_desc:
+          "Connect to this host, for example 127.0.0.1 or docker container name.",
+        f_placeholder: "marketing_db_container",
+      },
+      port: {
+        f_type: "string_short",
+        f_desc: "Which port to use.",
+        f_default: "5432",
+      },
+      user: {
+        f_type: "string_short",
+        f_placeholder: "john_doe",
+      },
+      password: {
+        f_type: "string_short",
+        f_default: "$POSTGRES_PASSWORD",
+        smartlinks: [
+          {
+            sl_label: "Open passwords.yaml",
+            sl_goto: "EDITOR:passwords.yaml",
+          },
+        ],
+      },
+      database: {
+        f_type: "string_short",
+        f_placeholder: "marketing_db",
+      },
+      psql_binary_path: {
+        f_type: "string_long",
+        f_desc:
+          "If it can't find a path to `psql` you can provide it here, leave blank if not sure.",
+        f_placeholder: "psql",
+      },
+    },
+    available: {
+      on_your_laptop_possible: true,
+      when_isolated_possible: true,
+    },
+    smartlinks: [
+      {
+        sl_label: "Test",
+        sl_chat: [
+          {
+            role: "user",
+            content:
+              "🔧 The postgres tool should be visible now. To test the tool, list the tables available, briefly desctibe the tables and express\nsatisfaction and relief if it works, and change nothing. If it doesn't work or the tool isn't available, go through the usual plan in the system prompt.\nThe current config file is %CURRENT_CONFIG%.\n",
+          },
+        ],
+      },
+    ],
+    docker: {
+      filter_label: "",
+      filter_image: "postgres",
+      new_container_default: {
+        image: "postgres:13",
+        environment: {
+          POSTGRES_DB: "marketing_db",
+          POSTGRES_USER: "john_doe",
+          POSTGRES_PASSWORD: "$POSTGRES_PASSWORD",
+        },
+      },
+      smartlinks: [
+        {
+          sl_label: "Add Database Container",
+          sl_chat: [
+            {
+              role: "user",
+              content:
+                "🔧 Your job is to create a postgres container, using the image and environment from new_container_default section in the current config file: %CURRENT_CONFIG%. Follow the system prompt.\n",
+            },
+          ],
+        },
+      ],
+      // "smartlinks_for_each_container": [
+      //   {
+      //     "sl_label": "Use for integration",
+      //     "sl_chat": [
+      //       {
+      //         "role": "user",
+      //         "content": "🔧 Your job is to modify postgres connection config in the current file to match the variables from the container, use docker tool to inspect the container if needed. Current config file: %CURRENT_CONFIG%.\n"
+      //       }
+      //     ]
+      //   }
+      // ]
+    },
+  },
+  integr_values: {
+    psql_binary_path: "/usr/bin/psql",
+    host: "localhost",
+    port: "5432",
+    user: "postgres",
+    password: "$POSTGRES_PASSWORD",
+    database: "test_db",
+    available: {
+      on_your_laptop: true,
+      when_isolated: false,
+    },
+  },
+  error_log: [],
+};

src/components/AnimatedInputs/AnimatedCheckbox.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const AnimatedCheckbox: React.FC = () => {
+  // TODO: Implement AnimatedCheckbox
+  return <div />;
+};

src/components/AnimatedInputs/AnimatedInputs.module.css

@@ -0,0 +1,30 @@
+.fade_input {
+  /* position: absolute;
+  top: 0;
+  left: 0; */
+  width: 100%;
+}
+
+.fade_input_in {
+  opacity: 1;
+  animation: 2s linear 1 normal none running fade-opacity;
+}
+
+.fade_input_out {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0;
+  animation: 2s linear 1 reverse none running fade-opacity;
+  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--green-a7);
+}
+
+@keyframes fade-opacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/components/AnimatedInputs/AnimatedSwitch.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const AnimatedSwitch: React.FC = () => {
+  // TODO: Implement the AnimagedSwitch component
+  return <div />;
+};

src/components/AnimatedInputs/AnimatedTextArea.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimatedTextArea } from "./AnimatedTextArea";
+import { Theme, Container } from "@radix-ui/themes";
+
+const meta = {
+  title: "Components/AnimatedInputs/AnimatedTextArea",
+  component: AnimatedTextArea,
+  decorators: [
+    (Story) => (
+      <Theme>
+        <Container p="8">
+          <Story />
+        </Container>
+      </Theme>
+    ),
+  ],
+} satisfies Meta<typeof AnimatedTextArea>;
+
+export default meta;
+
+type Story = StoryObj<typeof AnimatedTextArea>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: "World",
+    fadeValue: "Hello",
+    name: "test",
+  },
+};

src/components/AnimatedInputs/AnimatedTextArea.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Box, TextArea, TextAreaProps } from "@radix-ui/themes";
+import classNames from "classnames";
+import styles from "./AnimatedInputs.module.css";
+
+export type AnimatedTextAreaProps = TextAreaProps & {
+  fadeValue?: TextAreaProps["value"];
+};
+
+function getFadeProps(
+  props: AnimatedTextAreaProps,
+): Omit<TextAreaProps, "onChange" | "name"> {
+  const {
+    onChange: _onChange,
+    value: _value,
+    // defaultValue,
+    name: _name,
+    fadeValue,
+    ...rest
+  } = props;
+
+  return { ...rest, defaultValue: fadeValue };
+}
+
+function getInputProps(
+  props: AnimatedTextAreaProps,
+): Omit<TextAreaProps, "fadeValue"> {
+  const { fadeValue: _fadeValue, ...rest } = props;
+  return rest;
+}
+
+export const AnimatedTextArea: React.FC<AnimatedTextAreaProps> = (props) => {
+  const fadeProps = getFadeProps(props);
+  const inputProps = getInputProps(props);
+
+  const shouldFade = props.fadeValue ?? false;
+
+  if (!shouldFade) {
+    return <TextArea {...inputProps} className={props.className} />;
+  }
+
+  return (
+    <Box position="relative">
+      <TextArea
+        {...fadeProps}
+        className={classNames(
+          styles.fade_input,
+          styles.fade_input_out,
+          props.className,
+        )}
+        hidden={true}
+      />
+
+      <TextArea
+        {...inputProps}
+        className={classNames(
+          styles.fade_input,
+          styles.fade_input_in,
+          props.className,
+        )}
+      />
+    </Box>
+  );
+};

src/components/AnimatedInputs/AnimatedTextField.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Box, TextField } from "@radix-ui/themes";
+import classNames from "classnames";
+import styles from "./AnimatedInputs.module.css";
+
+export type AnimatedTextFieldProps = TextField.RootProps & {
+  fadeValue?: TextField.RootProps["value"];
+};
+
+function getFadeProps(
+  props: AnimatedTextFieldProps,
+): Omit<TextField.RootProps, "onChange" | "name"> {
+  const {
+    onChange: _onChange,
+    value: _value,
+    // defaultValue,
+    name: _name,
+    fadeValue,
+    ...rest
+  } = props;
+
+  return { ...rest, defaultValue: fadeValue };
+}
+
+function getInputProps(
+  props: AnimatedTextFieldProps,
+): Omit<TextField.RootProps, "fadeValue"> {
+  const { fadeValue: _fadeValue, ...rest } = props;
+  return rest;
+}
+
+export const AnimatedTextField: React.FC<AnimatedTextFieldProps> = (props) => {
+  const fadeProps = getFadeProps(props);
+  const inputProps = getInputProps(props);
+
+  const shouldFade = props.fadeValue ?? false;
+
+  if (!shouldFade) {
+    return <TextField.Root {...inputProps} className={props.className} />;
+  }
+
+  return (
+    <Box position="relative">
+      <TextField.Root
+        {...fadeProps}
+        className={classNames(
+          styles.fade_input,
+          styles.fade_input_out,
+          props.className,
+        )}
+        hidden={true}
+      />
+      <TextField.Root
+        {...inputProps}
+        className={classNames(
+          styles.fade_input,
+          styles.fade_input_in,
+          props.className,
+        )}
+      />
+    </Box>
+  );
+};

src/components/AnimatedInputs/AnimatedTextFiled.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimatedTextField } from "./AnimatedTextField";
+import { Theme, Container } from "@radix-ui/themes";
+
+const meta = {
+  title: "Components/AnimatedInputs/AnimatedTextField",
+  component: AnimatedTextField,
+  decorators: [
+    (Story) => (
+      <Theme>
+        <Container p="8">
+          <Story />
+        </Container>
+      </Theme>
+    ),
+  ],
+} satisfies Meta<typeof AnimatedTextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof AnimatedTextField>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: "World",
+    fadeValue: "Hello",
+    name: "test",
+  },
+};

src/components/AnimatedInputs/index.ts

@@ -0,0 +1,2 @@
+export * from "./AnimatedTextField";
+export * from "./AnimatedTextArea";