Add initial project setup with Vite, Mantine, and Docker configuration
This commit is contained in:
@@ -0,0 +1,2 @@
|
|||||||
|
CONTAINER_DATA_FILE = 'containers.json'
|
||||||
|
BASE_IMAGE_TAG = 'debian_vscode:tag'
|
||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
venv
|
venv
|
||||||
app/frontend/node_modules
|
app/frontend/node_modules
|
||||||
app/venv
|
app/venv
|
||||||
|
d_apps
|
||||||
Vendored
+22
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"workbench.colorCustomizations": {
|
||||||
|
"activityBar.activeBackground": "#1f6fd0",
|
||||||
|
"activityBar.background": "#1f6fd0",
|
||||||
|
"activityBar.foreground": "#e7e7e7",
|
||||||
|
"activityBar.inactiveForeground": "#e7e7e799",
|
||||||
|
"activityBarBadge.background": "#ee90bb",
|
||||||
|
"activityBarBadge.foreground": "#15202b",
|
||||||
|
"commandCenter.border": "#e7e7e799",
|
||||||
|
"sash.hoverBorder": "#1f6fd0",
|
||||||
|
"statusBar.background": "#1857a4",
|
||||||
|
"statusBar.foreground": "#e7e7e7",
|
||||||
|
"statusBarItem.hoverBackground": "#1f6fd0",
|
||||||
|
"statusBarItem.remoteBackground": "#1857a4",
|
||||||
|
"statusBarItem.remoteForeground": "#e7e7e7",
|
||||||
|
"titleBar.activeBackground": "#1857a4",
|
||||||
|
"titleBar.activeForeground": "#e7e7e7",
|
||||||
|
"titleBar.inactiveBackground": "#1857a499",
|
||||||
|
"titleBar.inactiveForeground": "#e7e7e799"
|
||||||
|
},
|
||||||
|
"peacock.color": "#1857a4"
|
||||||
|
}
|
||||||
+66
-7
@@ -11,25 +11,84 @@ RUN apt-get update && \
|
|||||||
curl \
|
curl \
|
||||||
gnupg \
|
gnupg \
|
||||||
apt-transport-https \
|
apt-transport-https \
|
||||||
|
wget \
|
||||||
|
build-essential \
|
||||||
|
libncursesw5-dev \
|
||||||
|
libssl-dev \
|
||||||
|
libsqlite3-dev \
|
||||||
|
tk-dev \
|
||||||
|
libgdbm-dev \
|
||||||
|
libc6-dev \
|
||||||
|
libbz2-dev \
|
||||||
|
libffi-dev \
|
||||||
|
zlib1g-dev \
|
||||||
|
git \
|
||||||
ca-certificates && \
|
ca-certificates && \
|
||||||
rm -rf /var/lib/apt/lists/*
|
rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
# Descargar e instalar Python 3.10
|
||||||
|
RUN wget https://www.python.org/ftp/python/3.10.16/Python-3.10.16.tgz --no-check-certificate && \
|
||||||
|
tar xzf Python-3.10.16.tgz && \
|
||||||
|
cd Python-3.10.16 && \
|
||||||
|
./configure --enable-optimizations && \
|
||||||
|
make altinstall && \
|
||||||
|
ln -s /usr/local/bin/python3.10 /usr/bin/python && \
|
||||||
|
cd .. && \
|
||||||
|
rm -rf Python-3.10.16*
|
||||||
|
|
||||||
|
# Verificar la instalación de Python y pip
|
||||||
|
RUN python --version && pip3.10 --version
|
||||||
|
|
||||||
|
# Descargar e instalar code-server de manera explícita
|
||||||
|
RUN curl -fsSL https://code-server.dev/install.sh | sh && \
|
||||||
|
if [ ! -f /usr/bin/code-server ]; then ln -s $(which code-server) /usr/bin/code-server; fi && \
|
||||||
|
which code-server && \
|
||||||
|
code-server --version
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Descargar e instalar code-server
|
# Instalar Node.js 22
|
||||||
RUN curl -sSL https://code-server.dev/install.sh | sh || echo "Error al instalar code-server" && \
|
RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \
|
||||||
which code-server || echo "code-server no encontrado" && \
|
apt-get install -y nodejs && \
|
||||||
code-server --version || echo "Error al obtener la versión de code-server"
|
node -v && npm -v
|
||||||
|
|
||||||
|
|
||||||
|
# Habilitar el uso de corepack
|
||||||
|
RUN corepack enable
|
||||||
|
|
||||||
|
# Definir el directorio de trabajo
|
||||||
|
WORKDIR /app/frontend
|
||||||
|
|
||||||
|
# Copiar archivos desde la carpeta local
|
||||||
|
COPY vite-template/ .
|
||||||
|
|
||||||
|
|
||||||
|
# Instalar dependencias para evitar `npm install` en cada arranque
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Crear la estructura de carpetas y asegurar permisos
|
||||||
|
RUN mkdir -p /app/backend /app/host_transfer && \
|
||||||
|
chmod -R 777 /app/backend /app/host_transfer
|
||||||
|
|
||||||
|
# Crear la carpeta en la raíz del contenedor
|
||||||
|
RUN mkdir -p /app/share && chmod 777 /app/share
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Copiar el script de inicio
|
||||||
|
COPY entrypoint.sh /entrypoint.sh
|
||||||
|
RUN chmod +x /entrypoint.sh
|
||||||
|
|
||||||
# Exponer el puerto por defecto de code-server
|
# Exponer el puerto por defecto de code-server
|
||||||
EXPOSE 8080
|
EXPOSE 8080 5173
|
||||||
|
|
||||||
# Definir el usuario y grupo de trabajo
|
# Definir el usuario y grupo de trabajo
|
||||||
USER root
|
USER root
|
||||||
|
|
||||||
# Comando para iniciar code-server como root
|
# Comando para iniciar code-server y react como root
|
||||||
ENTRYPOINT ["/bin/bash", "-c", "code-server /app --bind-addr 0.0.0.0:8080 --auth none -vvv"]
|
ENTRYPOINT ["/bin/bash", "/entrypoint.sh"]
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,27 +0,0 @@
|
|||||||
#!/bin/bash
|
|
||||||
|
|
||||||
# Actualizar repositorios
|
|
||||||
echo "Actualizando repositorios..."
|
|
||||||
apt-get update
|
|
||||||
|
|
||||||
# Instalar Python 3 y pip
|
|
||||||
echo "Instalando Python 3 y pip..."
|
|
||||||
apt-get install -y python3 python3-pip
|
|
||||||
|
|
||||||
# Crear alias para 'python' si no existe
|
|
||||||
if ! command -v python &> /dev/null
|
|
||||||
then
|
|
||||||
echo "Creando alias para 'python'..."
|
|
||||||
ln -s /usr/bin/python3 /usr/bin/python
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Actualizar pip a la última versión
|
|
||||||
echo "Actualizando pip..."
|
|
||||||
python3 -m pip install --upgrade pip --break-system-packages
|
|
||||||
|
|
||||||
# Verificar la instalación
|
|
||||||
echo "Verificando la instalación..."
|
|
||||||
python --version
|
|
||||||
pip --version
|
|
||||||
|
|
||||||
echo "Instalación completada exitosamente."
|
|
||||||
+184
-36
@@ -1,90 +1,238 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"id": "4d4a8a34c7b4",
|
"id": "75cce4b7d741",
|
||||||
"name": "duly-driven-sawfly",
|
"name": "kindly-giving-oriole",
|
||||||
"network": "alpine_network_c9754c4a-e7b8-454d-b00f-448ee0adc051",
|
"network": "alpine_network_3728b140-66ce-4a8f-b8ec-38f73d9bc1d9",
|
||||||
"image": "debian_vscode:tag",
|
"image": "debian_vscode:tag",
|
||||||
"compose_file": "docker-compose-c9754c4a-e7b8-454d-b00f-448ee0adc051.yml",
|
"compose_file": "docker-compose-3728b140-66ce-4a8f-b8ec-38f73d9bc1d9.yml",
|
||||||
"creation_timestamp": "2025-03-03T00:25:28.847998",
|
"creation_timestamp": "2025-03-16T17:48:58.123574",
|
||||||
"ports": [
|
"ports": [
|
||||||
{
|
{
|
||||||
"host_port": 27000,
|
"host_port": 27000,
|
||||||
"internal_port": 3000
|
"internal_port": 5173
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27001,
|
"host_port": 27001,
|
||||||
"internal_port": 5000
|
"internal_port": 5432
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27002,
|
"host_port": 27002,
|
||||||
"internal_port": 8000
|
"internal_port": 8786
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27003,
|
"host_port": 27003,
|
||||||
"internal_port": 8080
|
"internal_port": 8787
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27004,
|
"host_port": 27004,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27005,
|
||||||
"internal_port": 17000
|
"internal_port": 17000
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1e0bbc3d168c",
|
"id": "2a5f0fbacbc3",
|
||||||
"name": "jolly-modern-marlin",
|
"name": "surely-clear-bedbug",
|
||||||
"network": "alpine_network_3f7cd6cb-f573-4d3f-b29d-9fea13925acb",
|
"network": "alpine_network_a0733228-9fd8-4181-90de-921da890b187",
|
||||||
"image": "debian_vscode:tag",
|
"image": "debian_vscode:tag",
|
||||||
"compose_file": "docker-compose-3f7cd6cb-f573-4d3f-b29d-9fea13925acb.yml",
|
"compose_file": "docker-compose-a0733228-9fd8-4181-90de-921da890b187.yml",
|
||||||
"creation_timestamp": "2025-03-03T00:25:30.606035",
|
"creation_timestamp": "2025-03-16T17:49:39.088427",
|
||||||
"ports": [
|
"ports": [
|
||||||
{
|
|
||||||
"host_port": 27005,
|
|
||||||
"internal_port": 3000
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"host_port": 27006,
|
"host_port": 27006,
|
||||||
"internal_port": 5000
|
"internal_port": 5173
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27007,
|
"host_port": 27007,
|
||||||
"internal_port": 8000
|
"internal_port": 5432
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27008,
|
"host_port": 27008,
|
||||||
"internal_port": 8080
|
"internal_port": 8786
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27009,
|
"host_port": 27009,
|
||||||
|
"internal_port": 8787
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27010,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27011,
|
||||||
"internal_port": 17000
|
"internal_port": 17000
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "19a7ed4f580b",
|
"id": "2843d1d781e9",
|
||||||
"name": "solely-enough-owl",
|
"name": "sadly-prime-vervet",
|
||||||
"network": "alpine_network_3a4a8c19-333e-470d-928b-03a7ac0a5ecb",
|
"network": "alpine_network_49293255-543b-4ad4-8b25-f09face34151",
|
||||||
"image": "debian_vscode:tag",
|
"image": "debian_vscode:tag",
|
||||||
"compose_file": "docker-compose-3a4a8c19-333e-470d-928b-03a7ac0a5ecb.yml",
|
"compose_file": "docker-compose-49293255-543b-4ad4-8b25-f09face34151.yml",
|
||||||
"creation_timestamp": "2025-03-03T00:25:32.871372",
|
"creation_timestamp": "2025-03-16T17:49:40.669883",
|
||||||
"ports": [
|
"ports": [
|
||||||
{
|
|
||||||
"host_port": 27010,
|
|
||||||
"internal_port": 3000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"host_port": 27011,
|
|
||||||
"internal_port": 5000
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"host_port": 27012,
|
"host_port": 27012,
|
||||||
"internal_port": 8000
|
"internal_port": 5173
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27013,
|
"host_port": 27013,
|
||||||
"internal_port": 8080
|
"internal_port": 5432
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"host_port": 27014,
|
"host_port": 27014,
|
||||||
|
"internal_port": 8786
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27015,
|
||||||
|
"internal_port": 8787
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27016,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27017,
|
||||||
|
"internal_port": 17000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a24827329b07",
|
||||||
|
"name": "mildly-tight-dassie",
|
||||||
|
"network": "alpine_network_7f7ed654-b0e0-4ca6-9170-0d7eb8312755",
|
||||||
|
"image": "debian_vscode:tag",
|
||||||
|
"compose_file": "docker-compose-7f7ed654-b0e0-4ca6-9170-0d7eb8312755.yml",
|
||||||
|
"creation_timestamp": "2025-03-17T22:34:56.871974",
|
||||||
|
"ports": [
|
||||||
|
{
|
||||||
|
"host_port": 27024,
|
||||||
|
"internal_port": 5173
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27025,
|
||||||
|
"internal_port": 5432
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27026,
|
||||||
|
"internal_port": 8786
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27027,
|
||||||
|
"internal_port": 8787
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27028,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27029,
|
||||||
|
"internal_port": 17000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "43e5aae90772",
|
||||||
|
"name": "evenly-next-maggot",
|
||||||
|
"network": "alpine_network_e9729657-616a-4e2c-b68b-c0534dd70718",
|
||||||
|
"image": "debian_vscode:tag",
|
||||||
|
"compose_file": "docker-compose-e9729657-616a-4e2c-b68b-c0534dd70718.yml",
|
||||||
|
"creation_timestamp": "2025-03-17T22:34:58.494546",
|
||||||
|
"ports": [
|
||||||
|
{
|
||||||
|
"host_port": 27030,
|
||||||
|
"internal_port": 5173
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27031,
|
||||||
|
"internal_port": 5432
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27032,
|
||||||
|
"internal_port": 8786
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27033,
|
||||||
|
"internal_port": 8787
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27034,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27035,
|
||||||
|
"internal_port": 17000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "29759ed8a927",
|
||||||
|
"name": "highly-neat-dingo",
|
||||||
|
"network": "alpine_network_11390599-fdfb-451f-9903-2d857bf9cc1f",
|
||||||
|
"image": "debian_vscode:tag",
|
||||||
|
"compose_file": "docker-compose-11390599-fdfb-451f-9903-2d857bf9cc1f.yml",
|
||||||
|
"creation_timestamp": "2025-03-17T22:35:00.209660",
|
||||||
|
"ports": [
|
||||||
|
{
|
||||||
|
"host_port": 27037,
|
||||||
|
"internal_port": 5173
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27038,
|
||||||
|
"internal_port": 5432
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27039,
|
||||||
|
"internal_port": 8786
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27040,
|
||||||
|
"internal_port": 8787
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27041,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27042,
|
||||||
|
"internal_port": 17000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "32dc96ea7b52",
|
||||||
|
"name": "duly-nearby-marten",
|
||||||
|
"network": "alpine_network_cacf7537-064f-4516-8fe9-f4b31859e020",
|
||||||
|
"image": "debian_vscode:tag",
|
||||||
|
"compose_file": "docker-compose-cacf7537-064f-4516-8fe9-f4b31859e020.yml",
|
||||||
|
"creation_timestamp": "2025-03-17T22:35:01.933397",
|
||||||
|
"ports": [
|
||||||
|
{
|
||||||
|
"host_port": 27043,
|
||||||
|
"internal_port": 5173
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27044,
|
||||||
|
"internal_port": 5432
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27045,
|
||||||
|
"internal_port": 8786
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27046,
|
||||||
|
"internal_port": 8787
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27047,
|
||||||
|
"internal_port": 8080
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"host_port": 27048,
|
||||||
"internal_port": 17000
|
"internal_port": 17000
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -7,11 +7,11 @@ import hashlib
|
|||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
|
|
||||||
# Archivo JSON para guardar los datos de los contenedores
|
# Archivo JSON para guardar los datos de los contenedores
|
||||||
CONTAINER_DATA_FILE = 'containers.json'
|
CONTAINER_DATA_FILE = os.getenv("CONTAINER_DATA_FILE")
|
||||||
# Nombre y etiqueta para la imagen base
|
# Nombre y etiqueta para la imagen base
|
||||||
BASE_IMAGE_TAG = 'alpine_vscode:latest'
|
BASE_IMAGE_TAG = os.getenv("BASE_IMAGE_TAG")
|
||||||
|
|
||||||
CONTENEDOR_IDENTIFICADOR = "easily-sound-ant"
|
CONTENEDOR_IDENTIFICADOR = "9755e379cd01"
|
||||||
|
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
# Función: Eliminar un contenedor por ID o nombre y actualizar el JSON
|
# Función: Eliminar un contenedor por ID o nombre y actualizar el JSON
|
||||||
@@ -41,6 +41,8 @@ def delete_container(identifier):
|
|||||||
os.system(f"docker rm -f {container['id']}")
|
os.system(f"docker rm -f {container['id']}")
|
||||||
print(f"➤ Eliminando red: {container['network']}")
|
print(f"➤ Eliminando red: {container['network']}")
|
||||||
os.system(f"docker network rm {container['network']}")
|
os.system(f"docker network rm {container['network']}")
|
||||||
|
eliminar_carpeta(container['name'])
|
||||||
|
print(f"➤ Eliminando carpeta: {container['network']}")
|
||||||
|
|
||||||
# Actualizar el JSON excluyendo el contenedor eliminado
|
# Actualizar el JSON excluyendo el contenedor eliminado
|
||||||
containers = [c for c in containers if c['id'] != container['id']]
|
containers = [c for c in containers if c['id'] != container['id']]
|
||||||
@@ -51,6 +53,16 @@ def delete_container(identifier):
|
|||||||
except Exception as e:
|
except Exception as e:
|
||||||
print(f"❌ Error eliminando el contenedor {container['name']}: {e}")
|
print(f"❌ Error eliminando el contenedor {container['name']}: {e}")
|
||||||
|
|
||||||
|
# -------------------------------
|
||||||
|
# Función: Eliminar carpeta de datos de un contenedor
|
||||||
|
# -------------------------------
|
||||||
|
|
||||||
|
def eliminar_carpeta(nombre_carpeta):
|
||||||
|
ruta_carpeta = os.path.join('d_apps/', nombre_carpeta)
|
||||||
|
shutil.rmtree(ruta_carpeta)
|
||||||
|
print(f"✔ Carpeta {nombre_carpeta} eliminada correctamente.")
|
||||||
|
|
||||||
|
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
# Función: Limpiar imágenes huérfanas
|
# Función: Limpiar imágenes huérfanas
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
|
|||||||
@@ -7,9 +7,9 @@ import hashlib
|
|||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
|
|
||||||
# Archivo JSON para guardar los datos de los contenedores
|
# Archivo JSON para guardar los datos de los contenedores
|
||||||
CONTAINER_DATA_FILE = 'containers.json'
|
CONTAINER_DATA_FILE = os.getenv("CONTAINER_DATA_FILE")
|
||||||
# Nombre y etiqueta para la imagen base
|
# Nombre y etiqueta para la imagen base
|
||||||
BASE_IMAGE_TAG = 'alpine_vscode:latest'
|
BASE_IMAGE_TAG = os.getenv("BASE_IMAGE_TAG")
|
||||||
|
|
||||||
|
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
@@ -42,6 +42,9 @@ def delete_all_containers():
|
|||||||
os.system(f"docker rm -f {container['id']}")
|
os.system(f"docker rm -f {container['id']}")
|
||||||
print(f"➤ Eliminando red: {container['network']}")
|
print(f"➤ Eliminando red: {container['network']}")
|
||||||
os.system(f"docker network rm {container['network']}")
|
os.system(f"docker network rm {container['network']}")
|
||||||
|
eliminar_carpeta(container['name'])
|
||||||
|
print(f"➤ Eliminando carpeta: {container['network']}")
|
||||||
|
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
print(f"❌ Error eliminando el contenedor {container['name']}: {e}")
|
print(f"❌ Error eliminando el contenedor {container['name']}: {e}")
|
||||||
# Guardar el contenedor en la lista si no se pudo eliminar
|
# Guardar el contenedor en la lista si no se pudo eliminar
|
||||||
@@ -59,6 +62,15 @@ def delete_all_containers():
|
|||||||
print("✔ Todos los contenedores y redes han sido eliminados y el archivo JSON ha sido limpiado.")
|
print("✔ Todos los contenedores y redes han sido eliminados y el archivo JSON ha sido limpiado.")
|
||||||
|
|
||||||
|
|
||||||
|
# -------------------------------
|
||||||
|
# Función: Eliminar carpeta de datos de un contenedor
|
||||||
|
# -------------------------------
|
||||||
|
|
||||||
|
def eliminar_carpeta(nombre_carpeta):
|
||||||
|
ruta_carpeta = os.path.join('d_apps/', nombre_carpeta)
|
||||||
|
shutil.rmtree(ruta_carpeta)
|
||||||
|
print(f"✔ Carpeta {nombre_carpeta} eliminada correctamente.")
|
||||||
|
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
# Función: Limpiar imágenes huérfanas
|
# Función: Limpiar imágenes huérfanas
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
|
|||||||
@@ -0,0 +1,57 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
set -x # Activa el modo de depuración para ver cada comando ejecutado
|
||||||
|
|
||||||
|
echo "[DEBUG] Iniciando entrypoint.sh"
|
||||||
|
|
||||||
|
# Configurar Code-Server
|
||||||
|
CONFIG_DIR="/root/.local/share/code-server/User"
|
||||||
|
SETTINGS_FILE="$CONFIG_DIR/settings.json"
|
||||||
|
|
||||||
|
echo "[DEBUG] Creando directorio de configuración Code-Server en $CONFIG_DIR"
|
||||||
|
mkdir -p "$CONFIG_DIR"
|
||||||
|
|
||||||
|
echo "[INFO] Configurando Code-Server con tema oscuro y AutoSave desactivado..."
|
||||||
|
cat > "$SETTINGS_FILE" <<EOF
|
||||||
|
{
|
||||||
|
"workbench.colorTheme": "Visual Studio Dark",
|
||||||
|
"files.autoSave": "off"
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
echo "[DEBUG] Archivo de configuración de Code-Server creado en $SETTINGS_FILE"
|
||||||
|
|
||||||
|
# Verificar si el archivo se escribió correctamente
|
||||||
|
if [ -f "$SETTINGS_FILE" ]; then
|
||||||
|
echo "[DEBUG] Verificación: settings.json existe y contiene:"
|
||||||
|
cat "$SETTINGS_FILE"
|
||||||
|
else
|
||||||
|
echo "[ERROR] No se pudo crear settings.json"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Asegurar que Vite use file polling para detectar cambios
|
||||||
|
echo "[DEBUG] Configurando variables de entorno para Vite..."
|
||||||
|
export CHOKIDAR_USEPOLLING=true
|
||||||
|
export WATCHPACK_POLLING=true
|
||||||
|
echo "[DEBUG] Variables de entorno configuradas"
|
||||||
|
|
||||||
|
# Verificar que code-server está instalado
|
||||||
|
echo "[DEBUG] Verificando instalación de Code-Server..."
|
||||||
|
which code-server
|
||||||
|
code-server --version || echo "[ERROR] Code-Server no se encuentra instalado"
|
||||||
|
|
||||||
|
# Iniciar Code-Server y React en paralelo
|
||||||
|
echo "[INFO] Iniciando Code-Server y servidor de React..."
|
||||||
|
code-server /app --bind-addr 0.0.0.0:8080 --auth none -vvv &
|
||||||
|
|
||||||
|
# Verificar que npm está instalado
|
||||||
|
echo "[DEBUG] Verificando instalación de npm y Node.js..."
|
||||||
|
node -v
|
||||||
|
npm -v
|
||||||
|
|
||||||
|
# Verificar existencia de frontend antes de ejecutar npm
|
||||||
|
if [ -d "/app/frontend" ]; then
|
||||||
|
echo "[DEBUG] Carpeta /app/frontend encontrada. Iniciando servidor de React..."
|
||||||
|
cd /app/frontend
|
||||||
|
npm run dev -- --host 0.0.0.0 --port 5173 --force
|
||||||
|
else
|
||||||
|
echo "[ERROR] Carpeta /app/frontend no encontrada. No se puede iniciar React."
|
||||||
|
fi
|
||||||
+22
-7
@@ -1,4 +1,3 @@
|
|||||||
import os
|
|
||||||
import uuid
|
import uuid
|
||||||
import shutil
|
import shutil
|
||||||
import json
|
import json
|
||||||
@@ -7,18 +6,20 @@ import subprocess
|
|||||||
import petname
|
import petname
|
||||||
import hashlib
|
import hashlib
|
||||||
import platform
|
import platform
|
||||||
|
import os
|
||||||
|
from dotenv import load_dotenv
|
||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
|
|
||||||
# Archivo JSON para guardar los datos de los contenedores
|
# Archivo JSON para guardar los datos de los contenedores
|
||||||
CONTAINER_DATA_FILE = 'containers.json'
|
CONTAINER_DATA_FILE = os.getenv("CONTAINER_DATA_FILE")
|
||||||
# Nombre y etiqueta para la imagen base
|
# Nombre y etiqueta para la imagen base
|
||||||
BASE_IMAGE_TAG = 'debian_vscode:tag'
|
BASE_IMAGE_TAG = os.getenv("BASE_IMAGE_TAG")
|
||||||
|
|
||||||
#Lita de puertos internos
|
#Lista de puertos internos
|
||||||
PUERTOS_INTERNOS = [3000, 5000, 8000, 8080, 17000]
|
PUERTOS_INTERNOS = [5173, 5432, 8786, 8787, 8080, 17000]
|
||||||
|
|
||||||
# Numero de conteineres a crear
|
# Numero de conteineres a crear
|
||||||
NUM_CONTAINERS = 3
|
NUM_CONTAINERS = 4
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -26,6 +27,19 @@ NUM_CONTAINERS = 3
|
|||||||
# Función: Comprobar si un puerto está libre con nmap
|
# Función: Comprobar si un puerto está libre con nmap
|
||||||
# -------------------------------
|
# -------------------------------
|
||||||
def is_port_available(port):
|
def is_port_available(port):
|
||||||
|
# Cargar datos existentes si el archivo existe y no está vacío
|
||||||
|
if os.path.exists(CONTAINER_DATA_FILE) and os.path.getsize(CONTAINER_DATA_FILE) > 0:
|
||||||
|
with open(CONTAINER_DATA_FILE, 'r') as file:
|
||||||
|
try:
|
||||||
|
data = json.load(file) # Cargar datos existentes
|
||||||
|
# Verificar si el puerto ya está en uso en los datos existentes
|
||||||
|
for container in data:
|
||||||
|
for port_map in container['ports']:
|
||||||
|
if port_map['host_port'] == port:
|
||||||
|
return False # Puerto en uso
|
||||||
|
except json.JSONDecodeError:
|
||||||
|
pass # Si hay error al leer, continuar con la comprobación de nmap
|
||||||
|
|
||||||
# Ejecuta nmap para comprobar si el puerto está abierto
|
# Ejecuta nmap para comprobar si el puerto está abierto
|
||||||
command = f"nmap -p {port} 127.0.0.1"
|
command = f"nmap -p {port} 127.0.0.1"
|
||||||
print(f"[INFO] Ejecutando nmap para el puerto {port}...")
|
print(f"[INFO] Ejecutando nmap para el puerto {port}...")
|
||||||
@@ -111,7 +125,8 @@ services:
|
|||||||
restart: always
|
restart: always
|
||||||
tty: true
|
tty: true
|
||||||
volumes:
|
volumes:
|
||||||
- ./app:/app
|
- ./share:/app/share
|
||||||
|
- ./d_apps/{container_name}:/app/host_transfer
|
||||||
ports:
|
ports:
|
||||||
{custom_ports_yaml}
|
{custom_ports_yaml}
|
||||||
command: tail -f /dev/null # Mantener activo el contenedor
|
command: tail -f /dev/null # Mantener activo el contenedor
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import StudioEditor from '@grapesjs/studio-sdk/react';
|
||||||
|
import '@grapesjs/studio-sdk/style';
|
||||||
|
|
||||||
|
// ...
|
||||||
|
<StudioEditor
|
||||||
|
options={{
|
||||||
|
// ...
|
||||||
|
project: {
|
||||||
|
type: 'email',
|
||||||
|
default: {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
component: '<mjml><mj-body><mj-section><mj-column><mj-text>My email</mj-text></mj-column></mj-section></mj-body></mjml>'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
i18n: {
|
||||||
|
locales: {
|
||||||
|
en: {
|
||||||
|
actions: {
|
||||||
|
importCode: {
|
||||||
|
content: 'Paste here your MJML code and click Import'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Container, Card, TextInput, Title, Group } from '@mantine/core';
|
||||||
|
import { Textarea } from '@mantine/core';
|
||||||
|
|
||||||
|
import { QRCodeCanvas } from 'qrcode.react';
|
||||||
|
|
||||||
|
export default function QRCodeGenerator() {
|
||||||
|
const [text, setText] = useState('');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
fluid
|
||||||
|
style={{
|
||||||
|
height: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
background: 'linear-gradient(135deg, #667eea, #764ba2)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card
|
||||||
|
shadow="xl"
|
||||||
|
padding="xl"
|
||||||
|
radius="md"
|
||||||
|
style={{ width: '80%', minWidth: 450, maxWidth: 500, height: '40vh', minHeight: 300, backgroundColor: 'white' }}
|
||||||
|
>
|
||||||
|
|
||||||
|
<Title order={3} align="center" mb="md">
|
||||||
|
Generador de QR
|
||||||
|
</Title>
|
||||||
|
<Group grow>
|
||||||
|
{/* Input de texto */}
|
||||||
|
<Textarea
|
||||||
|
placeholder="Escribe algo..."
|
||||||
|
value={text}
|
||||||
|
onChange={(e) => setText(e.target.value)}
|
||||||
|
minRows={5} // Número mínimo de filas visibles
|
||||||
|
maxRows={6} // Número máximo de filas antes de hacer scroll
|
||||||
|
autosize
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Código QR generado dinámicamente */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}>
|
||||||
|
<QRCodeCanvas value={text || 'Mantine QR'} size={180} />
|
||||||
|
</div>
|
||||||
|
</Group>
|
||||||
|
</Card>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Navegar al directorio del proyecto
|
||||||
|
cd /app/frontend
|
||||||
|
|
||||||
|
# Instalar dependencias de Mantine
|
||||||
|
echo "Instalando dependencias de Mantine..."
|
||||||
|
npm install @mantine/core @mantine/hooks --yes
|
||||||
|
|
||||||
|
# Instalar dependencias de desarrollo para PostCSS
|
||||||
|
echo "Instalando dependencias de desarrollo para PostCSS..."
|
||||||
|
npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars --yes
|
||||||
|
|
||||||
|
# Crear archivo de configuración de PostCSS
|
||||||
|
echo "Creando archivo de configuración de PostCSS..."
|
||||||
|
cat <<EOL > postcss.config.cjs
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'postcss-preset-mantine': {},
|
||||||
|
'postcss-simple-vars': {
|
||||||
|
variables: {
|
||||||
|
'mantine-breakpoint-xs': '36em',
|
||||||
|
'mantine-breakpoint-sm': '48em',
|
||||||
|
'mantine-breakpoint-md': '62em',
|
||||||
|
'mantine-breakpoint-lg': '75em',
|
||||||
|
'mantine-breakpoint-xl': '88em',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
EOL
|
||||||
|
|
||||||
|
# Instalar ESLint y Prettier
|
||||||
|
echo "Instalando ESLint y Prettier..."
|
||||||
|
npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier --yes
|
||||||
|
|
||||||
|
# Crear archivo de configuración de ESLint
|
||||||
|
echo "Creando archivo de configuración de ESLint..."
|
||||||
|
cat <<EOL > .eslintrc.cjs
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2021: true,
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
'prettier',
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
plugins: ['react', 'prettier'],
|
||||||
|
rules: {
|
||||||
|
'prettier/prettier': 'error',
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
version: 'detect',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
EOL
|
||||||
|
|
||||||
|
# Crear archivo de configuración de Prettier
|
||||||
|
echo "Creando archivo de configuración de Prettier..."
|
||||||
|
cat <<EOL > .prettierrc.json
|
||||||
|
{
|
||||||
|
"printWidth": 80,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"semi": true,
|
||||||
|
"jsxSingleQuote": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
|
EOL
|
||||||
|
|
||||||
|
# Agregar scripts de ESLint y Prettier al package.json
|
||||||
|
echo "Agregando scripts de ESLint y Prettier al package.json..."
|
||||||
|
npx npm-add-script -k "lint" -v "eslint 'src/**/*.{js,jsx,ts,tsx}'"
|
||||||
|
npx npm-add-script -k "format" -v "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md}'"
|
||||||
|
|
||||||
|
|
||||||
|
echo "¡Configuración completada! Tu proyecto está listo para desarrollarse."
|
||||||
+27
@@ -0,0 +1,27 @@
|
|||||||
|
name: npm test
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- '**'
|
||||||
|
|
||||||
|
concurrency:
|
||||||
|
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
|
||||||
|
cancel-in-progress: true
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
test_pull_request:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
- uses: actions/setup-node@v3
|
||||||
|
with:
|
||||||
|
node-version-file: '.nvmrc'
|
||||||
|
cache: 'yarn'
|
||||||
|
cache-dependency-path: '**/yarn.lock'
|
||||||
|
- name: Install dependencies
|
||||||
|
run: yarn
|
||||||
|
- name: Run build
|
||||||
|
run: npm run build
|
||||||
|
- name: Run tests
|
||||||
|
run: npm test
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
.DS_Store
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
v22.11.0
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
|
||||||
|
const config = {
|
||||||
|
printWidth: 100,
|
||||||
|
singleQuote: true,
|
||||||
|
trailingComma: 'es5',
|
||||||
|
plugins: ['@ianvs/prettier-plugin-sort-imports'],
|
||||||
|
importOrder: [
|
||||||
|
'.*styles.css$',
|
||||||
|
'',
|
||||||
|
'dayjs',
|
||||||
|
'^react$',
|
||||||
|
'^next$',
|
||||||
|
'^next/.*$',
|
||||||
|
'<BUILTIN_MODULES>',
|
||||||
|
'<THIRD_PARTY_MODULES>',
|
||||||
|
'^@mantine/(.*)$',
|
||||||
|
'^@mantinex/(.*)$',
|
||||||
|
'^@mantine-tests/(.*)$',
|
||||||
|
'^@docs/(.*)$',
|
||||||
|
'^@/.*$',
|
||||||
|
'^../(?!.*.css$).*$',
|
||||||
|
'^./(?!.*.css$).*$',
|
||||||
|
'\\.css$',
|
||||||
|
],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: '*.mdx',
|
||||||
|
options: {
|
||||||
|
printWidth: 70,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import type { StorybookConfig } from '@storybook/react-vite';
|
||||||
|
|
||||||
|
const config: StorybookConfig = {
|
||||||
|
core: {
|
||||||
|
disableWhatsNewNotifications: true,
|
||||||
|
disableTelemetry: true,
|
||||||
|
enableCrashReports: false,
|
||||||
|
},
|
||||||
|
stories: ['../src/**/*.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
|
||||||
|
addons: ['storybook-dark-mode'],
|
||||||
|
framework: {
|
||||||
|
name: '@storybook/react-vite',
|
||||||
|
options: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import '@mantine/core/styles.css';
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { addons } from '@storybook/preview-api';
|
||||||
|
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
|
||||||
|
import { MantineProvider, useMantineColorScheme } from '@mantine/core';
|
||||||
|
import { theme } from '../src/theme';
|
||||||
|
|
||||||
|
const channel = addons.getChannel();
|
||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
layout: 'fullscreen',
|
||||||
|
options: {
|
||||||
|
showPanel: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
|
||||||
|
const { setColorScheme } = useMantineColorScheme();
|
||||||
|
const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
|
||||||
|
return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
|
||||||
|
}, [channel]);
|
||||||
|
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const decorators = [
|
||||||
|
(renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
|
||||||
|
(renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
|
||||||
|
];
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
dist
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"extends": ["stylelint-config-standard-scss"],
|
||||||
|
"rules": {
|
||||||
|
"custom-property-pattern": null,
|
||||||
|
"selector-class-pattern": null,
|
||||||
|
"scss/no-duplicate-mixins": null,
|
||||||
|
"declaration-empty-line-before": null,
|
||||||
|
"declaration-block-no-redundant-longhand-properties": null,
|
||||||
|
"alpha-value-notation": null,
|
||||||
|
"custom-property-empty-line-before": null,
|
||||||
|
"property-no-vendor-prefix": null,
|
||||||
|
"color-function-notation": null,
|
||||||
|
"length-zero-no-unit": null,
|
||||||
|
"selector-not-notation": null,
|
||||||
|
"no-descending-specificity": null,
|
||||||
|
"comment-empty-line-before": null,
|
||||||
|
"scss/at-mixin-pattern": null,
|
||||||
|
"scss/at-rule-no-unknown": null,
|
||||||
|
"value-keyword-case": null,
|
||||||
|
"media-feature-range-notation": null,
|
||||||
|
"selector-pseudo-class-no-unknown": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"ignorePseudoClasses": ["global"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
+935
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
|||||||
|
nodeLinker: node-modules
|
||||||
|
|
||||||
|
yarnPath: .yarn/releases/yarn-4.7.0.cjs
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
# Mantine Vite template
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
This template comes with the following features:
|
||||||
|
|
||||||
|
- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
|
||||||
|
- [TypeScript](https://www.typescriptlang.org/)
|
||||||
|
- [Storybook](https://storybook.js.org/)
|
||||||
|
- [Vitest](https://vitest.dev/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
|
||||||
|
- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
|
||||||
|
|
||||||
|
## npm scripts
|
||||||
|
|
||||||
|
## Build and dev scripts
|
||||||
|
|
||||||
|
- `dev` – start development server
|
||||||
|
- `build` – build production version of the app
|
||||||
|
- `preview` – locally preview production build
|
||||||
|
|
||||||
|
### Testing scripts
|
||||||
|
|
||||||
|
- `typecheck` – checks TypeScript types
|
||||||
|
- `lint` – runs ESLint
|
||||||
|
- `prettier:check` – checks files with Prettier
|
||||||
|
- `vitest` – runs vitest tests
|
||||||
|
- `vitest:watch` – starts vitest watch
|
||||||
|
- `test` – runs `vitest`, `prettier:check`, `lint` and `typecheck` scripts
|
||||||
|
|
||||||
|
### Other scripts
|
||||||
|
|
||||||
|
- `storybook` – starts storybook dev server
|
||||||
|
- `storybook:build` – build production storybook bundle to `storybook-static`
|
||||||
|
- `prettier:write` – formats all files with Prettier
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import mantine from 'eslint-config-mantine';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
...mantine,
|
||||||
|
{ ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', './.storybook/main.ts'] },
|
||||||
|
);
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<title>Vite + Mantine App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
{
|
||||||
|
"name": "mantine-vite-template",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"typecheck": "tsc --noEmit",
|
||||||
|
"lint": "npm run eslint && npm run stylelint",
|
||||||
|
"eslint": "eslint . --cache",
|
||||||
|
"stylelint": "stylelint '**/*.css' --cache",
|
||||||
|
"prettier": "prettier --check \"**/*.{ts,tsx}\"",
|
||||||
|
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
|
||||||
|
"vitest": "vitest run",
|
||||||
|
"vitest:watch": "vitest",
|
||||||
|
"test": "npm run typecheck && npm run prettier && npm run lint && npm run vitest && npm run build",
|
||||||
|
"storybook": "storybook dev -p 6006",
|
||||||
|
"storybook:build": "storybook build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@mantine/core": "7.17.2",
|
||||||
|
"@mantine/hooks": "7.17.2",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"react-router-dom": "^7.1.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.18.0",
|
||||||
|
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
|
||||||
|
"@storybook/react": "^8.5.0",
|
||||||
|
"@storybook/react-vite": "^8.5.0",
|
||||||
|
"@testing-library/dom": "^10.4.0",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
"@testing-library/react": "^16.2.0",
|
||||||
|
"@testing-library/user-event": "^14.6.0",
|
||||||
|
"@types/node": "^22.10.7",
|
||||||
|
"@types/react": "^19.0.7",
|
||||||
|
"@types/react-dom": "^19.0.3",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.18.0",
|
||||||
|
"eslint-config-mantine": "^4.0.3",
|
||||||
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||||
|
"eslint-plugin-react": "^7.37.4",
|
||||||
|
"identity-obj-proxy": "^3.0.0",
|
||||||
|
"jsdom": "^26.0.0",
|
||||||
|
"postcss": "^8.5.1",
|
||||||
|
"postcss-preset-mantine": "1.17.0",
|
||||||
|
"postcss-simple-vars": "^7.0.1",
|
||||||
|
"prettier": "^3.4.2",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"storybook": "^8.5.0",
|
||||||
|
"storybook-dark-mode": "^4.0.2",
|
||||||
|
"stylelint": "^16.13.2",
|
||||||
|
"stylelint-config-standard-scss": "^14.0.0",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"typescript-eslint": "^8.20.0",
|
||||||
|
"vite": "^6.0.7",
|
||||||
|
"vite-tsconfig-paths": "^5.1.4",
|
||||||
|
"vitest": "^3.0.2"
|
||||||
|
},
|
||||||
|
"packageManager": "yarn@4.7.0"
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'postcss-preset-mantine': {},
|
||||||
|
'postcss-simple-vars': {
|
||||||
|
variables: {
|
||||||
|
'mantine-breakpoint-xs': '36em',
|
||||||
|
'mantine-breakpoint-sm': '48em',
|
||||||
|
'mantine-breakpoint-md': '62em',
|
||||||
|
'mantine-breakpoint-lg': '75em',
|
||||||
|
'mantine-breakpoint-xl': '88em',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import '@mantine/core/styles.css';
|
||||||
|
|
||||||
|
import { MantineProvider } from '@mantine/core';
|
||||||
|
import { Router } from './Router';
|
||||||
|
import { theme } from './theme';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<MantineProvider theme={theme}>
|
||||||
|
<Router />
|
||||||
|
</MantineProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||||
|
import { HomePage } from './pages/Home.page';
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <HomePage />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
export function Router() {
|
||||||
|
return <RouterProvider router={router} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||||
|
|
||||||
|
export function ColorSchemeToggle() {
|
||||||
|
const { setColorScheme } = useMantineColorScheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Group justify="center" mt="xl">
|
||||||
|
<Button onClick={() => setColorScheme('light')}>Light</Button>
|
||||||
|
<Button onClick={() => setColorScheme('dark')}>Dark</Button>
|
||||||
|
<Button onClick={() => setColorScheme('auto')}>Auto</Button>
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
.title {
|
||||||
|
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||||
|
font-size: rem(100px);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: rem(-2px);
|
||||||
|
|
||||||
|
@media (max-width: $mantine-breakpoint-md) {
|
||||||
|
font-size: rem(50px);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { Welcome } from './Welcome';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Welcome',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Usage = () => <Welcome />;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { render, screen } from '@test-utils';
|
||||||
|
import { Welcome } from './Welcome';
|
||||||
|
|
||||||
|
describe('Welcome component', () => {
|
||||||
|
it('has correct Vite guide link', () => {
|
||||||
|
render(<Welcome />);
|
||||||
|
expect(screen.getByText('this guide')).toHaveAttribute(
|
||||||
|
'href',
|
||||||
|
'https://mantine.dev/guides/vite/'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { Anchor, Text, Title } from '@mantine/core';
|
||||||
|
import classes from './Welcome.module.css';
|
||||||
|
|
||||||
|
export function Welcome() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title className={classes.title} ta="center" mt={100}>
|
||||||
|
Welcome to{' '}
|
||||||
|
<Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
|
||||||
|
Mantine
|
||||||
|
</Text>
|
||||||
|
</Title>
|
||||||
|
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
|
||||||
|
This starter Vite project includes a minimal setup, if you want to learn more on Mantine +
|
||||||
|
Vite integration follow{' '}
|
||||||
|
<Anchor href="https://mantine.dev/guides/vite/" size="lg">
|
||||||
|
this guide
|
||||||
|
</Anchor>
|
||||||
|
. To get started edit pages/Home.page.tsx file.
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 163 163"><path fill="#339AF0" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"/><path fill="#fff" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.145 6.145 0 00-1.616 1.786 6.21 6.21 0 00-.694 4.693 6.21 6.21 0 001.028 2.186 6.151 6.151 0 006.457 2.319 6.154 6.154 0 002.177-1.035 50.083 50.083 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.165 49.165 0 004.071-19.69 49.167 49.167 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.112 50.112 0 00-7.952-7.397 6.15 6.15 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"/><path fill="#fff" fill-rule="evenodd" d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.262 9.262 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.145 9.145 0 012.995 2.063 9.262 9.262 0 011.967 3.077 9.339 9.339 0 01-2.125 10.003 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.3 9.3 0 01-2.755-6.395z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
|
||||||
|
import { Welcome } from '../components/Welcome/Welcome';
|
||||||
|
|
||||||
|
export function HomePage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Welcome />
|
||||||
|
<ColorSchemeToggle />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { createTheme } from '@mantine/core';
|
||||||
|
|
||||||
|
export const theme = createTheme({
|
||||||
|
/** Put your mantine theme override here */
|
||||||
|
});
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
export * from '@testing-library/react';
|
||||||
|
export { render } from './render';
|
||||||
|
export { userEvent };
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { render as testingLibraryRender } from '@testing-library/react';
|
||||||
|
import { MantineProvider } from '@mantine/core';
|
||||||
|
import { theme } from '../src/theme';
|
||||||
|
|
||||||
|
export function render(ui: React.ReactNode) {
|
||||||
|
return testingLibraryRender(ui, {
|
||||||
|
wrapper: ({ children }: { children: React.ReactNode }) => (
|
||||||
|
<MantineProvider theme={theme}>{children}</MantineProvider>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"types": ["node", "@testing-library/jest-dom", "vitest/globals"],
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||||
|
"allowJs": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": false,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"@test-utils": ["./test-utils"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src", "test-utils"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tsconfigPaths()],
|
||||||
|
test: {
|
||||||
|
globals: true,
|
||||||
|
environment: 'jsdom',
|
||||||
|
setupFiles: './vitest.setup.mjs',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest';
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
const { getComputedStyle } = window;
|
||||||
|
window.getComputedStyle = (elt) => getComputedStyle(elt);
|
||||||
|
window.HTMLElement.prototype.scrollIntoView = () => {};
|
||||||
|
|
||||||
|
Object.defineProperty(window, 'matchMedia', {
|
||||||
|
writable: true,
|
||||||
|
value: vi.fn().mockImplementation((query) => ({
|
||||||
|
matches: false,
|
||||||
|
media: query,
|
||||||
|
onchange: null,
|
||||||
|
addListener: vi.fn(),
|
||||||
|
removeListener: vi.fn(),
|
||||||
|
addEventListener: vi.fn(),
|
||||||
|
removeEventListener: vi.fn(),
|
||||||
|
dispatchEvent: vi.fn(),
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
|
||||||
|
class ResizeObserver {
|
||||||
|
observe() {}
|
||||||
|
unobserve() {}
|
||||||
|
disconnect() {}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.ResizeObserver = ResizeObserver;
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user