framework-entersol-web
v1.4.8
Published
Framework based on bootstrap 5
Downloads
33
Maintainers
Readme
DBL COMPONENTS
INSTALATION
- BEFORE cloning this repo, create a new folder
- In that folder, clone this repository (git clone [email protected]:entersol-mx/framework-entersol.git)
- In the outer folder, add this package.json
{
"scripts": {
"babel": "yarn --cwd ./framework-entersol babel",
"build": "yarn --cwd ./framework-entersol build"
},
"dependencies": {
"@popperjs/core": "2.11.5",
"bootstrap": "5.1.3",
"flat": "^5.0.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"sass": "^1.67.0",
"swiper": "^6.8.3"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"@babel/preset-typescript": "^7.12.1",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"babel-plugin-inline-json-import": "^0.3.2",
"babel-plugin-polyfill-corejs3": "^0.2.0",
"node-sass-import": "^2.0.1",
"postcss": "^8.1.6",
"postcss-cli": "^8.2.0",
"react-is": "^17.0.1",
"sass-loader": "^10.0.5"
}
}
- In the outer folder, run
yarn install
- In the
framework-entersol
folder, runyarn install
,yarn clear
andyarn build
USING THE FRAMEWORK
To use this framework:
- Run
yarn link
in the repository folder (It will display a message like: Linked "framework-entersol-web") - In Validex frontend, run
yarn link "framework-entersol-web"
Your project is now linked with the framework
MAKING CHANGES
After making changes to a component in the framework-entersol project:
- In the outer folder, run
yarn babel
- Your changes will appear automatically in the frontend
UNLINKING PROJECT
Once you have finished to use the project:
- In your frontend project, run
yarn unlink "framework-entersol-web"
- Run
yarn install --force
Then, your frontend project will run normally
PURPOSE
My own components https://joneldiablo.github.io/framework-entersol/
Finalidad: framework de componenentes react con bootstrap 5, todos los componentes han de funcionar exactamente igual para poder ser procesados por un componente específico llamado View, este componente tiene la propiedad de recorrer un objeto JSON de forma recursiva encontrando todos los componentes anidados, tomando como referencia el atributo name, con el cual sabrá que ese objeto es un componente. La estructura mínima JSON es entonces: {"name":""}
la cual tomará el componente default para mostrar su contenido.
Estructura JSON básica.
{
"component":"string",
"name":"string*",
"content":"string|JSON Object|React Component"
}
- component: es el nombre del componente que se quiere utilizar
- name:
TODO:
- Crear componente panel, que tenga swipe events, que haga el switch de ocultar textos y sólo mostrar íconos a mostrar u ocultar completamente el panel en mobile, además en mobile se muestra por encima de todo, agregar animaciones y dirección.
- Modificar componente menú para que los elementos funcionen igual que el resto de componentes el toggle se le debe pasar el nombre del evento que ejecuta el toggle text para colapsar el texto dejando únicamente el ícono
- Crear nuevo componente tabla a la cual se le pasen las columnas como contenido
- Que la nueva tabla controle las columnas visibles pasandole un arreglo de nombres
- permitir pasar componente react en "component"
- hacer que ReactRouterSchecma funcione igual que view!!!! pufffff que se pueda usar uno u otro o fucionarlos!!!!
- permitir indicar un arreglo de ubicaciones dónde colocar las rutas hijas, actualmente funciona con
{"routesIn":"string"}
modificarlo de tal forma que se pueda indicar nombe del componente que habrá de mostrar cada sección, por ejemplo,{"routesIn":componentNames[]}
||{"routesIn":{"componentWhereToPut1":"routeNameWhichMove"}}
- Separar el algoritmo recursivo de view y meterlo en functions para poder usarlo en cualquier cosa. La primisa sería ciclar todo su contenido para saber qué hay de forma lineal. se podría hacer que resolverefs dependa de este.
- separar functions en una librería aparte para poder usarla, por ejemplo, en proyectos backend.
=============
vectores de reconstrucción:
- control de contenido de forma recursiva
- control de estado lineal
- control de eventos
- estado global
- composiciones
- modulos
- autoresponsive
- no usar react O.o
- control de rutas
- control de elementos: [páginas/rutas, componentes, menus, webservices/sockets, eventos]