commit
b4e047a10c
@ -0,0 +1,91 @@ |
|||||||
|
## Git Commit Message Convention |
||||||
|
|
||||||
|
> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular). |
||||||
|
|
||||||
|
#### TL;DR: |
||||||
|
|
||||||
|
Messages must be matched by the following regex: |
||||||
|
|
||||||
|
```regexp |
||||||
|
/^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip)(\(.+\))?: .{1,50}/ |
||||||
|
``` |
||||||
|
|
||||||
|
#### Examples |
||||||
|
|
||||||
|
Appears under "Features" header, `compiler` subheader: |
||||||
|
|
||||||
|
``` |
||||||
|
feat(compiler): add 'comments' option |
||||||
|
``` |
||||||
|
|
||||||
|
Appears under "Bug Fixes" header, `v-model` subheader, with a link to issue #28: |
||||||
|
|
||||||
|
``` |
||||||
|
fix(v-model): handle events on blur |
||||||
|
|
||||||
|
close #28 |
||||||
|
``` |
||||||
|
|
||||||
|
Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation: |
||||||
|
|
||||||
|
``` |
||||||
|
perf(core): improve vdom diffing by removing 'foo' option |
||||||
|
|
||||||
|
BREAKING CHANGE: The 'foo' option has been removed. |
||||||
|
``` |
||||||
|
|
||||||
|
The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header. |
||||||
|
|
||||||
|
``` |
||||||
|
revert: feat(compiler): add 'comments' option |
||||||
|
|
||||||
|
This reverts commit 667ecc1654a317a13331b17617d973392f415f02. |
||||||
|
``` |
||||||
|
|
||||||
|
### Full Message Format |
||||||
|
|
||||||
|
A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: |
||||||
|
|
||||||
|
``` |
||||||
|
<type>(<scope>): <subject> |
||||||
|
<BLANK LINE> |
||||||
|
<body> |
||||||
|
<BLANK LINE> |
||||||
|
<footer> |
||||||
|
``` |
||||||
|
|
||||||
|
The **header** is mandatory and the **scope** of the header is optional. |
||||||
|
|
||||||
|
### Revert |
||||||
|
|
||||||
|
If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted. |
||||||
|
|
||||||
|
### Type |
||||||
|
|
||||||
|
If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However, if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog. |
||||||
|
|
||||||
|
Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks. |
||||||
|
|
||||||
|
### Scope |
||||||
|
|
||||||
|
The scope could be anything specifying the place of the commit change. For example `core`, `compiler`, `ssr`, `v-model`, `transition` etc... |
||||||
|
|
||||||
|
### Subject |
||||||
|
|
||||||
|
The subject contains a succinct description of the change: |
||||||
|
|
||||||
|
- use the imperative, present tense: "change" not "changed" nor "changes" |
||||||
|
- don't capitalize the first letter |
||||||
|
- no dot (.) at the end |
||||||
|
|
||||||
|
### Body |
||||||
|
|
||||||
|
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes". |
||||||
|
The body should include the motivation for the change and contrast this with previous behavior. |
||||||
|
|
||||||
|
### Footer |
||||||
|
|
||||||
|
The footer should contain any information about **Breaking Changes** and is also the place to |
||||||
|
reference GitHub issues that this commit **Closes**. |
||||||
|
|
||||||
|
**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this. |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
logs |
||||||
|
*.log |
||||||
|
*.tgz |
||||||
|
*.local |
||||||
|
coverage |
||||||
|
dist |
||||||
|
bun.lockb |
||||||
|
node_modules |
||||||
|
temp |
||||||
|
TODOs.md |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
.git |
||||||
|
.yarn |
||||||
|
dist |
||||||
|
node_modules |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>Vite + React + TS</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"></div> |
||||||
|
<script type="module" src="/src/main.tsx"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
{ |
||||||
|
"name": "imsfe", |
||||||
|
"type": "module", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "tsc -b && vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@emotion/react": "^11.13.0", |
||||||
|
"@emotion/styled": "^11.13.0", |
||||||
|
"@mui/icons-material": "^5.16.7", |
||||||
|
"@mui/joy": "^5.0.0-beta.48", |
||||||
|
"@mui/utils": "^5.16.6", |
||||||
|
"@rakit/core": "workspace:*", |
||||||
|
"@rakit/fetch": "workspace:*", |
||||||
|
"@rakit/joy-ui": "workspace:*", |
||||||
|
"@rakit/use-async": "workspace:*", |
||||||
|
"@rakit/use-invariant": "workspace:*", |
||||||
|
"lodash": "^4.17.21", |
||||||
|
"node-polyglot": "^2.6.0", |
||||||
|
"react": "^18.3.1", |
||||||
|
"react-dom": "^18.3.1", |
||||||
|
"react-error-boundary": "^4.0.13", |
||||||
|
"react-router-dom": "^6.26.1" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/lodash": "^4.17.7", |
||||||
|
"@types/node-polyglot": "^2.5.0", |
||||||
|
"@types/react": "^18.3.3", |
||||||
|
"@types/react-dom": "^18.3.0", |
||||||
|
"@vitejs/plugin-react-swc": "^3.5.0", |
||||||
|
"globals": "^15.9.0", |
||||||
|
"typescript": "^5.5.3", |
||||||
|
"vite": "^5.4.1" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,78 @@ |
|||||||
|
import { CoreAdminContext, CoreAppContext, CoreLayoutProps, Route } from '@rakit/core'; |
||||||
|
import { useFetch } from '@rakit/fetch'; |
||||||
|
import { Error, Loading, ThemeProvider } from '@rakit/joy-ui'; |
||||||
|
import { createAuthProvider } from './config/createAuthProvider'; |
||||||
|
import { createDataProvider } from './config/createDataProvider'; |
||||||
|
import { i18nProvider } from './config/i18nProvider'; |
||||||
|
import { lazy, Suspense } from 'react'; |
||||||
|
|
||||||
|
const AppLoading = () => <Loading /> |
||||||
|
|
||||||
|
const Layout = (props: CoreLayoutProps) => { |
||||||
|
return ( |
||||||
|
<Suspense fallback={<Loading />}> |
||||||
|
{props.children} |
||||||
|
</Suspense> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const CatchAll = lazy(() => import("./pages/CatchAll")); |
||||||
|
const SignIn = lazy(() => import("./pages/SignIn")); |
||||||
|
const PageError = lazy(() => import("./pages/PageError")); |
||||||
|
|
||||||
|
export default function App() { |
||||||
|
return ( |
||||||
|
<ThemeProvider> |
||||||
|
<AppContext /> |
||||||
|
</ThemeProvider> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function AppContext() { |
||||||
|
const fetch = useFetch(); |
||||||
|
|
||||||
|
const authProvider = createAuthProvider(fetch); |
||||||
|
const dataProvider = createDataProvider(fetch); |
||||||
|
|
||||||
|
return ( |
||||||
|
<CoreAppContext |
||||||
|
authProvider={authProvider} |
||||||
|
// authCallbackPage={ }
|
||||||
|
// basename={ }
|
||||||
|
catchAll={<CatchAll />} |
||||||
|
dataProvider={dataProvider} |
||||||
|
error={Error} |
||||||
|
homepage={<CatchAll />} |
||||||
|
initialLocation="/" |
||||||
|
i18nProvider={i18nProvider} |
||||||
|
loading={AppLoading} |
||||||
|
layout={Layout} |
||||||
|
loginPage={SignIn} |
||||||
|
// ready={ }
|
||||||
|
requireAuth={false} |
||||||
|
// store={ }
|
||||||
|
title="进销存系统" |
||||||
|
> |
||||||
|
<Route |
||||||
|
name="pageErrpr" |
||||||
|
path="/error/:status" |
||||||
|
element={<PageError />} |
||||||
|
/> |
||||||
|
<Route |
||||||
|
name="test" |
||||||
|
path="/sasda" |
||||||
|
element={<div>哈哈哈哈</div>} |
||||||
|
/> |
||||||
|
<CoreAdminContext |
||||||
|
basepath="/admin" |
||||||
|
initialLocation="/admmin" |
||||||
|
> |
||||||
|
<Route |
||||||
|
name="test" |
||||||
|
path="/sasda" |
||||||
|
element={<div>哈哈222哈哈</div>} |
||||||
|
/> |
||||||
|
</CoreAdminContext> |
||||||
|
</CoreAppContext> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import SvgIcon from '@mui/joy/SvgIcon'; |
||||||
|
|
||||||
|
export default function GoogleIcon() { |
||||||
|
return ( |
||||||
|
<SvgIcon fontSize="xl"> |
||||||
|
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"> |
||||||
|
<path |
||||||
|
fill="#4285F4" |
||||||
|
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#34A853" |
||||||
|
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#FBBC05" |
||||||
|
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#EA4335" |
||||||
|
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z" |
||||||
|
/> |
||||||
|
</g> |
||||||
|
</SvgIcon> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
import { |
||||||
|
AuthProvider, |
||||||
|
UserIdentity, |
||||||
|
WithRedirectTo |
||||||
|
} from "@rakit/core"; |
||||||
|
import { FetchFunction } from "@rakit/fetch"; |
||||||
|
|
||||||
|
async function login( |
||||||
|
fetch: FetchFunction, |
||||||
|
{ username, password }: any, |
||||||
|
): Promise<WithRedirectTo | void | any> { |
||||||
|
try { |
||||||
|
const auth = await fetch({ |
||||||
|
url: "/login", |
||||||
|
method: "POST", |
||||||
|
body: { username, password }, |
||||||
|
}); |
||||||
|
localStorage.setItem('auth', JSON.stringify(auth)); |
||||||
|
} catch { |
||||||
|
throw new Error('Network error'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function logout(): Promise<void | false | string> { |
||||||
|
localStorage.removeItem('auth'); |
||||||
|
return Promise.resolve(); |
||||||
|
} |
||||||
|
|
||||||
|
function checkAuth(): Promise<void> { |
||||||
|
// // case 1:
|
||||||
|
// return localStorage.getItem('auth')
|
||||||
|
// ? Promise.resolve()
|
||||||
|
// : Promise.reject({ message: 'login.required' });
|
||||||
|
//
|
||||||
|
// // case 2:
|
||||||
|
return localStorage.getItem('auth') |
||||||
|
? Promise.resolve() |
||||||
|
: Promise.reject({ redirectTo: '/no-access' }) |
||||||
|
} |
||||||
|
|
||||||
|
function checkError(error: any): Promise<void> { |
||||||
|
const status = error.status; |
||||||
|
if (status === 401 || status === 403) { |
||||||
|
// // case 1:
|
||||||
|
// localStorage.removeItem('auth');
|
||||||
|
// return Promise.reject();
|
||||||
|
//
|
||||||
|
// // case 2:
|
||||||
|
// localStorage.removeItem('auth');
|
||||||
|
// return Promise.reject({ redirectTo: '/credentials-required' });
|
||||||
|
//
|
||||||
|
// case 3:
|
||||||
|
return Promise.reject({ |
||||||
|
redirectTo: '/unauthorized', |
||||||
|
logoutUser: false, |
||||||
|
message: 'Unauthorized user!', // or message: false
|
||||||
|
}); |
||||||
|
} |
||||||
|
// other error code (404, 500, etc): no need to log out
|
||||||
|
return Promise.resolve(); |
||||||
|
} |
||||||
|
|
||||||
|
function getIdentity(): Promise<UserIdentity> { |
||||||
|
try { |
||||||
|
const { id, fullName, avatar, phoneNumber, email } = JSON.parse(localStorage.getItem('auth')!); |
||||||
|
return Promise.resolve({ |
||||||
|
id, |
||||||
|
fullName, |
||||||
|
avatar, |
||||||
|
phoneNumber, |
||||||
|
email, |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getPermissions(): Promise<any> { |
||||||
|
return Promise.resolve(''); |
||||||
|
} |
||||||
|
|
||||||
|
// async function handleCallback(): Promise<AuthRedirectResult | void | any> {
|
||||||
|
// if (!query.includes('code=') && !query.includes('state=')) {
|
||||||
|
// throw new Error('Failed to handle login callback.');
|
||||||
|
// }
|
||||||
|
// // If we did receive the Auth0 parameters,
|
||||||
|
// // get an access token based on the query paramaters
|
||||||
|
// await Auth0Client.handleRedirectCallback();
|
||||||
|
// return { redirectTo: '/posts' };
|
||||||
|
// }
|
||||||
|
|
||||||
|
export function createAuthProvider(fetch: FetchFunction<any>): AuthProvider { |
||||||
|
return { |
||||||
|
login: (params) => login(fetch, params), |
||||||
|
logout, |
||||||
|
checkAuth, |
||||||
|
checkError, |
||||||
|
getIdentity, |
||||||
|
getPermissions, |
||||||
|
// handleCallback,
|
||||||
|
}; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import { |
||||||
|
CreateResult, |
||||||
|
DataProvider, |
||||||
|
DeleteResult, |
||||||
|
GetOneResult, |
||||||
|
UpdateResult |
||||||
|
} from "@rakit/core"; |
||||||
|
import { FetchFunction } from "@rakit/fetch"; |
||||||
|
|
||||||
|
export function createDataProvider(_fetch: FetchFunction): DataProvider { |
||||||
|
return { |
||||||
|
create: () => Promise.resolve<CreateResult>({ data: null }), |
||||||
|
delete: () => Promise.resolve<DeleteResult>({ data: null }), |
||||||
|
deleteMany: () => Promise.resolve({ data: [] }), |
||||||
|
getList: () => Promise.resolve({ data: [], total: 0 }), |
||||||
|
getMany: () => Promise.resolve({ data: [] }), |
||||||
|
getManyReference: () => Promise.resolve({ data: [], total: 0 }), |
||||||
|
getOne: () => Promise.resolve<GetOneResult>({ data: null }), |
||||||
|
update: () => Promise.resolve<UpdateResult>({ data: null }), |
||||||
|
updateMany: () => Promise.resolve({ data: [] }), |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import Polyglot from 'node-polyglot'; |
||||||
|
import { I18nProvider, Locale } from "@rakit/core"; |
||||||
|
|
||||||
|
const locale: Locale = { code: 'zh', name: "简体中文" }; |
||||||
|
|
||||||
|
const polyglot = new Polyglot({ |
||||||
|
locale: locale.code, |
||||||
|
phrases: { |
||||||
|
'': '', |
||||||
|
ra: { |
||||||
|
page: { |
||||||
|
error: 'ra.page.error222', |
||||||
|
}, |
||||||
|
message: { |
||||||
|
error: "ra.message.error222", |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export const i18nProvider: I18nProvider = { |
||||||
|
translate: (key: string, options: any = {}) => polyglot.t(key, options), |
||||||
|
changeLocale: () => Promise.resolve(), |
||||||
|
getLocale: () => "zh", |
||||||
|
getLocales: () => [locale], |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio'; |
||||||
|
|
||||||
|
export function Logo(props: AspectRatioProps) { |
||||||
|
const { sx, ...other } = props; |
||||||
|
return ( |
||||||
|
<AspectRatio |
||||||
|
ratio="1" |
||||||
|
variant="plain" |
||||||
|
{...other} |
||||||
|
sx={[ |
||||||
|
{ |
||||||
|
width: 36, |
||||||
|
}, |
||||||
|
...(Array.isArray(sx) ? sx : [sx]), |
||||||
|
]} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<svg |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
width="24" |
||||||
|
height="20" |
||||||
|
viewBox="0 0 36 32" |
||||||
|
fill="none" |
||||||
|
> |
||||||
|
<path |
||||||
|
d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z" |
||||||
|
fill="#007FFF" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
</AspectRatio> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export * from "./Logo"; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import { StrictMode } from 'react' |
||||||
|
import { createRoot } from 'react-dom/client' |
||||||
|
import App from './App.tsx' |
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render( |
||||||
|
<StrictMode> |
||||||
|
<App /> |
||||||
|
</StrictMode>, |
||||||
|
) |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { Navigate } from "react-router-dom"; |
||||||
|
|
||||||
|
export default function CatchAll() { |
||||||
|
return ( |
||||||
|
<Navigate to="/error/404" /> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import { StatusError } from "@rakit/joy-ui"; |
||||||
|
import { useParams } from "react-router-dom"; |
||||||
|
|
||||||
|
export default function PageError() { |
||||||
|
const { status } = useParams<'status'>(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<StatusError status={status} /> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import { Fragment } from 'react'; |
||||||
|
import Box from '@mui/joy/Box'; |
||||||
|
import IconButton from '@mui/joy/IconButton'; |
||||||
|
import Typography from '@mui/joy/Typography'; |
||||||
|
import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded'; |
||||||
|
import { ColorSchemeToggle } from '@rakit/joy-ui'; |
||||||
|
import { SignInCard } from 'src/views/SignInCard'; |
||||||
|
|
||||||
|
export default function SignIn() { |
||||||
|
return ( |
||||||
|
<Fragment> |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
minHeight: '100dvh', |
||||||
|
width: '100%', |
||||||
|
px: 2, |
||||||
|
justifyContent: "space-between", |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box |
||||||
|
component="header" |
||||||
|
sx={{ |
||||||
|
py: 3, |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box sx={{ gap: 2, display: 'flex', alignItems: 'center' }}> |
||||||
|
<IconButton variant="soft" color="primary" size="sm"> |
||||||
|
<BadgeRoundedIcon /> |
||||||
|
</IconButton> |
||||||
|
<Typography level="title-lg">Company logo</Typography> |
||||||
|
</Box> |
||||||
|
<ColorSchemeToggle /> |
||||||
|
</Box> |
||||||
|
<SignInCard /> |
||||||
|
<Box component="footer" sx={{ py: 3 }}> |
||||||
|
<Typography level="body-xs" sx={{ textAlign: 'center' }}> |
||||||
|
© Your company {new Date().getFullYear()} |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</Fragment> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
import Sheet from '@mui/joy/Sheet'; |
||||||
|
import Typography from '@mui/joy/Typography'; |
||||||
|
import FormControl from '@mui/joy/FormControl'; |
||||||
|
import FormLabel from '@mui/joy/FormLabel'; |
||||||
|
import Input from '@mui/joy/Input'; |
||||||
|
import Button from '@mui/joy/Button'; |
||||||
|
import Link from '@mui/joy/Link'; |
||||||
|
import Box from '@mui/joy/Box'; |
||||||
|
import Divider from '@mui/joy/Divider'; |
||||||
|
import Stack from '@mui/joy/Stack'; |
||||||
|
import Checkbox from '@mui/joy/Checkbox'; |
||||||
|
import { GoogleIcon } from '@rakit/joy-ui'; |
||||||
|
|
||||||
|
export function SignInCard() { |
||||||
|
return ( |
||||||
|
<Sheet |
||||||
|
sx={{ |
||||||
|
width: 400, |
||||||
|
mx: 'auto', // margin left & right
|
||||||
|
my: 4, // margin top & bottom
|
||||||
|
py: 3, // padding top & bottom
|
||||||
|
px: 4, // padding left & right
|
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: 2, |
||||||
|
borderRadius: 'sm', |
||||||
|
boxShadow: 'md', |
||||||
|
}} |
||||||
|
variant="outlined" |
||||||
|
> |
||||||
|
<Box |
||||||
|
component="main" |
||||||
|
sx={{ |
||||||
|
my: 'auto', |
||||||
|
py: 2, |
||||||
|
pb: 5, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: 2, |
||||||
|
width: 360, |
||||||
|
maxWidth: '100%', |
||||||
|
mx: 'auto', |
||||||
|
borderRadius: 'sm', |
||||||
|
'& form': { |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: 2, |
||||||
|
}, |
||||||
|
[`& .MuiFormLabel-asterisk`]: { |
||||||
|
visibility: 'hidden', |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Stack sx={{ gap: 4, mb: 2 }}> |
||||||
|
<Stack sx={{ gap: 1 }}> |
||||||
|
<Typography component="h1" level="h3"> |
||||||
|
Sign in |
||||||
|
</Typography> |
||||||
|
<Typography level="body-sm"> |
||||||
|
New to company?{' '} |
||||||
|
<Link href="#replace-with-a-link" level="title-sm"> |
||||||
|
Sign up! |
||||||
|
</Link> |
||||||
|
</Typography> |
||||||
|
</Stack> |
||||||
|
<Button |
||||||
|
variant="soft" |
||||||
|
color="neutral" |
||||||
|
fullWidth |
||||||
|
startDecorator={<GoogleIcon />} |
||||||
|
> |
||||||
|
Continue with Google |
||||||
|
</Button> |
||||||
|
</Stack> |
||||||
|
<Divider |
||||||
|
sx={(theme) => ({ |
||||||
|
[theme.getColorSchemeSelector('light')]: { |
||||||
|
color: { xs: '#FFF', md: 'text.tertiary' }, |
||||||
|
}, |
||||||
|
})} |
||||||
|
> |
||||||
|
或者 |
||||||
|
</Divider> |
||||||
|
<Stack sx={{ gap: 4, mt: 2 }}> |
||||||
|
<form |
||||||
|
onSubmit={(event: React.FormEvent<SignInFormElement>) => { |
||||||
|
event.preventDefault(); |
||||||
|
const formElements = event.currentTarget.elements; |
||||||
|
const data = { |
||||||
|
email: formElements.email.value, |
||||||
|
password: formElements.password.value, |
||||||
|
persistent: formElements.persistent.checked, |
||||||
|
}; |
||||||
|
alert(JSON.stringify(data, null, 2)); |
||||||
|
}} |
||||||
|
> |
||||||
|
<FormControl required> |
||||||
|
<FormLabel>您的账户</FormLabel> |
||||||
|
<Input type="text" name="account" placeholder="用户名/手机/邮箱" /> |
||||||
|
</FormControl> |
||||||
|
<FormControl required> |
||||||
|
<FormLabel>登录密码</FormLabel> |
||||||
|
<Input type="password" name="password" placeholder="至少6位" /> |
||||||
|
</FormControl> |
||||||
|
<Stack sx={{ gap: 4, mt: 2 }}> |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Checkbox size="sm" label="记住我" name="persistent" /> |
||||||
|
<Link level="title-sm" href="#replace-with-a-link"> |
||||||
|
忘记了密码？ |
||||||
|
</Link> |
||||||
|
</Box> |
||||||
|
<Button type="submit" fullWidth> |
||||||
|
登录 |
||||||
|
</Button> |
||||||
|
</Stack> |
||||||
|
</form> |
||||||
|
</Stack> |
||||||
|
</Box> |
||||||
|
</Sheet> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,30 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
// Enable latest features |
||||||
|
"lib": [ |
||||||
|
"ESNext", |
||||||
|
"DOM" |
||||||
|
], |
||||||
|
"target": "ES2020", |
||||||
|
"baseUrl": ".", |
||||||
|
"module": "ESNext", |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"skipLibCheck": true, |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"moduleDetection": "force", |
||||||
|
"isolatedModules": true, |
||||||
|
"jsx": "react-jsx", |
||||||
|
"verbatimModuleSyntax": false, |
||||||
|
"allowImportingTsExtensions": true, |
||||||
|
"allowJs": true, |
||||||
|
"noEmit": true, |
||||||
|
"strict": true, |
||||||
|
"noUnusedLocals": true, |
||||||
|
"noUnusedParameters": true, |
||||||
|
"noFallthroughCasesInSwitch": true, |
||||||
|
"noPropertyAccessFromIndexSignature": false |
||||||
|
}, |
||||||
|
"include": [ |
||||||
|
"src" |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import { join } from "node:path"; |
||||||
|
import { defineConfig } from 'vite' |
||||||
|
import react from '@vitejs/plugin-react-swc' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [react()], |
||||||
|
resolve: { |
||||||
|
alias: [ |
||||||
|
{ |
||||||
|
find: /^~(.+)/, |
||||||
|
replacement: join(process.cwd(), 'node_modules/$1'), |
||||||
|
}, |
||||||
|
{ |
||||||
|
find: /^src(.+)/, |
||||||
|
replacement: join(process.cwd(), 'src/$1'), |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
}) |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
{ |
||||||
|
"name": "simple-admin", |
||||||
|
"type": "module", |
||||||
|
"description": "low level admin & dashboard scaffold", |
||||||
|
"dependencies": { |
||||||
|
"@rakit/core": "workspace:*", |
||||||
|
"@rakit/use-async": "workspace:*", |
||||||
|
"@rakit/use-fetch": "workspace:*", |
||||||
|
"@rakit/use-invariant": "workspace:*", |
||||||
|
"react": "^18.3.1", |
||||||
|
"react-dom": "^18.3.1", |
||||||
|
"react-router-dom": "^6.26.1" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
{ |
||||||
|
"env": { |
||||||
|
"browser": true |
||||||
|
}, |
||||||
|
"settings": {}, |
||||||
|
"rules": { |
||||||
|
"semi": [ |
||||||
|
"warn", |
||||||
|
"never" |
||||||
|
], |
||||||
|
"quotes": [ |
||||||
|
"warn", |
||||||
|
"single" |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
{ |
||||||
|
"name": "rakit-monorepo", |
||||||
|
"private": true, |
||||||
|
"workspaces": [ |
||||||
|
"packages/*", |
||||||
|
"apps/*" |
||||||
|
], |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"lint": "oxlint --import-plugin --ignore-path=./.oxlintignore -c ./oxlintrc.json", |
||||||
|
"lint:fix": "bun run lint --fix", |
||||||
|
"postinstall": "simple-git-hooks", |
||||||
|
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/bun": "latest", |
||||||
|
"conventional-changelog-cli": "^5.0.0", |
||||||
|
"lint-staged": "^15.2.9", |
||||||
|
"oxlint": "^0.9.1", |
||||||
|
"picocolors": "^1.0.1", |
||||||
|
"semver": "^7.6.3", |
||||||
|
"simple-git-hooks": "^2.11.1", |
||||||
|
"vitest": "^2.0.5" |
||||||
|
}, |
||||||
|
"peerDependencies": { |
||||||
|
"typescript": "^5.5.0" |
||||||
|
}, |
||||||
|
"lint-staged": { |
||||||
|
"**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,astro,svelte}": "oxlint" |
||||||
|
}, |
||||||
|
"simple-git-hooks": { |
||||||
|
"pre-commit": "bun run lint-staged", |
||||||
|
"commit-msg": "node scripts/verify-commit.js" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
{ |
||||||
|
"name": "@rakit/fetch", |
||||||
|
"type": "module", |
||||||
|
"main": "src/index.ts", |
||||||
|
"dependencies": { |
||||||
|
"lodash": "^4.17.21", |
||||||
|
"react": "^18.3.1" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/lodash": "^4.17.7" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
import { createContext } from "react"; |
||||||
|
import { |
||||||
|
BodyParams, |
||||||
|
Combination, |
||||||
|
ErrorCorrector, |
||||||
|
FetchConfig, |
||||||
|
Fetcher, |
||||||
|
RequestFactory, |
||||||
|
RequestIntercepter, |
||||||
|
ResponseTransformer, |
||||||
|
SearchParams |
||||||
|
} from "./types"; |
||||||
|
|
||||||
|
export interface FormatOptions { |
||||||
|
bool?: (value: boolean) => string; // default to 'true' or 'false'
|
||||||
|
null?: string; // default to '' or null
|
||||||
|
nan?: string; // default to 'NaN'
|
||||||
|
date?: (date: Date) => string; // default to Date.toISOString()
|
||||||
|
skipNull?: boolean; // default to true
|
||||||
|
skipEmptyString?: boolean; // default to true
|
||||||
|
skipNaN?: boolean; // default to true
|
||||||
|
arrayFormat?: |
||||||
|
| 'default' // 'foo=1&foo=2&foo=3'
|
||||||
|
| 'bracket' // 'foo[]=1&foo[]=2&foo[]=3'
|
||||||
|
| 'index' // 'foo[0]=1&foo[1]=2&foo[3]=3'
|
||||||
|
| 'dot' // 'foo.0=1&foo.1=2&foo.2=3'
|
||||||
|
| 'comma' // 'foo=1,2,3'
|
||||||
|
| 'line' // 'foo=1|2|3'
|
||||||
|
| 'bracket-comma' // 'foo[]=1,2,3'
|
||||||
|
| 'bracket-line'; // 'foo[]=1|2|3'
|
||||||
|
objectFormat?: |
||||||
|
| 'bracket' // 'foo[bar]=bazz'
|
||||||
|
| 'dot' // 'foo.bar=bazz'
|
||||||
|
| 'colon'; // 'foo:bar=bazz'
|
||||||
|
} |
||||||
|
|
||||||
|
export interface BodyMergeConfig extends FormatOptions { |
||||||
|
handle?: ( |
||||||
|
bodys: BodyParams[], |
||||||
|
hasFiles: boolean | undefined, |
||||||
|
options: FormatOptions & { combination: Combination }, |
||||||
|
) => BodyParams; |
||||||
|
} |
||||||
|
|
||||||
|
export type BodyBuilder = ( |
||||||
|
body: BodyParams, |
||||||
|
hasFiles: boolean, |
||||||
|
options: FormatOptions & { combination: Combination }, |
||||||
|
) => BodyInit | null; |
||||||
|
|
||||||
|
export interface SearchParamsMergeConfig extends FormatOptions { |
||||||
|
handleIntoUrl?: ( |
||||||
|
url: URL, |
||||||
|
params: SearchParams, |
||||||
|
options: FormatOptions & { combination: Combination }, |
||||||
|
) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export interface FetchContextValue { |
||||||
|
baseUrl?: string; |
||||||
|
body?: BodyParams; |
||||||
|
bodyCombination?: Combination; |
||||||
|
bodyBuilder?: BodyBuilder; |
||||||
|
bodyMergeConfig?: BodyMergeConfig; |
||||||
|
config?: FetchConfig; |
||||||
|
configCombination?: Combination; |
||||||
|
correct?: ErrorCorrector; |
||||||
|
correctCombination?: Combination; |
||||||
|
createRequest?: RequestFactory; |
||||||
|
fetcher?: Fetcher; |
||||||
|
headers?: HeadersInit; |
||||||
|
headersCombination?: Combination; |
||||||
|
hasFiles?: boolean | undefined; |
||||||
|
intercept?: RequestIntercepter; |
||||||
|
interceptCombination?: Combination; |
||||||
|
searchParams?: SearchParams; |
||||||
|
searchParamsCombination?: Combination; |
||||||
|
searchParamsMergeConfig?: SearchParamsMergeConfig; |
||||||
|
transform?: ResponseTransformer; |
||||||
|
transformCombination?: Combination; |
||||||
|
} |
||||||
|
|
||||||
|
export const FetchContext = createContext<FetchContextValue | undefined>(undefined); |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { useMemo } from "react"; |
||||||
|
import { FetchContext, FetchContextValue } from "./FetchContext"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
|
||||||
|
export interface FetchContextProviderProps extends FetchContextValue { |
||||||
|
inherit?: boolean; |
||||||
|
children?: React.ReactNode; |
||||||
|
} |
||||||
|
|
||||||
|
export function FetchContextProvider(props: FetchContextProviderProps) { |
||||||
|
const { |
||||||
|
children, |
||||||
|
inherit, |
||||||
|
...localContext |
||||||
|
} = props; |
||||||
|
|
||||||
|
const parentContext = useFetchContext(); |
||||||
|
|
||||||
|
const value = useMemo<FetchContextValue>(() => { |
||||||
|
if (inherit) { |
||||||
|
return { |
||||||
|
...parentContext, |
||||||
|
...localContext, |
||||||
|
}; |
||||||
|
} |
||||||
|
return { |
||||||
|
...localContext, |
||||||
|
}; |
||||||
|
}, [ |
||||||
|
inherit, |
||||||
|
localContext, |
||||||
|
parentContext, |
||||||
|
]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<FetchContext.Provider value={value}> |
||||||
|
{children} |
||||||
|
</FetchContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
export class FetchError extends Error { |
||||||
|
constructor( |
||||||
|
message: string, |
||||||
|
public readonly request?: Request, |
||||||
|
public readonly response?: Response, |
||||||
|
public readonly error?: any, |
||||||
|
) { |
||||||
|
super(message); |
||||||
|
this.name = 'FetchError'; |
||||||
|
Error.captureStackTrace?.(this, FetchError); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
export * from './FetchContext'; |
||||||
|
export * from './FetchContextProvider'; |
||||||
|
export * from './FetchError'; |
||||||
|
export * from './types'; |
||||||
|
export * from './useCreateBody'; |
||||||
|
export * from './useCreateHeaders'; |
||||||
|
export * from './useCreateRequest'; |
||||||
|
export * from './useCreateUrl'; |
||||||
|
export * from './useCreateErrorCorrector'; |
||||||
|
export * from './useFetch'; |
||||||
|
export * from './useCreateFetchConfig'; |
||||||
|
export * from './useFetchContext'; |
||||||
|
export * from './useCreateFetcher'; |
||||||
|
export * from './useCreateRequestIntercepter'; |
||||||
|
export * from './useCreateResponseTransformer'; |
||||||
|
export * from './utils'; |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
|
||||||
|
|
||||||
|
export type SearchParams = |
||||||
|
| string |
||||||
|
| [string, string | number | boolean][] |
||||||
|
| Record<string, any> |
||||||
|
| URLSearchParams |
||||||
|
| null; |
||||||
|
|
||||||
|
export type BodyParams = |
||||||
|
| BodyInit |
||||||
|
| Record<string, any> |
||||||
|
| null; |
||||||
|
|
||||||
|
export type HttpMethod = |
||||||
|
| "DELETE" |
||||||
|
| "GET" |
||||||
|
| "HEAD" |
||||||
|
| "OPTIONS" |
||||||
|
| "PATCH" |
||||||
|
| "POST" |
||||||
|
| "PUT" |
||||||
|
| RequestInit['method']; |
||||||
|
|
||||||
|
export type Combination = 'overrides' | 'chaining'; |
||||||
|
|
||||||
|
export type FetchConfig = { |
||||||
|
cache?: RequestCache; |
||||||
|
credentials?: RequestCredentials; |
||||||
|
integrity?: string; |
||||||
|
keepalive?: boolean; |
||||||
|
mode?: RequestMode; |
||||||
|
priority?: RequestPriority; |
||||||
|
redirect?: RequestRedirect; |
||||||
|
referrer?: string; |
||||||
|
referrerPolicy?: ReferrerPolicy; |
||||||
|
} |
||||||
|
|
||||||
|
export type RequestFactory = ( |
||||||
|
input: RequestInfo | URL, |
||||||
|
init?: RequestInit |
||||||
|
) => Promise<Request> | PromiseLike<Request> | Request; |
||||||
|
|
||||||
|
export type ErrorCorrector = ( |
||||||
|
error: unknown, |
||||||
|
request: Request | undefined, |
||||||
|
response: Response | undefined, |
||||||
|
) => Promise<any> | any; |
||||||
|
|
||||||
|
export type RequestIntercepter = ( |
||||||
|
request: Request |
||||||
|
) => Promise<Request> | PromiseLike<Request> | Request; |
||||||
|
|
||||||
|
export type ResponseTransformer = ( |
||||||
|
request: Request, |
||||||
|
response: Response, |
||||||
|
data?: any, |
||||||
|
) => Promise<any> | PromiseLike<any> | any; |
||||||
|
|
||||||
|
export type Fetcher = ( |
||||||
|
input: RequestInfo | URL, |
||||||
|
init?: RequestInit, |
||||||
|
) => Promise<Response>; |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { BodyParams, Combination } from "./types"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { buildBody, mergeBodys } from "./utils"; |
||||||
|
|
||||||
|
export interface CreateBodyOptions { |
||||||
|
body?: BodyParams; |
||||||
|
bodyCombination?: Combination; |
||||||
|
hasFiles?: boolean; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export type CreateBodyFunction = ( |
||||||
|
body?: BodyParams | undefined, |
||||||
|
hasFiles?: boolean | undefined, |
||||||
|
) => BodyInit | null; |
||||||
|
|
||||||
|
export function useCreateBody(options?: CreateBodyOptions) { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
|
||||||
|
return useCallback((newOptions?: CreateBodyOptions): BodyInit | null => { |
||||||
|
const bodyBuilder = fetchContext?.bodyBuilder ?? buildBody; |
||||||
|
const handle = fetchContext?.bodyMergeConfig?.handle ?? mergeBodys; |
||||||
|
const mergeConfig = fetchContext?.bodyMergeConfig ?? {}; |
||||||
|
const combination = newOptions?.bodyCombination |
||||||
|
?? options?.bodyCombination |
||||||
|
?? fetchContext?.bodyCombination |
||||||
|
?? 'chaining'; |
||||||
|
const bodys = toList( |
||||||
|
fetchContext?.body, |
||||||
|
options?.body, |
||||||
|
newOptions?.body, |
||||||
|
); |
||||||
|
const hasFiles = newOptions?.hasFiles === true |
||||||
|
|| options?.hasFiles === true |
||||||
|
|| fetchContext?.hasFiles === true; |
||||||
|
const handleOptions = { ...mergeConfig, combination } |
||||||
|
const body = handle(bodys, hasFiles, handleOptions); |
||||||
|
return bodyBuilder(body, hasFiles, handleOptions); |
||||||
|
}, [ |
||||||
|
fetchContext?.body, |
||||||
|
fetchContext?.bodyBuilder, |
||||||
|
fetchContext?.bodyCombination, |
||||||
|
fetchContext?.bodyMergeConfig, |
||||||
|
fetchContext?.hasFiles, |
||||||
|
options?.body, |
||||||
|
options?.bodyCombination, |
||||||
|
options?.hasFiles, |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
const toList = <T>(...items: Array<T | undefined>): T[] => { |
||||||
|
return items.filter(i => i !== undefined); |
||||||
|
} |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { Combination, ErrorCorrector } from "./types"; |
||||||
|
|
||||||
|
export interface CreateErrorCorrectorOptions { |
||||||
|
correct?: ErrorCorrector; |
||||||
|
correctCombination?: Combination; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export type CreateErrorCorrectorFunction = ( |
||||||
|
options?: CreateErrorCorrectorOptions |
||||||
|
) => ErrorCorrector; |
||||||
|
|
||||||
|
export function useCreateErrorCorrector( |
||||||
|
options?: CreateErrorCorrectorOptions, |
||||||
|
): CreateErrorCorrectorFunction { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
|
||||||
|
return useCallback((newOptions?: CreateErrorCorrectorOptions): ErrorCorrector => { |
||||||
|
return ( |
||||||
|
error: unknown, |
||||||
|
request: Request | undefined, |
||||||
|
response: Response | undefined |
||||||
|
): Promise<any> => { |
||||||
|
const combination = newOptions?.correctCombination |
||||||
|
?? options?.correctCombination |
||||||
|
?? fetchContext?.correctCombination |
||||||
|
?? 'overrides'; |
||||||
|
if (combination === "chaining") { |
||||||
|
return [ |
||||||
|
fetchContext?.correct, |
||||||
|
options?.correct, |
||||||
|
newOptions?.correct, |
||||||
|
].reduce<Promise<any>>( |
||||||
|
async (promise, handle) => { |
||||||
|
if (!handle) { |
||||||
|
return promise; |
||||||
|
} else { |
||||||
|
return promise.catch(error => handle(error, request, response)) |
||||||
|
} |
||||||
|
}, |
||||||
|
defaultCorrect(error) |
||||||
|
); |
||||||
|
} |
||||||
|
const handle = newOptions?.correct |
||||||
|
?? options?.correct |
||||||
|
?? fetchContext?.correct |
||||||
|
?? defaultCorrect; |
||||||
|
return handle(error, request, response); |
||||||
|
} |
||||||
|
}, [ |
||||||
|
fetchContext?.correct, |
||||||
|
fetchContext?.correctCombination, |
||||||
|
options?.correct, |
||||||
|
options?.correctCombination, |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
function defaultCorrect(error: unknown): Promise<any> { |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { Combination, FetchConfig } from "./types"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
|
||||||
|
export interface CreateFetchConfigOptions { |
||||||
|
config?: FetchConfig; |
||||||
|
configCombination?: Combination; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export type CreateFetchConfigFunction = (options?: CreateFetchConfigOptions) => FetchConfig; |
||||||
|
|
||||||
|
export function useCreateFetchConfig( |
||||||
|
options?: CreateFetchConfigOptions, |
||||||
|
): CreateFetchConfigFunction { |
||||||
|
const fetchContext = useFetchContext({}); |
||||||
|
|
||||||
|
return useCallback((newOptions?: CreateFetchConfigOptions): FetchConfig => { |
||||||
|
const combination = newOptions?.configCombination |
||||||
|
?? options?.configCombination |
||||||
|
?? fetchContext?.configCombination |
||||||
|
?? 'chaining'; |
||||||
|
if (combination === 'chaining') { |
||||||
|
return { |
||||||
|
...fetchContext?.config, |
||||||
|
...options?.config, |
||||||
|
...newOptions?.config, |
||||||
|
} |
||||||
|
} |
||||||
|
return newOptions?.config |
||||||
|
?? options?.config |
||||||
|
?? fetchContext?.config |
||||||
|
?? {}; |
||||||
|
}, [ |
||||||
|
fetchContext?.config, |
||||||
|
fetchContext?.configCombination, |
||||||
|
options?.config, |
||||||
|
options?.configCombination, |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { Fetcher } from "./types"; |
||||||
|
|
||||||
|
export interface CreateFetcherOptions { |
||||||
|
fetcher?: Fetcher; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export const useCreateFetcher = (options?: CreateFetcherOptions) => { |
||||||
|
const fetchContext = useFetchContext({}); |
||||||
|
|
||||||
|
return useCallback((newOptions?: CreateFetcherOptions) => { |
||||||
|
return (input: RequestInfo | URL, init?: RequestInit) => { |
||||||
|
const handle = newOptions?.fetcher |
||||||
|
?? options?.fetcher |
||||||
|
?? fetchContext?.fetcher |
||||||
|
?? globalThis.fetch; |
||||||
|
return handle(input, init); |
||||||
|
} |
||||||
|
}, [ |
||||||
|
fetchContext?.fetcher, |
||||||
|
options?.fetcher |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { Combination } from "./types"; |
||||||
|
|
||||||
|
export interface CreateHeadersOptions { |
||||||
|
headers?: HeadersInit; |
||||||
|
headersCombination?: Combination; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export type CreateHeadersFunction = ( |
||||||
|
options?: CreateHeadersOptions |
||||||
|
) => HeadersInit | undefined; |
||||||
|
|
||||||
|
export function useCreateHeaders(options?: CreateHeadersOptions): CreateHeadersFunction { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
|
||||||
|
return useCallback((newOptions?: CreateHeadersOptions): HeadersInit | undefined => { |
||||||
|
const combination = newOptions?.headersCombination |
||||||
|
?? options?.headersCombination |
||||||
|
?? fetchContext?.headersCombination |
||||||
|
?? 'chaining'; |
||||||
|
if (combination === 'chaining') { |
||||||
|
return [ |
||||||
|
fetchContext?.headers, |
||||||
|
options?.headers, |
||||||
|
newOptions?.headers, |
||||||
|
].reduce((acc, item) => { |
||||||
|
if (!item) { |
||||||
|
return acc; |
||||||
|
} |
||||||
|
const headers = new Headers(item); |
||||||
|
if (!acc) { |
||||||
|
return headers; |
||||||
|
} |
||||||
|
headers.forEach((value, name) => { |
||||||
|
(acc as Headers).set(name, value); |
||||||
|
}); |
||||||
|
return acc; |
||||||
|
}); |
||||||
|
} |
||||||
|
return newOptions?.headers |
||||||
|
?? options?.headers |
||||||
|
?? fetchContext?.headers; |
||||||
|
}, [ |
||||||
|
fetchContext?.headers, |
||||||
|
fetchContext?.headersCombination, |
||||||
|
options?.headers, |
||||||
|
options?.headersCombination, |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { FetchConfig, RequestFactory } from "./types"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
|
||||||
|
export interface UseCreateRequestOptions { |
||||||
|
createRequest?: RequestFactory; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export type CreateRequestFunction = ( |
||||||
|
url: URL, |
||||||
|
config: FetchConfig, |
||||||
|
headers: HeadersInit | undefined, |
||||||
|
body: BodyInit | null | undefined, |
||||||
|
signal?: AbortSignal, |
||||||
|
) => Promise<Request> | Request; |
||||||
|
|
||||||
|
const defaultCreateRequest = ( |
||||||
|
input: RequestInfo | URL, |
||||||
|
init?: RequestInit |
||||||
|
) => { |
||||||
|
return new Request(input, init); |
||||||
|
}; |
||||||
|
|
||||||
|
export function useCreateRequest(options?: UseCreateRequestOptions) { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
|
||||||
|
return useCallback(async ( |
||||||
|
url: URL, |
||||||
|
config: FetchConfig, |
||||||
|
headers: HeadersInit | undefined, |
||||||
|
body: BodyInit | null | undefined, |
||||||
|
signal?: AbortSignal, |
||||||
|
): Promise<Request> => { |
||||||
|
const handle = options?.createRequest |
||||||
|
?? fetchContext?.createRequest |
||||||
|
?? defaultCreateRequest; |
||||||
|
return await handle(url, { |
||||||
|
...config, |
||||||
|
headers, |
||||||
|
body, |
||||||
|
signal, |
||||||
|
}); |
||||||
|
}, [ |
||||||
|
fetchContext?.createRequest, |
||||||
|
options?.createRequest, |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { Combination, RequestIntercepter } from "./types"; |
||||||
|
|
||||||
|
export interface CreateRequestIntercepterOptions { |
||||||
|
intercept?: RequestIntercepter; |
||||||
|
interceptCombination?: Combination; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
const defaultIntercept = (request: Request) => Promise.resolve(request); |
||||||
|
|
||||||
|
export function useCreateRequestIntercepter( |
||||||
|
options?: CreateRequestIntercepterOptions |
||||||
|
) { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
return useCallback((newOptions?: CreateRequestIntercepterOptions) => { |
||||||
|
return (request: Request) => { |
||||||
|
const combination = newOptions?.interceptCombination |
||||||
|
?? options?.interceptCombination |
||||||
|
?? fetchContext?.interceptCombination |
||||||
|
?? 'overrides'; |
||||||
|
if (combination === 'chaining') { |
||||||
|
return [ |
||||||
|
fetchContext?.intercept, |
||||||
|
options?.intercept, |
||||||
|
newOptions?.intercept, |
||||||
|
].reduce<Promise<Request>>( |
||||||
|
(promise, handle) => { |
||||||
|
if (!handle) { |
||||||
|
return promise; |
||||||
|
} else { |
||||||
|
return promise.then(async request => { |
||||||
|
return await handle(request); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
defaultIntercept(request), |
||||||
|
); |
||||||
|
} |
||||||
|
const handle = newOptions?.intercept |
||||||
|
?? options?.intercept |
||||||
|
?? fetchContext?.intercept |
||||||
|
?? defaultIntercept |
||||||
|
return handle(request); |
||||||
|
} |
||||||
|
}, [ |
||||||
|
options?.intercept, |
||||||
|
fetchContext?.intercept, |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { Combination, ResponseTransformer } from "./types"; |
||||||
|
|
||||||
|
function defaultTransform(_: Request, response: Response) { |
||||||
|
return response.clone().json(); |
||||||
|
} |
||||||
|
|
||||||
|
export interface CreateResponseTransformerOptions { |
||||||
|
transform?: ResponseTransformer; |
||||||
|
transformCombination?: Combination; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export function useCreateResponseTransformer(options?: CreateResponseTransformerOptions) { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
return useCallback((newOptions?: CreateResponseTransformerOptions): ResponseTransformer => { |
||||||
|
return (request: Request, response: Response) => { |
||||||
|
const combination = newOptions?.transformCombination |
||||||
|
?? options?.transformCombination |
||||||
|
?? fetchContext?.transformCombination |
||||||
|
?? 'overrides'; |
||||||
|
if (combination === 'chaining') { |
||||||
|
return [ |
||||||
|
fetchContext?.transform, |
||||||
|
options?.transform, |
||||||
|
newOptions?.transform, |
||||||
|
].reduce<Promise<any>>( |
||||||
|
(promise, handle) => { |
||||||
|
if (!handle) { |
||||||
|
return promise; |
||||||
|
} else { |
||||||
|
return promise.then(async data => { |
||||||
|
return await handle(request, response, data); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
defaultTransform(request, response), |
||||||
|
); |
||||||
|
} |
||||||
|
const handle = newOptions?.transform |
||||||
|
?? options?.transform |
||||||
|
?? fetchContext?.transform |
||||||
|
?? defaultTransform; |
||||||
|
return handle(request, response); |
||||||
|
}; |
||||||
|
}, [ |
||||||
|
fetchContext?.transform, |
||||||
|
fetchContext?.transformCombination, |
||||||
|
options?.transform, |
||||||
|
options?.transformCombination, |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { Combination, SearchParams } from "./types"; |
||||||
|
import { useFetchContext } from "./useFetchContext"; |
||||||
|
import { searchParamsIntoUrl } from "./utils"; |
||||||
|
|
||||||
|
export interface CreateUrlOptions { |
||||||
|
baseUrl?: string; |
||||||
|
searchParams?: SearchParams; |
||||||
|
searchParamsCombination?: Combination; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export type CreateUrlFunction = ( |
||||||
|
newOptions: CreateUrlOptions & { url: string } |
||||||
|
) => URL; |
||||||
|
|
||||||
|
export function useCreateUrl(options?: CreateUrlOptions): CreateUrlFunction { |
||||||
|
const fetchContext = useFetchContext(); |
||||||
|
|
||||||
|
return useCallback((newOptions: CreateUrlOptions & { url: string }): URL => { |
||||||
|
const mergeConfig = fetchContext?.searchParamsMergeConfig ?? {}; |
||||||
|
const handleIntoUrl = mergeConfig.handleIntoUrl ?? searchParamsIntoUrl; |
||||||
|
const baseUrl = newOptions.baseUrl |
||||||
|
?? options?.baseUrl |
||||||
|
?? fetchContext?.baseUrl; |
||||||
|
const uri = new URL(newOptions.url, baseUrl); |
||||||
|
const combination = newOptions.searchParamsCombination |
||||||
|
?? options?.searchParamsCombination |
||||||
|
?? fetchContext?.searchParamsCombination |
||||||
|
?? 'chaining'; |
||||||
|
const handleOptions = { |
||||||
|
...mergeConfig, |
||||||
|
combination, |
||||||
|
}; |
||||||
|
|
||||||
|
if (combination === 'overrides') { |
||||||
|
const searchParams = newOptions.searchParams |
||||||
|
?? options?.searchParams |
||||||
|
?? fetchContext?.searchParams; |
||||||
|
if (searchParams != null) { |
||||||
|
handleIntoUrl(uri, searchParams, handleOptions); |
||||||
|
} |
||||||
|
return uri; |
||||||
|
} |
||||||
|
|
||||||
|
if (fetchContext?.searchParams != null) { |
||||||
|
handleIntoUrl(uri, fetchContext.searchParams, handleOptions); |
||||||
|
} |
||||||
|
if (options?.searchParams != null) { |
||||||
|
handleIntoUrl(uri, options.searchParams, handleOptions); |
||||||
|
} |
||||||
|
if (newOptions.searchParams != null) { |
||||||
|
handleIntoUrl(uri, newOptions.searchParams, handleOptions); |
||||||
|
} |
||||||
|
return uri; |
||||||
|
}, [ |
||||||
|
fetchContext?.baseUrl, |
||||||
|
fetchContext?.searchParams, |
||||||
|
fetchContext?.searchParamsCombination, |
||||||
|
fetchContext?.searchParamsMergeConfig, |
||||||
|
options?.baseUrl, |
||||||
|
options?.searchParams, |
||||||
|
options?.searchParamsCombination, |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { |
||||||
|
BodyParams, |
||||||
|
Combination, |
||||||
|
ErrorCorrector, |
||||||
|
FetchConfig, |
||||||
|
Fetcher, |
||||||
|
HttpMethod, |
||||||
|
RequestFactory, |
||||||
|
RequestIntercepter, |
||||||
|
ResponseTransformer, |
||||||
|
SearchParams, |
||||||
|
} from "./types"; |
||||||
|
import { useCreateBody } from "./useCreateBody"; |
||||||
|
import { useCreateHeaders } from "./useCreateHeaders"; |
||||||
|
import { useCreateRequest } from "./useCreateRequest"; |
||||||
|
import { useCreateUrl } from "./useCreateUrl"; |
||||||
|
import { useCreateErrorCorrector } from "./useCreateErrorCorrector"; |
||||||
|
import { useCreateFetchConfig } from "./useCreateFetchConfig"; |
||||||
|
import { useCreateFetcher } from "./useCreateFetcher"; |
||||||
|
import { useCreateRequestIntercepter } from "./useCreateRequestIntercepter"; |
||||||
|
import { useCreateResponseTransformer } from "./useCreateResponseTransformer"; |
||||||
|
|
||||||
|
export interface FetchOptionBase { |
||||||
|
body?: BodyParams; |
||||||
|
bodyCombination?: Combination; |
||||||
|
config?: FetchConfig; |
||||||
|
configCombination?: Combination; |
||||||
|
correct?: ErrorCorrector; |
||||||
|
correctCombination?: Combination; |
||||||
|
fetcher?: Fetcher; |
||||||
|
hasFiles?: boolean; |
||||||
|
headers?: HeadersInit; |
||||||
|
headersCombination?: Combination; |
||||||
|
intercept?: RequestIntercepter; |
||||||
|
interceptCombination?: Combination; |
||||||
|
searchParams?: SearchParams; |
||||||
|
searchParamsCombination?: Combination; |
||||||
|
transform?: ResponseTransformer; |
||||||
|
} |
||||||
|
|
||||||
|
export interface FetchVariables extends FetchOptionBase { |
||||||
|
url: string; |
||||||
|
method?: HttpMethod; |
||||||
|
signal?: AbortSignal; |
||||||
|
} |
||||||
|
|
||||||
|
export interface UseFetchOptions extends FetchOptionBase { |
||||||
|
baseUrl?: string; |
||||||
|
createRequest?: RequestFactory; |
||||||
|
} |
||||||
|
|
||||||
|
export type FetchFunction = <TData = any>(options: FetchVariables) => Promise<TData>; |
||||||
|
|
||||||
|
export function useFetch( |
||||||
|
options: UseFetchOptions = {} |
||||||
|
): FetchFunction { |
||||||
|
const createFetchConfig = useCreateFetchConfig(options); |
||||||
|
const createUrl = useCreateUrl(options); |
||||||
|
const createHeaders = useCreateHeaders(options); |
||||||
|
const createBody = useCreateBody(options); |
||||||
|
const createRequest = useCreateRequest(options); |
||||||
|
const createFetcher = useCreateFetcher(options); |
||||||
|
const createIntercepter = useCreateRequestIntercepter(options); |
||||||
|
const createTransformer = useCreateResponseTransformer(options); |
||||||
|
const createCorrector = useCreateErrorCorrector(options); |
||||||
|
|
||||||
|
return useCallback( |
||||||
|
async <TData>(options: FetchVariables): Promise<TData> => { |
||||||
|
let uri: URL; |
||||||
|
let body: BodyInit | null; |
||||||
|
let headers: HeadersInit | undefined; |
||||||
|
let config: FetchConfig; |
||||||
|
let intercept: RequestIntercepter; |
||||||
|
let transform: ResponseTransformer; |
||||||
|
let correct: ErrorCorrector; |
||||||
|
let request: Request; |
||||||
|
let response: Response | undefined; |
||||||
|
let fetch: Fetcher; |
||||||
|
|
||||||
|
return Promise.resolve() |
||||||
|
.then(() => uri = createUrl(options)) |
||||||
|
.then(() => body = createBody(options)) |
||||||
|
.then(() => headers = createHeaders(options)) |
||||||
|
.then(() => config = createFetchConfig(options)) |
||||||
|
.then(() => intercept = createIntercepter(options)) |
||||||
|
.then(() => transform = createTransformer(options)) |
||||||
|
.then(() => correct = createCorrector(options)) |
||||||
|
.then(() => fetch = createFetcher(options)) |
||||||
|
.then(() => createRequest(uri, config, headers, body, options.signal)) |
||||||
|
.then(async req => await intercept(request = req)) |
||||||
|
.then(async req => await fetch(request = req)) |
||||||
|
.then(async res => await transform(request, response = res)) |
||||||
|
.catch(async err => await correct(err, request, response)); |
||||||
|
}, |
||||||
|
[ |
||||||
|
createFetchConfig, |
||||||
|
createUrl, |
||||||
|
createHeaders, |
||||||
|
createBody, |
||||||
|
createRequest, |
||||||
|
createFetcher, |
||||||
|
createIntercepter, |
||||||
|
createTransformer, |
||||||
|
createCorrector, |
||||||
|
], |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import { useContext } from "react"; |
||||||
|
import { FetchContext, FetchContextValue } from "./FetchContext"; |
||||||
|
|
||||||
|
export function useFetchContext(): FetchContextValue | undefined |
||||||
|
export function useFetchContext(fallback: FetchContextValue): FetchContextValue |
||||||
|
export function useFetchContext(fallback?: FetchContextValue | undefined): FetchContextValue | undefined { |
||||||
|
return useContext(FetchContext) ?? fallback; |
||||||
|
} |
||||||
@ -0,0 +1,375 @@ |
|||||||
|
import isPlainObject from 'lodash/isPlainObject'; |
||||||
|
import isString from 'lodash/isString'; |
||||||
|
import isMap from 'lodash/isMap'; |
||||||
|
import isSet from 'lodash/isSet'; |
||||||
|
import isArray from 'lodash/isArray'; |
||||||
|
import isDate from 'lodash/isDate'; |
||||||
|
import isBoolean from 'lodash/isBoolean'; |
||||||
|
import isNaN from 'lodash/isNaN'; |
||||||
|
import isNumber from 'lodash/isNumber'; |
||||||
|
import { FormatOptions } from "./FetchContext"; |
||||||
|
import { BodyParams, Combination, SearchParams } from "./types"; |
||||||
|
import { FetchError } from './FetchError'; |
||||||
|
|
||||||
|
export const resolveFormatOptions = ( |
||||||
|
options: FormatOptions | undefined, |
||||||
|
): Required<FormatOptions> => ({ |
||||||
|
bool: options?.bool ?? String, |
||||||
|
null: options?.null ?? '', |
||||||
|
nan: options?.nan ?? 'NaN', |
||||||
|
date: options?.date ?? (d => d.toISOString()), |
||||||
|
skipNull: options?.skipNull ?? true, |
||||||
|
skipEmptyString: options?.skipEmptyString ?? true, |
||||||
|
skipNaN: options?.skipNaN ?? true, |
||||||
|
arrayFormat: options?.arrayFormat ?? 'default', |
||||||
|
objectFormat: options?.objectFormat ?? 'bracket', |
||||||
|
}); |
||||||
|
|
||||||
|
export function searchParamsIntoUrl( |
||||||
|
url: URL, |
||||||
|
params: SearchParams, |
||||||
|
options: FormatOptions & { combination: Combination }, |
||||||
|
): void { |
||||||
|
if (options.combination === "overrides") { |
||||||
|
url.search = ""; // clean
|
||||||
|
} |
||||||
|
if (params === null || params === "") { |
||||||
|
return; |
||||||
|
} else if (typeof params === 'string') { |
||||||
|
params = new URLSearchParams(); |
||||||
|
} else if (params instanceof URLSearchParams) { |
||||||
|
// nothing
|
||||||
|
} else if (Array.isArray(params)) { |
||||||
|
for (const [key, value] of params) { |
||||||
|
url.searchParams.set(key, String(value)); |
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
merge( |
||||||
|
url.searchParams as Merger, |
||||||
|
params, |
||||||
|
options, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const isObject = <T = any>(v: any): v is Record<string, T> => { |
||||||
|
return isPlainObject(v); |
||||||
|
}; |
||||||
|
|
||||||
|
export function mergeBodys( |
||||||
|
bodys: BodyParams[], |
||||||
|
hasFiles: boolean | undefined, |
||||||
|
options: FormatOptions & { combination: Combination }, |
||||||
|
): BodyParams | null { |
||||||
|
const size = bodys.length; |
||||||
|
if (size === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
if (size === 1 || options.combination === 'overrides') { |
||||||
|
const body = bodys[size - 1]; |
||||||
|
if (isBodyInit(body) || body === null) { |
||||||
|
return body; |
||||||
|
} |
||||||
|
if (hasFiles) { |
||||||
|
const data = new FormData(); |
||||||
|
merge(data, body, options); |
||||||
|
return data; |
||||||
|
} |
||||||
|
return body; |
||||||
|
} |
||||||
|
if (hasFiles || bodys.some(b => b instanceof FormData)) { |
||||||
|
const data = new FormData(); |
||||||
|
bodys.forEach(body => merge(data, body, options)); |
||||||
|
return data; |
||||||
|
} |
||||||
|
return bodys.reduce((acc, body) => { |
||||||
|
if (!body) { |
||||||
|
return acc; |
||||||
|
} else if ( |
||||||
|
!acc || |
||||||
|
body instanceof ReadableStream || |
||||||
|
body instanceof Blob || |
||||||
|
body instanceof ArrayBuffer || |
||||||
|
ArrayBuffer.isView(body) || |
||||||
|
body instanceof FormData |
||||||
|
) { |
||||||
|
return body; |
||||||
|
} else if (acc instanceof URLSearchParams) { |
||||||
|
if (!(body instanceof URLSearchParams)) { |
||||||
|
throw new Error( |
||||||
|
`Should not merge a ${displayName(body)} into a URLSearchParams.`, |
||||||
|
); |
||||||
|
} |
||||||
|
body.forEach((_, name) => { |
||||||
|
body.getAll(name).forEach((value, index) => { |
||||||
|
if (index === 0) { |
||||||
|
acc.set(name, value); // replace
|
||||||
|
} else { |
||||||
|
acc.append(name, value); // append
|
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} else if (isObject(acc)) { |
||||||
|
if (body instanceof URLSearchParams) { |
||||||
|
body.forEach((_, name) => { |
||||||
|
const values = body.getAll(name); |
||||||
|
const value = values.length > 1 ? values : values[0]; |
||||||
|
// todo expand the name to path
|
||||||
|
// @ts-ignore
|
||||||
|
acc[name] = value; |
||||||
|
}) |
||||||
|
} else if (isObject(body)) { |
||||||
|
// merge first level only
|
||||||
|
return { |
||||||
|
...acc, |
||||||
|
...body, |
||||||
|
} |
||||||
|
} else { |
||||||
|
throw new Error( |
||||||
|
`Should not merge a ${displayName(body)} into a plaint object.`, |
||||||
|
); |
||||||
|
} |
||||||
|
} else { |
||||||
|
const accName = displayName(acc); |
||||||
|
const bodyName = displayName(body); |
||||||
|
if (accName === bodyName) { |
||||||
|
throw new FetchError( |
||||||
|
`Should not merge a ${bodyName} into another ${acc}`, |
||||||
|
); |
||||||
|
} |
||||||
|
throw new FetchError( |
||||||
|
`Should not merge a ${bodyName} into a ${acc}`, |
||||||
|
); |
||||||
|
} |
||||||
|
return acc; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function buildBody( |
||||||
|
body: BodyParams, |
||||||
|
hasFiles: boolean, |
||||||
|
options: FormatOptions, |
||||||
|
): BodyInit | null { |
||||||
|
if (isBodyInit(body) || body == null) { |
||||||
|
return body; |
||||||
|
} |
||||||
|
if (hasFiles) { |
||||||
|
const data = new FormData(); |
||||||
|
merge(data, body, options); |
||||||
|
return data; |
||||||
|
} |
||||||
|
return JSON.stringify(body); |
||||||
|
} |
||||||
|
|
||||||
|
const displayName = (a: any) => Object.prototype.toString.call(a); |
||||||
|
|
||||||
|
export const isBodyInit = (body: BodyParams): body is BodyInit => { |
||||||
|
return body != null && ( |
||||||
|
body instanceof ReadableStream |
||||||
|
|| body instanceof Blob |
||||||
|
|| body instanceof ArrayBuffer |
||||||
|
|| ArrayBuffer.isView(body) |
||||||
|
|| body instanceof FormData |
||||||
|
|| body instanceof URLSearchParams |
||||||
|
|| typeof body === 'string' |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
interface Merger { |
||||||
|
append: (path: string, value: Blob | string) => void; |
||||||
|
set: (path: string, value: Blob | string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
const arrayKey = ( |
||||||
|
strategy: FormatOptions['arrayFormat'], |
||||||
|
path: string, |
||||||
|
index: number, |
||||||
|
) => { |
||||||
|
if (!path) { |
||||||
|
throw new FetchError("invalid root data"); |
||||||
|
} |
||||||
|
switch(strategy) { |
||||||
|
case 'bracket': |
||||||
|
case 'bracket-comma': |
||||||
|
case 'bracket-line': |
||||||
|
return `${path}[]`; |
||||||
|
case 'index': |
||||||
|
return `${path}[${index}]`; |
||||||
|
case 'dot': |
||||||
|
return `${path}.${index}`; |
||||||
|
case 'comma': |
||||||
|
case 'line': |
||||||
|
case 'default': |
||||||
|
default: |
||||||
|
return path; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const objectKey = ( |
||||||
|
strategy: FormatOptions['objectFormat'], |
||||||
|
path: string, |
||||||
|
key: string, |
||||||
|
): string => { |
||||||
|
if (!path) { |
||||||
|
throw new FetchError("invalid root data"); |
||||||
|
} |
||||||
|
switch(strategy) { |
||||||
|
case 'dot': |
||||||
|
return `${path}.${key}`; |
||||||
|
case 'colon': |
||||||
|
return `${path}:${key}`; |
||||||
|
case 'bracket': |
||||||
|
default: |
||||||
|
return `${path}[${key}]`; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function merge( |
||||||
|
merger: Merger, |
||||||
|
params: any, |
||||||
|
options: FormatOptions | undefined, |
||||||
|
supportedFile?: boolean, |
||||||
|
) { |
||||||
|
const opts = resolveFormatOptions(options); |
||||||
|
|
||||||
|
const arrayShallowMode = opts.arrayFormat === 'comma' |
||||||
|
|| opts.arrayFormat === 'line' |
||||||
|
|| opts.arrayFormat === 'bracket-comma' |
||||||
|
|| opts.arrayFormat === 'bracket-line'; |
||||||
|
|
||||||
|
let append = 0; |
||||||
|
|
||||||
|
const withArray = ((cb: () => void) => { |
||||||
|
append++; |
||||||
|
cb(); |
||||||
|
append--; |
||||||
|
}); |
||||||
|
|
||||||
|
const walk = (value: any, path: string, report?: (s: string) => void) => { |
||||||
|
const use = (name: string, value: Blob | string) => { |
||||||
|
if (!name) { |
||||||
|
throw new FetchError("invalid root data"); |
||||||
|
} else if (append > 0) { |
||||||
|
merger.append(name, value); |
||||||
|
} else { |
||||||
|
merger.set(name, value); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const smartUse = (name: string, value: string) => { |
||||||
|
if (!name) { |
||||||
|
throw new FetchError("invalid root data"); |
||||||
|
} else if (report && arrayShallowMode) { |
||||||
|
report(value); |
||||||
|
} else { |
||||||
|
use(name, value); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const shallowUse = (items: string[]) => { |
||||||
|
// | 'comma' // 'foo=1,2,3'
|
||||||
|
// | 'line' // 'foo=1|2|3'
|
||||||
|
// | 'bracket-comma' // 'foo[]=1,2,3'
|
||||||
|
// | 'bracket-line'; // 'foo[]=1|2|3'
|
||||||
|
const key = opts.arrayFormat.startsWith('bracket-') ? path + '[]' : path; |
||||||
|
const sep = opts.arrayFormat.endsWith("-comma") ? "," : "|"; |
||||||
|
smartUse(key, items.map(v => encodeURIComponent(v)).join(sep)); |
||||||
|
}; |
||||||
|
|
||||||
|
if (value == null) { |
||||||
|
if (!opts.skipNull) { |
||||||
|
smartUse(path, opts.null); |
||||||
|
} |
||||||
|
} else if (isString(value)) { |
||||||
|
if (value || !opts.skipEmptyString) { |
||||||
|
smartUse(path, value); |
||||||
|
} |
||||||
|
} else if (isNumber(value)) { |
||||||
|
if (!isNaN(value)) { |
||||||
|
smartUse(path, String(value)); |
||||||
|
} else if (!opts.skipNaN) { |
||||||
|
smartUse(path, opts.nan); |
||||||
|
} |
||||||
|
} else if (isBoolean(value)) { |
||||||
|
smartUse(path, opts.bool(value)); |
||||||
|
} else if (isDate(value)) { |
||||||
|
smartUse(path, opts.date(value)); |
||||||
|
} else if (report && arrayShallowMode) { |
||||||
|
throw new FetchError("The data is too complicated"); |
||||||
|
} else if (value instanceof URLSearchParams) { |
||||||
|
for (const key of value.keys()) { |
||||||
|
const name = objectKey(opts.objectFormat, path, key); |
||||||
|
for (const str of value.getAll(key)) { |
||||||
|
smartUse(name, str); |
||||||
|
} |
||||||
|
} |
||||||
|
} else if (value instanceof Blob) { |
||||||
|
if (!path) { |
||||||
|
throw new FetchError("invalid root data"); |
||||||
|
} else if (!supportedFile) { |
||||||
|
throw new FetchError("Unsupport File type"); |
||||||
|
} else { |
||||||
|
use(path, value); |
||||||
|
} |
||||||
|
} else if (value instanceof FormData) { |
||||||
|
value.forEach((_, key) => { |
||||||
|
const name = objectKey(opts.objectFormat, path, key); |
||||||
|
value.getAll(key).forEach((val) => { |
||||||
|
if (!(val instanceof File)) { |
||||||
|
merger.append(name, val); |
||||||
|
} else if (!supportedFile) { |
||||||
|
throw new Error("Unsupported file type."); |
||||||
|
} else { |
||||||
|
merger.append(name, val); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} else if (isSet(value)) { |
||||||
|
withArray(() => { |
||||||
|
const items: string[] = []; |
||||||
|
Array.from(value).forEach((val, index) => { |
||||||
|
const name = arrayKey(opts.arrayFormat, path, index); |
||||||
|
walk(val, name, s => items.push(s)); |
||||||
|
}); |
||||||
|
shallowUse(items); |
||||||
|
}) |
||||||
|
} else if (isMap(value)) { |
||||||
|
const keys = Array.from(value.keys()); |
||||||
|
if (keys.every(k => isNumber(k) && !isNaN(k))) { |
||||||
|
withArray(() => { |
||||||
|
const items: string[] = []; |
||||||
|
(value as Map<number, any>).forEach((val, index) => { |
||||||
|
const name = arrayKey(opts.arrayFormat, path, index); |
||||||
|
walk(val, name, (s) => items.push(s)); |
||||||
|
}); |
||||||
|
shallowUse(items); |
||||||
|
}); |
||||||
|
} else if (keys.every(k => isString(k))) { |
||||||
|
value.forEach((val, key) => { |
||||||
|
const name = objectKey(opts.objectFormat, path, key); |
||||||
|
walk(val, name); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
throw new FetchError("invalid data of a Map type"); |
||||||
|
} |
||||||
|
} else if (isArray(value)) { |
||||||
|
withArray(() => { |
||||||
|
const items: string[] = []; |
||||||
|
value.forEach((val, index) => { |
||||||
|
const name = arrayKey(opts.arrayFormat, path, index); |
||||||
|
walk(val, name, (s) => items.push(s)); |
||||||
|
}); |
||||||
|
shallowUse(items); |
||||||
|
}); |
||||||
|
} else if (isObject(value)) { |
||||||
|
for (const [key, val] of Object.entries(value)) { |
||||||
|
const name = objectKey(opts.objectFormat, path, key); |
||||||
|
walk(val, name); |
||||||
|
} |
||||||
|
} else { |
||||||
|
throw new FetchError("Unsupported data type."); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
walk(params, ""); |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
{ |
||||||
|
"name": "@rakit/joy-ui", |
||||||
|
"type": "module", |
||||||
|
"description": "low level admin & dashboard scaffold", |
||||||
|
"main": "./src/index.ts", |
||||||
|
"dependencies": { |
||||||
|
"@rakit/use-async": "workspace:*", |
||||||
|
"@rakit/use-invariant": "workspace:*", |
||||||
|
"@tanstack/react-query": "^5.52.2", |
||||||
|
"lodash": "^4.17.21", |
||||||
|
"react": "^18.3.1", |
||||||
|
"react-dom": "^18.3.1", |
||||||
|
"react-error-boundary": "^4.0.13", |
||||||
|
"react-is": "^18.3.1", |
||||||
|
"react-router-dom": "^6.26.1", |
||||||
|
"sonner": "^1.5.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/lodash": "^4.17.7", |
||||||
|
"@types/react-dom": "^18.3.0", |
||||||
|
"@types/react-is": "^18.3.0" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@ |
|||||||
|
console.log("sss") |
||||||
@ -0,0 +1 @@ |
|||||||
|
console.log("sss") |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import SvgIcon from '@mui/joy/SvgIcon'; |
||||||
|
|
||||||
|
export function GoogleIcon() { |
||||||
|
return ( |
||||||
|
<SvgIcon fontSize="xl"> |
||||||
|
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"> |
||||||
|
<path |
||||||
|
fill="#4285F4" |
||||||
|
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#34A853" |
||||||
|
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#FBBC05" |
||||||
|
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#EA4335" |
||||||
|
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z" |
||||||
|
/> |
||||||
|
</g> |
||||||
|
</SvgIcon> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import SvgIcon from '@mui/joy/SvgIcon'; |
||||||
|
|
||||||
|
export function WechatIcon() { |
||||||
|
return ( |
||||||
|
<SvgIcon fontSize="xl"> |
||||||
|
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"> |
||||||
|
<path |
||||||
|
fill="#4285F4" |
||||||
|
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#34A853" |
||||||
|
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#FBBC05" |
||||||
|
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
fill="#EA4335" |
||||||
|
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z" |
||||||
|
/> |
||||||
|
</g> |
||||||
|
</SvgIcon> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export * from "./GoogleIcon"; |
||||||
|
export * from "./WechatIcon"; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export * from "./icons"; |
||||||
|
export * from "./layout"; |
||||||
|
export * from "./theme"; |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { CssVarsProvider } from '@mui/joy/styles'; |
||||||
|
import CssBaseline from '@mui/joy/CssBaseline'; |
||||||
|
import Box from '@mui/joy/Box'; |
||||||
|
|
||||||
|
import { AppBar } from './AppBar'; |
||||||
|
import { Sidebar } from './Sidebar'; |
||||||
|
import { Outlet } from 'react-router-dom'; |
||||||
|
|
||||||
|
export function AdminRoot() { |
||||||
|
return ( |
||||||
|
<CssVarsProvider disableTransitionOnChange> |
||||||
|
<CssBaseline /> |
||||||
|
<Box sx={{ display: 'flex', minHeight: '100dvh' }}> |
||||||
|
<AppBar /> |
||||||
|
<Sidebar /> |
||||||
|
<Box |
||||||
|
component="main" |
||||||
|
className="MainContent" |
||||||
|
sx={{ |
||||||
|
px: { xs: 2, md: 6 }, |
||||||
|
pt: { |
||||||
|
xs: 'calc(12px + var(--Header-height))', |
||||||
|
sm: 'calc(12px + var(--Header-height))', |
||||||
|
md: 3, |
||||||
|
}, |
||||||
|
pb: { xs: 2, sm: 2, md: 3 }, |
||||||
|
flex: 1, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
minWidth: 0, |
||||||
|
height: '100dvh', |
||||||
|
gap: 1, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Outlet /> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</CssVarsProvider> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import GlobalStyles from "@mui/joy/GlobalStyles"; |
||||||
|
import Sheet from "@mui/joy/Sheet"; |
||||||
|
import IconButton from "@mui/joy/IconButton"; |
||||||
|
import MenuIcon from "@mui/icons-material/Menu"; |
||||||
|
|
||||||
|
import { toggleSidebar } from "./utils"; |
||||||
|
|
||||||
|
export function AppBar() { |
||||||
|
return ( |
||||||
|
<Sheet |
||||||
|
sx={{ |
||||||
|
display: { xs: "flex", md: "none" }, |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "space-between", |
||||||
|
position: "fixed", |
||||||
|
top: 0, |
||||||
|
width: "100vw", |
||||||
|
height: "var(--Header-height)", |
||||||
|
zIndex: 9995, |
||||||
|
p: 2, |
||||||
|
gap: 1, |
||||||
|
borderBottom: "1px solid", |
||||||
|
borderColor: "background.level1", |
||||||
|
boxShadow: "sm", |
||||||
|
}} |
||||||
|
> |
||||||
|
<GlobalStyles |
||||||
|
styles={(theme) => ({ |
||||||
|
":root": { |
||||||
|
"--Header-height": "52px", |
||||||
|
[theme.breakpoints.up("md")]: { |
||||||
|
"--Header-height": "0px", |
||||||
|
}, |
||||||
|
}, |
||||||
|
})} |
||||||
|
/> |
||||||
|
<IconButton |
||||||
|
onClick={() => toggleSidebar()} |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
size="sm" |
||||||
|
> |
||||||
|
<MenuIcon /> |
||||||
|
</IconButton> |
||||||
|
</Sheet> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import * as React from "react"; |
||||||
|
import { useColorScheme } from "@mui/joy/styles"; |
||||||
|
import IconButton, { type IconButtonProps } from "@mui/joy/IconButton"; |
||||||
|
import DarkModeRoundedIcon from "@mui/icons-material/DarkModeRounded"; |
||||||
|
import LightModeIcon from "@mui/icons-material/LightMode"; |
||||||
|
|
||||||
|
export function ColorSchemeToggle(props: IconButtonProps) { |
||||||
|
const { onClick, sx, ...other } = props; |
||||||
|
const { mode, setMode } = useColorScheme(); |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
|
||||||
|
React.useEffect(() => { |
||||||
|
setMounted(true); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return ( |
||||||
|
<IconButton |
||||||
|
size="sm" |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
{...other} |
||||||
|
sx={sx} |
||||||
|
disabled |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
return ( |
||||||
|
<IconButton |
||||||
|
id="toggle-mode" |
||||||
|
size="sm" |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
{...other} |
||||||
|
onClick={(event) => { |
||||||
|
setMode(mode === "light" ? "dark" : "light"); |
||||||
|
onClick?.(event); |
||||||
|
}} |
||||||
|
sx={[ |
||||||
|
{ |
||||||
|
"& > *:first-child": { |
||||||
|
display: mode === "dark" ? "none" : "initial", |
||||||
|
}, |
||||||
|
"& > *:last-child": { |
||||||
|
display: mode === "light" ? "none" : "initial", |
||||||
|
}, |
||||||
|
}, |
||||||
|
...(Array.isArray(sx) ? sx : [sx]), |
||||||
|
]} |
||||||
|
> |
||||||
|
<DarkModeRoundedIcon /> |
||||||
|
<LightModeIcon /> |
||||||
|
</IconButton> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
import History from '@mui/icons-material/History'; |
||||||
|
import ErrorIcon from '@mui/icons-material/Report'; |
||||||
|
import Accordion from '@mui/joy/Accordion'; |
||||||
|
import AccordionDetails from '@mui/joy/AccordionDetails'; |
||||||
|
import AccordionSummary from '@mui/joy/AccordionSummary'; |
||||||
|
import Button from '@mui/joy/Button'; |
||||||
|
import { styled } from '@mui/joy/styles'; |
||||||
|
import Typography from '@mui/joy/Typography'; |
||||||
|
import { |
||||||
|
Title, |
||||||
|
useDefaultTitle, |
||||||
|
useErrorContext, |
||||||
|
useResetErrorBoundaryOnLocationChange, |
||||||
|
useTranslate |
||||||
|
} from '@rakit/core'; |
||||||
|
import { Fragment } from 'react'; |
||||||
|
|
||||||
|
export function Error() { |
||||||
|
const title = useDefaultTitle(); |
||||||
|
const { error, errorInfo, resetErrorBoundary } = useErrorContext(); |
||||||
|
const translate = useTranslate(); |
||||||
|
|
||||||
|
useResetErrorBoundaryOnLocationChange(resetErrorBoundary); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Fragment> |
||||||
|
{title && <Title title={title} />} |
||||||
|
<Root> |
||||||
|
<h1 className={ErrorClasses.title} role="alert"> |
||||||
|
<ErrorIcon className={ErrorClasses.icon} /> |
||||||
|
{translate('ra.page.error')} |
||||||
|
</h1> |
||||||
|
<div>{translate('ra.message.error')}</div> |
||||||
|
{process.env.NODE_ENV !== 'production' && ( |
||||||
|
<> |
||||||
|
<Accordion className={ErrorClasses.panel}> |
||||||
|
<AccordionSummary className={ErrorClasses.panelSumary}> |
||||||
|
{translate(error.message)} |
||||||
|
</AccordionSummary> |
||||||
|
<AccordionDetails className={ErrorClasses.panelDetails}> |
||||||
|
{/* error message is repeated here to allow users to copy it. AccordionSummary doesn't support text selection. */} |
||||||
|
<p>{translate(error.message)}</p> |
||||||
|
<p>{errorInfo?.componentStack}</p> |
||||||
|
</AccordionDetails> |
||||||
|
</Accordion> |
||||||
|
|
||||||
|
<div className={ErrorClasses.advice}> |
||||||
|
<Typography textAlign="center"> |
||||||
|
Need help with this error? Try the following: |
||||||
|
</Typography> |
||||||
|
<Typography component="div"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
Check the{' '} |
||||||
|
<a href="https://marmelab.com/react-admin/documentation.html"> |
||||||
|
react-admin documentation |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
Search on{' '} |
||||||
|
<a href="https://stackoverflow.com/questions/tagged/react-admin"> |
||||||
|
StackOverflow |
||||||
|
</a>{' '} |
||||||
|
for community answers |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
Get help from the core team via{' '} |
||||||
|
<a href="https://react-admin-ee.marmelab.com/#fromsww"> |
||||||
|
react-admin Enterprise Edition |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</Typography> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
<div className={ErrorClasses.toolbar}> |
||||||
|
<Button |
||||||
|
variant="solid" |
||||||
|
startDecorator={<History />} |
||||||
|
onClick={goBack} |
||||||
|
> |
||||||
|
{translate('ra.action.back')} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</Root> |
||||||
|
</Fragment> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const PREFIX = 'RaError'; |
||||||
|
|
||||||
|
export const ErrorClasses = { |
||||||
|
container: `${PREFIX}-container`, |
||||||
|
title: `${PREFIX}-title`, |
||||||
|
icon: `${PREFIX}-icon`, |
||||||
|
panel: `${PREFIX}-panel`, |
||||||
|
panelSumary: `${PREFIX}-panelSumary`, |
||||||
|
panelDetails: `${PREFIX}-panelDetails`, |
||||||
|
toolbar: `${PREFIX}-toolbar`, |
||||||
|
advice: `${PREFIX}-advice`, |
||||||
|
}; |
||||||
|
|
||||||
|
const Root = styled('div', { |
||||||
|
name: PREFIX, |
||||||
|
overridesResolver: (_, styles) => styles.root, |
||||||
|
})(({ theme }) => ({ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
[theme.breakpoints.down('md')]: { |
||||||
|
padding: '1em', |
||||||
|
}, |
||||||
|
fontFamily: 'Roboto, sans-serif', |
||||||
|
opacity: 0.5, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.title}`]: { |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.icon}`]: { |
||||||
|
width: '2em', |
||||||
|
height: '2em', |
||||||
|
marginRight: '0.5em', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.panel}`]: { |
||||||
|
marginTop: '1em', |
||||||
|
maxWidth: '60em', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.panelSumary}`]: { |
||||||
|
userSelect: 'all', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.panelDetails}`]: { |
||||||
|
whiteSpace: 'pre-wrap', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.toolbar}`]: { |
||||||
|
marginTop: '2em', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${ErrorClasses.advice}`]: { |
||||||
|
marginTop: '2em', |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
function goBack() { |
||||||
|
window.history.go(-1); |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import Box, { BoxProps } from '@mui/joy/Box'; |
||||||
|
import CircularProgress, { CircularProgressProps } from '@mui/joy/CircularProgress'; |
||||||
|
|
||||||
|
export interface LoadingProps extends CircularProgressProps { |
||||||
|
rootProps?: BoxProps; |
||||||
|
} |
||||||
|
|
||||||
|
export function Loading(props: LoadingProps) { |
||||||
|
const { rootProps, ...rest } = props; |
||||||
|
return ( |
||||||
|
<Box |
||||||
|
display="flex" |
||||||
|
flexDirection="column" |
||||||
|
justifyContent="center" |
||||||
|
alignItems="center" |
||||||
|
gap={2} |
||||||
|
height="100dvh" |
||||||
|
{...rootProps} |
||||||
|
> |
||||||
|
<CircularProgress |
||||||
|
{...rest} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,291 @@ |
|||||||
|
import Alert, { AlertProps } from "@mui/joy/Alert"; |
||||||
|
import Button from "@mui/joy/Button"; |
||||||
|
import IconButton from "@mui/joy/IconButton"; |
||||||
|
import Typography from "@mui/joy/Typography"; |
||||||
|
import { styled, VariantProp } from "@mui/joy/styles"; |
||||||
|
import InfoIcon from '@mui/icons-material/Info'; |
||||||
|
import WarningIcon from '@mui/icons-material/Warning'; |
||||||
|
import ReportIcon from '@mui/icons-material/Report'; |
||||||
|
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; |
||||||
|
import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; |
||||||
|
import { |
||||||
|
NotificationPayload, |
||||||
|
NotificationPosition, |
||||||
|
NotificationType, |
||||||
|
useNotificationContext, |
||||||
|
useTranslate, |
||||||
|
useUndoableDispatcher |
||||||
|
} from "@rakit/core"; |
||||||
|
import { |
||||||
|
Toaster, |
||||||
|
toast, |
||||||
|
ExternalToast |
||||||
|
} from 'sonner' |
||||||
|
import { |
||||||
|
Dispatch, |
||||||
|
ReactNode, |
||||||
|
SetStateAction, |
||||||
|
useCallback, |
||||||
|
useEffect, |
||||||
|
useMemo, |
||||||
|
useState |
||||||
|
} from "react"; |
||||||
|
|
||||||
|
const colorMap: Record<NotificationType, AlertProps["color"]> = { |
||||||
|
success: 'success', |
||||||
|
info: 'primary', |
||||||
|
warning: 'warning', |
||||||
|
error: 'danger', |
||||||
|
} |
||||||
|
|
||||||
|
const iconMap: Record<NotificationType, ReactNode> = { |
||||||
|
success: <CheckCircleIcon />, |
||||||
|
info: <InfoIcon />, |
||||||
|
warning: <WarningIcon />, |
||||||
|
error: <ReportIcon />, |
||||||
|
} |
||||||
|
|
||||||
|
function getColor(type: NotificationType | undefined): AlertProps["color"] { |
||||||
|
return type ? colorMap[type] : "neutral"; |
||||||
|
} |
||||||
|
|
||||||
|
function getIcon( |
||||||
|
type: NotificationType | undefined, |
||||||
|
icon: ReactNode | undefined |
||||||
|
): ReactNode | undefined { |
||||||
|
return icon ?? (type ? iconMap[type] : null); |
||||||
|
} |
||||||
|
|
||||||
|
export interface NotificationProps { |
||||||
|
expand?: boolean; |
||||||
|
multiLine?: boolean; |
||||||
|
position?: NotificationPosition; |
||||||
|
autoHideDuration?: number; |
||||||
|
visibleToasts?: number; |
||||||
|
dismissable?: boolean; |
||||||
|
gap?: number; |
||||||
|
offset?: string | number; |
||||||
|
dir?: 'rtl' | 'ltr' | 'auto'; |
||||||
|
containerAriaLabel?: string; |
||||||
|
variant?: VariantProp; |
||||||
|
} |
||||||
|
|
||||||
|
type ToastPayload = NotificationPayload & { id: number | string } |
||||||
|
|
||||||
|
function useRenderNotification( |
||||||
|
defaultDismissable: boolean | undefined, |
||||||
|
defaultMultiLine: boolean | undefined, |
||||||
|
variant: VariantProp, |
||||||
|
setToastItems: Dispatch<SetStateAction<ToastPayload[]>> |
||||||
|
) { |
||||||
|
const translate = useTranslate(); |
||||||
|
const dispatchUndo = useUndoableDispatcher(); |
||||||
|
|
||||||
|
return useCallback((notification: NotificationPayload) => { |
||||||
|
const { |
||||||
|
description, |
||||||
|
descriptionArgs, |
||||||
|
message, |
||||||
|
messageArgs, |
||||||
|
multiLine = defaultMultiLine, |
||||||
|
icon, |
||||||
|
type, |
||||||
|
undoable, |
||||||
|
undoableId, |
||||||
|
dismissable = defaultDismissable, |
||||||
|
} = notification; |
||||||
|
|
||||||
|
let isDismissed = false; |
||||||
|
let id: string | number; |
||||||
|
|
||||||
|
const onDismiss = (): void => { |
||||||
|
if (isDismissed) { |
||||||
|
return; |
||||||
|
} |
||||||
|
isDismissed = true; |
||||||
|
setToastItems(list => { |
||||||
|
const index = list.findIndex(n => n.id === id); |
||||||
|
if (index === -1) return list; |
||||||
|
return list.toSpliced(index, 1); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const data: ExternalToast = { |
||||||
|
duration: notification.autoHideDuration, |
||||||
|
position: notification.position, |
||||||
|
unstyled: true, |
||||||
|
onAutoClose: onDismiss, |
||||||
|
onDismiss: onDismiss, |
||||||
|
}; |
||||||
|
|
||||||
|
const color = getColor(type); |
||||||
|
|
||||||
|
const undoButton = undoable ? ( |
||||||
|
<Button |
||||||
|
color={color} |
||||||
|
size="sm" |
||||||
|
sx={{ mr: dismissable ? 1 : 0 }} |
||||||
|
variant={variant} |
||||||
|
onClick={() => dispatchUndo(undoableId!, true)} |
||||||
|
> |
||||||
|
<>{translate('ra.action.undo')}</> |
||||||
|
</Button> |
||||||
|
) : null; |
||||||
|
|
||||||
|
const dismissButton = dismissable ? ( |
||||||
|
<IconButton |
||||||
|
variant={variant} |
||||||
|
color={color} |
||||||
|
size="sm" |
||||||
|
onClick={() => toast.dismiss(id)} |
||||||
|
> |
||||||
|
<CloseRoundedIcon /> |
||||||
|
</IconButton> |
||||||
|
) : null; |
||||||
|
|
||||||
|
id = toast(( |
||||||
|
<Alert |
||||||
|
variant={variant} |
||||||
|
color={color} |
||||||
|
startDecorator={getIcon(type, icon)} |
||||||
|
endDecorator={ |
||||||
|
undoable && dismissable |
||||||
|
? ( |
||||||
|
<> |
||||||
|
{undoButton} |
||||||
|
{dismissButton} |
||||||
|
</> |
||||||
|
) |
||||||
|
: undoable |
||||||
|
? undoButton |
||||||
|
: dismissable |
||||||
|
? dismissButton |
||||||
|
: null |
||||||
|
} |
||||||
|
role="toast" |
||||||
|
> |
||||||
|
<div> |
||||||
|
{typeof message === "string" ? ( |
||||||
|
<AutoMultiLine multiLine={multiLine}> |
||||||
|
{translate(message, messageArgs)} |
||||||
|
</AutoMultiLine> |
||||||
|
) : ( |
||||||
|
<div>{message}</div> |
||||||
|
)} |
||||||
|
{description != null ? ( |
||||||
|
<Typography level="body-sm" color={color}> |
||||||
|
{typeof description === "string" ? ( |
||||||
|
<AutoMultiLine multiLine={multiLine}> |
||||||
|
{translate(description, descriptionArgs)} |
||||||
|
</AutoMultiLine> |
||||||
|
) : description} |
||||||
|
</Typography> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
</Alert > |
||||||
|
), data); |
||||||
|
|
||||||
|
setToastItems(list => [...list, { |
||||||
|
id, |
||||||
|
...notification, |
||||||
|
}]); |
||||||
|
}, [ |
||||||
|
defaultDismissable, |
||||||
|
defaultMultiLine, |
||||||
|
setToastItems, |
||||||
|
variant, |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Provides a way to show a notification. |
||||||
|
* @see useNotify |
||||||
|
* |
||||||
|
* @example <caption>Basic usage</caption> |
||||||
|
* <Notification /> |
||||||
|
* |
||||||
|
* @param props The component props |
||||||
|
* @param {string} props.type The notification type. Defaults to 'info'. |
||||||
|
* @param {number} props.autoHideDuration Duration in milliseconds to wait until hiding a given notification. Defaults to 4000. |
||||||
|
* @param {boolean} props.multiLine Set it to `true` if the notification message should be shown in more than one line. |
||||||
|
*/ |
||||||
|
|
||||||
|
export function Notification(props: NotificationProps) { |
||||||
|
const { |
||||||
|
dismissable: defaultDismissable, |
||||||
|
expand = false, |
||||||
|
multiLine: defaultMultiLine, |
||||||
|
position = "bottom-center", |
||||||
|
visibleToasts = 3, |
||||||
|
variant = "soft", |
||||||
|
} = props; |
||||||
|
|
||||||
|
const { notifications, takeNotification } = useNotificationContext(); |
||||||
|
const [toastItems, setToastItems] = useState<ToastPayload[]>([]); |
||||||
|
|
||||||
|
const renderNotification = useRenderNotification( |
||||||
|
defaultDismissable, |
||||||
|
defaultMultiLine, |
||||||
|
variant, |
||||||
|
setToastItems, |
||||||
|
); |
||||||
|
|
||||||
|
const hasUndoable = useMemo( |
||||||
|
() => toastItems.some(n => n.undoable), |
||||||
|
[toastItems], |
||||||
|
); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
while (notifications.length && toastItems.length < visibleToasts) { |
||||||
|
const notification = takeNotification(); |
||||||
|
if (notification) { |
||||||
|
renderNotification(notification); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const beforeunload = (e: BeforeUnloadEvent) => { |
||||||
|
e.preventDefault(); |
||||||
|
const confirmationMessage = ''; |
||||||
|
e.returnValue = confirmationMessage; |
||||||
|
return confirmationMessage; |
||||||
|
}; |
||||||
|
|
||||||
|
if (hasUndoable) { |
||||||
|
window.addEventListener('beforeunload', beforeunload); |
||||||
|
|
||||||
|
return () => { |
||||||
|
window.removeEventListener('beforeunload', beforeunload); |
||||||
|
}; |
||||||
|
} |
||||||
|
}, [ |
||||||
|
notifications, |
||||||
|
toastItems, |
||||||
|
visibleToasts, |
||||||
|
hasUndoable, |
||||||
|
takeNotification, |
||||||
|
renderNotification, |
||||||
|
]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Toaster |
||||||
|
expand={expand} |
||||||
|
position={position} |
||||||
|
duration={props.autoHideDuration} |
||||||
|
gap={props.gap} |
||||||
|
offset={props.offset} |
||||||
|
dir={props.dir} |
||||||
|
visibleToasts={visibleToasts} |
||||||
|
containerAriaLabel={props.containerAriaLabel} |
||||||
|
pauseWhenPageIsHidden={hasUndoable} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const AutoMultiLine = styled('div', { |
||||||
|
name: "AutoMultiLine", |
||||||
|
overridesResolver: (props, styles) => styles.root, |
||||||
|
shouldForwardProp: prop => prop !== 'multiLine', |
||||||
|
})<{ multiLine?: boolean }>(({ multiLine }) => multiLine |
||||||
|
? { whiteSpace: 'pre-wrap' } |
||||||
|
: {} |
||||||
|
); |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { Portlet } from "@rakit/core"; |
||||||
|
import { ReactNode } from "react"; |
||||||
|
|
||||||
|
export function PageActions(props: { children?: ReactNode }) { |
||||||
|
const { children } = props; |
||||||
|
|
||||||
|
if (children == null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Portlet to="page-actions"> |
||||||
|
{children} |
||||||
|
</Portlet> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
import Box from '@mui/joy/Box'; |
||||||
|
import Breadcrumbs from '@mui/joy/Breadcrumbs'; |
||||||
|
import Link from '@mui/joy/Link'; |
||||||
|
import Typography from '@mui/joy/Typography'; |
||||||
|
|
||||||
|
import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; |
||||||
|
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; |
||||||
|
import { ReactNode, useState } from 'react'; |
||||||
|
import { PortalProvider, TitlePortalProvider } from '@rakit/core'; |
||||||
|
|
||||||
|
export interface PageRootProps { |
||||||
|
children: ReactNode; |
||||||
|
} |
||||||
|
|
||||||
|
export function PageRoot(props: PageRootProps) { |
||||||
|
const [titlePortal, setTitlePortal] = useState<Element | null>(null); |
||||||
|
const [actionsPortal, setActionsPortal] = useState<Element | null>(null); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Box |
||||||
|
component="main" |
||||||
|
className="MainContent" |
||||||
|
sx={{ |
||||||
|
px: { xs: 2, md: 6 }, |
||||||
|
pt: { |
||||||
|
xs: 'calc(12px + var(--Header-height))', |
||||||
|
sm: 'calc(12px + var(--Header-height))', |
||||||
|
md: 3, |
||||||
|
}, |
||||||
|
pb: { xs: 2, sm: 2, md: 3 }, |
||||||
|
flex: 1, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
minWidth: 0, |
||||||
|
height: '100dvh', |
||||||
|
gap: 1, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center' }}> |
||||||
|
<Breadcrumbs |
||||||
|
size="sm" |
||||||
|
aria-label="breadcrumbs" |
||||||
|
separator={<ChevronRightRoundedIcon fontSize="small" />} |
||||||
|
sx={{ pl: 0 }} |
||||||
|
> |
||||||
|
<Link |
||||||
|
underline="none" |
||||||
|
color="neutral" |
||||||
|
href="#some-link" |
||||||
|
aria-label="Home" |
||||||
|
> |
||||||
|
<HomeRoundedIcon /> |
||||||
|
</Link> |
||||||
|
<Link |
||||||
|
underline="hover" |
||||||
|
color="neutral" |
||||||
|
href="#some-link" |
||||||
|
sx={{ fontSize: 12, fontWeight: 500 }} |
||||||
|
> |
||||||
|
Dashboard |
||||||
|
</Link> |
||||||
|
<Typography color="primary" sx={{ fontWeight: 500, fontSize: 12 }}> |
||||||
|
Orders |
||||||
|
</Typography> |
||||||
|
</Breadcrumbs> |
||||||
|
</Box> |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
mb: 1, |
||||||
|
gap: 1, |
||||||
|
flexDirection: { xs: 'column', sm: 'row' }, |
||||||
|
alignItems: { xs: 'start', sm: 'center' }, |
||||||
|
flexWrap: 'wrap', |
||||||
|
justifyContent: 'space-between', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Typography |
||||||
|
level="h2" |
||||||
|
component="h1" |
||||||
|
flex="1" |
||||||
|
textOverflow="ellipsis" |
||||||
|
whiteSpace="nowrap" |
||||||
|
overflow="hidden" |
||||||
|
ref={setTitlePortal} |
||||||
|
/> |
||||||
|
<Box ref={setActionsPortal} /> |
||||||
|
</Box> |
||||||
|
<TitlePortalProvider value={titlePortal}> |
||||||
|
<PortalProvider |
||||||
|
name="page-actions" |
||||||
|
container={actionsPortal} |
||||||
|
> |
||||||
|
{props.children} |
||||||
|
</PortalProvider> |
||||||
|
</TitlePortalProvider> |
||||||
|
</Box> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,358 @@ |
|||||||
|
import Box from '@mui/joy/Box'; |
||||||
|
import Drawer from '@mui/joy/Drawer'; |
||||||
|
import Button from '@mui/joy/Button'; |
||||||
|
import Card from '@mui/joy/Card'; |
||||||
|
import CardContent from '@mui/joy/CardContent'; |
||||||
|
import Checkbox from '@mui/joy/Checkbox'; |
||||||
|
import DialogTitle from '@mui/joy/DialogTitle'; |
||||||
|
import DialogContent from '@mui/joy/DialogContent'; |
||||||
|
import ModalClose from '@mui/joy/ModalClose'; |
||||||
|
import Divider from '@mui/joy/Divider'; |
||||||
|
import FormControl from '@mui/joy/FormControl'; |
||||||
|
import FormLabel from '@mui/joy/FormLabel'; |
||||||
|
import List from '@mui/joy/List'; |
||||||
|
import ListItem from '@mui/joy/ListItem'; |
||||||
|
import ListItemDecorator from '@mui/joy/ListItemDecorator'; |
||||||
|
import Stack from '@mui/joy/Stack'; |
||||||
|
import RadioGroup from '@mui/joy/RadioGroup'; |
||||||
|
import Radio from '@mui/joy/Radio'; |
||||||
|
import Sheet from '@mui/joy/Sheet'; |
||||||
|
import Typography from '@mui/joy/Typography'; |
||||||
|
import TuneIcon from '@mui/icons-material/TuneRounded'; |
||||||
|
import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; |
||||||
|
import ApartmentRoundedIcon from '@mui/icons-material/ApartmentRounded'; |
||||||
|
import MeetingRoomRoundedIcon from '@mui/icons-material/MeetingRoomRounded'; |
||||||
|
// import HotelRoundedIcon from '@mui/icons-material/HotelRounded';
|
||||||
|
import Person from '@mui/icons-material/Person'; |
||||||
|
import People from '@mui/icons-material/People'; |
||||||
|
// import Apartment from '@mui/icons-material/Apartment';
|
||||||
|
// import Done from '@mui/icons-material/Done';
|
||||||
|
import { Fragment, useState } from 'react'; |
||||||
|
import IcContrastSvg from "../assets/ic-contrast.svg"; |
||||||
|
// import IcAutofitWidthSvg from "../assets/ic-autofit-width.svg";
|
||||||
|
import IcSidebarOutlineSvg from "../assets/ic-sidebar-outline.svg"; |
||||||
|
import IcSidebarFilledSvg from "../assets/ic-sidebar-filled.svg"; |
||||||
|
|
||||||
|
const sidebarSettings = [ |
||||||
|
{ |
||||||
|
id: "integrate", |
||||||
|
label: "Integrate", |
||||||
|
icon: IcSidebarOutlineSvg, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "apparent", |
||||||
|
label: "Apparent", |
||||||
|
icon: IcSidebarFilledSvg, |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const genericSettings = [ |
||||||
|
{ |
||||||
|
id: "comtrast", |
||||||
|
label: "Comtrast", |
||||||
|
icon: IcContrastSvg, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "compact", |
||||||
|
label: "Compact", |
||||||
|
icon: IcSidebarFilledSvg, |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
export default function Settings() { |
||||||
|
const [open, setOpen] = useState(false); |
||||||
|
const [type, setType] = useState('Guesthouse'); |
||||||
|
const [, setAmenities] = useState([0, 6]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Fragment> |
||||||
|
<Button |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
startDecorator={<TuneIcon />} |
||||||
|
onClick={() => setOpen(true)} |
||||||
|
> |
||||||
|
Change filters |
||||||
|
</Button> |
||||||
|
|
||||||
|
<Drawer |
||||||
|
size="md" |
||||||
|
variant="plain" |
||||||
|
open={open} |
||||||
|
onClose={() => setOpen(false)} |
||||||
|
slotProps={{ |
||||||
|
content: { |
||||||
|
sx: { |
||||||
|
bgcolor: 'transparent', |
||||||
|
p: { md: 3, sm: 0 }, |
||||||
|
boxShadow: 'none', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Sheet |
||||||
|
sx={{ |
||||||
|
borderRadius: 'md', |
||||||
|
p: 2, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: 2, |
||||||
|
height: '100%', |
||||||
|
overflow: 'auto', |
||||||
|
}} |
||||||
|
> |
||||||
|
<DialogTitle>Filters</DialogTitle> |
||||||
|
<ModalClose /> |
||||||
|
<Divider sx={{ mt: 'auto' }} /> |
||||||
|
|
||||||
|
<DialogContent sx={{ gap: 2 }}> |
||||||
|
<FormControl> |
||||||
|
<FormLabel sx={{ typography: 'title-md', fontWeight: 'bold' }}> |
||||||
|
Property type |
||||||
|
</FormLabel> |
||||||
|
<RadioGroup |
||||||
|
value={type || ''} |
||||||
|
onChange={(event) => { |
||||||
|
setType(event.target.value); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: 'grid', |
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', |
||||||
|
gap: 1.5, |
||||||
|
}} |
||||||
|
> |
||||||
|
{[ |
||||||
|
{ |
||||||
|
name: '浅色', |
||||||
|
icon: <HomeRoundedIcon />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '深色', |
||||||
|
icon: <ApartmentRoundedIcon />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '自动', |
||||||
|
icon: <MeetingRoomRoundedIcon />, |
||||||
|
}, |
||||||
|
].map((item) => ( |
||||||
|
<Card |
||||||
|
key={item.name} |
||||||
|
sx={{ |
||||||
|
boxShadow: 'none', |
||||||
|
'&:hover': { bgcolor: 'background.level1' }, |
||||||
|
}} |
||||||
|
> |
||||||
|
<CardContent> |
||||||
|
{item.icon} |
||||||
|
<Typography level="title-md">{item.name}</Typography> |
||||||
|
</CardContent> |
||||||
|
<Radio |
||||||
|
disableIcon |
||||||
|
overlay |
||||||
|
checked={type === item.name} |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
value={item.name} |
||||||
|
sx={{ mt: -2 }} |
||||||
|
slotProps={{ |
||||||
|
action: { |
||||||
|
sx: { |
||||||
|
...(type === item.name && { |
||||||
|
borderWidth: 2, |
||||||
|
borderColor: |
||||||
|
'var(--joy-palette-primary-outlinedBorder)', |
||||||
|
}), |
||||||
|
'&:hover': { |
||||||
|
bgcolor: 'transparent', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Card> |
||||||
|
))} |
||||||
|
</Box> |
||||||
|
</RadioGroup> |
||||||
|
</FormControl> |
||||||
|
|
||||||
|
<Typography level="title-md" sx={{ fontWeight: 'bold', mt: 1 }}> |
||||||
|
侧边栏 |
||||||
|
</Typography> |
||||||
|
<RadioGroup aria-label="Your plan" name="people" defaultValue="Individual"> |
||||||
|
<List |
||||||
|
sx={{ |
||||||
|
minWidth: 240, |
||||||
|
'--List-gap': '0.5rem', |
||||||
|
'--ListItem-paddingY': '1rem', |
||||||
|
'--ListItem-radius': '8px', |
||||||
|
'--ListItemDecorator-size': '32px', |
||||||
|
}} |
||||||
|
> |
||||||
|
{sidebarSettings.map((item, index) => ( |
||||||
|
<ListItem variant="outlined" key={item.id} sx={{ boxShadow: 'sm' }}> |
||||||
|
<ListItemDecorator> |
||||||
|
{[<Person key="1" />, <People key="2" />][index]} |
||||||
|
</ListItemDecorator> |
||||||
|
<Radio |
||||||
|
overlay |
||||||
|
value={item.id} |
||||||
|
label={item.label} |
||||||
|
sx={{ flexGrow: 1, flexDirection: 'row-reverse' }} |
||||||
|
slotProps={{ |
||||||
|
action: ({ checked }) => ({ |
||||||
|
sx: (theme) => ({ |
||||||
|
...(checked && { |
||||||
|
inset: -1, |
||||||
|
border: '2px solid', |
||||||
|
borderColor: theme.vars.palette.primary[500], |
||||||
|
}), |
||||||
|
}), |
||||||
|
}), |
||||||
|
}} |
||||||
|
/> |
||||||
|
</ListItem> |
||||||
|
))} |
||||||
|
</List> |
||||||
|
</RadioGroup> |
||||||
|
|
||||||
|
<Typography id="sandwich-group" level="title-md" sx={{ fontWeight: 'bold', mt: 1 }}> |
||||||
|
Settings |
||||||
|
</Typography> |
||||||
|
<div role="group" aria-labelledby="sandwich-group"> |
||||||
|
<List |
||||||
|
sx={{ |
||||||
|
minWidth: 240, |
||||||
|
'--List-gap': '0.5rem', |
||||||
|
'--ListItem-paddingY': '1rem', |
||||||
|
'--ListItem-radius': '8px', |
||||||
|
'--ListItemDecorator-size': '32px', |
||||||
|
}} |
||||||
|
> |
||||||
|
{genericSettings.map((item, index) => ( |
||||||
|
<ListItem variant="outlined" key={item.id} sx={{ boxShadow: 'sm' }}> |
||||||
|
<ListItemDecorator> |
||||||
|
{[<Person key="p" />, <People key="2" />][index]} |
||||||
|
</ListItemDecorator> |
||||||
|
<Checkbox |
||||||
|
overlay |
||||||
|
value={item.id} |
||||||
|
label={item.label} |
||||||
|
sx={{ flexGrow: 1, flexDirection: 'row-reverse' }} |
||||||
|
slotProps={{ |
||||||
|
action: ({ checked }) => ({ |
||||||
|
sx: (theme) => ({ |
||||||
|
...(checked && { |
||||||
|
inset: -1, |
||||||
|
border: '2px solid', |
||||||
|
borderColor: theme.vars.palette.primary[500], |
||||||
|
}), |
||||||
|
}), |
||||||
|
}), |
||||||
|
}} |
||||||
|
/> |
||||||
|
</ListItem> |
||||||
|
))} |
||||||
|
</List> |
||||||
|
</div> |
||||||
|
|
||||||
|
<Typography level="title-md" sx={{ fontWeight: 'bold', mt: 1 }}> |
||||||
|
Presets |
||||||
|
</Typography> |
||||||
|
<FormControl> |
||||||
|
<FormLabel sx={{ typography: 'title-md', fontWeight: 'bold' }}> |
||||||
|
Presets |
||||||
|
</FormLabel> |
||||||
|
<RadioGroup |
||||||
|
value={type || ''} |
||||||
|
onChange={(event) => { |
||||||
|
setType(event.target.value); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: 'grid', |
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', |
||||||
|
gap: 1.5, |
||||||
|
}} |
||||||
|
> |
||||||
|
{[ |
||||||
|
{ |
||||||
|
name: '浅色', |
||||||
|
icon: <HomeRoundedIcon />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '深色', |
||||||
|
icon: <ApartmentRoundedIcon />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '自动', |
||||||
|
icon: <MeetingRoomRoundedIcon />, |
||||||
|
}, |
||||||
|
].map((item) => ( |
||||||
|
<Card |
||||||
|
key={item.name} |
||||||
|
sx={{ |
||||||
|
boxShadow: 'none', |
||||||
|
'&:hover': { bgcolor: 'background.level1' }, |
||||||
|
}} |
||||||
|
> |
||||||
|
<CardContent> |
||||||
|
{item.icon} |
||||||
|
<Typography level="title-md">{item.name}</Typography> |
||||||
|
</CardContent> |
||||||
|
<Radio |
||||||
|
disableIcon |
||||||
|
overlay |
||||||
|
checked={type === item.name} |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
value={item.name} |
||||||
|
sx={{ mt: -2 }} |
||||||
|
slotProps={{ |
||||||
|
action: { |
||||||
|
sx: { |
||||||
|
...(type === item.name && { |
||||||
|
borderWidth: 2, |
||||||
|
borderColor: |
||||||
|
'var(--joy-palette-primary-outlinedBorder)', |
||||||
|
}), |
||||||
|
'&:hover': { |
||||||
|
bgcolor: 'transparent', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Card> |
||||||
|
))} |
||||||
|
</Box> |
||||||
|
</RadioGroup> |
||||||
|
</FormControl> |
||||||
|
</DialogContent> |
||||||
|
|
||||||
|
<Divider sx={{ mt: 'auto' }} /> |
||||||
|
<Stack |
||||||
|
direction="row" |
||||||
|
useFlexGap |
||||||
|
spacing={1} |
||||||
|
sx={{ justifyContent: 'space-between' }} |
||||||
|
> |
||||||
|
<Button |
||||||
|
variant="outlined" |
||||||
|
color="neutral" |
||||||
|
onClick={() => { |
||||||
|
setType(''); |
||||||
|
setAmenities([]); |
||||||
|
}} |
||||||
|
> |
||||||
|
Clear |
||||||
|
</Button> |
||||||
|
<Button onClick={() => setOpen(false)}>Show 165 properties</Button> |
||||||
|
</Stack> |
||||||
|
</Sheet> |
||||||
|
</Drawer> |
||||||
|
</Fragment> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,386 @@ |
|||||||
|
import * as React from "react"; |
||||||
|
import GlobalStyles from "@mui/joy/GlobalStyles"; |
||||||
|
import Avatar from "@mui/joy/Avatar"; |
||||||
|
import Box from "@mui/joy/Box"; |
||||||
|
import Button from "@mui/joy/Button"; |
||||||
|
import Card from "@mui/joy/Card"; |
||||||
|
import Chip, { type ChipProps } from "@mui/joy/Chip"; |
||||||
|
import Divider from "@mui/joy/Divider"; |
||||||
|
import IconButton from "@mui/joy/IconButton"; |
||||||
|
// import Input from "@mui/joy/Input"
|
||||||
|
import LinearProgress from "@mui/joy/LinearProgress"; |
||||||
|
import List from "@mui/joy/List"; |
||||||
|
import ListItem from "@mui/joy/ListItem"; |
||||||
|
import ListItemButton, { listItemButtonClasses } from "@mui/joy/ListItemButton"; |
||||||
|
import ListItemContent from "@mui/joy/ListItemContent"; |
||||||
|
import Typography from "@mui/joy/Typography"; |
||||||
|
import Sheet from "@mui/joy/Sheet"; |
||||||
|
import Stack from "@mui/joy/Stack"; |
||||||
|
// import SearchRoundedIcon from "@mui/icons-material/SearchRounded"
|
||||||
|
import HomeRoundedIcon from "@mui/icons-material/HomeRounded"; |
||||||
|
import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded"; |
||||||
|
import ShoppingCartRoundedIcon from "@mui/icons-material/ShoppingCartRounded"; |
||||||
|
import AssignmentRoundedIcon from "@mui/icons-material/AssignmentRounded"; |
||||||
|
import QuestionAnswerRoundedIcon from "@mui/icons-material/QuestionAnswerRounded"; |
||||||
|
import GroupRoundedIcon from "@mui/icons-material/GroupRounded"; |
||||||
|
import SupportRoundedIcon from "@mui/icons-material/SupportRounded"; |
||||||
|
import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded"; |
||||||
|
import CloseRoundedIcon from "@mui/icons-material/CloseRounded"; |
||||||
|
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded"; |
||||||
|
import BrightnessAutoRoundedIcon from "@mui/icons-material/BrightnessAutoRounded"; |
||||||
|
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; |
||||||
|
|
||||||
|
import { ColorSchemeToggle } from "./ColorSchemeToggle"; |
||||||
|
import { closeSidebar } from "./utils"; |
||||||
|
|
||||||
|
interface ChildItem { |
||||||
|
name: string |
||||||
|
label: string |
||||||
|
badge?: React.ComponentType<ChipProps> |
||||||
|
} |
||||||
|
|
||||||
|
interface RootItem extends ChildItem { |
||||||
|
icon: React.ComponentType |
||||||
|
label: string |
||||||
|
children?: ChildItem[] |
||||||
|
} |
||||||
|
|
||||||
|
const items: RootItem[] = [ |
||||||
|
{ |
||||||
|
name: "home", |
||||||
|
icon: HomeRoundedIcon, |
||||||
|
label: "Home", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "dashboard", |
||||||
|
icon: DashboardRoundedIcon, |
||||||
|
label: "Dashboard", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "orders", |
||||||
|
icon: ShoppingCartRoundedIcon, |
||||||
|
label: "Orders", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "tasks", |
||||||
|
icon: AssignmentRoundedIcon, |
||||||
|
label: "Tasks", |
||||||
|
children: [ |
||||||
|
{ name: "all", label: "All tasks" }, |
||||||
|
{ name: "backlog", label: "Backlog" }, |
||||||
|
{ name: "inProgress", label: "In progress" }, |
||||||
|
{ name: "done", label: "Done" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "messages", |
||||||
|
icon: QuestionAnswerRoundedIcon, |
||||||
|
label: "Messages", |
||||||
|
badge: EventBadge, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "users", |
||||||
|
icon: GroupRoundedIcon, |
||||||
|
label: "Users", |
||||||
|
children: [ |
||||||
|
{ name: "myProfile", label: "My profile" }, |
||||||
|
{ name: "create", label: "Create a new user" }, |
||||||
|
{ name: "roles&permissions", label: "Roles & permission" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
// {
|
||||||
|
// icon: SupportRoundedIcon,
|
||||||
|
// label: "Support",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// icon: SettingsRoundedIcon,
|
||||||
|
// label: "Settings",
|
||||||
|
// }
|
||||||
|
]; |
||||||
|
|
||||||
|
function RenderRootItem(props: RootItem) { |
||||||
|
const { |
||||||
|
icon: Icon, |
||||||
|
badge: Badge, |
||||||
|
label, |
||||||
|
children, |
||||||
|
} = props; |
||||||
|
|
||||||
|
// TODO
|
||||||
|
const selected = label === "Orders"; |
||||||
|
|
||||||
|
if (!children?.length) { |
||||||
|
return ( |
||||||
|
<ListItem> |
||||||
|
<ListItemButton |
||||||
|
role="menuitem" |
||||||
|
component="a" |
||||||
|
href="/joy-ui/getting-started/templates/messages/" |
||||||
|
selected={selected} |
||||||
|
> |
||||||
|
<Icon /> |
||||||
|
<ListItemContent> |
||||||
|
<Typography level="title-sm">{label}</Typography> |
||||||
|
</ListItemContent> |
||||||
|
{Badge && <Badge size="sm" color="primary" variant="solid" />} |
||||||
|
</ListItemButton> |
||||||
|
</ListItem> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<ListItem nested> |
||||||
|
<Toggler |
||||||
|
renderToggle={({ open, setOpen }) => ( |
||||||
|
<ListItemButton |
||||||
|
selected={selected} |
||||||
|
onClick={() => setOpen(!open)} |
||||||
|
> |
||||||
|
<Icon /> |
||||||
|
<ListItemContent> |
||||||
|
<Typography level="title-sm">{label}</Typography> |
||||||
|
</ListItemContent> |
||||||
|
{Badge && <Badge size="sm" color="primary" variant="solid" />} |
||||||
|
<KeyboardArrowDownIcon |
||||||
|
sx={{ transform: open ? "rotate(180deg)" : "none" }} |
||||||
|
/> |
||||||
|
</ListItemButton> |
||||||
|
)} |
||||||
|
> |
||||||
|
<List sx={{ gap: 0.5 }}> |
||||||
|
{children.map(({ label, badge: Badge }, index) => ( |
||||||
|
<ListItem |
||||||
|
key={label} |
||||||
|
sx={{ mt: index > 0 ? 0 : 0.5 }} |
||||||
|
> |
||||||
|
<ListItemButton |
||||||
|
role="menuitem" |
||||||
|
component="a" |
||||||
|
href="/joy-ui/getting-started/templates/profile-dashboard/" |
||||||
|
selected={selected} |
||||||
|
> |
||||||
|
<RingIcon /> |
||||||
|
<ListItemContent>{label}</ListItemContent> |
||||||
|
{Badge && <Badge size="sm" color="primary" variant="solid" />} |
||||||
|
</ListItemButton> |
||||||
|
</ListItem> |
||||||
|
))} |
||||||
|
</List> |
||||||
|
</Toggler> |
||||||
|
</ListItem> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function EventBadge(props: ChipProps) { |
||||||
|
return ( |
||||||
|
<Chip {...props}>4</Chip> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function RingIcon() { |
||||||
|
return ( |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
width: "8px", |
||||||
|
height: "8px", |
||||||
|
borderRadius: "4px", |
||||||
|
boxSizing: "border-box", |
||||||
|
border: "2px solid #ccc" |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function Toggler({ |
||||||
|
defaultExpanded = false, |
||||||
|
renderToggle, |
||||||
|
children, |
||||||
|
}: { |
||||||
|
defaultExpanded?: boolean; |
||||||
|
children: React.ReactNode; |
||||||
|
renderToggle: (params: { |
||||||
|
open: boolean; |
||||||
|
setOpen: React.Dispatch<React.SetStateAction<boolean>>; |
||||||
|
}) => React.ReactNode; |
||||||
|
}) { |
||||||
|
const [open, setOpen] = React.useState(defaultExpanded); |
||||||
|
return ( |
||||||
|
<React.Fragment> |
||||||
|
{renderToggle({ open, setOpen })} |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: "grid", |
||||||
|
gridTemplateRows: open ? "1fr" : "0fr", |
||||||
|
transition: "0.2s ease", |
||||||
|
"& > *": { |
||||||
|
overflow: "hidden", |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</Box> |
||||||
|
</React.Fragment> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function Sidebar() { |
||||||
|
return ( |
||||||
|
<Sheet |
||||||
|
className="Sidebar" |
||||||
|
sx={{ |
||||||
|
position: { xs: "fixed", md: "sticky" }, |
||||||
|
transform: { |
||||||
|
xs: "translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))", |
||||||
|
md: "none", |
||||||
|
}, |
||||||
|
transition: "transform 0.4s, width 0.4s", |
||||||
|
zIndex: 10000, |
||||||
|
height: "100dvh", |
||||||
|
width: "var(--Sidebar-width)", |
||||||
|
top: 0, |
||||||
|
// p: 2,
|
||||||
|
flexShrink: 0, |
||||||
|
display: "flex", |
||||||
|
flexDirection: "column", |
||||||
|
gap: 2, |
||||||
|
borderRight: "1px solid", |
||||||
|
borderColor: "divider", |
||||||
|
}} |
||||||
|
> |
||||||
|
<GlobalStyles |
||||||
|
styles={(theme) => ({ |
||||||
|
":root": { |
||||||
|
"--Sidebar-width": "80%", |
||||||
|
[theme.breakpoints.up("sm")]: { |
||||||
|
"--Sidebar-width": "40%", |
||||||
|
}, |
||||||
|
[theme.breakpoints.up("md")]: { |
||||||
|
"--Sidebar-width": "240px", |
||||||
|
}, |
||||||
|
[theme.breakpoints.up("lg")]: { |
||||||
|
"--Sidebar-width": "260px", |
||||||
|
}, |
||||||
|
}, |
||||||
|
})} |
||||||
|
/> |
||||||
|
<Box |
||||||
|
className="Sidebar-overlay" |
||||||
|
sx={{ |
||||||
|
position: "fixed", |
||||||
|
zIndex: 9998, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "100vw", |
||||||
|
height: "100vh", |
||||||
|
opacity: "var(--SideNavigation-slideIn)", |
||||||
|
backgroundColor: "var(--joy-palette-background-backdrop)", |
||||||
|
transition: "opacity 0.4s", |
||||||
|
transform: { |
||||||
|
xs: "translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--Sidebar-width, 0px)))", |
||||||
|
lg: "translateX(-100%)", |
||||||
|
}, |
||||||
|
}} |
||||||
|
onClick={() => closeSidebar()} |
||||||
|
/> |
||||||
|
<Box sx={{ display: "flex", gap: 1, alignItems: "center", p: 2 }}> |
||||||
|
<IconButton variant="soft" color="primary" size="sm"> |
||||||
|
<BrightnessAutoRoundedIcon /> |
||||||
|
</IconButton> |
||||||
|
<Typography level="title-lg">Acme Co.</Typography> |
||||||
|
<ColorSchemeToggle sx={{ ml: "auto" }} /> |
||||||
|
</Box> |
||||||
|
{/* <Input |
||||||
|
size="sm" |
||||||
|
sx={{ mx: 2 }} |
||||||
|
startDecorator={<SearchRoundedIcon />} |
||||||
|
placeholder="Search" |
||||||
|
/> */} |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
minHeight: 0, |
||||||
|
overflow: "hidden auto", |
||||||
|
flexGrow: 1, |
||||||
|
display: "flex", |
||||||
|
px: 2, |
||||||
|
flexDirection: "column", |
||||||
|
[`& .${listItemButtonClasses.root}`]: { |
||||||
|
gap: 1.5, |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
<List |
||||||
|
size="sm" |
||||||
|
sx={{ |
||||||
|
gap: 1, |
||||||
|
"--List-nestedInsetStart": "30px", |
||||||
|
"--ListItem-radius": (theme) => theme.vars.radius.sm, |
||||||
|
}} |
||||||
|
> |
||||||
|
{items.map((item) => ( |
||||||
|
<RenderRootItem key={item.label} {...item} /> |
||||||
|
))} |
||||||
|
</List> |
||||||
|
|
||||||
|
<List |
||||||
|
size="sm" |
||||||
|
sx={{ |
||||||
|
mt: "auto", |
||||||
|
flexGrow: 0, |
||||||
|
"--ListItem-radius": (theme) => theme.vars.radius.sm, |
||||||
|
"--List-gap": "8px", |
||||||
|
mb: 2, |
||||||
|
}} |
||||||
|
> |
||||||
|
<ListItem> |
||||||
|
<ListItemButton> |
||||||
|
<SupportRoundedIcon /> |
||||||
|
Support |
||||||
|
</ListItemButton> |
||||||
|
</ListItem> |
||||||
|
<ListItem> |
||||||
|
<ListItemButton> |
||||||
|
<SettingsRoundedIcon /> |
||||||
|
Settings |
||||||
|
</ListItemButton> |
||||||
|
</ListItem> |
||||||
|
</List> |
||||||
|
<Card |
||||||
|
invertedColors |
||||||
|
variant="soft" |
||||||
|
color="warning" |
||||||
|
size="sm" |
||||||
|
sx={{ boxShadow: "none" }} |
||||||
|
> |
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center"> |
||||||
|
<Typography level="title-sm">Used space</Typography> |
||||||
|
<IconButton size="sm"> |
||||||
|
<CloseRoundedIcon /> |
||||||
|
</IconButton> |
||||||
|
</Stack> |
||||||
|
<Typography level="body-xs"> |
||||||
|
Your team has used 80% of your available space. Need more? |
||||||
|
</Typography> |
||||||
|
<LinearProgress variant="outlined" value={80} determinate sx={{ my: 1 }} /> |
||||||
|
<Button size="sm" variant="solid"> |
||||||
|
Upgrade plan |
||||||
|
</Button> |
||||||
|
</Card> |
||||||
|
</Box> |
||||||
|
<Divider /> |
||||||
|
<Box sx={{ display: "flex", gap: 1, alignItems: "center", px: 2, pb: 2 }}> |
||||||
|
<Avatar |
||||||
|
variant="outlined" |
||||||
|
size="sm" |
||||||
|
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286" |
||||||
|
/> |
||||||
|
<Box sx={{ minWidth: 0, flex: 1 }}> |
||||||
|
<Typography level="title-sm">Siriwat K.</Typography> |
||||||
|
<Typography level="body-xs">siriwatk@test.com</Typography> |
||||||
|
</Box> |
||||||
|
<IconButton size="sm" variant="plain" color="neutral"> |
||||||
|
<LogoutRoundedIcon /> |
||||||
|
</IconButton> |
||||||
|
</Box> |
||||||
|
</Sheet> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,183 @@ |
|||||||
|
import AspectRatio from '@mui/joy/AspectRatio'; |
||||||
|
import Box from '@mui/joy/Box'; |
||||||
|
import Button from '@mui/joy/Button'; |
||||||
|
import Typography from '@mui/joy/Typography'; |
||||||
|
import { useDefaultTitle } from '@rakit/core'; |
||||||
|
import { ColorSchemeToggle } from './ColorSchemeToggle'; |
||||||
|
import { ReactNode } from 'react'; |
||||||
|
|
||||||
|
const Icon403 = ( |
||||||
|
<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"> |
||||||
|
<defs> |
||||||
|
<linearGradient id=":r2:" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%"> |
||||||
|
<stop offset="0%" stop-color="var(--palette-primary-main)" /> |
||||||
|
<stop offset="100%" stop-color="var(--palette-primary-main)" stop-opacity="0" /> |
||||||
|
</linearGradient> |
||||||
|
</defs> |
||||||
|
<path fill="url(#:r2:)" fill-rule="nonzero" d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z" opacity="0.2" /> |
||||||
|
<image href="https://assets.minimals.cc/public/assets/illustrations/characters/character-4.webp" height="300" x="220" y="30" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M425.545 119.2c0-5-4.6-9-9.6-8.2-2-3.7-6-6-10.2-5.9 4.3-21.4-30-21.4-25.7 0-8.7-.8-15.1 9.4-10.4 16.8 2.1 3.5 5.9 5.6 10 5.5h38.7v-.1c4.1-.4 7.2-3.9 7.2-8.1zm-321.3 81.8c.1-4.2-4.1-7.8-8.2-7-1.7-3.2-5.1-5.1-8.8-5 3.8-18.4-25.8-18.4-22 0-7.4-.7-12.9 8.1-8.9 14.4 1.8 3 5.1 4.8 8.6 4.7h33.2v-.1c3.4-.4 6.1-3.4 6.1-7z" opacity="0.08" /><path fill="#FFAB00" d="M111.045 142.2c58.7-1 58.6-88.3 0-89.2-58.6 1-58.6 88.3 0 89.2z" opacity="0.12" /> |
||||||
|
<path fill="#FFD666" d="M111.045 121c30.8-.5 30.8-46.3 0-46.8-30.8.5-30.8 46.3 0 46.8z" /> |
||||||
|
<path fill="#FBCDBE" d="M278.045 250.1c-4.6-6.5-14 5.1-18.1 7.2-.6-2.1 1.5-41.3-1.4-41.8-2.8-3-8.1-.7-8 3.3.2-4 .5-11.3-5.6-10.2-4.8.6-3.8 6.9-3.8 10.2.1-6.1-9.5-6.1-9.4 0v5.6c.2-4.2-5.7-6.4-8.3-3-2.6-.2-.4 41.8-1.1 43.3-.2 10 8.7 19 18.8 18.7 6.1.4 12.6-1.2 16.8-5.9l19.7-21c1.7-1.6 1.8-4.5.4-6.4z" /> |
||||||
|
<path fill="#000" fill-opacity="0.24" fill-rule="evenodd" d="M248.745 212.3v32.8h1.9v-31.9c.1-2.9-2.8-5.2-5.6-4.6 2 0 3.7 1.7 3.7 3.7zm-9.4 5.6v27.2h1.9v-26.3c.1-2.8-2.8-5.2-5.5-4.6 1.9 0 3.6 1.8 3.6 3.7zm-9.4 27.2v-21.6c.1-2-1.7-3.7-3.7-3.8 2.8-.6 5.6 1.8 5.5 4.6V245h-1.8v.1z" clip-rule="evenodd" /> |
||||||
|
<path fill="var(--palette-primary-darker)" d="M244.945 189.8c-67.6 1.3-77 97-11 111.4 81 11.8 92.7-107.3 11-111.4zm-48.5 56.2c-1-40.4 49.8-63.8 79.9-36.9l-68.3 68.3c-7.5-8.7-11.6-19.9-11.6-31.4zm48.5 48.5c-11.5 0-22.7-4.1-31.4-11.6l68.3-68.3c27 30.1 3.5 80.9-36.9 79.9z" /> |
||||||
|
<path fill="url(#paint0_linear_1_129)" d="M169.245 261h-11.3v-66.6c0-4.5-1.5-5.6-5.6-5.6-5.3.3-13.8-1.4-17.1 4l-55 68.3c-2.7 3.3-1.8 8.8-2 12.8 0 4.1 1.5 5.6 5.6 5.6h54.7v21.7c-.9 7.9 9.1 5.2 13.7 5.6 4.1 0 5.6-1.5 5.6-5.6v-21.7h11.4c4.4 0 5.6-1.5 5.6-5.6-.3-4.8 2-13.8-5.6-12.9zm-30.8 0h-36l36-44.4V261zm263.9 12.1c1.9 44.8-78.7 46-78 1.2h19.3c-.8 15.3 18.3 21.4 30.1 15.5 12.7-6 12.3-29.1-1-34-5.6-2.8-16.6-2-23.1-2.1v-15.1c6.3-.2 17.6.9 22.7-2.3 11.6-5.5 11.9-25.4.9-31.4-10.8-5.9-29 .1-28.2 14.5h-19.4c-.5-28.1 35.4-38.5 57-28.2 23.4 9 24.1 45.5-.2 54.6 12.3 3.9 20.1 14.6 19.9 27.3z" /> |
||||||
|
<defs> |
||||||
|
<linearGradient id="paint0_linear_1_129" x1="78.245" x2="78.245" y1="187.309" y2="307.306" gradientUnits="userSpaceOnUse"> |
||||||
|
<stop stop-color="var(--palette-primary-light)" /> |
||||||
|
<stop offset="1" stop-color="var(--palette-primary-dark)" /> |
||||||
|
</linearGradient> |
||||||
|
</defs> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
|
||||||
|
const Icon404 = ( |
||||||
|
<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"> |
||||||
|
<defs> |
||||||
|
<linearGradient id=":rm9:" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%"> |
||||||
|
<stop offset="0%" stop-color="var(--palette-primary-main)" /> |
||||||
|
<stop offset="100%" stop-color="var(--palette-primary-main)" stop-opacity="0" /> |
||||||
|
</linearGradient> |
||||||
|
</defs> |
||||||
|
<path fill="url(#:rm9:)" fill-rule="nonzero" d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z" opacity="0.2" /> |
||||||
|
<image href="https://assets.minimals.cc/public/assets/illustrations/characters/character-6.webp" height="300" x="205" y="30" /> |
||||||
|
<path fill="#FFAB00" d="M111.1 141.2c58.7-1 58.6-88.3 0-89.2-58.6 1-58.6 88.3 0 89.2z" opacity="0.12" /> |
||||||
|
<path fill="#FFD666" d="M111.1 120c30.8-.5 30.8-46.3 0-46.8-30.8.5-30.8 46.3 0 46.8z" /> |
||||||
|
<path fill="var(--palette-primary-darker)" d="M244.9 182.5c82.3 1.4 82.2 123.8 0 125.2-82.3-1.5-82.3-123.8 0-125.2zm0 23.1c-51.8.9-51.8 77.9 0 78.8 51.8-.9 51.7-77.9 0-78.8z" /> |
||||||
|
<path fill="url(#paint0_linear_1_119)" d="M175 265.6c1-8.7-12.1-4.8-17-5.6v-66.6c0-4.5-1.5-5.6-5.6-5.6-5.3.3-13.8-1.4-17.1 4l-55 68.3c-2.7 3.3-1.8 8.8-2 12.8 0 4.1 1.5 5.6 5.6 5.6h54.7v21.7c-.9 7.9 9.1 5.2 13.7 5.6 4.1 0 5.6-1.5 5.6-5.6v-21.7c13.8-1.1 18.1 4.5 17.1-12.9zm-72.5-5.6l36-44.4V260h-36zm309.1 5.6c1-8.7-12.2-4.8-17.1-5.6v-66.6c0-4.5-1.5-5.6-5.6-5.6-5.3.3-13.7-1.4-17.1 4l-55 68.3c-2.7 3.3-1.9 8.8-2 12.8 0 4.1 1.5 5.6 5.6 5.6h54.7v21.7c-.9 7.9 9.1 5.2 13.7 5.6 4.1 0 5.6-1.5 5.6-5.6v-21.7c14.1-1.1 18.2 4.5 17.2-12.9zm-72.4-5.6l36-44.4V260h-36z" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M425.6 118.2c0-5-4.6-9-9.6-8.2-2-3.7-6-6-10.2-5.9 4.3-21.4-30-21.4-25.7 0-8.7-.8-15.1 9.4-10.4 16.8 2.1 3.5 5.9 5.6 10 5.5h38.7v-.1c4.1-.4 7.2-3.9 7.2-8.1zM104.3 200c.1-4.2-4.1-7.8-8.2-7-1.7-3.2-5.1-5.1-8.8-5 3.8-18.4-25.8-18.4-22 0-7.4-.7-12.9 8.1-8.9 14.4 1.8 3 5.1 4.8 8.6 4.7h33.2v-.1c3.4-.4 6.1-3.4 6.1-7z" opacity="0.08" /> |
||||||
|
<defs> |
||||||
|
<linearGradient id="paint0_linear_1_119" x1="78.3" x2="78.3" y1="187.77" y2="305.935" gradientUnits="userSpaceOnUse"> |
||||||
|
<stop stop-color="var(--palette-primary-light)" /> |
||||||
|
<stop offset="1" stop-color="var(--palette-primary-dark)" /> |
||||||
|
</linearGradient> |
||||||
|
</defs> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
|
||||||
|
const Icon500 = ( |
||||||
|
<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"> |
||||||
|
<defs> |
||||||
|
<linearGradient id=":r1:" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%"> |
||||||
|
<stop offset="0%" stop-color="var(--palette-primary-main)" /> |
||||||
|
<stop offset="100%" stop-color="var(--palette-primary-main)" stop-opacity="0" /> |
||||||
|
</linearGradient> |
||||||
|
</defs> |
||||||
|
<path fill="url(#:r1:)" fill-rule="nonzero" d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z" opacity="0.2" /> |
||||||
|
<image href="https://assets.minimals.cc/public/assets/illustrations/characters/character-8.webp" height="300" x="340" y="30" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M292.4 266.4h-7.3v-.6h6.7v-59.6h-25.7V118h-23.6v-.6h24.2v88.2h25.7v60.8zM146 164.5h-.6v-21.1h16.5v-19h.6v19.7H146v20.4z" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M242.5 112.3c0 3.2-1.3 6.3-3.5 8.5-2.3 2.3-5.3 3.5-8.5 3.5h-82.9c-4.4.1-8.5-2.2-10.7-5.9-2.2-3.8-2.2-8.5 0-12.3 2.2-3.8 6.3-6.1 10.7-5.9h2.8c-2-7.2-.6-14.9 3.9-20.8s11.6-9.4 19-9.4h7c8.9 0 17 4.9 21.1 12.8 2-1 4.2-1.6 6.5-1.6h1.8c3.8 0 7.4 1.5 10.1 4.2 2.7 2.7 4.2 6.3 4.2 10.1v.7c0 1.3-.2 2.7-.6 3.9h6.9c6.8.2 12.2 5.6 12.2 12.2z" opacity="0.08" /> |
||||||
|
<path fill="#fff" d="M275.4 228.3v14c0 .8-.4 1.5-1.1 1.8-.3.2-.7.3-1.1.3-1.2 0-2.2-1-2.2-2.1v-14c0-4.7-3.5-8.6-8.1-9.1-.4 0-.7-.1-1.1-.1-5.1 0-9.2 4.1-9.2 9.2v14c0 .8-.4 1.5-1.1 1.8-.3.2-.7.3-1.1.3-1.2 0-2.2-1-2.2-2.2v-14c0-7.5 6.1-13.5 13.5-13.5.4 0 .7 0 1.1.1 7.2.6 12.6 6.4 12.6 13.5z" /> |
||||||
|
<path fill="#DFE3E8" d="M275.4 228.3v14c.3.5.2 1.2-.3 1.6-.5.4-1.1.4-1.6 0s-.6-1.1-.3-1.6v-14c0-5.1-4.1-9.2-9.2-9.2-.4 0-.7 0-1.1.1-.4 0-.7-.1-1.1-.1-5.1 0-9.2 4.1-9.2 9.2v14c.3.5.2 1.2-.3 1.6-.5.4-1.1.4-1.6 0s-.6-1-.3-1.6v-14c-.4-4.7 1.9-9.2 5.9-11.7s9.1-2.5 13.1 0c4.1 2.4 6.4 7 6 11.7z" /> |
||||||
|
<path fill="var(--palette-primary-darker)" d="M277.8 242.2h-33.2c-4 0-7.3 3.3-7.3 7.3v33.2c0 4 3.3 7.3 7.3 7.3h33.2c4 0 7.3-3.3 7.3-7.3v-33.2c0-4-3.3-7.3-7.3-7.3z" /> |
||||||
|
<path fill="var(--palette-primary-dark)" d="M277.8 242.2h-24.9c-4 0-7.3 3.3-7.3 7.3v33.2c0 4 3.3 7.3 7.3 7.3h24.9c4 0 7.3-3.3 7.3-7.3v-33.2c0-4-3.3-7.3-7.3-7.3z" /> |
||||||
|
<path fill="url(#paint0_linear_1_140)" d="M278 145h-22c-4.4 0-8 3.6-8 8v22.8c0 4.4 3.6 8 8 8h22c4.4 0 8-3.6 8-8V153c0-4.4-3.6-8-8-8z" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M126 129.7h-22.4c-1.7 0-3 1.3-3 3v32.8c0 1.7 1.3 3 3 3H126c1.7 0 3-1.3 3-3v-32.8c0-1.7-1.4-3-3-3z" opacity="0.08" /> |
||||||
|
<path fill="#fff" d="M119.1 135.9H96.6c-1.7 0-3 1.3-3 3v32.8c0 1.7 1.3 3 3 3H119c1.7 0 3-1.3 3-3v-32.8c.1-1.6-1.3-3-2.9-3z" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M119.1 135.9H96.6c-1.7 0-3 1.3-3 3v32.8c0 1.7 1.3 3 3 3H119c1.7 0 3-1.3 3-3v-32.8c.1-1.6-1.3-3-2.9-3z" opacity="0.48" /> |
||||||
|
<path fill="var(--palette-primary-main)" d="M80 243.5c.2 2 .9 3.9 2 5.5 4.4 7.8 9.4 15.5 16.2 21.3 10.1 8.5 23.2 12.2 36 15.7-1.1-.6-2.5-6.4-3-7.7-1-2.5-1.9-5.1-2.8-7.6-1.5-4-4.6-7.2-7.7-10.2-6.9-6.7-15.3-11.6-24.5-14.4-5.3-1.7-10.8-2.6-16.2-2.6z" /> |
||||||
|
<path fill="var(--palette-primary-darker)" d="M129.8 247.8c-1-7.3-2.1-14.6-5-21.4-2.9-6.7-8-12.9-14.9-15.4l-.6 31.2c-.1 6-.2 12.1 1.5 17.9 3 10.1 13.5 21.9 23.6 25.3 1.5-4.8-1-12.2-1.7-17.2l-2.9-20.4z" /> |
||||||
|
<path fill="var(--palette-primary-dark)" d="M237.2 164H140c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h97.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4zm0 44H140c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h97.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4zm0 44.2H140c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h97.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4z" /> |
||||||
|
<path fill="url(#paint1_linear_1_140)" d="M237.6 164h-91.2c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h91.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4zm8.4 53.6v16.8c0 2.5-1 5-2.9 6.8-1.9 1.8-4.4 2.8-7.1 2.8h-88c-2.7 0-5.2-1-7.1-2.8-1.9-1.8-2.9-4.2-2.9-6.8v-16.8c0-5.3 4.5-9.6 10-9.6h88c2.7 0 5.2 1 7.1 2.8 1.8 1.8 2.9 4.2 2.9 6.8zm-8.4 34.4h-91.2c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h91.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4z" /> |
||||||
|
<path fill="var(--palette-primary-lighter)" d="M161.6 182c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm12 0c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm8 4c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zM162 226c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm12 0c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm8 4c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm52-6h-30c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h30c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1zm-72 46c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm12 0c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm8 4c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm52-6h-30c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h30c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1z" /> |
||||||
|
<path fill="var(--palette-primary-darker)" d="M264.4 267.7c.5-1.8-.8-3.7-1.2-5.5-.1-.3-.1-.7 0-1 .2-1.5 1.5-2.6 3-2.6s2.8 1.1 3 2.6c.1.3 0 .7 0 1-.3 1.8-1.6 3.8-1.1 5.6l.4 1.3c.5 1.5-.7 3.1-2.3 3.1-1.6 0-2.7-1.5-2.3-3l.5-1.5zM258 158.8l9.2-4.8 8.8 4.8s-1.6 11.8-8.6 15.2c0 0-8.6-3.3-9.4-15.2z" /> |
||||||
|
<defs> |
||||||
|
<linearGradient id="paint0_linear_1_140" x1="277.574" x2="255.652" y1="143.24" y2="187.057" gradientUnits="userSpaceOnUse"> |
||||||
|
<stop stop-color="var(--palette-primary-main)" /> |
||||||
|
<stop offset="1" stop-color="var(--palette-primary-dark)" /> |
||||||
|
</linearGradient> |
||||||
|
<linearGradient id="paint1_linear_1_140" x1="138" x2="138" y1="164" y2="287.9" gradientUnits="userSpaceOnUse"> |
||||||
|
<stop stop-color="var(--palette-primary-light)" /> |
||||||
|
<stop offset="1" stop-color="var(--palette-primary-dark)" /> |
||||||
|
</linearGradient> |
||||||
|
</defs> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
|
||||||
|
const statusIcons = { |
||||||
|
"403": Icon403, |
||||||
|
"404": Icon404, |
||||||
|
"500": Icon500, |
||||||
|
}; |
||||||
|
|
||||||
|
const statusTitles = { |
||||||
|
"403": "No permission", |
||||||
|
"404": "Sorry, page not found!", |
||||||
|
"500": "Internal server error", |
||||||
|
}; |
||||||
|
|
||||||
|
const statusDescriptions = { |
||||||
|
"403": "The page you’re trying to access has restricted access. Please refer to your system administrator.", |
||||||
|
"404": "Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL? Be sure to check your spelling.", |
||||||
|
"500": "There was an error, please try again later.", |
||||||
|
}; |
||||||
|
|
||||||
|
export interface StatusErrorProps { |
||||||
|
status: "403" | "404" | "500"; |
||||||
|
icon?: ReactNode; |
||||||
|
title?: ReactNode; |
||||||
|
description?: ReactNode; |
||||||
|
} |
||||||
|
|
||||||
|
export function StatusError(props: StatusErrorProps) { |
||||||
|
const status = statusIcons[props.status] ? props.status : "500"; |
||||||
|
const siteTitle = useDefaultTitle(); |
||||||
|
const icon = props.icon || statusIcons[status]; |
||||||
|
const title = props.title || statusTitles[status]; |
||||||
|
const description = props.description ?? statusDescriptions[status]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
display: "flex", |
||||||
|
flexDirection: "column", |
||||||
|
justifyContent: { |
||||||
|
sm: "flex-start", |
||||||
|
md: "center", |
||||||
|
}, |
||||||
|
alignItems: "center", |
||||||
|
pt: 12, |
||||||
|
pb: 8, |
||||||
|
minHeight: "100dvh", |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box sx={{ |
||||||
|
position: "fixed", |
||||||
|
top: 0, |
||||||
|
insetInline: 0, |
||||||
|
display: "flex", |
||||||
|
justifyContent: "space-between", |
||||||
|
p: 4, |
||||||
|
}}> |
||||||
|
<div>{siteTitle}</div> |
||||||
|
<ColorSchemeToggle variant="plain" /> |
||||||
|
</Box> |
||||||
|
<Box sx={{ maxWidth: "448px", p: 2 }}> |
||||||
|
<Typography level="h2" textAlign="center"> |
||||||
|
{title} |
||||||
|
</Typography> |
||||||
|
<Typography color="neutral" pt={2} textAlign="center"> |
||||||
|
{description} |
||||||
|
</Typography> |
||||||
|
<AspectRatio |
||||||
|
ratio="1" |
||||||
|
sx={(theme) => ({ |
||||||
|
maxWidth: "320px", |
||||||
|
pt: 4, flexShrink: 1, |
||||||
|
mx: "auto", |
||||||
|
"--palette-primary-light": theme.palette.primary[300], |
||||||
|
"--palette-primary-main": theme.palette.primary[500], |
||||||
|
"--palette-primary-dark": theme.palette.primary[600], |
||||||
|
"--palette-primary-darker": theme.palette.primary[700] |
||||||
|
})} |
||||||
|
variant="plain" |
||||||
|
> |
||||||
|
{icon} |
||||||
|
</AspectRatio> |
||||||
|
<Box my={2} textAlign="center"> |
||||||
|
<Button size="lg" color="neutral">Go to home</Button> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import Typography, { TypographyProps } from '@mui/joy/Typography'; |
||||||
|
|
||||||
|
export function TitlePortal(props: TypographyProps) { |
||||||
|
return ( |
||||||
|
<Typography |
||||||
|
sx={{ color: "inherit" }} |
||||||
|
flex="1" |
||||||
|
textOverflow="ellipsis" |
||||||
|
whiteSpace="nowrap" |
||||||
|
overflow="hidden" |
||||||
|
level="title-md" |
||||||
|
id="react-admin-title" |
||||||
|
{...props} /> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
export * from "./AdminRoot"; |
||||||
|
export * from "./AppBar"; |
||||||
|
export * from "./ColorSchemeToggle"; |
||||||
|
export * from "./Error"; |
||||||
|
export * from "./Loading"; |
||||||
|
export * from "./Notification"; |
||||||
|
export * from "./PageActions"; |
||||||
|
export * from "./PageRoot"; |
||||||
|
export * from "./Sidebar"; |
||||||
|
export * from "./StatusError"; |
||||||
|
export * from "./TitlePortal"; |
||||||
|
export * from "./utils"; |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
export function openSidebar() { |
||||||
|
if (typeof window !== "undefined") { |
||||||
|
document.body.style.overflow = "hidden"; |
||||||
|
document.documentElement.style.setProperty("--SideNavigation-slideIn", "1"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function closeSidebar() { |
||||||
|
if (typeof window !== "undefined") { |
||||||
|
document.documentElement.style.removeProperty("--SideNavigation-slideIn"); |
||||||
|
document.body.style.removeProperty("overflow"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function toggleSidebar() { |
||||||
|
if (typeof window !== "undefined" && typeof document !== "undefined") { |
||||||
|
const slideIn = window |
||||||
|
.getComputedStyle(document.documentElement) |
||||||
|
.getPropertyValue("--SideNavigation-slideIn"); |
||||||
|
if (slideIn) { |
||||||
|
closeSidebar(); |
||||||
|
} else { |
||||||
|
openSidebar(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import CssBaseline from '@mui/joy/CssBaseline'; |
||||||
|
import { CssVarsProvider } from '@mui/joy/styles'; |
||||||
|
import { createTheme } from "./createTheme"; |
||||||
|
import { schemeConfig } from './schemeConfig'; |
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
type Props = { |
||||||
|
children: React.ReactNode; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ThemeProvider({ children }: Props) { |
||||||
|
const theme = createTheme(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<CssVarsProvider |
||||||
|
theme={theme} |
||||||
|
defaultMode={schemeConfig.defaultMode} |
||||||
|
modeStorageKey={schemeConfig.modeStorageKey} |
||||||
|
> |
||||||
|
<CssBaseline /> |
||||||
|
{children} |
||||||
|
</CssVarsProvider> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import { Theme, Components } from '@mui/joy/styles'; |
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export const components: Components<Theme> = {} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import { Theme, extendTheme } from "@mui/joy/styles"; |
||||||
|
import { components } from "./components"; |
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export function createTheme(): Theme { |
||||||
|
return extendTheme({ |
||||||
|
components, |
||||||
|
cssVarPrefix: '', |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export * from "./ThemeProvider"; |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export const schemeConfig = { |
||||||
|
modeStorageKey: 'theme-mode', |
||||||
|
defaultMode: 'light', |
||||||
|
} as const; |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
{ |
||||||
|
"name": "@rakit/core", |
||||||
|
"type": "module", |
||||||
|
"description": "low level admin & dashboard scaffold", |
||||||
|
"main": "./src/index.ts", |
||||||
|
"dependencies": { |
||||||
|
"@rakit/use-async": "workspace:*", |
||||||
|
"@rakit/use-invariant": "workspace:*", |
||||||
|
"@tanstack/react-query": "^5.52.2", |
||||||
|
"lodash": "^4.17.21", |
||||||
|
"react": "^18.3.1", |
||||||
|
"react-dom": "^18.3.1", |
||||||
|
"react-error-boundary": "^4.0.13", |
||||||
|
"react-hook-form": "^7.53.0", |
||||||
|
"react-is": "^18.3.1", |
||||||
|
"react-router-dom": "^6.26.1" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/lodash": "^4.17.7", |
||||||
|
"@types/react-dom": "^18.3.0", |
||||||
|
"@types/react-is": "^18.3.0" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { createContext } from "react"; |
||||||
|
import { AccessControlContextValue } from "./types"; |
||||||
|
|
||||||
|
/** |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
export const AccessControlContext = createContext<AccessControlContextValue | undefined>(undefined); |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { ReactNode } from "react"; |
||||||
|
import { AccessControlContext } from "./AccessControlContext"; |
||||||
|
import { CanFunction } from "./types"; |
||||||
|
|
||||||
|
export type AccessControlProviderProps = { |
||||||
|
can?: CanFunction; |
||||||
|
children?: ReactNode; |
||||||
|
} |
||||||
|
|
||||||
|
export function AccessControlProvider(props: AccessControlProviderProps) { |
||||||
|
return ( |
||||||
|
<AccessControlContext.Provider value={props.value}> |
||||||
|
{props.children} |
||||||
|
</AccessControlContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
import { |
||||||
|
cloneElement, |
||||||
|
createElement, |
||||||
|
isValidElement, |
||||||
|
ReactNode, |
||||||
|
useEffect |
||||||
|
} from "react"; |
||||||
|
import { |
||||||
|
AccessControlOptions, |
||||||
|
AccessFallbackComponent, |
||||||
|
CanParams |
||||||
|
} from "./types"; |
||||||
|
import { useCan } from "./useCan"; |
||||||
|
import { useAccessControl } from "./useAccessControl"; |
||||||
|
|
||||||
|
type OnUnauthorizedProps = { |
||||||
|
reason?: string; |
||||||
|
params: CanParams; |
||||||
|
}; |
||||||
|
|
||||||
|
export interface CanAccessProps extends CanParams { |
||||||
|
children: ReactNode; |
||||||
|
|
||||||
|
/** |
||||||
|
* Content to show if access control returns `false` |
||||||
|
*/ |
||||||
|
fallback?: AccessFallbackComponent; |
||||||
|
|
||||||
|
loading?: ReactNode |
||||||
|
|
||||||
|
queryOptions?: AccessControlOptions; |
||||||
|
|
||||||
|
/** |
||||||
|
* Callback function to be called if access control returns `can: false` |
||||||
|
*/ |
||||||
|
onUnauthorized?: (props: OnUnauthorizedProps) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export function CanAccess(props: CanAccessProps) { |
||||||
|
const { |
||||||
|
children, |
||||||
|
fallback, |
||||||
|
loading, |
||||||
|
queryOptions, |
||||||
|
onUnauthorized, |
||||||
|
...params |
||||||
|
} = props; |
||||||
|
|
||||||
|
const { |
||||||
|
isExecuting: isLoading, |
||||||
|
reason, |
||||||
|
can, |
||||||
|
error, |
||||||
|
} = useCan({ |
||||||
|
...params, |
||||||
|
queryOptions, |
||||||
|
}); |
||||||
|
|
||||||
|
const { |
||||||
|
fallback: fallbackElement, |
||||||
|
} = useAccessControl({}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (onUnauthorized && can === false && !isLoading) { |
||||||
|
onUnauthorized({ reason, params }); |
||||||
|
} |
||||||
|
}, [can, isLoading]); |
||||||
|
|
||||||
|
if (isLoading) { |
||||||
|
return loading; |
||||||
|
} |
||||||
|
|
||||||
|
if (can) { |
||||||
|
return children; |
||||||
|
} |
||||||
|
|
||||||
|
return resolveFallback( |
||||||
|
fallback ?? fallbackElement, |
||||||
|
reason, |
||||||
|
error, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function resolveFallback( |
||||||
|
fallback: AccessFallbackComponent | undefined | null, |
||||||
|
reason: string | undefined, |
||||||
|
error: unknown, |
||||||
|
) { |
||||||
|
if (fallback == null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
if (isValidElement(fallback)) { |
||||||
|
return cloneElement(fallback, { reason, error }) |
||||||
|
} |
||||||
|
return createElement(fallback, { reason, error }) |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export * from "./AccessControlProvider"; |
||||||
|
export * from "./CanAccess"; |
||||||
|
export * from "./types"; |
||||||
|
export * from "./useAccessControl"; |
||||||
|
export * from "./useCan"; |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { UseAsyncOptions } from "@rakit/use-async"; |
||||||
|
import { ComponentType, ReactElement } from "react"; |
||||||
|
|
||||||
|
export type CanReturn = { |
||||||
|
can: boolean; |
||||||
|
reason?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export interface AccessParamsCustoms {} |
||||||
|
|
||||||
|
export type AccessParams = Record<string, any> & AccessParamsCustoms; |
||||||
|
|
||||||
|
export interface CanParams { |
||||||
|
/** |
||||||
|
* Resource name for API data interactions |
||||||
|
*/ |
||||||
|
on?: string; |
||||||
|
/** |
||||||
|
* Intended action on resource |
||||||
|
*/ |
||||||
|
key: string; |
||||||
|
/** |
||||||
|
* Parameters associated with the resource |
||||||
|
* @type { |
||||||
|
* resource?: [IResourceItem](https://refine.dev/docs/api-reference/core/interfaceReferences/#canparams),
|
||||||
|
* id?: [BaseKey](https://refine.dev/docs/api-reference/core/interfaceReferences/#basekey), [key: string]: any
|
||||||
|
* } |
||||||
|
*/ |
||||||
|
params?: AccessParams; |
||||||
|
} |
||||||
|
|
||||||
|
export type CanFunction = (params: CanParams) => Promise<CanReturn> | CanReturn; |
||||||
|
|
||||||
|
export type AccessControlOptions = Omit< |
||||||
|
UseAsyncOptions<CanReturn, CanParams, unknown>, |
||||||
|
'executor' | 'variables' |
||||||
|
>; |
||||||
|
|
||||||
|
export type AccessFallbackProps = { |
||||||
|
reason?: string; |
||||||
|
error?: unknown; |
||||||
|
} |
||||||
|
|
||||||
|
export type AccessFallbackComponent = ComponentType<AccessFallbackProps> | ReactElement<AccessFallbackProps>; |
||||||
|
|
||||||
|
export interface AccessControlContextCustomValue {} |
||||||
|
|
||||||
|
export interface AccessControlContextValue extends AccessControlContextCustomValue { |
||||||
|
can?: CanFunction; |
||||||
|
queryOptions?: AccessControlOptions; |
||||||
|
fallback?: AccessFallbackComponent; |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { useContext } from "react"; |
||||||
|
import { AccessControlContext } from "./AccessControlContext"; |
||||||
|
import { AccessControlContextValue } from "./types"; |
||||||
|
|
||||||
|
export function useAccessControl(): AccessControlContextValue | undefined; |
||||||
|
export function useAccessControl(overrides: AccessControlContextValue): AccessControlContextValue; |
||||||
|
export function useAccessControl(overrides?: AccessControlContextValue) { |
||||||
|
const fromContext = useContext(AccessControlContext) |
||||||
|
|
||||||
|
if (fromContext != null) { |
||||||
|
return { |
||||||
|
...fromContext, |
||||||
|
...overrides, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return overrides; |
||||||
|
} |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
import { |
||||||
|
useAsync, |
||||||
|
UseAsyncResult, |
||||||
|
useAutomatic |
||||||
|
} from "@rakit/use-async"; |
||||||
|
import { |
||||||
|
AccessControlOptions, |
||||||
|
CanParams, |
||||||
|
CanReturn |
||||||
|
} from "./types"; |
||||||
|
import { useAccessControl } from "./useAccessControl"; |
||||||
|
import { useMemo } from "react"; |
||||||
|
|
||||||
|
export type UseCanProps = CanParams & { |
||||||
|
queryOptions?: AccessControlOptions; |
||||||
|
} |
||||||
|
|
||||||
|
export type UseCanResult = |
||||||
|
& Omit< |
||||||
|
UseAsyncResult<CanReturn, CanParams, unknown>, |
||||||
|
'execute' | 'abort' | 'data' | 'isExecuting' |
||||||
|
> |
||||||
|
& { isLoading: boolean } |
||||||
|
& CanReturn; |
||||||
|
|
||||||
|
export function useCan(options: UseCanProps): UseCanResult { |
||||||
|
const { queryOptions, ...params } = options; |
||||||
|
const context = useAccessControl({}); |
||||||
|
const can = context?.can |
||||||
|
|
||||||
|
const asyncOptions = { |
||||||
|
...context?.queryOptions, |
||||||
|
...queryOptions, |
||||||
|
} |
||||||
|
|
||||||
|
const { |
||||||
|
data, |
||||||
|
error, |
||||||
|
isExecuting: isLoading, |
||||||
|
execute, |
||||||
|
} = useAsync<CanReturn, CanParams, unknown>({ |
||||||
|
...asyncOptions, |
||||||
|
variables: params, |
||||||
|
executor: (params) => can?.(params) ?? ({ can: true }), |
||||||
|
immediate: typeof can !== "undefined", |
||||||
|
}); |
||||||
|
|
||||||
|
useAutomatic({ |
||||||
|
execute, |
||||||
|
params, |
||||||
|
asyncOptions, |
||||||
|
}); |
||||||
|
|
||||||
|
return useMemo(() => { |
||||||
|
if (typeof can === "undefined") { |
||||||
|
return { |
||||||
|
can: true, |
||||||
|
isLoading: false, |
||||||
|
error: undefined, |
||||||
|
reason: undefined, |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
can: data?.can ?? false, |
||||||
|
error, |
||||||
|
isLoading, |
||||||
|
reason: data?.reason, |
||||||
|
} |
||||||
|
}, [can, data, error, isLoading]); |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import { createContext } from "react"; |
||||||
|
import { AuthProvider } from "./types"; |
||||||
|
|
||||||
|
export const AuthContext = createContext<AuthProvider | undefined>(undefined); |
||||||
|
|
||||||
|
AuthContext.displayName = 'AuthContext'; |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import { ReactNode } from 'react'; |
||||||
|
import { useAuthState } from './useAuthState'; |
||||||
|
|
||||||
|
export interface AuthenticatedProps { |
||||||
|
children: ReactNode; |
||||||
|
authParams?: object; |
||||||
|
requireAuth?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Restrict access to children to authenticated users. |
||||||
|
* Redirects anonymous users to the login page. |
||||||
|
* |
||||||
|
* Use it to decorate your custom page components to require |
||||||
|
* authentication. |
||||||
|
* |
||||||
|
* By default this component is optimistic: it does not block |
||||||
|
* rendering children when checking authentication, but this mode |
||||||
|
* can be turned off by setting `requireAuth` to true. |
||||||
|
* |
||||||
|
* You can set additional `authParams` at will if your authProvider |
||||||
|
* requires it. |
||||||
|
* |
||||||
|
* @see useAuthState |
||||||
|
* |
||||||
|
* @example |
||||||
|
* import { Admin, CustomRoutes, Authenticated } from 'react-admin'; |
||||||
|
* |
||||||
|
* const customRoutes = [ |
||||||
|
* <Route |
||||||
|
* path="/foo" |
||||||
|
* element={ |
||||||
|
* <Authenticated authParams={{ foo: 'bar' }}> |
||||||
|
* <Foo /> |
||||||
|
* </Authenticated> |
||||||
|
* } |
||||||
|
* /> |
||||||
|
* ]; |
||||||
|
* const App = () => ( |
||||||
|
* <Admin> |
||||||
|
* <CustomRoutes>{customRoutes}</CustomRoutes> |
||||||
|
* </Admin> |
||||||
|
* ); |
||||||
|
*/ |
||||||
|
export function Authenticated(props: AuthenticatedProps) { |
||||||
|
const { authParams, children, requireAuth = false } = props; |
||||||
|
|
||||||
|
// this hook will log out if the authProvider doesn't validate that the user is authenticated
|
||||||
|
const { isPending, authenticated } = useAuthState(authParams, true); |
||||||
|
|
||||||
|
// in pessimistic mode don't render the children until authenticated
|
||||||
|
if ((requireAuth && isPending) || !authenticated) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
// render the children in optimistic rendering or after authenticated
|
||||||
|
return <>{children}</>; |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import { useEffect } from 'react'; |
||||||
|
import { useLogout } from './useLogout'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Log the user out and redirect them to login. |
||||||
|
* |
||||||
|
* To be used as a catch-all route for anonymous users in a secure app. |
||||||
|
* |
||||||
|
* @see CoreAdminRoutes |
||||||
|
*/ |
||||||
|
export const LogoutOnMount = () => { |
||||||
|
const logout = useLogout(); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
logout(); |
||||||
|
}, [logout]); |
||||||
|
|
||||||
|
return null; |
||||||
|
}; |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
import { ComponentType, createElement } from "react"; |
||||||
|
import { useAuthenticated } from "./useAuthenticated"; |
||||||
|
import { usePermissions } from "./usePermissions"; |
||||||
|
|
||||||
|
export interface WithPermissionsProps { |
||||||
|
authParams?: object; |
||||||
|
component: ComponentType<any>; |
||||||
|
location?: Location; |
||||||
|
staticContext?: object; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* After checking that the user is authenticated, |
||||||
|
* retrieves the user's permissions for a specific context. |
||||||
|
* |
||||||
|
* Useful for Route components ; used internally by Resource. |
||||||
|
* Use it to decorate your custom page components to require |
||||||
|
* a custom role. It will pass the permissions as a prop to your |
||||||
|
* component. |
||||||
|
* |
||||||
|
* You can set additional `authParams` at will if your authProvider |
||||||
|
* requires it. |
||||||
|
* |
||||||
|
* @example |
||||||
|
* import { Admin, CustomRoutes, WithPermissions } from 'react-admin'; |
||||||
|
* |
||||||
|
* const Foo = ({ permissions }) => ( |
||||||
|
* {permissions === 'admin' ? <p>Sensitive data</p> : null} |
||||||
|
* <p>Not sensitive data</p> |
||||||
|
* ); |
||||||
|
* |
||||||
|
* const customRoutes = [ |
||||||
|
* <Route path="/foo" element={ |
||||||
|
* <WithPermissions |
||||||
|
* authParams={{ foo: 'bar' }} |
||||||
|
* component={({ permissions, ...props }) => <Foo permissions={permissions} {...props} />} |
||||||
|
* /> |
||||||
|
* } /> |
||||||
|
* ]; |
||||||
|
* const App = () => ( |
||||||
|
* <Admin> |
||||||
|
* <CustomRoutes>{customRoutes}</CustomRoutes> |
||||||
|
* </Admin> |
||||||
|
* ); |
||||||
|
*/ |
||||||
|
export function WithPermissions(props: WithPermissionsProps) { |
||||||
|
const { |
||||||
|
authParams, |
||||||
|
component, |
||||||
|
staticContext: _, |
||||||
|
...rest |
||||||
|
} = props; |
||||||
|
|
||||||
|
useAuthenticated(authParams); |
||||||
|
|
||||||
|
const { permissions } = usePermissions(authParams); |
||||||
|
|
||||||
|
// render even though the usePermissions() call isn't finished (optimistic rendering)
|
||||||
|
return createElement(component, { |
||||||
|
permissions, |
||||||
|
...rest |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
export * from "./AuthContext"; |
||||||
|
export * from "./Authenticated"; |
||||||
|
export * from "./LogoutOnMount"; |
||||||
|
export * from "./types"; |
||||||
|
export * from "./useAuthenticated"; |
||||||
|
export * from "./useAuthProvider"; |
||||||
|
export * from "./useAuthState"; |
||||||
|
export * from "./useCheckAuth"; |
||||||
|
export * from "./useGetIdentity"; |
||||||
|
export * from "./useGetPermissions"; |
||||||
|
export * from "./useHandleAuthCallback"; |
||||||
|
export * from "./useLogin"; |
||||||
|
export * from "./useLogout"; |
||||||
|
export * from "./useLogoutIfAccessDenied"; |
||||||
|
export * from "./usePermissions"; |
||||||
|
export * from "./WithPermissions"; |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import { To } from "react-router-dom"; |
||||||
|
|
||||||
|
type QueryFunctionContext = { |
||||||
|
signal?: AbortSignal; |
||||||
|
} |
||||||
|
|
||||||
|
export type WithRedirectTo<P = unknown> = P & { |
||||||
|
redirectTo?: To | false; |
||||||
|
}; |
||||||
|
|
||||||
|
export type AuthRedirectResult = { |
||||||
|
redirectTo?: To | false; |
||||||
|
logoutOnFailure?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export interface UserIdentity { |
||||||
|
id: string | number; |
||||||
|
fullName?: string; |
||||||
|
email?: string; |
||||||
|
phoneNumber?: string; |
||||||
|
avatarUrl?: string; |
||||||
|
[key: string]: any; |
||||||
|
} |
||||||
|
|
||||||
|
export interface AuthProviderCustoms {} |
||||||
|
|
||||||
|
export interface AuthProvider extends AuthProviderCustoms { |
||||||
|
login: (params: any) => Promise<WithRedirectTo | void | any>; |
||||||
|
logout: (params: any) => Promise<void | false | string>; |
||||||
|
checkAuth: (params: QueryFunctionContext) => Promise<void>; |
||||||
|
checkError: (error: any) => Promise<void>; |
||||||
|
getIdentity?: (params?: QueryFunctionContext) => Promise<UserIdentity>; |
||||||
|
getPermissions: (params: QueryFunctionContext) => Promise<any>; |
||||||
|
handleCallback?: (params?: QueryFunctionContext) => Promise<AuthRedirectResult | void | any>; |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import { useContext } from "react"; |
||||||
|
import { AuthContext } from "./AuthContext"; |
||||||
|
|
||||||
|
export const defaultAuthParams = { |
||||||
|
loginUrl: '/login', |
||||||
|
afterLoginUrl: '/', |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Get the authProvider stored in the context |
||||||
|
*/ |
||||||
|
export function useAuthProvider() { |
||||||
|
return useContext(AuthContext); |
||||||
|
} |
||||||
@ -0,0 +1,155 @@ |
|||||||
|
import useInvariant from '@rakit/use-invariant'; |
||||||
|
import { |
||||||
|
QueryObserverResult, |
||||||
|
useQuery, |
||||||
|
UseQueryOptions, |
||||||
|
} from '@tanstack/react-query'; |
||||||
|
import noop from 'lodash/noop'; |
||||||
|
import { useEffect, useMemo } from "react"; |
||||||
|
import { useNotify } from "../notification"; |
||||||
|
import { useBasename } from "../routing"; |
||||||
|
import { getErrorMessage, removeDoubleSlashes } from "../util"; |
||||||
|
import { defaultAuthParams, useAuthProvider } from "./useAuthProvider"; |
||||||
|
import { useLogout } from "./useLogout"; |
||||||
|
|
||||||
|
type UseAuthStateOptions<ErrorType = Error> = Omit< |
||||||
|
UseQueryOptions<boolean, ErrorType>, |
||||||
|
'queryKey' | 'queryFn' |
||||||
|
> & { |
||||||
|
onSuccess?: (data: boolean) => void; |
||||||
|
onError?: (err: ErrorType) => void; |
||||||
|
onSettled?: (data?: boolean, error?: Error) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export type UseAuthStateResult<ErrorType = Error> = |
||||||
|
& QueryObserverResult<boolean, ErrorType> |
||||||
|
& { authenticated: boolean }; |
||||||
|
|
||||||
|
/** |
||||||
|
* Hook for getting the authentication status |
||||||
|
* |
||||||
|
* Calls the authProvider.checkAuth() method asynchronously. |
||||||
|
* |
||||||
|
* The return value updates according to the authProvider request state: |
||||||
|
* |
||||||
|
* - isPending: true just after mount, while the authProvider is being called. false once the authProvider has answered. |
||||||
|
* - authenticated: true while loading. then true or false depending on the authProvider response. |
||||||
|
* |
||||||
|
* To avoid rendering a component and force waiting for the authProvider response, use the useAuthState() hook |
||||||
|
* instead of the useAuthenticated() hook. |
||||||
|
* |
||||||
|
* You can render different content depending on the authenticated status. |
||||||
|
* |
||||||
|
* @see useAuthenticated() |
||||||
|
* |
||||||
|
* @param {Object} params Any params you want to pass to the authProvider |
||||||
|
* |
||||||
|
* @param {Boolean} logoutOnFailure: Optional. Whether the user should be logged out if the authProvider fails to authenticate them. False by default. |
||||||
|
* |
||||||
|
* @returns The current auth check state. Destructure as { authenticated, error, isPending }. |
||||||
|
* |
||||||
|
* @example |
||||||
|
* import { useAuthState, Loading } from 'react-admin'; |
||||||
|
* |
||||||
|
* const MyPage = () => { |
||||||
|
* const { isPending, authenticated } = useAuthState(); |
||||||
|
* if (isPending) { |
||||||
|
* return <Loading />; |
||||||
|
* } |
||||||
|
* if (authenticated) { |
||||||
|
* return <AuthenticatedContent />; |
||||||
|
* } |
||||||
|
* return <AnonymousContent />; |
||||||
|
* }; |
||||||
|
*/ |
||||||
|
export function useAuthState<TError = Error>( |
||||||
|
params: any = {}, |
||||||
|
logoutOnFailure: boolean = false, |
||||||
|
queryOptions: UseAuthStateOptions<TError> = {}, |
||||||
|
): UseAuthStateResult<TError> { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const logout = useLogout(); |
||||||
|
const basename = useBasename(); |
||||||
|
const notify = useNotify(); |
||||||
|
const { onSuccess, onError, onSettled, ...options } = queryOptions; |
||||||
|
|
||||||
|
const result = useQuery<boolean, any>({ |
||||||
|
queryKey: ['auth', 'checkAuth', params], |
||||||
|
queryFn: ({ signal }) => { |
||||||
|
// The authProvider is optional in react-admin
|
||||||
|
if (!authProvider) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
return authProvider |
||||||
|
.checkAuth({ ...params, signal }) |
||||||
|
.then(() => true) |
||||||
|
.catch(error => { |
||||||
|
// This is necessary because react-query requires the error to be defined
|
||||||
|
if (error != null) { |
||||||
|
throw error; |
||||||
|
} |
||||||
|
|
||||||
|
throw new Error(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
retry: false, |
||||||
|
...options, |
||||||
|
}); |
||||||
|
|
||||||
|
const onSuccessEvent = useInvariant(onSuccess ?? noop); |
||||||
|
const onSettledEvent = useInvariant(onSettled ?? noop); |
||||||
|
const onErrorEvent = useInvariant( |
||||||
|
onError ?? |
||||||
|
((error: any) => { |
||||||
|
const loginUrl = removeDoubleSlashes( |
||||||
|
`${basename}/${defaultAuthParams.loginUrl}` |
||||||
|
); |
||||||
|
if (logoutOnFailure) { |
||||||
|
logout( |
||||||
|
{}, |
||||||
|
error && error.redirectTo != null |
||||||
|
? error.redirectTo |
||||||
|
: loginUrl |
||||||
|
); |
||||||
|
const shouldSkipNotify = error && error.message === false; |
||||||
|
!shouldSkipNotify && |
||||||
|
notify( |
||||||
|
getErrorMessage(error, 'ra.auth.auth_check_error'), |
||||||
|
{ type: 'error' } |
||||||
|
); |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.data === undefined || result.isFetching) return; |
||||||
|
onSuccessEvent(result.data); |
||||||
|
}, [onSuccessEvent, result.data, result.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.error == null || result.isFetching) return; |
||||||
|
onErrorEvent(result.error); |
||||||
|
}, [onErrorEvent, result.error, result.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.status === 'pending' || result.isFetching) return; |
||||||
|
onSettledEvent(result.data, result.error); |
||||||
|
}, [ |
||||||
|
onSettledEvent, |
||||||
|
result.data, |
||||||
|
result.error, |
||||||
|
result.status, |
||||||
|
result.isFetching, |
||||||
|
]); |
||||||
|
|
||||||
|
return useMemo(() => { |
||||||
|
return { |
||||||
|
...result, |
||||||
|
// If the data is undefined and the query isn't loading anymore, it means the query failed.
|
||||||
|
// In that case, we set authenticated to false unless there's no authProvider.
|
||||||
|
authenticated: result.data ?? result.isLoading |
||||||
|
? true |
||||||
|
: authProvider == null, // Optimistic,
|
||||||
|
}; |
||||||
|
}, [authProvider, result]); |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import { UseQueryOptions } from '@tanstack/react-query'; |
||||||
|
import { useAuthState } from "./useAuthState"; |
||||||
|
|
||||||
|
export type UseAuthenticatedOptions<ParamsType> = |
||||||
|
& Omit<UseQueryOptions<boolean, any>, 'queryKey' | 'queryFn'> |
||||||
|
& { params?: ParamsType }; |
||||||
|
|
||||||
|
/** |
||||||
|
* Restrict access to authenticated users. |
||||||
|
* Redirect anonymous users to the login page. |
||||||
|
* |
||||||
|
* Use it in your custom page components to require |
||||||
|
* authentication. |
||||||
|
* |
||||||
|
* You can set additional `authParams` at will if your authProvider |
||||||
|
* requires it. |
||||||
|
* |
||||||
|
* @example |
||||||
|
* import { Admin, CustomRoutes, useAuthenticated } from 'react-admin'; |
||||||
|
* const FooPage = () => { |
||||||
|
* useAuthenticated(); |
||||||
|
* return <Foo />; |
||||||
|
* } |
||||||
|
* const customRoutes = [ |
||||||
|
* <Route path="/foo" element={<FooPage />} /> |
||||||
|
* ]; |
||||||
|
* const App = () => ( |
||||||
|
* <Admin> |
||||||
|
* <CustomRoutes>{customRoutes}</CustomRoutes> |
||||||
|
* </Admin> |
||||||
|
* ); |
||||||
|
*/ |
||||||
|
export function useAuthenticated<TParams = any, TError = unknown>({ |
||||||
|
params, |
||||||
|
...options |
||||||
|
}: UseAuthenticatedOptions<TParams> = {}) { |
||||||
|
useAuthState<TError>(params ?? {}, true, options); |
||||||
|
} |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { To } from "react-router-dom"; |
||||||
|
import { useNotify } from "../notification"; |
||||||
|
import { useBasename } from "../routing"; |
||||||
|
import { getErrorMessage, removeDoubleSlashes } from "../util"; |
||||||
|
import { defaultAuthParams, useAuthProvider } from "./useAuthProvider"; |
||||||
|
import { useLogout } from "./useLogout"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Check if the current user is authenticated by calling authProvider.checkAuth(). |
||||||
|
* Logs the user out on failure. |
||||||
|
* |
||||||
|
* @param {Object} params The parameters to pass to the authProvider |
||||||
|
* @param {boolean} logoutOnFailure Whether the user should be logged out if the authProvider fails to authenticate them. True by default. |
||||||
|
* @param {string} redirectTo The login form url. Defaults to '/login' |
||||||
|
* |
||||||
|
* @return {Promise} Resolved to the authProvider response if the user passes the check, or rejected with an error otherwise |
||||||
|
*/ |
||||||
|
export type CheckAuth = ( |
||||||
|
params?: any, |
||||||
|
logoutOnFailure?: boolean, |
||||||
|
redirectTo?: string |
||||||
|
) => Promise<any>; |
||||||
|
|
||||||
|
const checkAuthWithoutAuthProvider = () => Promise.resolve(); |
||||||
|
|
||||||
|
/** |
||||||
|
* Get a callback for calling the authProvider.checkAuth() method. |
||||||
|
* In case of rejection, redirects to the login page, displays a notification, |
||||||
|
* and throws an error. |
||||||
|
* |
||||||
|
* This is a low level hook. See those more specialized hooks |
||||||
|
* for common authentication tasks, based on useCheckAuth. |
||||||
|
* |
||||||
|
* @see useAuthenticated |
||||||
|
* @see useAuthState |
||||||
|
* |
||||||
|
* @returns {Function} checkAuth callback |
||||||
|
* |
||||||
|
* @example |
||||||
|
* |
||||||
|
* import { useCheckAuth } from 'react-admin'; |
||||||
|
* |
||||||
|
* const MyProtectedPage = () => { |
||||||
|
* const checkAuth = useCheckAuth(); |
||||||
|
* useEffect(() => { |
||||||
|
* checkAuth().catch(() => {}); |
||||||
|
* }, []); |
||||||
|
* return <p>Private content: EZAEZEZAET</p> |
||||||
|
* } // tip: use useAuthenticated() hook instead
|
||||||
|
* |
||||||
|
* const MyPage = () => { |
||||||
|
* const checkAuth = useCheckAuth(); |
||||||
|
* const [authenticated, setAuthenticated] = useState(true); // optimistic auth
|
||||||
|
* useEffect(() => { |
||||||
|
* checkAuth({}, false) |
||||||
|
* .then(() => setAuthenticated(true)) |
||||||
|
* .catch(() => setAuthenticated(false)); |
||||||
|
* }, []); |
||||||
|
* return authenticated ? <Bar /> : <BarNotAuthenticated />; |
||||||
|
* } // tip: use useAuthState() hook instead
|
||||||
|
*/ |
||||||
|
export function useCheckAuth(): CheckAuth { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const notify = useNotify(); |
||||||
|
const logout = useLogout(); |
||||||
|
const basename = useBasename(); |
||||||
|
const loginUrl = basename |
||||||
|
? removeDoubleSlashes(`${basename}/${defaultAuthParams.loginUrl}`) |
||||||
|
: defaultAuthParams.loginUrl; |
||||||
|
|
||||||
|
const checkAuth = useCallback( |
||||||
|
( |
||||||
|
params: any = {}, |
||||||
|
logoutOnFailure = true, |
||||||
|
redirectTo?: To |
||||||
|
) => authProvider |
||||||
|
? authProvider.checkAuth(params).catch(error => { |
||||||
|
if (logoutOnFailure) { |
||||||
|
logout( |
||||||
|
{}, |
||||||
|
error && error.redirectTo != null |
||||||
|
? error.redirectTo |
||||||
|
: (redirectTo ?? loginUrl) |
||||||
|
); |
||||||
|
const shouldSkipNotify = error && error.message === false; |
||||||
|
!shouldSkipNotify && |
||||||
|
notify( |
||||||
|
getErrorMessage( |
||||||
|
error, |
||||||
|
'ra.auth.auth_check_error' |
||||||
|
), |
||||||
|
{ type: 'error' } |
||||||
|
); |
||||||
|
} |
||||||
|
throw error; |
||||||
|
}) |
||||||
|
: checkAuthWithoutAuthProvider(), |
||||||
|
[authProvider, logout, notify, loginUrl] |
||||||
|
); |
||||||
|
|
||||||
|
return checkAuth; |
||||||
|
} |
||||||
@ -0,0 +1,109 @@ |
|||||||
|
import { |
||||||
|
useQuery, |
||||||
|
UseQueryOptions, |
||||||
|
QueryObserverResult, |
||||||
|
} from '@tanstack/react-query'; |
||||||
|
import { useEffect, useMemo } from "react"; |
||||||
|
import { UserIdentity } from "./types"; |
||||||
|
import { useAuthProvider } from "./useAuthProvider"; |
||||||
|
import useInvariant from '@rakit/use-invariant'; |
||||||
|
|
||||||
|
export interface UseGetIdentityOptions<ErrorType extends Error = Error> |
||||||
|
extends Omit<UseQueryOptions<UserIdentity, ErrorType>, 'queryKey' | 'queryFn'> { |
||||||
|
onSuccess?: (data: UserIdentity) => void; |
||||||
|
onError?: (err: Error) => void; |
||||||
|
onSettled?: (data?: UserIdentity, error?: Error | null) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export type UseGetIdentityResult<ErrorType = Error> = QueryObserverResult< |
||||||
|
UserIdentity, |
||||||
|
ErrorType |
||||||
|
> & { |
||||||
|
identity: UserIdentity | undefined; |
||||||
|
}; |
||||||
|
|
||||||
|
const defaultIdentity: UserIdentity = { id: '' }; |
||||||
|
|
||||||
|
/** |
||||||
|
* Return the current user identity by calling authProvider.getIdentity() on mount |
||||||
|
* |
||||||
|
* The return value updates according to the call state: |
||||||
|
* |
||||||
|
* - mount: { isPending: true } |
||||||
|
* - success: { identity, refetch: () => {}, isPending: false } |
||||||
|
* - error: { error: Error, isPending: false } |
||||||
|
* |
||||||
|
* The implementation is left to the authProvider. |
||||||
|
* |
||||||
|
* @returns The current user identity. Destructure as { isPending, identity, error, refetch }. |
||||||
|
* |
||||||
|
* @example |
||||||
|
* import { useGetIdentity, useGetOne } from 'react-admin'; |
||||||
|
* |
||||||
|
* const PostDetail = ({ id }) => { |
||||||
|
* const { data: post, isPending: postLoading } = useGetOne('posts', { id }); |
||||||
|
* const { identity, isPending: identityLoading } = useGetIdentity(); |
||||||
|
* if (postLoading || identityLoading) return <>Loading...</>; |
||||||
|
* if (!post.lockedBy || post.lockedBy === identity.id) { |
||||||
|
* // post isn't locked, or is locked by me
|
||||||
|
* return <PostEdit post={post} /> |
||||||
|
* } else { |
||||||
|
* // post is locked by someone else and cannot be edited
|
||||||
|
* return <PostShow post={post} /> |
||||||
|
* } |
||||||
|
* } |
||||||
|
*/ |
||||||
|
export function useGetIdentity<ErrorType extends Error = Error>( |
||||||
|
options: UseGetIdentityOptions<ErrorType> = {} |
||||||
|
): UseGetIdentityResult<ErrorType> { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const { onSuccess, onError, onSettled, ...queryOptions } = options; |
||||||
|
|
||||||
|
const result = useQuery({ |
||||||
|
queryKey: ['auth', 'getIdentity'], |
||||||
|
queryFn: async ({ signal }) => { |
||||||
|
if ( |
||||||
|
authProvider && |
||||||
|
typeof authProvider.getIdentity === 'function' |
||||||
|
) { |
||||||
|
return authProvider.getIdentity({ signal }); |
||||||
|
} else { |
||||||
|
return defaultIdentity; |
||||||
|
} |
||||||
|
}, |
||||||
|
...queryOptions, |
||||||
|
}); |
||||||
|
|
||||||
|
const onSuccessEvent = useInvariant(onSuccess ?? noop); |
||||||
|
const onErrorEvent = useInvariant(onError ?? noop); |
||||||
|
const onSettledEvent = useInvariant(onSettled ?? noop); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.data === undefined || result.isFetching) return; |
||||||
|
onSuccessEvent(result.data); |
||||||
|
}, [onSuccessEvent, result.data, result.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.error == null || result.isFetching) return; |
||||||
|
onErrorEvent(result.error); |
||||||
|
}, [onErrorEvent, result.error, result.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.status === 'pending' || result.isFetching) return; |
||||||
|
onSettledEvent(result.data, result.error); |
||||||
|
}, [ |
||||||
|
onSettledEvent, |
||||||
|
result.data, |
||||||
|
result.error, |
||||||
|
result.status, |
||||||
|
result.isFetching, |
||||||
|
]); |
||||||
|
|
||||||
|
return useMemo( |
||||||
|
() => ({ |
||||||
|
...result, |
||||||
|
identity: result.data, |
||||||
|
}), |
||||||
|
[result], |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useAuthProvider } from "./useAuthProvider"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Proxy for calling authProvider.getPermissions() |
||||||
|
* |
||||||
|
* @param {Object} params The parameters to pass to the authProvider |
||||||
|
* |
||||||
|
* @return {Promise} The authProvider response |
||||||
|
*/ |
||||||
|
type GetPermissions = (params?: any) => Promise<any>; |
||||||
|
|
||||||
|
const getPermissionsWithoutProvider = () => Promise.resolve([]); |
||||||
|
|
||||||
|
/** |
||||||
|
* Get a callback for calling the authProvider.getPermissions() method. |
||||||
|
* |
||||||
|
* @see useAuthProvider |
||||||
|
* |
||||||
|
* @returns {Function} getPermissions callback |
||||||
|
* |
||||||
|
* This is a low level hook. See those more specialized hooks |
||||||
|
* offering state handling. |
||||||
|
* |
||||||
|
* @see usePermissions |
||||||
|
* |
||||||
|
* @example |
||||||
|
* |
||||||
|
* import { useGetPermissions } from 'react-admin'; |
||||||
|
* |
||||||
|
* const Roles = () => { |
||||||
|
* const [permissions, setPermissions] = useState([]); |
||||||
|
* const getPermissions = useGetPermissions(); |
||||||
|
* useEffect(() => { |
||||||
|
* getPermissions().then(permissions => setPermissions(permissions)) |
||||||
|
* }, []) |
||||||
|
* return ( |
||||||
|
* <ul> |
||||||
|
* {permissions.map((permission, key) => ( |
||||||
|
* <li key={key}>{permission}</li> |
||||||
|
* ))} |
||||||
|
* </ul> |
||||||
|
* ); |
||||||
|
* } |
||||||
|
*/ |
||||||
|
export function useGetPermissions(): GetPermissions { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
|
||||||
|
return useCallback( |
||||||
|
(params: any = {}) => |
||||||
|
authProvider |
||||||
|
? authProvider |
||||||
|
.getPermissions(params) |
||||||
|
.then(result => result ?? null) |
||||||
|
: getPermissionsWithoutProvider(), |
||||||
|
[authProvider] |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
import useInvariant from '@rakit/use-invariant'; |
||||||
|
import { useQuery, UseQueryOptions } from '@tanstack/react-query'; |
||||||
|
import noop from 'lodash/noop'; |
||||||
|
import { useEffect } from 'react'; |
||||||
|
import { useLocation } from "react-router-dom"; |
||||||
|
import { useRedirect } from "../routing"; |
||||||
|
import { AuthRedirectResult } from "./types"; |
||||||
|
import { useAuthProvider } from "./useAuthProvider"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Key used to store the previous location in localStorage. |
||||||
|
* Used by the useHandleAuthCallback hook to redirect the user to their previous location after a successful login. |
||||||
|
*/ |
||||||
|
export const PreviousLocationStorageKey = '@react-admin/nextPathname'; |
||||||
|
|
||||||
|
export type UseHandleAuthCallbackOptions = Omit< |
||||||
|
UseQueryOptions<AuthRedirectResult | void>, |
||||||
|
'queryKey' | 'queryFn' |
||||||
|
> & { |
||||||
|
onSuccess?: (data: AuthRedirectResult | void) => void; |
||||||
|
onError?: (err: Error) => void; |
||||||
|
onSettled?: ( |
||||||
|
data?: AuthRedirectResult | void, |
||||||
|
error?: Error | null |
||||||
|
) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* This hook calls the `authProvider.handleCallback()` method on mount. This is meant to be used in a route called |
||||||
|
* by an external authentication service (e.g. Auth0) after the user has logged in. |
||||||
|
* By default, it redirects to application home page upon success, or to the `redirectTo` location returned by `authProvider. handleCallback`. |
||||||
|
* |
||||||
|
* @returns An object containing { isPending, data, error, refetch }. |
||||||
|
*/ |
||||||
|
export function useHandleAuthCallback( |
||||||
|
options: UseHandleAuthCallbackOptions = {} |
||||||
|
) { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const redirect = useRedirect(); |
||||||
|
const location = useLocation(); |
||||||
|
const locationState = location.state as any; |
||||||
|
const nextPathName = locationState && locationState.nextPathname; |
||||||
|
const nextSearch = locationState && locationState.nextSearch; |
||||||
|
const defaultRedirectUrl = nextPathName ? nextPathName + nextSearch : '/'; |
||||||
|
const { onSuccess, onError, onSettled, ...queryOptions } = options ?? {}; |
||||||
|
|
||||||
|
const queryResult = useQuery({ |
||||||
|
queryKey: ['auth', 'handleCallback'], |
||||||
|
queryFn: ({ signal }) => |
||||||
|
authProvider && typeof authProvider.handleCallback === 'function' |
||||||
|
? authProvider |
||||||
|
.handleCallback({ signal }) |
||||||
|
.then(result => result ?? null) |
||||||
|
: Promise.resolve(), |
||||||
|
retry: false, |
||||||
|
...queryOptions, |
||||||
|
}); |
||||||
|
|
||||||
|
const onSuccessEvent = useInvariant( |
||||||
|
onSuccess ?? |
||||||
|
((data: any) => { |
||||||
|
// AuthProviders relying on a third party services redirect back to the app can't
|
||||||
|
// use the location state to store the path on which the user was before the login.
|
||||||
|
// So we support a fallback on the localStorage.
|
||||||
|
const previousLocation = localStorage.getItem( |
||||||
|
PreviousLocationStorageKey |
||||||
|
); |
||||||
|
const redirectTo = |
||||||
|
(data as AuthRedirectResult)?.redirectTo ?? |
||||||
|
previousLocation; |
||||||
|
if (redirectTo === false) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
redirect(redirectTo ?? defaultRedirectUrl); |
||||||
|
}) |
||||||
|
); |
||||||
|
const onErrorEvent = useInvariant(onError ?? noop); |
||||||
|
const onSettledEvent = useInvariant(onSettled ?? noop); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (queryResult.error == null || queryResult.isFetching) return; |
||||||
|
onErrorEvent(queryResult.error); |
||||||
|
}, [onErrorEvent, queryResult.error, queryResult.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (queryResult.data === undefined || queryResult.isFetching) return; |
||||||
|
onSuccessEvent(queryResult.data); |
||||||
|
}, [onSuccessEvent, queryResult.data, queryResult.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (queryResult.status === 'pending' || queryResult.isFetching) return; |
||||||
|
onSettledEvent(queryResult.data, queryResult.error); |
||||||
|
}, [ |
||||||
|
onSettledEvent, |
||||||
|
queryResult.data, |
||||||
|
queryResult.error, |
||||||
|
queryResult.status, |
||||||
|
queryResult.isFetching, |
||||||
|
]); |
||||||
|
|
||||||
|
return queryResult; |
||||||
|
} |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
import { useCallback } from 'react'; |
||||||
|
import { useLocation, useNavigate } from 'react-router-dom'; |
||||||
|
import { useNotificationContext } from '../notification'; |
||||||
|
import { defaultAuthParams, useAuthProvider } from './useAuthProvider'; |
||||||
|
import { useBasename } from '../routing'; |
||||||
|
import { removeDoubleSlashes } from '../util'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Log a user in by calling the authProvider.login() method |
||||||
|
* |
||||||
|
* @param {Object} params Login parameters to pass to the authProvider. May contain username/email, password, etc |
||||||
|
* @param {string} pathName The path to redirect to after login. By default, redirects to the home page, or to the last page visited after disconnection. |
||||||
|
* |
||||||
|
* @return {Promise} The authProvider response |
||||||
|
*/ |
||||||
|
type Login = (params: any, pathName?: string) => Promise<any>; |
||||||
|
|
||||||
|
/** |
||||||
|
* Get a callback for calling the authProvider.login() method |
||||||
|
* and redirect to the previous authenticated page (or the home page) on success. |
||||||
|
* |
||||||
|
* @see useAuthProvider |
||||||
|
* |
||||||
|
* @returns {Function} login callback |
||||||
|
* |
||||||
|
* @example |
||||||
|
* |
||||||
|
* import { useLogin } from 'react-admin'; |
||||||
|
* |
||||||
|
* const LoginButton = () => { |
||||||
|
* const [loading, setLoading] = useState(false); |
||||||
|
* const login = useLogin(); |
||||||
|
* const handleClick = { |
||||||
|
* setLoading(true); |
||||||
|
* login({ username: 'john', password: 'p@ssw0rd' }, '/posts') |
||||||
|
* .then(() => setLoading(false)); |
||||||
|
* } |
||||||
|
* return <button onClick={handleClick}>Login</button>; |
||||||
|
* } |
||||||
|
*/ |
||||||
|
export function useLogin(): Login { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const location = useLocation(); |
||||||
|
const locationState = location.state as any; |
||||||
|
const navigate = useNavigate(); |
||||||
|
const basename = useBasename(); |
||||||
|
const { resetNotifications } = useNotificationContext(); |
||||||
|
const nextPathName = locationState && locationState.nextPathname; |
||||||
|
const nextSearch = locationState && locationState.nextSearch; |
||||||
|
const afterLoginUrl = basename |
||||||
|
? removeDoubleSlashes(`${basename}/${defaultAuthParams.afterLoginUrl}`) |
||||||
|
: defaultAuthParams.afterLoginUrl; |
||||||
|
|
||||||
|
const login = useCallback( |
||||||
|
async (params: any = {}, pathName?: string) => { |
||||||
|
if (authProvider) { |
||||||
|
return authProvider.login(params).then(ret => { |
||||||
|
resetNotifications(); |
||||||
|
if (ret && ret.hasOwnProperty('redirectTo')) { |
||||||
|
if (ret) { |
||||||
|
navigate(ret.redirectTo); |
||||||
|
} |
||||||
|
} else { |
||||||
|
const redirectUrl = pathName |
||||||
|
? pathName |
||||||
|
: nextPathName + nextSearch || afterLoginUrl; |
||||||
|
navigate(redirectUrl); |
||||||
|
} |
||||||
|
return ret; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
resetNotifications(); |
||||||
|
navigate(afterLoginUrl); |
||||||
|
return Promise.resolve(); |
||||||
|
} |
||||||
|
}, |
||||||
|
[ |
||||||
|
authProvider, |
||||||
|
afterLoginUrl, |
||||||
|
navigate, |
||||||
|
nextPathName, |
||||||
|
nextSearch, |
||||||
|
resetNotifications, |
||||||
|
] |
||||||
|
); |
||||||
|
|
||||||
|
return login; |
||||||
|
} |
||||||
@ -0,0 +1,149 @@ |
|||||||
|
import { useQueryClient } from '@tanstack/react-query'; |
||||||
|
import { useCallback, useEffect, useRef } from "react"; |
||||||
|
import { Path, useLocation, useNavigate } from "react-router-dom"; |
||||||
|
import { useBasename } from "../routing"; |
||||||
|
import { useResetStore } from "../store"; |
||||||
|
import { removeDoubleSlashes } from "../util"; |
||||||
|
import { defaultAuthParams, useAuthProvider } from "./useAuthProvider"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Log the current user out by calling the authProvider.logout() method, |
||||||
|
* and redirect them to the login screen. |
||||||
|
* |
||||||
|
* @param {Object} params The parameters to pass to the authProvider |
||||||
|
* @param {string} redirectTo The path name to redirect the user to (optional, defaults to login) |
||||||
|
* @param {boolean} redirectToCurrentLocationAfterLogin Whether the button shall record the current location to redirect to it after login. true by default. |
||||||
|
* |
||||||
|
* @return {Promise} The authProvider response |
||||||
|
*/ |
||||||
|
export type Logout = ( |
||||||
|
params?: any, |
||||||
|
redirectTo?: string | false, |
||||||
|
redirectToCurrentLocationAfterLogin?: boolean |
||||||
|
) => Promise<any>; |
||||||
|
|
||||||
|
/** |
||||||
|
* Get a callback for calling the authProvider.logout() method, |
||||||
|
* redirect to the login page, and clear the store. |
||||||
|
* |
||||||
|
* @see useAuthProvider |
||||||
|
* |
||||||
|
* @returns {Function} logout callback |
||||||
|
* |
||||||
|
* @example |
||||||
|
* |
||||||
|
* import { useLogout } from 'react-admin'; |
||||||
|
* |
||||||
|
* const LogoutButton = () => { |
||||||
|
* const logout = useLogout(); |
||||||
|
* const handleClick = () => logout(); |
||||||
|
* return <button onClick={handleClick}>Logout</button>; |
||||||
|
* } |
||||||
|
*/ |
||||||
|
export function useLogout(): Logout { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const queryClient = useQueryClient(); |
||||||
|
const resetStore = useResetStore(); |
||||||
|
const navigate = useNavigate(); |
||||||
|
// useNavigate forces rerenders on every navigation, even if we don't use the result
|
||||||
|
// see https://github.com/remix-run/react-router/issues/7634
|
||||||
|
// so we use a ref to bail out of rerenders when we don't need to
|
||||||
|
const navigateRef = useRef(navigate); |
||||||
|
const location = useLocation(); |
||||||
|
const basename = useBasename(); |
||||||
|
const locationRef = useRef(location); |
||||||
|
const loginUrl = basename |
||||||
|
? removeDoubleSlashes(`${basename}/${defaultAuthParams.loginUrl}`) |
||||||
|
: defaultAuthParams.loginUrl; |
||||||
|
|
||||||
|
/* |
||||||
|
* We need the current location to pass in the router state |
||||||
|
* so that the login hook knows where to redirect to as next route after login. |
||||||
|
* |
||||||
|
* But if we used the location from useLocation as a dependency of the logout |
||||||
|
* function, it would be rebuilt each time the user changes location. |
||||||
|
* Consequently, that would force a rerender of all components using this hook |
||||||
|
* upon navigation (CoreAdminRouter for example). |
||||||
|
* |
||||||
|
* To avoid that, we store the location in a ref. |
||||||
|
*/ |
||||||
|
useEffect(() => { |
||||||
|
locationRef.current = location; |
||||||
|
navigateRef.current = navigate; |
||||||
|
}, [location, navigate]); |
||||||
|
|
||||||
|
const logout: Logout = useCallback(async ( |
||||||
|
params = {}, |
||||||
|
redirectTo = loginUrl, |
||||||
|
redirectToCurrentLocationAfterLogin = true |
||||||
|
) => { |
||||||
|
if (authProvider) { |
||||||
|
return authProvider |
||||||
|
.logout(params) |
||||||
|
.then(redirectToFromProvider => { |
||||||
|
if (redirectToFromProvider === false || redirectTo === false) { |
||||||
|
resetStore(); |
||||||
|
queryClient.clear(); |
||||||
|
// do not redirect
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const finalRedirectTo = redirectToFromProvider || redirectTo; |
||||||
|
|
||||||
|
if (finalRedirectTo?.startsWith('http')) { |
||||||
|
// absolute link (e.g. https://my.oidc.server/login)
|
||||||
|
resetStore(); |
||||||
|
queryClient.clear(); |
||||||
|
window.location.href = finalRedirectTo; |
||||||
|
return finalRedirectTo; |
||||||
|
} |
||||||
|
|
||||||
|
// redirectTo is an internal location that may contain a query string, e.g. '/login?foo=bar'
|
||||||
|
// we must split it to pass a structured location to navigate()
|
||||||
|
const redirectToParts = finalRedirectTo.split('?'); |
||||||
|
const newLocation: Partial<Path> = { |
||||||
|
pathname: redirectToParts[0], |
||||||
|
}; |
||||||
|
let newLocationOptions = {}; |
||||||
|
|
||||||
|
if (redirectToCurrentLocationAfterLogin && |
||||||
|
locationRef.current && |
||||||
|
locationRef.current.pathname) { |
||||||
|
newLocationOptions = { |
||||||
|
state: { |
||||||
|
nextPathname: locationRef.current.pathname, |
||||||
|
nextSearch: locationRef.current.search, |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
if (redirectToParts[1]) { |
||||||
|
newLocation.search = redirectToParts[1]; |
||||||
|
} |
||||||
|
navigateRef.current(newLocation, newLocationOptions); |
||||||
|
resetStore(); |
||||||
|
queryClient.clear(); |
||||||
|
|
||||||
|
return redirectToFromProvider; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
navigateRef.current( |
||||||
|
{ pathname: loginUrl }, |
||||||
|
{ |
||||||
|
state: { |
||||||
|
nextPathname: locationRef.current && locationRef.current.pathname, |
||||||
|
}, |
||||||
|
} |
||||||
|
); |
||||||
|
resetStore(); |
||||||
|
queryClient.clear(); |
||||||
|
return Promise.resolve(); |
||||||
|
} |
||||||
|
}, [ |
||||||
|
authProvider, |
||||||
|
resetStore, |
||||||
|
loginUrl, |
||||||
|
queryClient, |
||||||
|
]); |
||||||
|
|
||||||
|
return logout; |
||||||
|
} |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
import { useCallback } from 'react'; |
||||||
|
import { useNavigate } from 'react-router'; |
||||||
|
import { useNotify } from '../notification'; |
||||||
|
import { getErrorMessage } from '../util'; |
||||||
|
import { useAuthProvider } from './useAuthProvider'; |
||||||
|
import { useLogout } from './useLogout'; |
||||||
|
|
||||||
|
let timer: ReturnType<typeof setTimeout> | undefined; |
||||||
|
|
||||||
|
/** |
||||||
|
* Returns a callback used to call the authProvider.checkError() method |
||||||
|
* and an error from the dataProvider. If the authProvider rejects the call, |
||||||
|
* the hook logs the user out and shows a logged out notification. |
||||||
|
* |
||||||
|
* Used in the useDataProvider hook to check for access denied responses |
||||||
|
* (e.g. 401 or 403 responses) and trigger a logout. |
||||||
|
* |
||||||
|
* @see useLogout |
||||||
|
* @see useDataProvider |
||||||
|
* |
||||||
|
* @returns {Function} logoutIfAccessDenied callback |
||||||
|
* |
||||||
|
* @example |
||||||
|
* |
||||||
|
* import { useLogoutIfAccessDenied, useNotify, DataProviderContext } from 'react-admin'; |
||||||
|
* |
||||||
|
* const FetchRestrictedResource = () => { |
||||||
|
* const dataProvider = useContext(DataProviderContext); |
||||||
|
* const logoutIfAccessDenied = useLogoutIfAccessDenied(); |
||||||
|
* const notify = useNotify() |
||||||
|
* useEffect(() => { |
||||||
|
* dataProvider.getOne('secret', { id: 123 }) |
||||||
|
* .catch(error => { |
||||||
|
* logoutIfAccessDenied(error); |
||||||
|
* notify('server error', { type: 'error' }); |
||||||
|
* }) |
||||||
|
* }, []); |
||||||
|
* // ...
|
||||||
|
* } |
||||||
|
*/ |
||||||
|
export const useLogoutIfAccessDenied = (): LogoutIfAccessDenied => { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const logout = useLogout(); |
||||||
|
const notify = useNotify(); |
||||||
|
const navigate = useNavigate(); |
||||||
|
|
||||||
|
const logoutIfAccessDenied = useCallback( |
||||||
|
async (error?: any) => { |
||||||
|
if (!authProvider) { |
||||||
|
return logoutIfAccessDeniedWithoutProvider(); |
||||||
|
} |
||||||
|
return authProvider |
||||||
|
.checkError(error) |
||||||
|
.then(() => false) |
||||||
|
.catch(async e => { |
||||||
|
const logoutUser = e?.logoutUser ?? true; |
||||||
|
//manual debounce
|
||||||
|
if (timer) { |
||||||
|
// side effects already triggered in this tick, exit
|
||||||
|
return true; |
||||||
|
} |
||||||
|
timer = setTimeout(() => { |
||||||
|
timer = undefined; |
||||||
|
}, 0); |
||||||
|
|
||||||
|
const redirectTo = |
||||||
|
e && e.redirectTo != null |
||||||
|
? e.redirectTo |
||||||
|
: error && error.redirectTo |
||||||
|
? error.redirectTo |
||||||
|
: undefined; |
||||||
|
|
||||||
|
const shouldNotify = !( |
||||||
|
(e && e.message === false) || |
||||||
|
(error && error.message === false) || |
||||||
|
redirectTo?.startsWith('http') |
||||||
|
); |
||||||
|
if (shouldNotify) { |
||||||
|
// notify only if not yet logged out
|
||||||
|
authProvider |
||||||
|
.checkAuth({}) |
||||||
|
.then(() => { |
||||||
|
if (logoutUser) { |
||||||
|
notify( |
||||||
|
getErrorMessage( |
||||||
|
e, |
||||||
|
'ra.notification.logged_out' |
||||||
|
), |
||||||
|
{ type: 'error' } |
||||||
|
); |
||||||
|
} else { |
||||||
|
notify( |
||||||
|
getErrorMessage( |
||||||
|
e, |
||||||
|
'ra.notification.not_authorized' |
||||||
|
), |
||||||
|
{ type: 'error' } |
||||||
|
); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(() => { }); |
||||||
|
} |
||||||
|
|
||||||
|
if (logoutUser) { |
||||||
|
logout({}, redirectTo); |
||||||
|
} else { |
||||||
|
if (redirectTo.startsWith('http')) { |
||||||
|
// absolute link (e.g. https://my.oidc.server/login)
|
||||||
|
window.location.href = redirectTo; |
||||||
|
} else { |
||||||
|
// internal location
|
||||||
|
navigate(redirectTo); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return true; |
||||||
|
}); |
||||||
|
}, |
||||||
|
[authProvider, logout, notify, navigate] |
||||||
|
); |
||||||
|
|
||||||
|
return logoutIfAccessDenied; |
||||||
|
}; |
||||||
|
|
||||||
|
const logoutIfAccessDeniedWithoutProvider = () => Promise.resolve(false); |
||||||
|
|
||||||
|
/** |
||||||
|
* Call the authProvider.authError() method, using the error passed as argument. |
||||||
|
* If the authProvider rejects the call, logs the user out and shows a logged out notification. |
||||||
|
* |
||||||
|
* @param {Error} error An Error object (usually returned by the dataProvider) |
||||||
|
* |
||||||
|
* @return {Promise} Resolved to true if there was a logout, false otherwise |
||||||
|
*/ |
||||||
|
type LogoutIfAccessDenied = (error?: any) => Promise<boolean>; |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
import { |
||||||
|
QueryObserverResult, |
||||||
|
useQuery, |
||||||
|
UseQueryOptions, |
||||||
|
} from '@tanstack/react-query'; |
||||||
|
import { useEffect, useMemo } from "react"; |
||||||
|
import { useAuthProvider } from "./useAuthProvider"; |
||||||
|
import { useLogoutIfAccessDenied } from "./useLogoutIfAccessDenied"; |
||||||
|
import useInvariant from '@rakit/use-invariant'; |
||||||
|
import noop from 'lodash/noop'; |
||||||
|
|
||||||
|
export interface UsePermissionsOptions<PermissionsType = any, ErrorType = Error> |
||||||
|
extends Omit< |
||||||
|
UseQueryOptions<PermissionsType, ErrorType>, |
||||||
|
'queryKey' | 'queryFn' |
||||||
|
> { |
||||||
|
onSuccess?: (data: PermissionsType) => void; |
||||||
|
onError?: (err: ErrorType) => void; |
||||||
|
onSettled?: (data?: PermissionsType, error?: ErrorType | null) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export type UsePermissionsResult< |
||||||
|
PermissionsType = any, |
||||||
|
ErrorType = Error, |
||||||
|
> = QueryObserverResult<PermissionsType, ErrorType> & { |
||||||
|
permissions: PermissionsType | undefined; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Hook for getting user permissions |
||||||
|
* |
||||||
|
* Calls the authProvider.getPermissions() method using react-query. |
||||||
|
* If the authProvider returns a rejected promise, returns empty permissions. |
||||||
|
* |
||||||
|
* The return value updates according to the request state: |
||||||
|
* |
||||||
|
* - start: { isPending: true } |
||||||
|
* - success: { permissions: [any], isPending: false } |
||||||
|
* - error: { error: [error from provider], isPending: false } |
||||||
|
* |
||||||
|
* Useful to enable features based on user permissions |
||||||
|
* |
||||||
|
* @param {Object} params Any params you want to pass to the authProvider |
||||||
|
* |
||||||
|
* @returns The current auth check state. Destructure as { permissions, error, isPending, refetch }. |
||||||
|
* |
||||||
|
* @example |
||||||
|
* import { usePermissions } from 'react-admin'; |
||||||
|
* |
||||||
|
* const PostDetail = () => { |
||||||
|
* const { isPending, permissions } = usePermissions(); |
||||||
|
* if (!isPending && permissions == 'editor') { |
||||||
|
* return <PostEdit /> |
||||||
|
* } else { |
||||||
|
* return <PostShow /> |
||||||
|
* } |
||||||
|
* }; |
||||||
|
*/ |
||||||
|
export function usePermissions<PermissionsType = any, ErrorType = Error>( |
||||||
|
params: any = {}, |
||||||
|
queryParams: UsePermissionsOptions<PermissionsType, ErrorType> = { |
||||||
|
staleTime: 5 * 60 * 1000, |
||||||
|
} |
||||||
|
): UsePermissionsResult<PermissionsType, ErrorType> { |
||||||
|
const authProvider = useAuthProvider(); |
||||||
|
const logoutIfAccessDenied = useLogoutIfAccessDenied(); |
||||||
|
const { onSuccess, onError, onSettled, ...queryOptions } = queryParams ?? {}; |
||||||
|
|
||||||
|
const result = useQuery<PermissionsType, ErrorType>({ |
||||||
|
queryKey: ['auth', 'getPermissions', params], |
||||||
|
queryFn: async ({ signal }) => { |
||||||
|
if (!authProvider) return Promise.resolve([]); |
||||||
|
const permissions = await authProvider.getPermissions({ |
||||||
|
...params, |
||||||
|
signal, |
||||||
|
}); |
||||||
|
return permissions ?? null; |
||||||
|
}, |
||||||
|
...queryOptions, |
||||||
|
}); |
||||||
|
|
||||||
|
const onSuccessEvent = useInvariant(onSuccess ?? noop); |
||||||
|
const onSettledEvent = useInvariant(onSettled ?? noop); |
||||||
|
const onErrorEvent = useInvariant( |
||||||
|
onError ?? |
||||||
|
((error: ErrorType) => { |
||||||
|
if (process.env.NODE_ENV === 'development') { |
||||||
|
console.error(error); |
||||||
|
} |
||||||
|
logoutIfAccessDenied(error); |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.data === undefined || result.isFetching) return; |
||||||
|
onSuccessEvent(result.data); |
||||||
|
}, [onSuccessEvent, result.data, result.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.error == null || result.isFetching) return; |
||||||
|
onErrorEvent(result.error); |
||||||
|
}, [onErrorEvent, result.error, result.isFetching]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (result.status === 'pending' || result.isFetching) return; |
||||||
|
onSettledEvent(result.data, result.error); |
||||||
|
}, [ |
||||||
|
onSettledEvent, |
||||||
|
result.data, |
||||||
|
result.error, |
||||||
|
result.status, |
||||||
|
result.isFetching, |
||||||
|
]); |
||||||
|
|
||||||
|
return useMemo( |
||||||
|
() => ({ |
||||||
|
...result, |
||||||
|
permissions: result.data, |
||||||
|
}), |
||||||
|
[result] |
||||||
|
); |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue