Skip to content

Commit

Permalink
Playground
Browse files Browse the repository at this point in the history
  • Loading branch information
iamhectorsosa committed Dec 3, 2023
1 parent 27efee3 commit 60ca621
Show file tree
Hide file tree
Showing 37 changed files with 2,104 additions and 12 deletions.
18 changes: 18 additions & 0 deletions playground/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions playground/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
30 changes: 30 additions & 0 deletions playground/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# 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/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
16 changes: 16 additions & 0 deletions playground/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/index.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
46 changes: 46 additions & 0 deletions playground/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Primary Meta Tags -->
<title>Search Params - Playground</title>
<meta name="title" content="Search Params - Playground" />
<meta
name="description"
content="Read and update URLSearchParams with full type-safety"
/>

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://github.com/iamhectorsosa/search-params"
/>
<meta property="og:title" content="Search Params - Playground" />
<meta
property="og:description"
content="Read and update URLSearchParams with full type-safety"
/>
<meta property="og:image" content="/home.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:url"
content="https://github.com/iamhectorsosa/search-params"
/>
<meta property="twitter:title" content="Search Params - Playground" />
<meta
property="twitter:description"
content="Read and update URLSearchParams with full type-safety"
/>
<meta property="twitter:image" content="/home.png" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
47 changes: 47 additions & 0 deletions playground/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{
"name": "playground",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@search-params/react": "workspace:*",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"lucide-react": "^0.292.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.1",
"sugar-high": "^0.5.2",
"tailwind-merge": "^2.0.0",
"tailwindcss-animate": "^1.0.7",
"valibot": "^0.19.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10",
"eslint": "^8.53.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"postcss": "^8",
"tailwindcss": "^3",
"typescript": "^5.2.2",
"vite": "^5.0.0"
}
}
6 changes: 6 additions & 0 deletions playground/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Binary file added playground/public/home.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added playground/public/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions playground/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Providers } from "./providers/Providers";
import { Playground } from "./components/Playground";
import { Route, Routes } from "react-router-dom";

function App() {
return (
<Routes>
<Route
path="*"
element={
<Providers>
<Playground />
</Providers>
}
/>
</Routes>
);
}

export default App;
25 changes: 25 additions & 0 deletions playground/src/components/Config.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as React from "react";
import { highlight } from "sugar-high";
import rawConfig from "../config.ts?raw";

export const Config: React.FC = () => {
return (
<div className="space-y-4">
<p className="leading-7">
Use{" "}
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
createSearchParamsConfig
</code>{" "}
to create a config object to handle all validations. You can choose any
schema validation library (i.e. Valibot, Zod, Yup, etc..), or write your
own, to handle your validations.
</p>
<pre
className="border p-6 rounded-lg overflow-x-scroll text-sm"
dangerouslySetInnerHTML={{
__html: highlight(rawConfig),
}}
/>
</div>
);
};
Loading

0 comments on commit 60ca621

Please sign in to comment.