Merge pull request #240 from Lemoncode/epic/manfred2html-export-settings

finished configure and select settings

Author: brauliodiez

apps/react-app/public/assets/arrow_select.svg

@@ -1,10 +1,8 @@
 import React from 'react';
-
+import { basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { json } from '@codemirror/lang-json';
-import { basicSetup } from 'codemirror';
 import { EditorView, ViewUpdate, placeholder } from '@codemirror/view';
-
 import { codeMirrorTheme } from './codemirror.styles';
 
 interface Props {

apps/react-app/public/assets/miguel-galvez.jpg

@@ -13,6 +13,9 @@ export const codeMirrorTheme = EditorView.theme({
   },
   '.cm-scroller': { overflow: 'auto' },
   '.cm-gutterElement': { display: 'none' },
+  '.cm-content': {
+    fontFamily: 'Inter, sans-serif',
+  },
   '.cm content, .cm-gutters,': {
     minHeight: '100%',
     backgroundColor: '#152128',

apps/react-app/src/common-app/components/codemirror/codemirror.component.tsx

@@ -4,6 +4,6 @@ export * from './button';
 export * from './navbar';
 export * from './card';
 export * from './modal';
-export * from './export-config';
+export * from './select';
 export * from './alert-message';
 export * from './codemirror';

apps/react-app/src/common-app/components/codemirror/codemirror.styles.ts

@@ -1 +1 @@
-export * from './modal.component'
+export * from './modal.component';

apps/react-app/src/common-app/components/export-config/export-config.component.tsx

@@ -6,8 +6,8 @@ interface Props {
   isOpen: boolean;
 }
 
-export const Modal: React.FC<Props> = (props) => {
+export const Modal: React.FC<Props> = props => {
   const { children, isOpen } = props;
-  
-  return isOpen && <div className={classes.container}>{children}</div>
+
+  return isOpen && <div className={classes.container}>{children}</div>;
 };

apps/react-app/src/common-app/components/index.ts

@@ -1,20 +1,39 @@
-import { css } from '@emotion/css';
+import { css, keyframes } from '@emotion/css';
 import { theme } from '@/core/theme';
 
+const openFromCenter = keyframes`
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+
 export const container = css`
   display: flex;
   width: 100%;
   height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 40px;
+  gap: ${theme.spacing(10)};
   position: absolute;
   z-index: 9999;
   top: 0;
   background: rgba(13, 20, 24, 0.75);
-  overflow: hidden;
+  transform: scale(0);
+  opacity: 0;
+  animation: ${openFromCenter} 0.2s ease forwards;
 
+  & > :first-child {
+    max-width: 1400px;
+    align-self: center;
+    overflow: hidden;
+    overflow-y: scroll;
+  }
   @media (min-width: 725px) {
     padding: ${theme.spacing(4)};
   }

apps/react-app/src/common-app/components/modal/index.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { cx } from '@emotion/css';
+import * as classes from './customSelect.styles';
+
+interface Props {
+  listOptions: string[];
+  label: string;
+  onSelectedOption: (option: string) => void;
+}
+export const CustomSelect: React.FC<Props> = props => {
+  const { listOptions, label, onSelectedOption } = props;
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedOption, setSelectedOption] = React.useState<string>(listOptions[0]);
+
+  const toggleIsOpen = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleOnMouseLeave = () => isOpen && toggleIsOpen();
+
+  const handleOptionSelect = (option: string) => {
+    onSelectedOption(option);
+    setSelectedOption(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={classes.selectContainer} onMouseLeave={handleOnMouseLeave}>
+      <span className={classes.label}>{label}</span>
+      <div className={classes.selectContent} onClick={toggleIsOpen}>
+        <span>{selectedOption}</span>
+        <img src="./assets/arrow_select.svg" alt="arrow select" className={classes.rotate(isOpen)} />
+      </div>
+      {isOpen && (
+        <ul
+          className={cx(classes.listContainer, {
+            [classes.listContainerOpenAnimation]: isOpen,
+            [classes.listContainerCloseAnimation]: !isOpen,
+          })}
+        >
+          {listOptions &&
+            listOptions.map((option, index) => (
+              <li key={index} onClick={() => handleOptionSelect(option)}>
+                {option}
+                {index === 0 && ' (por defecto)'}
+              </li>
+            ))}
+        </ul>
+      )}
+    </div>
+  );
+};