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

finished configure and select settings

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

@@ -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/src/common-app/components/codemirror/codemirror.styles.ts

@@ -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/index.ts

@@ -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/modal/index.ts

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

apps/react-app/src/common-app/components/modal/modal.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/modal/modal.styles.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/select/customSelect.component.tsx

@@ -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>
+  );
+};

apps/react-app/src/common-app/components/select/customSelect.styles.ts

@@ -0,0 +1,124 @@
+import { css, keyframes } from '@emotion/css';
+import { theme } from '@/core/theme';
+
+export const selectContainer = css`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(2)};
+
+  @media (min-width: 725px) {
+    flex-grow: 1;
+    width: 100%;
+  }
+`;
+
+export const label = css`
+  flex-grow: 1;
+  color: ${theme.palette.dark[300]};
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: 0.15px;
+  padding: 0 ${theme.spacing(2)};
+  background-color: ${theme.palette.info[50]};
+  position: absolute;
+  top: -${theme.spacing(3)};
+  left: ${theme.spacing(3)};
+`;
+export const selectContent = css`
+  cursor: pointer;
+  display: flex;
+  padding: ${theme.spacing(3)} ${theme.spacing(4)};
+  align-items: flex-start;
+  gap: ${theme.spacing(2)};
+  align-self: stretch;
+  border: 1px solid ${theme.palette.info[600]};
+  border-radius: 8px;
+  background: ${theme.palette.info[50]};
+
+  span {
+    flex-grow: 1;
+    color: ${theme.palette.dark[900]};
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0.15px;
+  }
+`;
+
+const slideDown = keyframes`
+  from {
+    max-height: 0;
+    opacity: 0;
+  }
+  to {
+    max-height: min-content;
+    opacity: 1;
+  }
+`;
+
+const slideUp = keyframes`
+  from {
+    max-height: min-content;
+    opacity: 1;
+  }
+  to {
+    max-height: 0;
+    opacity: 0;
+  }
+`;
+
+export const listContainerOpenAnimation = css`
+  animation: ${slideDown} 0.3s ease forwards;
+`;
+export const listContainerCloseAnimation = css`
+  animation: ${slideUp} 0.3s ease forwards;
+`;
+
+export const listContainer = css`
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  position: absolute;
+  top: ${theme.spacing(12)};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+  padding: ${theme.spacing(2)} ${theme.spacing(0)};
+  gap: ${theme.spacing(2)};
+  border-radius: 4px;
+  background: ${theme.palette.info[50]};
+  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+
+  li {
+    cursor: pointer;
+    display: flex;
+    height: ${theme.spacing(8)};
+    padding: ${theme.spacing(0)} ${theme.spacing(4)};
+    justify-content: flex-start;
+    align-items: center;
+
+    color: ${theme.palette.dark[900]};
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+
+    :hover {
+      background: ${theme.palette.primary[50]};
+    }
+  }
+`;
+
+export const rotate = (rotate: boolean) => css`
+  rotate: ${rotate ? '180deg' : '0deg'};
+  transition: rotate 0.3s ease;
+`;