diff --git a/packages/hoppscotch-cli/README.md b/packages/hoppscotch-cli/README.md index 9e806c009..420af5315 100644 --- a/packages/hoppscotch-cli/README.md +++ b/packages/hoppscotch-cli/README.md @@ -1,4 +1,17 @@ -# Hoppscotch CLI ALPHA +
+ + Hoppscotch Logo + +
+
+ +# Hoppscotch CLI ALPHA + +
A CLI to run Hoppscotch test scripts in CI environments. @@ -33,7 +46,7 @@ hopp [options or commands] arguments #### Options: ##### `-e ` / `--env ` - - Accepts path to env.json with contents in below format: + - Accepts path to env.json with contents in below format: ```json { "ENV1":"value1", @@ -41,7 +54,7 @@ hopp [options or commands] arguments } ``` - You can now access those variables using `pw.env.get('')` - + Taking the above example, `pw.env.get("ENV1")` will return `"value1"` ## Install diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json index 34c92fb88..57e35b399 100644 --- a/packages/hoppscotch-common/package.json +++ b/packages/hoppscotch-common/package.json @@ -90,7 +90,7 @@ "vue-pdf-embed": "^1.1.4", "vue-router": "^4.0.16", "vue-tippy": "6.0.0-alpha.58", - "vuedraggable": "^4.1.0", + "vuedraggable-es": "^4.1.1", "wonka": "^4.0.15", "workbox-window": "^6.5.4", "yargs-parser": "^21.1.1" diff --git a/packages/hoppscotch-common/src/App.vue b/packages/hoppscotch-common/src/App.vue index de03b4aa4..8cf3e8e26 100644 --- a/packages/hoppscotch-common/src/App.vue +++ b/packages/hoppscotch-common/src/App.vue @@ -4,7 +4,7 @@ v-if="isLoadingInitialRoute" class="flex flex-col items-center justify-center min-h-screen" > - + diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts index 3b7ae649d..e0268dcf4 100644 --- a/packages/hoppscotch-common/src/components.d.ts +++ b/packages/hoppscotch-common/src/components.d.ts @@ -97,18 +97,6 @@ declare module '@vue/runtime-core' { HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default'] HttpTests: typeof import('./components/http/Tests.vue')['default'] HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default'] - IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] - IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default'] - IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default'] - IconLucideGlobe: typeof import('~icons/lucide/globe')['default'] - IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] - IconLucideInfo: typeof import('~icons/lucide/info')['default'] - IconLucideLayers: typeof import('~icons/lucide/layers')['default'] - IconLucideLoader: typeof import('~icons/lucide/loader')['default'] - IconLucideMinus: typeof import('~icons/lucide/minus')['default'] - IconLucideSearch: typeof import('~icons/lucide/search')['default'] - IconLucideUser: typeof import('~icons/lucide/user')['default'] - IconLucideUsers: typeof import('~icons/lucide/users')['default'] LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default'] LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default'] LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default'] diff --git a/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue b/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue index f2f63346f..a94977acf 100644 --- a/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue +++ b/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue @@ -1,5 +1,5 @@ - + diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue index f20e619cc..539d994c3 100644 --- a/packages/hoppscotch-common/src/components/app/Header.vue +++ b/packages/hoppscotch-common/src/components/app/Header.vue @@ -10,7 +10,7 @@ paddingLeft: platform.ui?.appHeader?.paddingLeft?.value, }" > -
- - - -
- +
- - - {{ t("layout.name") }} - - {{ t("support.title") }} - - - - {{ t("settings.follow") }} - - - - - - - + + + + diff --git a/packages/hoppscotch-sh-admin/package.json b/packages/hoppscotch-sh-admin/package.json new file mode 100644 index 000000000..db3751f20 --- /dev/null +++ b/packages/hoppscotch-sh-admin/package.json @@ -0,0 +1,57 @@ +{ + "name": "hoppscotch-sh-admin", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "pnpm exec npm-run-all -p -l dev:*", + "dev:vite": "vite", + "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\"../../.env\"", + "build": "vue-tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@graphql-typed-document-node/core": "^3.1.1", + "@hoppscotch/ui": "workspace:^", + "@types/cors": "^2.8.13", + "@types/express": "^4.17.15", + "@urql/vue": "^1.0.4", + "@vueuse/core": "^9.10.0", + "cors": "^2.8.5", + "express": "^4.18.2", + "express-graphql": "^0.12.0", + "graphql": "^16.6.0", + "ts-node-dev": "^2.0.0", + "unplugin-icons": "^0.14.9", + "unplugin-vue-components": "^0.21.0", + "vue": "^3.2.6", + "vue-router": "4" + }, + "devDependencies": { + "@graphql-codegen/cli": "3.0.0", + "@graphql-codegen/client-preset": "^2.0.0", + "@graphql-codegen/introspection": "3.0.0", + "@graphql-codegen/typed-document-node": "^2.3.1", + "@graphql-codegen/typescript": "3.0.0", + "@graphql-codegen/typescript-document-nodes": "3.0.0", + "@graphql-codegen/typescript-operations": "3.0.0", + "@graphql-codegen/urql-introspection": "2.2.1", + "@vitejs/plugin-vue": "^1.6.0", + "@vue/compiler-sfc": "^3.2.6", + "graphql-tag": "^2.12.6", + "npm-run-all": "^4.1.5", + "sass": "^1.57.1", + "ts-node": "^10.9.1", + "typescript": "^4.9.3", + "vite": "^2.5.1", + "vite-plugin-pages": "^0.26.0", + "vite-plugin-vue-layouts": "^0.7.0", + "vite-plugin-windicss": "^1.8.8", + "vue-tsc": "^0.3.0", + "windicss": "^3.5.6" + }, + "prettier": { + "singleQuote": true, + "semi": true + } +} diff --git a/packages/hoppscotch-sh-admin/public/cover.jpg b/packages/hoppscotch-sh-admin/public/cover.jpg new file mode 100644 index 000000000..1a514cd31 Binary files /dev/null and b/packages/hoppscotch-sh-admin/public/cover.jpg differ diff --git a/packages/hoppscotch-sh-admin/public/favicon.ico b/packages/hoppscotch-sh-admin/public/favicon.ico new file mode 100644 index 000000000..df36fcfb7 Binary files /dev/null and b/packages/hoppscotch-sh-admin/public/favicon.ico differ diff --git a/packages/hoppscotch-sh-admin/public/vite.svg b/packages/hoppscotch-sh-admin/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/packages/hoppscotch-sh-admin/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/hoppscotch-sh-admin/src/App.vue b/packages/hoppscotch-sh-admin/src/App.vue new file mode 100644 index 000000000..630f83112 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/App.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts new file mode 100644 index 000000000..f6b43a8b5 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/components.d.ts @@ -0,0 +1,52 @@ +// generated by unplugin-vue-components +// We suggest you to commit this file into source control +// Read more: https://github.com/vuejs/core/pull/3399 +import '@vue/runtime-core' + +export {} + +declare module '@vue/runtime-core' { + export interface GlobalComponents { + AppHeader: typeof import('./components/app/Header.vue')['default'] + AppModal: typeof import('./components/app/Modal.vue')['default'] + AppSidebar: typeof import('./components/app/Sidebar.vue')['default'] + ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default'] + ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default'] + HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand'] + IconLucideBell: typeof import('~icons/lucide/bell')['default'] + IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default'] + IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default'] + IconLucideLock: typeof import('~icons/lucide/lock')['default'] + IconLucideMenu: typeof import('~icons/lucide/menu')['default'] + IconLucideSettings: typeof import('~icons/lucide/settings')['default'] + IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default'] + IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default'] + IconLucideUser: typeof import('~icons/lucide/user')['default'] + IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default'] + IconLucideUsers: typeof import('~icons/lucide/users')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default'] + SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default'] + SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default'] + SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default'] + SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default'] + SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default'] + SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default'] + SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default'] + SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default'] + SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default'] + SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default'] + SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default'] + SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default'] + SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default'] + SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default'] + SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default'] + SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default'] + SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default'] + SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default'] + SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default'] + TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default'] + } + +} diff --git a/packages/hoppscotch-sh-admin/src/components/app/Header.vue b/packages/hoppscotch-sh-admin/src/components/app/Header.vue new file mode 100644 index 000000000..b9eaf6bd3 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue @@ -0,0 +1,92 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/components/app/Modal.vue b/packages/hoppscotch-sh-admin/src/components/app/Modal.vue new file mode 100644 index 000000000..92256ed7f --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/components/app/Modal.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue new file mode 100644 index 000000000..72945df1b --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue @@ -0,0 +1,100 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue b/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue new file mode 100644 index 000000000..d26c77163 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue @@ -0,0 +1,83 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/composables/useSidebar.ts b/packages/hoppscotch-sh-admin/src/composables/useSidebar.ts new file mode 100644 index 000000000..26aa607bc --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/composables/useSidebar.ts @@ -0,0 +1,13 @@ +import { ref } from 'vue'; + +/** isOpen is used to indicate whether the sidebar is now visible on the screen */ +const isOpen = ref(false); +/** isExpanded is used to indicate whether the sidebar is now expanded to also include page names or the sidebar is compressed to show just the icons */ +const isExpanded = ref(true); + +export function useSidebar() { + return { + isOpen, + isExpanded, + }; +} diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/GetCollectionChildren.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/GetCollectionChildren.graphql new file mode 100644 index 000000000..0dac0aa74 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/GetCollectionChildren.graphql @@ -0,0 +1,8 @@ +query GetCollectionChildren($collectionID: ID!, $cursor: String) { + collection(collectionID: $collectionID) { + children(cursor: $cursor) { + id + title + } + } +} diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql new file mode 100644 index 000000000..0ebb2f444 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql @@ -0,0 +1,9 @@ +query Me { + me { + uid + displayName + photoURL + isAdmin + createdOn + } +} diff --git a/packages/hoppscotch-sh-admin/src/layouts/default.vue b/packages/hoppscotch-sh-admin/src/layouts/default.vue new file mode 100644 index 000000000..80f6dbbfa --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/layouts/default.vue @@ -0,0 +1,15 @@ + diff --git a/packages/hoppscotch-sh-admin/src/layouts/empty.vue b/packages/hoppscotch-sh-admin/src/layouts/empty.vue new file mode 100644 index 000000000..a14d0c32c --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/layouts/empty.vue @@ -0,0 +1,5 @@ + diff --git a/packages/hoppscotch-sh-admin/src/main.ts b/packages/hoppscotch-sh-admin/src/main.ts new file mode 100644 index 000000000..3e9c28958 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/main.ts @@ -0,0 +1,45 @@ +import { createApp } from 'vue'; +import urql, { createClient } from '@urql/vue'; +import App from './App.vue'; +import '../assets/scss/themes.scss'; +import '../assets/scss/styles.scss'; +import '@hoppscotch/ui/style.css'; +import 'virtual:windi.css'; +import { + createRouter, + createWebHashHistory, + createWebHistory, +} from 'vue-router'; + +import { setupLayouts } from 'virtual:generated-layouts'; +import generatedRoutes from 'virtual:generated-pages'; + +import { plugin as HoppUIPlugin, HoppUIPluginOptions } from '@hoppscotch/ui'; + +const options: HoppUIPluginOptions = { + /* Define options here */ +}; + +const routes = setupLayouts(generatedRoutes); + +const app = createApp(App).use( + urql, + createClient({ + url: import.meta.env.VITE_BACKEND_GQL_URL, + fetchOptions: () => { + return { + credentials: 'include', + }; + }, + }) +); + +app.use(HoppUIPlugin, options); +app.use( + createRouter({ + history: createWebHistory(), + routes, + }) +); + +app.mount('#app'); diff --git a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue new file mode 100644 index 000000000..fee72ce44 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue @@ -0,0 +1,83 @@ + diff --git a/packages/hoppscotch-sh-admin/src/pages/index.vue b/packages/hoppscotch-sh-admin/src/pages/index.vue new file mode 100644 index 000000000..153bc8855 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/index.vue @@ -0,0 +1,114 @@ + + + + + +meta: + layout: empty + diff --git a/packages/hoppscotch-sh-admin/src/pages/settings.vue b/packages/hoppscotch-sh-admin/src/pages/settings.vue new file mode 100644 index 000000000..98edf30cf --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/settings.vue @@ -0,0 +1,5 @@ + diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue b/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue new file mode 100644 index 000000000..7496247ea --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/details.vue b/packages/hoppscotch-sh-admin/src/pages/teams/details.vue new file mode 100644 index 000000000..38e057d4a --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/teams/details.vue @@ -0,0 +1,144 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue new file mode 100644 index 000000000..4d983581b --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue @@ -0,0 +1,173 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/pages/users/AddUser.vue b/packages/hoppscotch-sh-admin/src/pages/users/AddUser.vue new file mode 100644 index 000000000..dd31e1e00 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/users/AddUser.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/packages/hoppscotch-sh-admin/src/pages/users/details.vue b/packages/hoppscotch-sh-admin/src/pages/users/details.vue new file mode 100644 index 000000000..9bf062571 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/users/details.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue new file mode 100644 index 000000000..6876213f8 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue @@ -0,0 +1,265 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue new file mode 100644 index 000000000..8a611379c --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue @@ -0,0 +1,226 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/shims-vue.d.ts b/packages/hoppscotch-sh-admin/src/shims-vue.d.ts new file mode 100644 index 000000000..87bc1fa54 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/shims-vue.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import { defineComponent } from 'vue'; + const Component: ReturnType; + export default Component; +} diff --git a/packages/hoppscotch-sh-admin/src/vite-env.d.ts b/packages/hoppscotch-sh-admin/src/vite-env.d.ts new file mode 100644 index 000000000..9d639f64f --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/vite-env.d.ts @@ -0,0 +1,3 @@ +/// +/// +/// diff --git a/packages/hoppscotch-sh-admin/tsconfig.json b/packages/hoppscotch-sh-admin/tsconfig.json new file mode 100644 index 000000000..20d96d963 --- /dev/null +++ b/packages/hoppscotch-sh-admin/tsconfig.json @@ -0,0 +1,91 @@ +// { +// "compilerOptions": { +// "target": "ESNext", +// "useDefineForClassFields": true, +// "module": "ESNext", +// "moduleResolution": "Node", +// "strict": true, +// "jsx": "preserve", +// "resolveJsonModule": true, +// "isolatedModules": true, +// "esModuleInterop": true, +// "lib": ["ESNext", "DOM"], +// "skipLibCheck": true, +// "noEmit": true +// }, +// "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], +// "references": [{ "path": "./tsconfig.node.json" }] +// } + +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig.json to read more about this file */ + + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */ + "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ + // "lib": [], /* Specify library files to be included in the compilation. */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ + // "declaration": true, /* Generates corresponding '.d.ts' file. */ + // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ + // "outFile": "./", /* Concatenate and emit output to single file. */ + // "outDir": "./", /* Redirect output structure to the directory. */ + // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "composite": true, /* Enable project compilation */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + // "removeComments": true, /* Do not emit comments to output. */ + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + + /* Strict Type-Checking Options */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ + + /* Module Resolution Options */ + // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + + /* Source Map Options */ + // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + + /* Experimental Options */ + "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + + /* Advanced Options */ + "skipLibCheck": true, /* Skip type checking of declaration files. */ + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + } +} diff --git a/packages/hoppscotch-sh-admin/tsconfig.node.json b/packages/hoppscotch-sh-admin/tsconfig.node.json new file mode 100644 index 000000000..9d31e2aed --- /dev/null +++ b/packages/hoppscotch-sh-admin/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/hoppscotch-sh-admin/vite.config.ts b/packages/hoppscotch-sh-admin/vite.config.ts new file mode 100644 index 000000000..c5eae879e --- /dev/null +++ b/packages/hoppscotch-sh-admin/vite.config.ts @@ -0,0 +1,51 @@ +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import { FileSystemIconLoader } from 'unplugin-icons/loaders'; +import Icons from 'unplugin-icons/vite'; +import IconResolver from 'unplugin-icons/resolver'; +import Components from 'unplugin-vue-components/vite'; +import WindiCSS from 'vite-plugin-windicss'; +import Pages from 'vite-plugin-pages'; +import Layouts from 'vite-plugin-vue-layouts'; +import path from 'path'; + +// https://vitejs.dev/config/ +export default defineConfig({ + envDir: path.resolve(__dirname, "../../"), + server: { + port: 3100, + }, + plugins: [ + vue(), + Pages({ + dirs: './src/pages', + routeStyle: 'nuxt', + }), + Layouts({ + defaultLayout: 'default', + layoutsDirs: 'src/layouts', + }), + WindiCSS({ + root: path.resolve(__dirname), + }), + Components({ + dts: './src/components.d.ts', + dirs: ['./src/components', '../hoppscotch-ui/src/components'], + directoryAsNamespace: true, + resolvers: [ + IconResolver({ + prefix: 'icon', + customCollections: ['hopp', 'auth', 'brands'], + }), + (compName: string) => { + if (compName.startsWith("Hopp")) + return { name: compName, from: "@hoppscotch/ui" } + else return undefined + }, + ], + }), + Icons({ + compiler: 'vue3', + }), + ], +}); diff --git a/packages/hoppscotch-sh-admin/windi.config.ts b/packages/hoppscotch-sh-admin/windi.config.ts new file mode 100644 index 000000000..99de3576c --- /dev/null +++ b/packages/hoppscotch-sh-admin/windi.config.ts @@ -0,0 +1,65 @@ +import { defineConfig } from 'windicss/helpers'; + +export default defineConfig({ + theme: { + container: { + center: true, + }, + extend: { + inset: { + upperPrimaryStickyFold: 'var(--upper-primary-sticky-fold)', + upperSecondaryStickyFold: 'var(--upper-secondary-sticky-fold)', + upperTertiaryStickyFold: 'var(--upper-tertiary-sticky-fold)', + upperMobilePrimaryStickyFold: 'var(--upper-mobile-primary-sticky-fold)', + upperMobileSecondaryStickyFold: + 'var(--upper-mobile-secondary-sticky-fold)', + upperMobileStickyFold: 'var(--upper-mobile-sticky-fold)', + upperMobileTertiaryStickyFold: + 'var(--upper-mobile-tertiary-sticky-fold)', + lowerPrimaryStickyFold: 'var(--lower-primary-sticky-fold)', + lowerSecondaryStickyFold: 'var(--lower-secondary-sticky-fold)', + lowerTertiaryStickyFold: 'var(--lower-tertiary-sticky-fold)', + sidebarPrimaryStickyFold: 'var(--sidebar-primary-sticky-fold)', + }, + colors: { + primary: 'var(--primary-color)', + primaryLight: 'var(--primary-light-color)', + primaryDark: 'var(--primary-dark-color)', + primaryContrast: 'var(--primary-contrast-color)', + secondary: 'var(--secondary-color)', + secondaryLight: 'var(--secondary-light-color)', + secondaryDark: 'var(--secondary-dark-color)', + accent: 'var(--accent-color)', + accentLight: 'var(--accent-light-color)', + accentDark: 'var(--accent-dark-color)', + accentContrast: 'var(--accent-contrast-color)', + divider: 'var(--divider-color)', + dividerLight: 'var(--divider-light-color)', + dividerDark: 'var(--divider-dark-color)', + error: 'var(--error-color)', + tooltip: 'var(--tooltip-color)', + popover: 'var(--popover-color)', + gradientFrom: 'var(--gradient-from-color)', + gradientVia: 'var(--gradient-via-color)', + gradientTo: 'var(--gradient-to-color)', + }, + fontFamily: { + sans: 'var(--font-sans)', + mono: 'var(--font-mono)', + icon: 'var(--font-icon)', + }, + fontSize: { + tiny: 'var(--font-size-tiny)', + body: 'var(--font-size-body)', + }, + lineHeight: { + body: 'var(--line-height-body)', + }, + cursor: { + nsResize: 'ns-resize', + grab: 'grab', + grabbing: 'grabbing', + }, + }, + }, +}); diff --git a/packages/hoppscotch-ui/README.md b/packages/hoppscotch-ui/README.md index 8f1885799..765dd7207 100644 --- a/packages/hoppscotch-ui/README.md +++ b/packages/hoppscotch-ui/README.md @@ -1,24 +1,15 @@ -
- - - - - - - + +
-
- -# Hoppscotch UI +# Hoppscotch UI ALPHA
@@ -28,7 +19,7 @@ Welcome to hoppscotch-ui, a collection of presentational components for our web To use the components in project, simply name the component with `directory` name as alias: -For example `Primary Button` component is in `button` directory and the file name is `Primary.vue`. So, use that you have to write `` +For example `Primary Button` component is in `button` directory and the file name is `Primary.vue`. So, use that you have to write `` ## Histoire diff --git a/packages/hoppscotch-ui/histoire.config.ts b/packages/hoppscotch-ui/histoire.config.ts index 88fb23b11..5ba0ebc71 100644 --- a/packages/hoppscotch-ui/histoire.config.ts +++ b/packages/hoppscotch-ui/histoire.config.ts @@ -9,9 +9,12 @@ export default defineConfig({ light: "/logo.png", dark: "/logo.png", }, - // logoHref: "https://ui.hoppscotch.io", + logoHref: "https://ui.hoppscotch.io", favicon: 'favicon.ico', }, setupFile: "histoire.setup.ts", plugins: [HstVue()], + viteIgnorePlugins: [ + 'vite:dts' + ] }) diff --git a/packages/hoppscotch-ui/package.json b/packages/hoppscotch-ui/package.json index 66dd846f1..4a3c91c89 100644 --- a/packages/hoppscotch-ui/package.json +++ b/packages/hoppscotch-ui/package.json @@ -2,13 +2,20 @@ "name": "@hoppscotch/ui", "private": true, "version": "0.0.1", + "type": "module", "scripts": { "build": "vite build", "story:dev": "histoire dev", "story:build": "histoire build", "story:preview": "histoire preview", + "do-build-prod": "pnpm run build", + "postinstall": "pnpm run build", "do-build-ui": "pnpm run story:build" }, + "peerDependencies": { + "vue": "^3.2.25", + "vue-router": "^4.0.16" + }, "dependencies": { "@hoppscotch/vue-toasted": "^0.1.0", "@lezer/highlight": "^1.0.0", @@ -30,11 +37,10 @@ "url": "^0.11.0", "util": "^0.12.4", "vite-plugin-eslint": "^1.8.1", - "vue": "^3.2.25", "vue-github-button": "^3.0.3", "vue-router": "^4.0.16", "vue-tippy": "6.0.0-alpha.58", - "vuedraggable": "^4.1.0" + "vuedraggable-es": "^4.1.1" }, "devDependencies": { "@esbuild-plugins/node-globals-polyfill": "^0.1.1", @@ -60,10 +66,11 @@ "rollup-plugin-polyfill-node": "^0.10.1", "sass": "^1.53.0", "typescript": "^4.5.4", - "unplugin-icons": "^0.14.9", + "unplugin-icons": "^0.15.3", "unplugin-vue-components": "^0.21.0", "vite": "^3.2.3", "vite-plugin-checker": "^0.5.1", + "vite-plugin-dts": "2.0.0-beta.3", "vite-plugin-fonts": "^0.6.0", "vite-plugin-html-config": "^1.0.10", "vite-plugin-inspect": "^0.7.4", @@ -72,12 +79,20 @@ "vite-plugin-pwa": "^0.13.1", "vite-plugin-vue-layouts": "^0.7.0", "vite-plugin-windicss": "^1.8.8", + "vue": "^3.2.25", "vue-loader": "^16.8.3", + "vue-router": "^4.0.16", "vue-tsc": "^0.38.2", "windicss": "^3.5.6" }, "files": [ - "src", "dist" - ] + ], + "module": "./dist/index.es.js", + "main": "./dist/index.es.js", + "exports": { + ".": "./dist/index.es.js", + "./style.css": "./dist/style.css" + }, + "types": "./dist/index.d.ts" } diff --git a/packages/hoppscotch-ui/src/assets/scss/styles.scss b/packages/hoppscotch-ui/src/assets/scss/styles.scss index b38b0c9c7..8605dab2a 100644 --- a/packages/hoppscotch-ui/src/assets/scss/styles.scss +++ b/packages/hoppscotch-ui/src/assets/scss/styles.scss @@ -1,64 +1,3 @@ -* { - @apply backface-hidden; - @apply before:backface-hidden; - @apply after:backface-hidden; - @apply selection:bg-accentDark; - @apply selection:text-accentContrast; -} - -:root { - @apply antialiased; - accent-color: var(--accent-color); - font-variant-ligatures: common-ligatures; -} - -::-webkit-scrollbar-track { - @apply bg-transparent; - @apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0; -} - -::-webkit-scrollbar-thumb { - @apply bg-divider bg-clip-content; - @apply rounded-full; - @apply border-solid border-transparent border-4; - @apply hover:bg-dividerDark; - @apply hover:bg-clip-content; -} - -::-webkit-scrollbar { - @apply w-4; - @apply h-0; -} - -input::placeholder, -textarea::placeholder, -.cm-placeholder { - @apply text-secondary; - @apply opacity-50; -} - -input, -textarea { - @apply text-secondaryDark; - @apply font-medium; -} - -html { - scroll-behavior: smooth; -} - -body { - @apply bg-primary; - @apply text-secondary text-body; - @apply font-medium; - @apply select-none; - @apply overflow-x-hidden; - @apply leading-body; - animation: fade 300ms forwards; - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; -} - @keyframes fade { 0% { @apply opacity-0; @@ -130,89 +69,6 @@ a { } } -.cm-tooltip { - .tippy-box { - @apply shadow-none; - @apply fixed; - @apply inline-flex; - @apply -mt-8; - } -} - -.tippy-box[data-theme~="tooltip"] { - @apply bg-tooltip; - @apply border-solid border-tooltip; - @apply rounded; - @apply shadow; - - .tippy-content { - @apply flex; - @apply text-tiny text-primary; - @apply font-semibold; - @apply py-1 px-2; - @apply truncate; - @apply leading-normal; - @apply items-center; - - kbd { - @apply hidden; - @apply font-sans; - @apply bg-gray-500/45; - @apply text-primaryLight; - @apply rounded-sm; - @apply px-1; - @apply my-0 ml-1; - @apply truncate; - @apply sm:inline-flex; - } - - .env-icon { - @apply transition; - @apply inline-flex; - @apply items-center; - } - } - - .tippy-svg-arrow { - svg:first-child { - @apply fill-tooltip; - } - - svg:last-child { - @apply fill-tooltip; - } - } -} - -.tippy-box[data-theme~="popover"] { - @apply bg-popover; - @apply border-solid border-dividerDark; - @apply rounded; - @apply shadow-lg; - - .tippy-content { - @apply flex flex-col; - @apply max-h-56; - @apply items-stretch; - @apply overflow-y-auto; - @apply text-secondary text-body; - @apply p-2; - @apply leading-normal; - @apply focus:outline-none; - scroll-behavior: smooth; - } - - .tippy-svg-arrow { - svg:first-child { - @apply fill-dividerDark; - } - - svg:last-child { - @apply fill-popover; - } - } -} - [data-v-tippy] { @apply flex flex-1; } @@ -246,243 +102,6 @@ hr { @apply focus-visible:border-dividerDark; } -input, -select, -textarea, -button { - @apply truncate; - @apply transition; - @apply text-body; - @apply leading-body; - @apply focus:outline-none; - @apply disabled:cursor-not-allowed; -} - -.input[type="file"], -.input[type="radio"], -#installPWA { - @apply hidden; -} - -.floating-input ~ label { - @apply absolute; - @apply px-2 py-0.5; - @apply m-2; - @apply rounded; - @apply transition; - @apply origin-top-left; -} - -.floating-input:focus-within ~ label, -.floating-input:not(:placeholder-shown) ~ label { - @apply bg-primary; - @apply transform; - @apply origin-top-left; - @apply scale-75; - @apply translate-x-1 -translate-y-4; -} - -.floating-input:focus-within ~ label { - @apply text-secondaryDark; -} - -.floating-input ~ .end-actions { - @apply absolute; - @apply right-0.2; - @apply inset-y-0; - @apply flex; - @apply items-center; -} - -.floating-input:has(~ .end-actions) { - @apply pr-12; -} - -pre.ace_editor { - @apply font-mono; - @apply resize-none; - @apply z-0; -} - -.select { - @apply appearance-none; - @apply cursor-pointer; - - &::-ms-expand { - @apply hidden; - } -} - -.select-wrapper { - @apply flex flex-1; - @apply relative; - @apply after:absolute; - @apply after:flex; - @apply after:inset-y-0; - @apply after:items-center; - @apply after:justify-center; - @apply after:pointer-events-none; - @apply after:font-icon; - @apply after:text-secondaryLight; - @apply after:right-3; - @apply after:content-["\e313"]; -} - -.info-response { - @apply text-pink-500; -} - -.success-response { - @apply text-green-500; -} - -.redir-response { - @apply text-yellow-500; -} - -.cl-error-response { - @apply text-red-500; -} - -.sv-error-response { - @apply text-red-600; -} - -.missing-data-response { - @apply text-secondaryLight; -} - -.toasted-container { - @apply max-w-md; - - .toasted { - &.toasted-primary { - @apply px-4 py-2; - @apply bg-tooltip; - @apply border-secondaryDark; - @apply text-primary text-body; - @apply justify-between; - @apply shadow-lg; - @apply font-semibold; - @apply transition; - @apply leading-body; - @apply sm:rounded; - @apply sm:border; - - .action { - @apply relative; - @apply flex flex-shrink-0; - @apply text-body; - @apply px-4; - @apply my-1; - @apply ml-auto; - @apply normal-case; - @apply font-semibold; - @apply leading-body; - @apply tracking-normal; - @apply rounded; - @apply last:ml-4; - @apply sm:ml-8; - @apply before:absolute; - @apply before:bg-current; - @apply before:opacity-10; - @apply before:inset-0; - @apply before:transition; - @apply before:content-DEFAULT; - @apply hover:no-underline; - @apply hover:before:opacity-20; - } - } - - &.info { - @apply bg-accent; - @apply text-accentContrast; - @apply border-accentDark; - } - - &.error { - @apply bg-red-200; - @apply text-red-800; - @apply border-red-400; - } - - &.success { - @apply bg-green-200; - @apply text-green-800; - @apply border-green-400; - } - } -} - -.smart-splitter .splitpanes__splitter { - @apply relative; - @apply before:absolute; - @apply before:inset-0; - @apply before:bg-accentLight; - @apply before:opacity-0; - @apply before:z-20; - @apply before:transition; - @apply before:content-DEFAULT; - @apply hover:before:opacity-100; -} - -.no-splitter .splitpanes__splitter { - @apply relative; -} - -.smart-splitter.splitpanes--vertical > .splitpanes__splitter { - @apply w-0; - @apply before:-left-0.5; - @apply before:-right-0.5; - @apply before:h-full; - @apply bg-divider; -} - -.smart-splitter.splitpanes--horizontal > .splitpanes__splitter { - @apply h-0; - @apply before:-top-0.5; - @apply before:-bottom-0.5; - @apply before:w-full; - @apply bg-divider; -} - -.no-splitter.splitpanes--vertical > .splitpanes__splitter { - @apply w-0; - @apply pointer-events-none; - @apply bg-dividerLight; -} - -.no-splitter.splitpanes--horizontal > .splitpanes__splitter { - @apply h-0; - @apply pointer-events-none; - @apply bg-dividerLight; -} - -.cm-focused { - @apply select-auto; - @apply outline-none #{!important}; - - .cm-activeLine { - @apply bg-primaryLight; - } - - .cm-activeLineGutter { - @apply bg-primaryDark; - } -} - -.cm-editor { - .cm-line::selection { - @apply bg-accentDark #{!important}; - @apply text-accentContrast #{!important}; - } - - .cm-line ::selection { - @apply bg-accentDark #{!important}; - @apply text-accentContrast #{!important}; - } -} - .shortcut-key { @apply inline-flex; @apply font-sans; @@ -499,62 +118,3 @@ pre.ace_editor { @apply shadow-sm; @apply - - - + ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button"> + + {{ label }}
- + {{ key }}
- - + + - + diff --git a/packages/hoppscotch-ui/src/components/smart/Tabs.vue b/packages/hoppscotch-ui/src/components/smart/Tabs.vue index 54623cd83..5105e1a42 100644 --- a/packages/hoppscotch-ui/src/components/smart/Tabs.vue +++ b/packages/hoppscotch-ui/src/components/smart/Tabs.vue @@ -212,8 +212,8 @@ const selectTab = (id: string) => { @apply inline-flex; @apply items-center; @apply justify-center; - @apply w-5; - @apply h-4; + @apply px-1 py-0.75; + @apply min-w-4; @apply ml-2; @apply text-8px; @apply border border-divider; diff --git a/packages/hoppscotch-ui/src/components/smart/Windows.vue b/packages/hoppscotch-ui/src/components/smart/Windows.vue index 9b142a554..15e4cb549 100644 --- a/packages/hoppscotch-ui/src/components/smart/Windows.vue +++ b/packages/hoppscotch-ui/src/components/smart/Windows.vue @@ -1,71 +1,37 @@ + diff --git a/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue b/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue index 61be821fa..e4ee06227 100644 --- a/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue +++ b/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue @@ -1,28 +1,21 @@ diff --git a/packages/hoppscotch-ui/src/stories/Checkbox.story.vue b/packages/hoppscotch-ui/src/stories/Checkbox.story.vue index bfc1c37fa..77c7a898d 100644 --- a/packages/hoppscotch-ui/src/stories/Checkbox.story.vue +++ b/packages/hoppscotch-ui/src/stories/Checkbox.story.vue @@ -1,12 +1,14 @@ diff --git a/packages/hoppscotch-ui/src/stories/Item.story.vue b/packages/hoppscotch-ui/src/stories/Item.story.vue index 875f460ef..1af65a19c 100644 --- a/packages/hoppscotch-ui/src/stories/Item.story.vue +++ b/packages/hoppscotch-ui/src/stories/Item.story.vue @@ -1,7 +1,11 @@ + + diff --git a/packages/hoppscotch-ui/src/stories/Link.story.vue b/packages/hoppscotch-ui/src/stories/Link.story.vue index 74f579d5a..e83d6feec 100644 --- a/packages/hoppscotch-ui/src/stories/Link.story.vue +++ b/packages/hoppscotch-ui/src/stories/Link.story.vue @@ -1,18 +1,20 @@ diff --git a/packages/hoppscotch-ui/src/stories/Modal.story.vue b/packages/hoppscotch-ui/src/stories/Modal.story.vue index ebfb081c5..34e50fcb0 100644 --- a/packages/hoppscotch-ui/src/stories/Modal.story.vue +++ b/packages/hoppscotch-ui/src/stories/Modal.story.vue @@ -1,15 +1,11 @@ diff --git a/packages/hoppscotch-ui/src/stories/Radio.story.vue b/packages/hoppscotch-ui/src/stories/Radio.story.vue index 778065843..1d9af6978 100644 --- a/packages/hoppscotch-ui/src/stories/Radio.story.vue +++ b/packages/hoppscotch-ui/src/stories/Radio.story.vue @@ -1,16 +1,17 @@ diff --git a/packages/hoppscotch-ui/src/stories/Tab.story.vue b/packages/hoppscotch-ui/src/stories/Tab.story.vue index 28415baec..dd0484073 100644 --- a/packages/hoppscotch-ui/src/stories/Tab.story.vue +++ b/packages/hoppscotch-ui/src/stories/Tab.story.vue @@ -1,19 +1,20 @@