siam-ui-utils 2.0.7 → 2.1.1

package/src/constants.js

@@ -5,3 +5,12 @@ export const TAKE_PHOTO = {
 		'La carga de una foto Selfie de frente junto a tu DNI solo es accesible desde su teléfono',
 	TAKE_PHOTO_MESSAGE: 'Hacer Foto',
 }
+
+
+export const LABEL_BUTTONS = {
+    TOMAR_FOTO_CELULAR: 'Tomar Foto CELULAR',
+    TOMAR_FOTO_WEB: 'Tomar Foto WEB',
+    SUBIR_ARCHIVO_MAX_3: 'Subir archivos (maximo 3)',
+    SUBIR_ARCHIVO_MAX_7: 'Subir archivos (maximo 7)'
+    
+}

package/src/dropzone-uploader/DropzoneUploader.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropzoneUploader } from '.';
+
+const args = {
+  onChangeFiles: () => {
+    console.log('Accion despues de seleccionar un archivo');
+  },
+  totalFiles: 0,
+  maxFiles: 3,
+  accept: 'image/*, application/pdf',
+  capture: null,
+  nameFileLabel: 'Subir archivos',
+  maxFileSize: 2,
+};
+
+const meta = {
+  title: 'Components/DropzoneUploader',
+  component: DropzoneUploader,
+  args: {
+    ...args,
+  },
+} satisfies Meta<typeof DropzoneUploader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DropzoneUploaderBasic: Story = {
+  args: {
+    ...args,
+    maxFileSize: 5,
+  },
+};

package/src/dropzone-uploader/dropzone-uploader.css

@@ -0,0 +1,66 @@
+.dropzone-upload-button{
+  padding: 25; 
+  border-radius: 5px !important;
+  cursor: pointer;
+  color: #fff;
+  width: 10rem !important;
+  height: 2rem !important;
+  line-height: 1.5 !important;
+  font-size: 13px;
+  text-align: center;
+  vertical-align: middle !important;
+  border: none;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+  background-color: #af251b;
+  &:hover {
+    background-color: rgb(108, 31, 1);
+  }
+}
+.dropzone-upload-frame{
+  border: 0px !important;
+  overflow: 'none' !important;
+}
+.dropzone-upload-previewContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100px;
+    min-height: 60px;
+    z-index: 1;
+    border-bottom: 1px solid #ECECEC;
+    box-sizing: border-box;
+}
+
+.dropzone-upload-previewImage {
+    width: 60rem;
+    max-height: 60px;
+    max-width: 10rem;
+    border-radius: 4px;
+    padding-right: 1rem;
+}
+ 
+.dropzone-upload-delete-btn {
+  width: 2rem;
+  line-height: 1.5; 
+  border : 0;
+  color: #ff0000;
+  background-color: #f8f8f8;
+  padding-right:1rem;
+}
+
+.dropzone-upload-file-name-container {
+  position: relative;
+  display: inline-block;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}
+
+.dropzone-upload-file-name {
+  padding-right: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}

package/src/dropzone-uploader/index.jsx

@@ -1,8 +1,12 @@
-/* eslint-disable react/prop-types */import React, { useEffect, useState } from 'react'import { getDroppedOrSelectedFiles } from 'html5-file-selector'
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react'
+import { getDroppedOrSelectedFiles } from 'html5-file-selector'
 import Dropzone from 'react-dropzone-uploader'
 import { NotificationManager } from 'react-notifications'
 import 'react-dropzone-uploader/dist/styles.css'
-import { IconButtonSvg, pdfImage } from '..'
+import  IconButtonSvg  from '../iconos/icon-button-svg'
+import { pdfImage } from '../constants-svg'
+import "./dropzone-uploader.css"
 
 const maxSize = 7 //en MB
 export const DropzoneUploader = ({

package/src/iconos/icon-button-svg.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { withTheme } from 'styled-components';
+import { Icon } from './styled-icon';
+
+const useSvgToReactEncoded = (svg) => {
+  const svgWrapperRef = React.useRef();
+  React.useEffect(() => {
+    svgWrapperRef.current.innerHTML = svg;
+  }, [svg]);
+
+  return svgWrapperRef;
+};
+
+const IconButtonSvg = (props) => {
+  const {
+    sublabel = '',
+    onClick = () => {
+      undefined;
+    },
+    onTouchStart = () => {
+      undefined;
+    },
+    svg,
+    svgOver,
+    height = '3rem',
+    width = '3rem',
+    title,
+  } = props || {};
+  const [svgActive, setSvgActive] = useState(svg);
+  const svgWrapperRef = useSvgToReactEncoded(svgActive);
+
+  return (
+    <Icon
+      title={title}
+      display={sublabel !== '' ? 'block' : 'none'}
+      onClick={onClick}
+      onTouchStart={onTouchStart}
+      onMouseOver={() => setSvgActive(svgOver || svg)}
+      onMouseOut={() => setSvgActive(svg)}
+      width={width}
+      height={height}
+    >
+      <div ref={svgWrapperRef} />
+      <label>{sublabel}</label>
+    </Icon>
+  );
+};
+IconButtonSvg.defaultProps = { theme: {} };
+export default withTheme(IconButtonSvg);

package/src/iconos/index.js

@@ -0,0 +1,3 @@
+import IconButtonSvg from "./icon-button-svg";
+export { IconButtonSvg };
+export * from "./styled-icon";

package/src/iconos/styled-icon.jsx

@@ -0,0 +1,25 @@
+import { styled } from 'styled-components';
+
+// eslint-disable-next-line react/react-in-jsx-scope
+const IconDiv = (props) => <div {...props} />;
+
+export const Icon = styled(IconDiv)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  svg {
+    margin: 0.1rem;
+    margin-right: 0.1rem;
+    margin-top: 0.1rem;
+    justify-content: center;
+    color: red;
+    width: ${(props) => props.width || '3rem'};
+    height: ${(props) => props.height || props.width || '3rem'};
+    cursor: pointer;
+  }
+  label {
+    display: ${(props) => props.display || 'none'};
+  }
+`;
+export default Icon;

package/src/index.js

@@ -1,7 +1,6 @@
-export * from './dropzone-uploader'
-export * from './bridges'
-export * from './CustomBootstrap'
-export * from './CustomSelectInput'
-export * from './iconos'
-export * from './IntlMessages'
-export * from './tomar-foto'
+export * from './dropzone-uploader';
+export * from './bridges';
+export * from './CustomBootstrap';
+export * from './CustomSelectInput';
+export * from './IntlMessages';
+export * from './tomar-foto';

package/src/main.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import ReactDOM from 'react-dom/client'
 
 export const App = React.lazy(

package/src/tomar-foto/TomarFoto.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TomarFoto } from '.';
+
+const meta = {
+  title: 'Components/TomarFoto',
+  component: TomarFoto,
+    args: {
+        onFilesSelectedSelfie:() => { },
+        isMobile:false
+    },
+} satisfies Meta<typeof TomarFoto>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TomarFotoWebApplication: Story = {
+  args: {
+        isMobile: false
+    },
+};
+export const TomarFotoMobileApplication: Story = {
+  args: {
+    isMobile: true,
+        onFilesSelectedSelfie: () => {
+            console.log('Dispatch an action')
+        }
+  },
+};

package/src/tomar-foto/index.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { Row } from 'reactstrap'
 import { DropzoneUploader, Colxx } from '../'
 import { TAKE_PHOTO } from '../constants'

package/tsconfig.json

@@ -1,26 +1,27 @@
 {
-  "compilerOptions": {
-    "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "noImplicitReturns": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-  },
-  "include": [
-    "src",
-    "index.d.ts"
-  ]
+    "compilerOptions": {
+        "target": "es6",
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "allowJs": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "noImplicitReturns": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "preserve",
+    },
+    "include": [
+        "src",
+        "index.d.ts",
+        "eslint.config.js"
+    ]
 }

package/vite.config.ts

@@ -3,12 +3,8 @@ import { defineConfig } from "vitest/config";
 import eslint from 'vite-plugin-eslint';
 
 export default defineConfig({
-    plugins: [react(), eslint()],
+    plugins: [react()],
     test: {
         globals: true,
-    },
-    server: {
-        port: 3002,
-        open: true,
-    },
+    }
 });

package/.eslintrc.json

@@ -1,29 +0,0 @@
-{
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/all",
-        "plugin:react-hooks/recommended"
-    ],
-    "plugins": [
-        "react",
-        "react-hooks"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 2020,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        }
-    },
-    "env": {
-        "browser": true,
-        "es2020": true
-    },
-    "rules": {
-        "react/react-in-jsx-scope": "off",
-        "react/jsx-uses-react": "error",
-        "react/jsx-uses-vars": "error",
-        "react/jsx-indent-props": "off",
-        "react/jsx-indent": "off"
-    }
-}

package/src/bridges/index.js

@@ -1 +0,0 @@
-export * from './with-router-bridge'