diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore index d6af7659..6635cf55 100644 --- a/packages/ui/.gitignore +++ b/packages/ui/.gitignore @@ -1 +1,10 @@ -/public/build/ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/packages/ui/.npmrc b/packages/ui/.npmrc new file mode 100644 index 00000000..0c05da45 --- /dev/null +++ b/packages/ui/.npmrc @@ -0,0 +1,2 @@ +engine-strict=true +resolution-mode=highest diff --git a/packages/ui/README.md b/packages/ui/README.md new file mode 100644 index 00000000..5c91169b --- /dev/null +++ b/packages/ui/README.md @@ -0,0 +1,38 @@ +# create-svelte + +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npm create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +To create a production version of your app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/packages/ui/package.json b/packages/ui/package.json index 17600a84..d602e1df 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,47 +1,34 @@ { - "name": "ui", - "version": "0.0.0", - "private": true, - "scripts": { - "build": "rollup -c", - "dev": "rollup -c -w", - "start": "sirv public", - "validate": "svelte-check" - }, - "devDependencies": { - "@rollup/plugin-alias": "^5.0.0", - "@rollup/plugin-commonjs": "^25.0.0", - "@rollup/plugin-json": "^6.0.0", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-replace": "^5.0.1", - "@rollup/plugin-typescript": "^11.0.0", - "@types/file-saver": "^2.0.1", - "@types/resize-observer-browser": "^0.1.5", - "@types/uuid": "^9.0.0", - "autoprefixer": "^10.4.2", - "path-browserify": "^1.0.1", - "postcss": "^8.2.8", - "postcss-load-config": "^4.0.0", - "rollup": "^3.0.0", - "rollup-plugin-livereload": "^2.0.0", - "rollup-plugin-styles": "^4.0.0", - "rollup-plugin-svelte": "^7.0.0", - "rollup-plugin-terser": "^7.0.0", - "svelte": "^3.55.0", - "svelte-check": "^3.0.1", - "svelte-preprocess": "^5.0.0", - "tailwindcss": "^3.0.15", - "tslib": "^2.0.0", - "typescript": "^4.9.0" - }, - "dependencies": { - "file-saver": "^2.0.5", - "highlight.js": "^11.0.0", - "highlightjs-cairo": "^0.2.0", - "highlightjs-solidity": "^2.0.0", - "sirv-cli": "^2.0.0", - "tippy.js": "^6.3.1", - "util": "^0.12.4", - "uuid": "^9.0.0" - } + "name": "ui", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^2.0.0", + "@sveltejs/kit": "^1.20.4", + "@types/file-saver": "^2.0.5", + "autoprefixer": "^10.4.16", + "postcss": "^8.4.30", + "svelte": "^4.0.5", + "svelte-check": "^3.4.3", + "tailwindcss": "^3.3.3", + "tslib": "^2.4.1", + "typescript": "^5.0.0", + "vite": "^4.4.2" + }, + "type": "module", + "dependencies": { + "file-saver": "^2.0.5", + "highlight.js": "^11.8.0", + "highlightjs-cairo": "^0.2.0", + "highlightjs-solidity": "^2.0.6", + "tippy.js": "^6.3.7", + "uuid": "^9.0.1" + } } diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js index 3dd96fd1..1d7d3e44 100644 --- a/packages/ui/postcss.config.js +++ b/packages/ui/postcss.config.js @@ -1,11 +1,7 @@ -const nesting = require('tailwindcss/nesting'); -const tailwindcss = require('tailwindcss'); -const autoprefixer = require('autoprefixer'); - -module.exports = { - plugins: [ - nesting, - tailwindcss, - autoprefixer, - ], -}; +export default { + plugins: { + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/ui/public/cairo.html b/packages/ui/public/cairo.html deleted file mode 100644 index 1eed027f..00000000 --- a/packages/ui/public/cairo.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - OpenZeppelin Contracts Wizard for Cairo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- OpenZeppelin - Solidity Wizard - Cairo Wizard -
-
- Forum - Docs - GitHub - Twitter -
-
- -
- -
- - - - - - - - diff --git a/packages/ui/public/embed.html b/packages/ui/public/embed.html deleted file mode 100644 index fdc273c0..00000000 --- a/packages/ui/public/embed.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - OpenZeppelin Contracts Wizard - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/ui/public/index.html b/packages/ui/public/index.html deleted file mode 100644 index 313f848e..00000000 --- a/packages/ui/public/index.html +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - OpenZeppelin Contracts Wizard - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- OpenZeppelin - Solidity Wizard - Cairo Wizard -
-
- Forum - Docs - GitHub - Twitter -
-
- -
- -
- - - - - - - - - diff --git a/packages/ui/rollup.config.mjs b/packages/ui/rollup.config.mjs deleted file mode 100644 index 2ba76443..00000000 --- a/packages/ui/rollup.config.mjs +++ /dev/null @@ -1,154 +0,0 @@ -import svelte from 'rollup-plugin-svelte'; -import commonjs from '@rollup/plugin-commonjs'; -import json from '@rollup/plugin-json'; -import resolve from '@rollup/plugin-node-resolve'; -import replace from '@rollup/plugin-replace'; -import alias from '@rollup/plugin-alias'; -import livereload from 'rollup-plugin-livereload'; -import { terser } from 'rollup-plugin-terser'; -import typescript from '@rollup/plugin-typescript'; -import styles from 'rollup-plugin-styles'; -import proc from 'child_process'; -import events from 'events'; -import serve from './rollup.server.mjs'; - -const production = !process.env.ROLLUP_WATCH; - -process.env.NODE_ENV = production ? 'production' : 'development'; - -// Watch the `public` directory and refresh the -// browser on changes when not in production -const livereloader = - !production && - livereload({ - watch: 'public', - port: 35731, - }); - -function onStartRun(cmd, ...args) { - let ran = false; - return { - async buildStart() { - if (ran) return; - const child = proc.spawn(cmd, args, { stdio: 'inherit', shell: process.platform == 'win32' }); - const [code, signal] = await events.once(child, 'exit'); - if (code || signal) { - throw new Error(`Command \`${cmd}\` failed`); - } - ran = true; - }, - }; -} - -/** @type import('rollup').RollupOptions */ -export default [ - { - input: 'src/standalone.js', - output: { - dir: 'public/build', - assetFileNames: '[name][extname]', - sourcemap: true, - }, - onwarn(warning, warn) { - if (warning.code !== 'EMPTY_BUNDLE') { - warn(warning); - } - }, - plugins: [ - styles({ - include: 'src/standalone.css', - mode: ['extract'], - url: false, - sourceMap: true, - }), - ], - }, - { - input: 'src/embed.ts', - output: { - sourcemap: true, - format: 'iife', - name: 'embed', - file: 'public/build/embed.js', - }, - plugins: [ - typescript({ - include: ['src/**/*.ts'], - sourceMap: true, - inlineSources: true, - }), - - livereloader, - - // If we're building for production (npm run build - // instead of npm run dev), minify - production && terser(), - ], - }, - { - preserveEntrySignatures: false, - input: 'src/main.ts', - output: { - sourcemap: true, - format: 'es', - dir: 'public/build', - chunkFileNames: '[name].js', - assetFileNames: '[name][extname]', - }, - plugins: [ - // Generate openzeppelin-contracts.js data file - onStartRun(...'yarn --cwd ../core prepare'.split(' ')), - - svelte(await import('./svelte.config.js')), - - styles({ - mode: ['extract', 'bundle.css'], - sourceMap: true, - }), - - alias({ - entries: { - path: 'path-browserify', - 'highlight.js/lib/languages/python': '../../node_modules/highlight.js/lib/languages/python.js', - }, - }), - - resolve({ - browser: true, - dedupe: ['svelte'], - mainFields: ['ts:main', 'module', 'main'], - preferBuiltins: false, - }), - - replace({ - preventAssignment: true, - include: '../../**/node_modules/**/*', - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), - 'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG), - }), - - json(), - - commonjs(), - - typescript({ - include: ['src/**/*.ts', '../core/src/**/*.ts', '../core-cairo/src/**/*.ts'], - sourceMap: true, - inlineSources: true, - }), - - // In dev mode, call `npm run start` once - // the bundle has been generated - !production && serve(), - - livereloader, - - // If we're building for production (npm run build - // instead of npm run dev), minify - production && terser(), - ], - watch: { - clearScreen: false, - }, - }, -]; diff --git a/packages/ui/rollup.server.mjs b/packages/ui/rollup.server.mjs deleted file mode 100644 index 33e18e92..00000000 --- a/packages/ui/rollup.server.mjs +++ /dev/null @@ -1,28 +0,0 @@ -import proc from 'child_process'; - -const state = (global.ROLLUP_SERVER = global.ROLLUP_SERVER || { - server: undefined, -}); - -export default function serve() { - function toExit() { - if (state.server) state.server.kill(0); - } - - return { - writeBundle() { - if (state.server) return; - state.server = proc.spawn( - 'npm', - ['run', 'start', '--', '--dev'], - { - stdio: ['ignore', 'inherit', 'inherit'], - shell: true, - }, - ); - - process.on('SIGTERM', toExit); - process.on('exit', toExit); - }, - }; -} diff --git a/packages/ui/src/app.d.ts b/packages/ui/src/app.d.ts new file mode 100644 index 00000000..f59b884c --- /dev/null +++ b/packages/ui/src/app.d.ts @@ -0,0 +1,12 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } +} + +export {}; diff --git a/packages/ui/src/app.html b/packages/ui/src/app.html new file mode 100644 index 00000000..eb62a058 --- /dev/null +++ b/packages/ui/src/app.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + + + + diff --git a/packages/ui/src/embed.ts b/packages/ui/src/embed.ts deleted file mode 100644 index 119c6fc7..00000000 --- a/packages/ui/src/embed.ts +++ /dev/null @@ -1,80 +0,0 @@ -import type { Message } from './post-message'; - -if (!document.currentScript || !('src' in document.currentScript)) { - throw new Error('Unknown script URL'); -} - -const currentScript = new URL(document.currentScript.src); - -const iframes = new WeakMap(); - -window.addEventListener('message', function (e: MessageEvent) { - if (e.source && e.data.kind === 'oz-wizard-resize') { - const iframe = iframes.get(e.source); - if (iframe) { - iframe.style.height = Math.ceil(e.data.height).toString() + 'px'; - } - } -}); - -onDOMContentLoaded(function () { - const wizards = document.querySelectorAll('oz-wizard'); - - for (const w of wizards) { - w.style.display = 'block'; - w.style.minHeight = '53rem'; - - const src = new URL('embed', currentScript.origin); - - setSearchParam(w, src.searchParams, 'data-lang', 'lang'); - setSearchParam(w, src.searchParams, 'data-tab', 'tab'); - const sync = w.getAttribute('data-sync-url'); - - if (sync === 'fragment') { - const fragment = window.location.hash.replace('#', ''); - if (fragment) { - src.searchParams.set('tab', fragment); - } - } - - const iframe = document.createElement('iframe'); - iframe.src = src.toString(); - iframe.style.display = 'block'; - iframe.style.border = '0'; - iframe.style.width = '100%'; - iframe.style.height = '53rem'; - - w.appendChild(iframe); - - if (iframe.contentWindow !== null) { - iframes.set(iframe.contentWindow, iframe); - } - - if (sync === 'fragment') { - window.addEventListener('message', (e: MessageEvent) => { - if (e.source && e.data.kind === 'oz-wizard-tab-change') { - if (iframe === iframes.get(e.source)) { - window.location.hash = e.data.tab; - } - } - }); - } - } -}); - -function setSearchParam(w: HTMLElement, searchParams: URLSearchParams, dataParam: string, param: string) { - const value = w.getAttribute(dataParam) ?? w.getAttribute(param); - if (value) { - searchParams.set(param, value); - } -} - -function onDOMContentLoaded(callback: () => void) { - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', callback); - } else { - callback(); - } -} - -export {}; diff --git a/packages/ui/src/icons/CheckIcon.svelte b/packages/ui/src/icons/CheckIcon.svelte deleted file mode 100644 index ec3c83a6..00000000 --- a/packages/ui/src/icons/CheckIcon.svelte +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/packages/ui/src/Dropdown.svelte b/packages/ui/src/lib/Dropdown.svelte similarity index 96% rename from packages/ui/src/Dropdown.svelte rename to packages/ui/src/lib/Dropdown.svelte index d07ef79c..4e10bc9e 100644 --- a/packages/ui/src/Dropdown.svelte +++ b/packages/ui/src/lib/Dropdown.svelte @@ -24,7 +24,7 @@