diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 19095cc..738ec89 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -45,7 +45,8 @@ "bradlc.vscode-tailwindcss", "pranaygp.vscode-css-peek", "codezombiech.gitignore", - "github.vscode-github-actions" + "github.vscode-github-actions", + "ms-playwright.playwright" ] } }, @@ -55,4 +56,4 @@ "onAutoForward": "notify" } } -} +} \ No newline at end of file diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 4de4d2b..0000000 --- a/.eslintignore +++ /dev/null @@ -1,6 +0,0 @@ -.vscode -.pnpm-store -.nx -pnpm-*.yaml - -node_modules diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index adf22fb..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "root": true, - "ignorePatterns": [ - "**/*" - ], - "plugins": [ - "@nx" - ], - "overrides": [ - { - "files": [ - "*.ts", - "*.tsx", - "*.js", - "*.jsx" - ], - "rules": { - "@nx/enforce-module-boundaries": [ - "error", - { - "enforceBuildableLibDependency": true, - "allow": [], - "depConstraints": [ - { - "sourceTag": "*", - "onlyDependOnLibsWithTags": [ - "*" - ] - } - ] - } - ] - } - }, - { - "files": [ - "*.ts", - "*.tsx" - ], - "extends": [ - "plugin:@nx/typescript" - ], - "rules": {} - }, - { - "files": [ - "*.js", - "*.jsx" - ], - "extends": [ - "plugin:@nx/javascript" - ], - "rules": {} - } - ] -} \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..7f442bd --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,59 @@ +# Pull request title + +| Status | Type | Env Vars Change | +| :--------: | :---------------------------------: | :-------------: | +| Ready/Hold | Feature/Bug/Tooling/Refactor/Hotfix | Yes/No | + +> ⚠️ NOTE: + +## Problem + + + +- problem 1 +- problem 2 + .... + +## Solution + + + +- solution 1 +- solution 2 + .... + +## Test results + + + +## Other changes + +- change 1 +- change 2 + .... + +## Deploy Notes + + + + +**New environment variables**: + +- `env var` : env var details + + +**New scripts**: + +- `script` : script (DB migrations, etc) details + + +**New dependencies**: + +- `dependency` : dependency details + + +**New dev dependencies**: + +- `dependency` : dependency details diff --git a/.github/instructions/PullRequest.instructions.md b/.github/instructions/PullRequest.instructions.md new file mode 100644 index 0000000..5bb5961 --- /dev/null +++ b/.github/instructions/PullRequest.instructions.md @@ -0,0 +1,73 @@ +--- +applyTo: '**' +--- + +Always ask for PR target branch(upstream), and the allowed targets branches are "development" and "main" branch +Always ask for the commits to be added to the PR in comma separated format and display the most reset commits using the following format: +`: ` +Analyze the selected commits by id when generating the PR description +PR title must be a summary of all the selected commit messages with emoji +PR description must be generated as MD code snippet +Always Use the following template when generating PR(Pull Request) description + +```md +# + +| Status | Type | Env Vars Change | +| :--------: | :---------------------------------: | :-------------: | +| Ready/Hold | Feature/Bug/Tooling/Refactor/Hotfix | Yes/No | + +> ⚠️ NOTE: + +## Problem + + + +- problem 1 +- problem 2 + .... + +## Solution + + + +- solution 1 +- solution 2 + .... + +## Test results + + + +## Other changes + +- change 1 +- change 2 + .... + +## Deploy Notes + + + + +**New environment variables **: + +- `env var` : env var details + + +**New scripts**: + +- `script` : script (DB migrations, etc) details + + +**New dependencies**: + +- `dependency` : dependency details + + +**New dev dependencies**: + +- `dependency` : dependency details +``` diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml new file mode 100644 index 0000000..2e0a65b --- /dev/null +++ b/.github/workflows/verify.yml @@ -0,0 +1,36 @@ +name: Verify + +env: + NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} + +on: + push: + branches: + - main + pull_request: +permissions: + actions: read + contents: read + +jobs: + main: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - uses: pnpm/action-setup@v4 + # Cache node_modules + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'pnpm' + + - run: pnpm install --no-frozen-lockfile + - uses: nrwl/nx-set-shas@v4 + + # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud + # - run: pnpm exec nx-cloud record -- echo Hello World + # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected + - run: pnpm build:all diff --git a/.gitignore b/.gitignore index c1719dd..eb11138 100644 --- a/.gitignore +++ b/.gitignore @@ -91,6 +91,10 @@ out .nuxt dist +# Documentations / Demos +demos/out +demos/packages.json + # Gatsby files .cache/ # Comment in the public line in if your project uses Gatsby and not Next.js @@ -163,5 +167,8 @@ testem.log tmp /out-tsc +.nx .nx/cache .nx/workspace-data +.cursor +Icon diff --git a/.prettierignore b/.prettierignore index 4eb1afa..185ed1e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,7 @@ .pnpm-store .nx pnpm-*.yaml +dist +*.html +*.json +.prettierrc diff --git a/.prettierrc b/.prettierrc index 70174c0..638c890 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "semi": false, "singleQuote": true, "trailingComma": "none", - "endOfLine": "lf" -} + "endOfLine": "lf", + "tabWidth": 2 +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 8f226a4..511438b 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -15,8 +15,6 @@ "nrwl.angular-console", "stringham.move-ts", "pmneo.tsimporter", - "wallabyjs.quokka-vscode", - "wallabyjs.console-ninja", "antfu.vite", "mhutchie.git-graph", "shardulm94.trailing-spaces", @@ -34,6 +32,7 @@ "bradlc.vscode-tailwindcss", "pranaygp.vscode-css-peek", "codezombiech.gitignore", - "github.vscode-github-actions" + "github.vscode-github-actions", + "ms-playwright.playwright" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index e84a57e..a3f0ad9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,6 +4,11 @@ "editor.formatOnSave": true, "files.autoSaveWhenNoErrors": true, "files.autoSaveWorkspaceFilesOnly": true, + "prettier.endOfLine": "lf", + "prettier.semi": false, + "prettier.singleQuote": true, + "prettier.trailingComma": "none", + "prettier.tabWidth": 2, "git.branchProtection": [ "main" ], @@ -14,6 +19,7 @@ "cSpell.words": [ "arcstack", "factman", + "webapi", "webapis" ], "typescript.tsdk": "node_modules/typescript/lib", @@ -26,4 +32,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/demos/.gitignore b/demos/.gitignore new file mode 100644 index 0000000..195d9c7 --- /dev/null +++ b/demos/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local +packages.json + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/demos/README.md b/demos/README.md new file mode 100644 index 0000000..86b2b11 --- /dev/null +++ b/demos/README.md @@ -0,0 +1,75 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## React Compiler + +The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information. + +Note: This will impact Vite dev & build performances. + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: + +```js +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + // Other configs... + + // Remove tseslint.configs.recommended and replace with this + tseslint.configs.recommendedTypeChecked, + // Alternatively, use this for stricter rules + tseslint.configs.strictTypeChecked, + // Optionally, add this for stylistic rules + tseslint.configs.stylisticTypeChecked, + + // Other configs... + ], + languageOptions: { + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + // other options... + }, + }, +]) +``` + +You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: + +```js +// eslint.config.js +import reactX from 'eslint-plugin-react-x' +import reactDom from 'eslint-plugin-react-dom' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + // Other configs... + // Enable lint rules for React + reactX.configs['recommended-typescript'], + // Enable lint rules for React DOM + reactDom.configs.recommended, + ], + languageOptions: { + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + // other options... + }, + }, +]) +``` diff --git a/demos/eslint.config.js b/demos/eslint.config.js new file mode 100644 index 0000000..5e6b472 --- /dev/null +++ b/demos/eslint.config.js @@ -0,0 +1,23 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + }, +]) diff --git a/demos/index.html b/demos/index.html new file mode 100644 index 0000000..0c95ba0 --- /dev/null +++ b/demos/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + Web APIs Demo - @ArcStackLab + + + + +
+ + + + diff --git a/demos/package.json b/demos/package.json new file mode 100644 index 0000000..30b7060 --- /dev/null +++ b/demos/package.json @@ -0,0 +1,35 @@ +{ + "name": "@arcstack/demos", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@headlessui/react": "^2.2.9", + "@tailwindcss/vite": "^4.1.18", + "clsx": "^2.1.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tailwindcss": "^4.1.18" + }, + "devDependencies": { + "@eslint/js": "^9.39.1", + "@types/node": "^24.10.1", + "@types/react": "^19.2.5", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.1.1", + "babel-plugin-react-compiler": "^1.0.0", + "eslint": "^9.39.1", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.4.24", + "globals": "^16.5.0", + "typescript": "~5.9.3", + "typescript-eslint": "^8.46.4", + "vite": "^7.2.4" + } +} diff --git a/demos/public/android-chrome-192x192.png b/demos/public/android-chrome-192x192.png new file mode 100644 index 0000000..d3fa90c Binary files /dev/null and b/demos/public/android-chrome-192x192.png differ diff --git a/demos/public/android-chrome-512x512.png b/demos/public/android-chrome-512x512.png new file mode 100644 index 0000000..57ffd24 Binary files /dev/null and b/demos/public/android-chrome-512x512.png differ diff --git a/demos/public/apple-touch-icon.png b/demos/public/apple-touch-icon.png new file mode 100644 index 0000000..ab44d2d Binary files /dev/null and b/demos/public/apple-touch-icon.png differ diff --git a/demos/public/arcstack.jpg b/demos/public/arcstack.jpg new file mode 100644 index 0000000..7392718 Binary files /dev/null and b/demos/public/arcstack.jpg differ diff --git a/demos/public/favicon-16x16.png b/demos/public/favicon-16x16.png new file mode 100644 index 0000000..51e4f76 Binary files /dev/null and b/demos/public/favicon-16x16.png differ diff --git a/demos/public/favicon-32x32.png b/demos/public/favicon-32x32.png new file mode 100644 index 0000000..23dda26 Binary files /dev/null and b/demos/public/favicon-32x32.png differ diff --git a/demos/public/favicon.ico b/demos/public/favicon.ico new file mode 100644 index 0000000..e014ec5 Binary files /dev/null and b/demos/public/favicon.ico differ diff --git a/demos/public/icon.png b/demos/public/icon.png new file mode 100644 index 0000000..39f42b9 Binary files /dev/null and b/demos/public/icon.png differ diff --git a/demos/public/site.webmanifest b/demos/public/site.webmanifest new file mode 100644 index 0000000..4dc8660 --- /dev/null +++ b/demos/public/site.webmanifest @@ -0,0 +1,79 @@ +{ + "$schema": "https://json.schemastore.org/web-manifest", + "name": "Web APIs Demos - @ArcStackLab", + "short_name": "Web APIs Demos", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable monochrome" + } + ], + "screenshots": [ + { + "src": "/icon.png", + "sizes": "1024x1024", + "type": "image/png", + "form_factor": "wide", + "label": "Web APIs" + }, + { + "src": "/arcstack.jpg", + "sizes": "1024x1024", + "type": "image/jpeg", + "form_factor": "wide", + "label": "@ArcStackLab" + }, + { + "src": "/icon.png", + "sizes": "1024x1024", + "type": "image/png", + "form_factor": "narrow", + "label": "Web APIs" + }, + { + "src": "/arcstack.jpg", + "sizes": "1024x1024", + "type": "image/jpeg", + "form_factor": "narrow", + "label": "@ArcStackLab" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone", + "start_url": "./?source=PWA", + "id": "@arcstack/webapis", + "shortcuts": [ + { + "name": "Web APIs Demos", + "short_name": "WebAPIs Demos", + "url": "./?source=PWA", + "description": "A Comprehensive Integration of All Web Standard APIs", + "icons": [ + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] + } + ], + "protocol_handlers": [ + { + "protocol": "web+api", + "url": "./?source=PWA&ref=%s" + } + ] +} \ No newline at end of file diff --git a/demos/src/App.tsx b/demos/src/App.tsx new file mode 100644 index 0000000..6c0b19f --- /dev/null +++ b/demos/src/App.tsx @@ -0,0 +1,39 @@ +import { Footer } from './components/Footer' +import { Header } from './components/Header' +import { SearchFilter } from './components/SearchFilter' +import { ThemeToggle } from './components/ThemeToggle' +import { Packages } from './components/Packages' +import { PackageModal } from './components/PackageModal' +import { useSearchParam } from './hooks/searchParamHooks' +import { useEffect } from 'react' + +function App() { + const refParam = useSearchParam('ref') + + useEffect(() => { + if (refParam.value) { + const url = new URL(refParam.value) + const destUrl = new URL(location.href) + destUrl.searchParams.delete('ref') + destUrl.searchParams.set('package', url.hostname) + location.replace(destUrl) + } + }, [refParam.value]) + + return ( + <> +
+
+
+ + + + +
+
+