diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml index 6cc2ff8..2e0a65b 100644 --- a/.github/workflows/verify.yml +++ b/.github/workflows/verify.yml @@ -33,4 +33,4 @@ jobs: # 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: pnpx nx affected -t build && pnpm build + - run: pnpm build:all diff --git a/.gitignore b/.gitignore index a55bc12..eb11138 100644 --- a/.gitignore +++ b/.gitignore @@ -93,6 +93,7 @@ dist # Documentations / Demos demos/out +demos/packages.json # Gatsby files .cache/ @@ -170,3 +171,4 @@ tmp .nx/cache .nx/workspace-data .cursor +Icon diff --git a/.vscode/settings.json b/.vscode/settings.json index 1e16618..a3f0ad9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -19,6 +19,7 @@ "cSpell.words": [ "arcstack", "factman", + "webapi", "webapis" ], "typescript.tsdk": "node_modules/typescript/lib", @@ -31,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 ( + <> +
+
+
+ + + + +
+
+