diff --git a/.vscode/settings.json b/.vscode/settings.json index e4a1751..7a629fa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,25 +11,25 @@ "source.fixAll.eslint": "explicit" }, "workbench.colorCustomizations": { - "activityBar.activeBackground": "#0894ba", - "activityBar.background": "#0894ba", - "activityBar.foreground": "#e7e7e7", - "activityBar.inactiveForeground": "#e7e7e799", - "activityBarBadge.background": "#99077a", - "activityBarBadge.foreground": "#e7e7e7", - "commandCenter.border": "#e7e7e799", - "sash.hoverBorder": "#0894ba", - "statusBar.background": "#066d89", - "statusBar.foreground": "#e7e7e7", - "statusBarItem.hoverBackground": "#0894ba", - "statusBarItem.remoteBackground": "#066d89", - "statusBarItem.remoteForeground": "#e7e7e7", - "titleBar.activeBackground": "#066d89", - "titleBar.activeForeground": "#e7e7e7", - "titleBar.inactiveBackground": "#066d8999", - "titleBar.inactiveForeground": "#e7e7e799" + "activityBar.activeBackground": "#fac8fb", + "activityBar.background": "#fac8fb", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#95920b", + "activityBarBadge.foreground": "#15202b", + "commandCenter.border": "#15202b99", + "sash.hoverBorder": "#fac8fb", + "statusBar.background": "#f598f8", + "statusBar.foreground": "#15202b", + "statusBarItem.hoverBackground": "#f068f5", + "statusBarItem.remoteBackground": "#f598f8", + "statusBarItem.remoteForeground": "#15202b", + "titleBar.activeBackground": "#f598f8", + "titleBar.activeForeground": "#15202b", + "titleBar.inactiveBackground": "#f598f899", + "titleBar.inactiveForeground": "#15202b99" }, - "peacock.color": "#066d89", + "peacock.color": "#f598f8", "cSpell.words": [ "orbis", "Orbis" diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..088c6ff --- /dev/null +++ b/Dockerfile @@ -0,0 +1,39 @@ +## Build image and name it 'custom-next' +# docker build -t custom-next . + +## Run container and name it 'OrbisPlayground'. Webpage is localhost:3000 +# docker run -it --rm -dp 3000:3000 --name OrbisPlayground custom-next + +## Connect to container +# docker exec -it OrbisPlayground sh + +## Stop docker container +# docker stop OrbisPlayground + +## All together +# docker stop OrbisPlayground & docker image rm -f custom-next & docker build -t custom-next . && docker run -it --rm -dp 3000:3000 --name OrbisPlayground custom-next && docker exec -it OrbisPlayground sh + +# Start Dockerfile +ARG VERSION=18.16.0-alpine3.17 +ARG DIR=OrbisPlayground + +FROM node:${VERSION} as builder +# redeclare ARG because ARG not in build environment +ARG DIR +WORKDIR /${DIR} +COPY . . +RUN apk update +RUN apk add git +RUN yarn +RUN NODE_ENV=production yarn build + +FROM node:${VERSION} as runner +# redeclare ARG because ARG not in build environment +ARG DIR +WORKDIR /${DIR} +COPY --from=builder /${DIR}/public ./public +COPY --from=builder /${DIR}/.next/standalone . +COPY --from=builder /${DIR}/.next/static ./.next/static + +EXPOSE 3000 +ENTRYPOINT ["node", "server.js"] diff --git a/config/default.json b/config/default.json index df624a9..f80bc6b 100644 --- a/config/default.json +++ b/config/default.json @@ -1,12 +1,12 @@ { "constants": { "plataforma": "web", - "publicPath": "/orbistemplate", + "publicPath": "/orbisPlayground", "urlServerImages" : "https://gt.via-asesores.com/smartoperation/orbisapi/dtsrv/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso", "urlWebApi": "https://gt.via-asesores.com/smartoperation/orbisapi/api/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso", "urlUploadApi": "https://gt.via-asesores.com/smartoperation/orbisapi/upload/dev/operation?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTso", - "appTitle": "OrbisTemplate", - "idApp": "orbistemplate", + "appTitle": "orbisPlayground", + "idApp": "orbisPlayground", "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----", "maxMbUpload": 4, "defaultLocale": "es" diff --git a/config/gt.json b/config/gt.json index 7d5b701..ddba126 100644 --- a/config/gt.json +++ b/config/gt.json @@ -1,12 +1,12 @@ { "constants": { "plataforma": "web", - "publicPath": "/orbistemplate", + "publicPath": "/orbisPlayground", "urlServerImages" : "https://gt.via-asesores.com/smartoperation/orbisapi/dtsrv/dev/orbis?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTMw", "urlWebApi": "https://gt.via-asesores.com/smartoperation/orbisapi/api/dev/orbis?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTMw", "urlUploadApi": "https://gt.via-asesores.com/smartoperation/orbisapi/upload/dev/orbis?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTMw", - "appTitle": "OrbisTemplate", - "idApp": "orbistemplate", + "appTitle": "orbisPlayground", + "idApp": "orbisPlayground", "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----", "maxMbUpload": 4, "defaultLocale": "es" diff --git a/config/testing.json b/config/testing.json index dee3b1e..7d3ab07 100644 --- a/config/testing.json +++ b/config/testing.json @@ -1,12 +1,12 @@ { "constants": { "plataforma": "web", - "publicPath": "/orbistemplate", + "publicPath": "/orbisPlayground", "urlServerImages" : "https://localhost:3000/smartoperation/orbisapi/dtsrv/dev/orbis?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTMw", "urlWebApi": "https://localhost:3000/smartoperation/orbisapi/api/dev/orbis?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTMw", "urlUploadApi": "https://localhost:3000/smartoperation/orbisapi/upload/dev/orbis?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTMw", - "appTitle": "OrbisTemplate", - "idApp": "orbistemplate", + "appTitle": "orbisPlayground", + "idApp": "orbisPlayground", "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----", "maxMbUpload": 4, "defaultLocale": "es" diff --git a/config/www.json b/config/www.json index 2f5ef4c..a050beb 100644 --- a/config/www.json +++ b/config/www.json @@ -1,12 +1,12 @@ { "constants": { "plataforma": "web", - "publicPath": "/orbistemplate", + "publicPath": "/orbisPlayground", "urlServerImages" : "https://www.via-asesores.com/smartoperation/orbisapi/dtsrv/prod/orbis?apikey=MDJmNTEwOWUtNWY2ZC00OGJlLThjZGQtNWM4NmEyNmZmN2U5", "urlWebApi": "https://www.via-asesores.com/smartoperation/orbisapi/api/prod/orbis?apikey=MDJmNTEwOWUtNWY2ZC00OGJlLThjZGQtNWM4NmEyNmZmN2U5", "urlUploadApi": "https://www.via-asesores.com/smartoperation/orbisapi/upload/prod/orbis?apikey=MDJmNTEwOWUtNWY2ZC00OGJlLThjZGQtNWM4NmEyNmZmN2U5", - "appTitle": "OrbisTemplate", - "idApp": "orbistemplate", + "appTitle": "orbisPlayground", + "idApp": "orbisPlayground", "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----", "maxMbUpload": 4, "defaultLocale": "es" diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..0405287 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"], + "vComponents/*": ["./node_modules/vComponents/dist/components/*"], + "via-ui/*": ["./node_modules/via-ui/dist/components/*"] + } + } +} diff --git a/package.json b/package.json index 02889fd..b628df8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "next-template", + "name": "orbis-playground", "version": "0.1.0", - "description": "My Next.js project", + "description": "Orbis Playground", "repository": { "type": "git", "url": "https://git.via-asesores.com/jmaritar/next-template" @@ -25,7 +25,13 @@ "lint": "next lint" }, "dependencies": { + "@babel/standalone": "^7.23.7", + "@codemirror/lang-javascript": "^6.2.1", + "@codemirror/theme-one-dark": "^6.1.2", + "@codesandbox/sandpack-react": "^2.10.0", "@headlessui/react": "^1.7.17", + "@uiw/codemirror-theme-monokai": "^4.21.21", + "@uiw/react-codemirror": "^4.21.21", "config": "^3.3.9", "js-cookie": "^3.0.5", "js-md5": "^0.8.3", @@ -36,10 +42,15 @@ "react-dom": "^18", "react-dropzone-component": "^3.2.0", "react-icons": "^4.12.0", + "react-live": "^4.1.5", + "react-live-runner": "^1.0.5", + "react-runner": "^1.0.3", "react-simple-hook-store": "^0.0.6", "react-toastify": "^9.1.3", "rosetta": "^1.1.0", - "vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git" + "v-functions": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-functions.git", + "vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git#dev_ja", + "via-ui": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/via-ui.git#dev_ja" }, "devDependencies": { "@types/node": "^20", diff --git a/postcss.config.js b/postcss.config.js index 33ad091..85f717c 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { plugins: { tailwindcss: {}, - autoprefixer: {}, - }, + autoprefixer: {} + } } diff --git a/public/images/backgrounds.webp b/public/images/backgrounds.webp new file mode 100644 index 0000000..70f22f2 Binary files /dev/null and b/public/images/backgrounds.webp differ diff --git a/src/components/CodeEditor/index.jsx b/src/components/CodeEditor/index.jsx new file mode 100644 index 0000000..041a19c --- /dev/null +++ b/src/components/CodeEditor/index.jsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import CodeMirror from '@uiw/react-codemirror' +import { javascript } from '@codemirror/lang-javascript' +import { monokai } from '@uiw/codemirror-theme-monokai' +import { useStore } from '@/hooks/useStore' +// import { oneDark } from '@codemirror/theme-one-dark' + +const CodeEditor = ({ code, onChange }) => { + const [currentCode, setCurrentCode] = useState(code) + + const [theme] = useStore(s => s.theme, a => a.setTheme) + + const onCodeChange = (value, viewUpdate) => { + onChange(value) + setCurrentCode(value) + } + + return ( + <> + + + ) +} + +export default CodeEditor diff --git a/src/components/CodePlayground/index.jsx b/src/components/CodePlayground/index.jsx new file mode 100644 index 0000000..c52edb7 --- /dev/null +++ b/src/components/CodePlayground/index.jsx @@ -0,0 +1,88 @@ +import React, { useEffect, useState } from 'react' +import { Icons } from '../Icons' +import { LiveProvider, LiveError, LivePreview } from 'react-live' +import CodeEditor from '../CodeEditor' +import useKeyPress from '@/hooks/useKeyPress' +import { toast } from 'react-toastify' +import presets from '@/utils/globalPresets' + +const CodePlayground = ({ code, onChange, scope }) => { + const [view, setView] = useState('preview') + const [currentCode, setCurrentCode] = useState(code) + + const toggleView = () => { + setView(view === 'preview' ? 'code' : 'preview') + } + + useKeyPress('Tab', toggleView, true) + + const copyToClipboard = () => { + navigator.clipboard.writeText(code).then(() => { + toast.success('Código copiado al portapapeles', presets.toaster) + }).catch(err => { + console.error('Algo salió mal al copiar el código: ', err) + }) + } + + const handleCodeChange = (editor, data, value) => { + setCurrentCode(editor) + onChange(editor) + } + + useEffect(() => { + setCurrentCode(code) + }, [code]) + + return ( +
+
+
+ + +
+ +
+ + +
+ +
+ + { view === 'preview' && +
+ + +
+ } + +
+ +
+ +
+
+ ) +} + +export default CodePlayground diff --git a/src/components/Icons/index.jsx b/src/components/Icons/index.jsx new file mode 100644 index 0000000..6a72b7a --- /dev/null +++ b/src/components/Icons/index.jsx @@ -0,0 +1,25 @@ +import { BsSearch } from 'react-icons/bs' +import { IoEllipsisVertical, IoFilter } from 'react-icons/io5' +import { DocumentPlusIcon, EyeIcon, PencilSquareIcon } from '@heroicons/react/24/solid' +import { FaChevronLeft, FaChevronRight, FaPaperclip, FaUser } from 'react-icons/fa' +import { RiEyeLine } from 'react-icons/ri' +import { LuEye, LuCode2, LuClipboardList } from 'react-icons/lu' + +export const Icons = { + // Common Icons + Search: BsSearch, + New: DocumentPlusIcon, + Edit: PencilSquareIcon, + View: IoFilter, + Pre: FaChevronLeft, + Next: FaChevronRight, + User: FaUser, + Details: EyeIcon, + Attachments: FaPaperclip, + Options: IoEllipsisVertical, + + Eye: LuEye, + Code: LuCode2, + Copy: LuClipboardList + +} diff --git a/src/components/LivePreview/index.jsx b/src/components/LivePreview/index.jsx new file mode 100644 index 0000000..8aae735 --- /dev/null +++ b/src/components/LivePreview/index.jsx @@ -0,0 +1,41 @@ +import React, { useEffect, useRef } from 'react' +import { transform } from '@babel/standalone' + +const LivePreview = ({ code }) => { + const iframeRef = useRef(null) + + useEffect(() => { + if (!iframeRef.current) return + + // Aquí, asegúrate de que 'code' contenga solo el JSX, no una declaración de componente. + // Por ejemplo, debería verse así: "
Hello from JSX!
;" + const transformedCode = transform(`<>${code}`, { + presets: ['react'] + }).code + + const iframe = iframeRef.current + const iframeDoc = iframe.contentDocument || iframe.contentWindow.document + iframeDoc.open() + iframeDoc.write(` + + + Preview + +
+ + + + + + `) + iframeDoc.close() + }, [code]) + + return