siam-ui-utils 2.0.7 → 2.1.0

package/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import "./css/bootstrap.min.css";
+import "./css/bootstrap.rtl.only.min.css";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -1,63 +1,87 @@
-{
-	"name": "siam-ui-utils",
-	"version": "2.0.7",
-	"keywords": [
-		"ampf-react",
-		"ampf-utils",
-		"siam-ui-utils"
-	],
-	"type": "module",
-	"author": "Ampf Development Team",
-	"license": "MIT",
-	"description": "Conjunto de librerias de componentes utiles para AMPF",
-	"main": "src/index.js",
-	"browser": "src/index.js",
-	"types": "index",
-	"homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/ampfgit/siam-ui-utils"
-	},
-	"moduleResolution": "nodenext",
-	"scripts": {
-		"start": "vite",
-		"publish-npm": "npm publish"
-	},
-	"dependencies": {
-		"@types/react-intl": "^3.0.0",
-		"html5-file-selector": "^2.1.0",
-		"prop-types": "^15.8.1",
-		"react": "^18.3.1",
-		"react-dropzone-uploader": "^2.11.0",
-		"react-intl": "^6.4.2",
-		"react-notifications": "^1.7.4",
-		"react-router": "^6.26.2",
-		"react-router-dom": "^6.26.2",
-		"react-select": "^5.8.0",
-		"reactstrap": "^9.2.2",
-		"siam-utils": "^1.1.4",
-		"source-map-loader": "^5.0.0",
-		"styled-components": "^6.1.12",
-		"typescript": "^5.5.4"
-	},
-	"devDependencies": {
-		"@testing-library/dom": "^10.4.0",
-		"@testing-library/jest-dom": "^6.4.8",
-		"@testing-library/react": "^16.0.0",
-		"@types/react-router-dom": "^5.3.3",
-		"@typescript-eslint/parser": "^8.2.0",
-		"@vitejs/plugin-react": "^4.3.1",
-		"copyfiles": "^2.4.1",
-		"eslint": "^8.57.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-config-react-app": "^7.0.1",
-		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jsx-a11y": "^6.7.1",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.33.0",
-		"vite": "^5.3.4",
-		"vite-plugin-eslint": "^1.8.1",
-		"vitest": "^2.0.5"
-	}
-}
+{
+  "name": "siam-ui-utils",
+  "version": "2.1.0",
+  "keywords": [
+    "ampf-react",
+    "ampf-utils",
+    "siam-ui-utils"
+  ],
+  "type": "module",
+  "author": "Ampf Development Team",
+  "license": "MIT",
+  "description": "Conjunto de librerias de componentes utiles para AMPF",
+  "main": "src/index.js",
+  "browser": "src/index.js",
+  "types": "index",
+  "homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampfgit/siam-ui-utils"
+  },
+  "moduleResolution": "nodenext",
+  "scripts": {
+    "start": "vite",
+    "publish-npm": "npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@storybook/cli": "^8.3.2",
+    "@types/react-intl": "^3.0.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "html5-file-selector": "^2.1.0",
+    "init": "^0.1.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dropzone-uploader": "^2.11.0",
+    "react-intl": "^6.4.2",
+    "react-notifications": "^1.7.4",
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.26.2",
+    "react-select": "^5.8.0",
+    "reactstrap": "^9.2.2",
+    "siam-utils": "^1.1.4",
+    "source-map-loader": "^5.0.0",
+    "styled-components": "^6.1.12",
+    "typescript": "^5.5.4",
+    "vite-plugin-commonjs": "^0.10.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-onboarding": "^8.3.2",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-vite": "^8.3.2",
+    "@storybook/test": "^8.3.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0-alpha.1",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "storybook": "^8.3.2",
+    "vite": "^5.3.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^2.0.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/App.jsx

@@ -1,7 +1,32 @@
+import React, { useState } from "react";
 import { TomarFoto } from './tomar-foto'
+import { LABEL_BUTTONS } from "./constants";
+
+const { TOMAR_FOTO_CELULAR, TOMAR_FOTO_WEB } = LABEL_BUTTONS
+
 function App() {
-	return (
-		<TomarFoto />
+    const [componentReference, setComponentReference] = useState(undefined);
+    
+    const handleLinkClick = (e) => {
+        const { target: { innerText } } = e;
+        setComponentReference(innerText);
+    }
+
+    return (
+        <div className="d-flex">
+            <div id="menu">
+                <button onClick={handleLinkClick}>{TOMAR_FOTO_CELULAR}</button>
+                <button onClick={handleLinkClick}>{TOMAR_FOTO_WEB}</button>
+
+            </div>
+            
+            <div id="content">
+                {componentReference === TOMAR_FOTO_CELULAR && <TomarFoto isMobile={true} />}
+                 {componentReference===TOMAR_FOTO_WEB && <TomarFoto isMobile={false} />}
+            </div>
+        </div>
+
+        
 		// <AnularAyudaIcon
 		// 	cbuPago='1234'
 		// 	codDelegacion='AMPF'

package/src/IntlMessages.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { FormattedMessage, injectIntl } from 'react-intl'
 const _InjectMassage = (props) => <FormattedMessage {...props} />
 

package/src/bridges/{with-router-bridge.jsx → index.jsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router';
 
-export const withRouter = (Component) => {
+const withRouter = (Component) => {
   const Wrapper = (props) => {
     const history = useNavigate();
     return <Component history={history} {...props} />;