diff --git a/.eslintignore b/.eslintignore
index 34b2959a..b88a9113 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,5 @@
dist
lib/nile/src/generated
-node_modules
\ No newline at end of file
+node_modules
+!.storybook
+storybook-static
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 5e8238af..5620f091 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,5 @@ node_modules
!.yarn/cache
#.pnp.*
package-lock.json
+
+storybook-static
\ No newline at end of file
diff --git a/package.json b/package.json
index 11d1b242..3cf1844c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"build:react": "yarn workspace @theniledev/react build",
"build:events-example": "yarn workspace @theniledev/events-example build",
"build:examples": "yarn workspace @theniledev/examples build",
+ "build:react-storybook": "yarn workspace @theniledev/react build-storybook",
"lint": "yarn eslint . --max-warnings=0",
"buildDocs": "yarn workspace @theniledev/js typedoc --plugin typedoc-plugin-markdown --hideBreadcrumbs true src/index.ts",
"publish": "yarn lerna publish"
@@ -38,7 +39,7 @@
"typescript": "^4.7.2"
},
"lint-staged": {
- "packages/**/**/*.{mjs,js,ts,jsx,tsx}": "yarn lint --cache --fix --ignore-pattern '!packages/react/.storybook' --resolve-plugins-relative-to .",
- "lib/nile/src/*.{mjs,js,ts,jsx,tsx}": "yarn lint --cache --fix --resolve-plugins-relative-to ."
+ "packages/**/**/*.{mjs,js,ts,jsx,tsx}": "yarn lint --cache --fix .",
+ "lib/nile/src/*.{mjs,js,ts,jsx,tsx}": "yarn lint --cache --fix ."
}
}
diff --git a/packages/examples/pages/_app.tsx b/packages/examples/pages/_app.tsx
index c0b09734..6644cbf2 100644
--- a/packages/examples/pages/_app.tsx
+++ b/packages/examples/pages/_app.tsx
@@ -2,16 +2,12 @@ import React from 'react';
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { NileProvider } from '@theniledev/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-const queryClient = new QueryClient();
function MyApp({ Component, pageProps }: AppProps) {
return (
-
-
-
-
-
+
+
+
);
}
diff --git a/packages/examples/pages/org.tsx b/packages/examples/pages/org.tsx
index 32ad8f53..6d9b13f9 100644
--- a/packages/examples/pages/org.tsx
+++ b/packages/examples/pages/org.tsx
@@ -39,7 +39,7 @@ function Org() {
<>
🤩 InstaExpense 🤩
{
+ onSuccess={() => {
setSuccess(true);
}}
/>
diff --git a/packages/examples/pages/signin.tsx b/packages/examples/pages/signin.tsx
index f2fb9f78..375d0b18 100644
--- a/packages/examples/pages/signin.tsx
+++ b/packages/examples/pages/signin.tsx
@@ -13,7 +13,7 @@ function SignIn() {
🤩 InstaExpense 🤩
Sign in
{
+ onSuccess={() => {
if (redirect) {
router.push(`/${redirect}`);
} else {
diff --git a/packages/examples/pages/signup.tsx b/packages/examples/pages/signup.tsx
index cd492e5b..9c82a54a 100644
--- a/packages/examples/pages/signup.tsx
+++ b/packages/examples/pages/signup.tsx
@@ -9,7 +9,7 @@ function Signup() {
🤩 InstaExpense 🤩
Sign up
{
+ onSuccess={() => {
alert('user signed up!');
}}
/>
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 4bc8459f..bec91f04 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+var path = require('path');
+
module.exports = {
stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
@@ -5,4 +8,35 @@ module.exports = {
typescript: {
check: true, // type-check stories during Storybook build
},
+ webpackFinal: async (config) => {
+ // Remove the existing css rule
+ config.module.rules = config.module.rules.filter(
+ (f) => f.test.toString() !== '/\\.css$/'
+ );
+
+ config.resolve.modules = [
+ ...(config.resolve.modules || []),
+ path.resolve(__dirname, '../'),
+ ];
+
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ '~/lib': path.resolve(__dirname, '../lib'),
+ };
+ config.module.rules.push({
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true, // Enable modules to help you using className
+ },
+ },
+ ],
+ include: path.resolve(__dirname, '../stories'),
+ });
+
+ return config;
+ },
};
diff --git a/packages/react/README.md b/packages/react/README.md
index 6b102602..377c59a5 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -1,8 +1,12 @@
# @theniledev/react
+## Storybook
+
+[Storybook](link-to-story-book)
+
## Usage
-In the root of your react application, add a Nile provider.
+In the root of your react application, add a Nile provider. This will add a [QueryClientProvider](https://tanstack.com/query/v4/docs/quick-start) and a [CssVarsProvider](https://mui.com/joy-ui/getting-started/usage/) to your application.
```typescript
import { NileProvider } from '@theniledev/react';
@@ -10,7 +14,7 @@ const API_URL = 'https://localhost:8080'; // location of nile instance
function App() {
return (
-
+
Welcome to my great app
);
@@ -21,21 +25,25 @@ Once added, there is a hook and components available for use.
### useNile
-A method exposing the `@theniledev/js` instance created in ` `. The methods on the instance can be found in [the client src readme](../../lib/nile/src/README.md), or found in the auto-complete of visual studio code. In this example, [react-query](https://react-query.tanstack.com/) is used to handle loading, error, and cacheing.
+A method exposing the `@theniledev/js` instance created in ` `. The methods on the instance can be found in [the client src readme](../../lib/nile/src/README.md), or found in the auto-complete of visual studio code.
+
+### Making requests
+
+[react-query](https://react-query.tanstack.com/) should be used used to handle loading, error, and cacheing of data.
```typescript
import React, { useEffect } from 'react';
import { useNile } from '@theniledev/react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
export default function UserTable() {
const nile = useNile();
const [users, setUsers] = useState();
- const { data: users = [] } = useQuery(() => nile.listUsers());
+ const { data: users = [] } = useQuery(['ListUsers'], () => nile.listUsers());
// with multiple requests
// const [{ data: users = [] }, { data: invites = [] }] = useQueries([
- // { queryKey: 'users', queryFn: () => nile.listUsers({}) },
- // { queryKey: 'invites', queryFn: () => nile.listInvites({}) },
+ // { queryKey: ['users'], queryFn: () => nile.listUsers({}) },
+ // { queryKey: ['invites'], queryFn: () => nile.listInvites({}) },
// ]);
return (
@@ -46,6 +54,42 @@ export default function UserTable() {
}
```
+### UI customization
+
+For theming and display, [mui joy](https://mui.com/joy-ui/getting-started/overview/) is used.
+
+For details on theming, see their [theming documentation](https://mui.com/joy-ui/customization/approaches/). You can pass a custom `theme` object to the `NileProvider` and it will pass the custom theme to Mui Joy.
+
+```typescript
+import { NileProvider } from '@theniledev/react';
+import { extendTheme } from '@mui/joy/styles';
+const customTheme = extendTheme({
+ colorSchemes: {
+ light: {
+ palette: {
+ primary: {
+ solidBg: '#0078D4',
+ solidHoverBg: '#106EBE',
+ solidActiveBg: '#005A9E',
+ solidDisabledBg: '#F3F2F1',
+ solidDisabledColor: '#A19F9D',
+ },
+ },
+ },
+ },
+});
+
+const API_URL = 'https://localhost:8080'; // location of nile instance
+
+function App() {
+ return (
+
+ Welcome to my great app
+
+ );
+}
+```
+
## Available components
[LoginForm](./src/components/LoginForm/README.md)
diff --git a/packages/react/example/.npmignore b/packages/react/example/.npmignore
deleted file mode 100644
index 587e4ec7..00000000
--- a/packages/react/example/.npmignore
+++ /dev/null
@@ -1,3 +0,0 @@
-node_modules
-.cache
-dist
\ No newline at end of file
diff --git a/packages/react/example/index.html b/packages/react/example/index.html
deleted file mode 100644
index 547e2e04..00000000
--- a/packages/react/example/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
-
- Playground
-
-
-
-
-
-
-
diff --git a/packages/react/example/index.tsx b/packages/react/example/index.tsx
deleted file mode 100644
index cb3529fc..00000000
--- a/packages/react/example/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'react-app-polyfill/ie11';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Thing } from '../.';
-
-const App = () => {
- return (
-
-
-
- );
-};
-
-ReactDOM.render( , document.getElementById('root'));
diff --git a/packages/react/example/package.json b/packages/react/example/package.json
deleted file mode 100644
index a50960f5..00000000
--- a/packages/react/example/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "name": "example",
- "version": "1.0.0",
- "main": "index.js",
- "license": "MIT",
- "scripts": {
- "start": "parcel index.html",
- "build": "parcel build index.html"
- },
- "dependencies": {
- "react-app-polyfill": "^1.0.0"
- },
- "alias": {
- "react": "../node_modules/react",
- "react-dom": "../node_modules/react-dom/profiling",
- "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
- },
- "devDependencies": {
- "@types/react": "^16.9.11",
- "@types/react-dom": "^16.8.4",
- "parcel": "^1.12.3",
- "typescript": "^3.4.5"
- }
-}
diff --git a/packages/react/example/tsconfig.json b/packages/react/example/tsconfig.json
deleted file mode 100644
index 1e2e4fd9..00000000
--- a/packages/react/example/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "compilerOptions": {
- "allowSyntheticDefaultImports": false,
- "target": "es5",
- "module": "commonjs",
- "jsx": "react",
- "moduleResolution": "node",
- "noImplicitAny": false,
- "noUnusedLocals": false,
- "noUnusedParameters": false,
- "removeComments": true,
- "strictNullChecks": true,
- "preserveConstEnums": true,
- "sourceMap": true,
- "lib": ["es2015", "es2016", "dom"],
- "types": ["node"]
- }
-}
diff --git a/packages/react/package.json b/packages/react/package.json
index 0af45f09..e31750ce 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -62,8 +62,8 @@
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.5.10",
- "@storybook/addons": "^6.4.21",
- "@storybook/react": "^6.4.22",
+ "@storybook/addons": "^6.5.10",
+ "@storybook/react": "^6.5.10",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/react-hooks": "^8.0.1",
@@ -82,8 +82,14 @@
"typescript": "^4.7.4"
},
"dependencies": {
+ "@emotion/react": "^11.10.0",
+ "@emotion/styled": "^11.10.0",
+ "@mui/joy": "^5.0.0-alpha.40",
+ "@tanstack/react-query": "^4.1.3",
+ "@theniledev/js": "^0.13.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-hook-form": "^7.34.1",
"react-is": "^18.2.0"
}
}
diff --git a/packages/react/src/components/LoginForm/README.md b/packages/react/src/components/LoginForm/README.md
index db9909f6..0a3122ea 100644
--- a/packages/react/src/components/LoginForm/README.md
+++ b/packages/react/src/components/LoginForm/README.md
@@ -11,11 +11,11 @@ const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
function App() {
return (
-
+
🤩 My Great App🤩
Sign in
{
+ onSuccess={() => {
console.log('user has logged in');
}}
/>
@@ -26,31 +26,4 @@ function App() {
## Theming
-### General theming (recommended)
-
-[theming](../../theme/README.md)
-
-### Advanced theming
-
-The labels and inputs of this form are customizable via props. You can pass any `React.Node` to it, but at a minimum an `id` must use the passed into the customized ` ` to ensure submission works properly. For completeness, spread all provided props input ` ` or ` `and override as necessary.
-
-```typescript
-import { LoginForm, LabelOverride, InputOverride } from '@theniledev/react';
-
-const EmailLabel = (props: LabelOverride) => {
- return (
-
- Not an email
-
- );
-};
-
-const EmailInput = (props: InputOverride) => (
- <>
-
-
- >
-);
-
- ;
-```
+[theming](../../../README.md#UI%20customization)
diff --git a/packages/react/src/components/LoginForm/index.tsx b/packages/react/src/components/LoginForm/index.tsx
index d5dd6fbd..bb576a5e 100644
--- a/packages/react/src/components/LoginForm/index.tsx
+++ b/packages/react/src/components/LoginForm/index.tsx
@@ -1,65 +1,29 @@
import React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { LoginInfo } from '@theniledev/js';
-import Button from '../_Button';
import { useNile } from '../../context';
-import { Label, Input } from '../_Themeable';
+import UserForm from '../../lib/UserForm';
import { Props } from './types';
export default function LoginForm(props: Props) {
const nile = useNile();
- const {
- button,
- emailInput,
- emailLabel,
- passwordLabel,
- passwordInput,
- handleSuccess,
- handleFailure,
- } = props;
-
- const handleSubmit = React.useCallback(
- async function () {
- const email =
- typeof document !== 'undefined' &&
- (document.querySelector('#login #email') as HTMLInputElement);
- const password =
- typeof document !== 'undefined' &&
- (document.querySelector('#login #password') as HTMLInputElement);
- const emailValue = email ? email.value : '';
- const passwordValue = password ? password.value : '';
-
- const loginInfo = {
- email: emailValue,
- password: passwordValue,
- };
-
- const success = await nile.users
- .loginUser({ loginInfo })
- .catch((e: Error) => {
- handleFailure && handleFailure(e);
- });
-
- if (success) {
- nile.authToken = nile.users.authToken;
- handleSuccess && handleSuccess(loginInfo);
- }
- },
- [handleFailure, handleSuccess, nile]
+ const { onSuccess, onError } = props;
+ const mutation = useMutation(
+ (data: LoginInfo) => nile.users.loginUser({ loginInfo: data }),
+ {
+ onSuccess: (token, data) => {
+ if (token) {
+ nile.authToken = token?.token;
+ onSuccess && onSuccess(data);
+ }
+ },
+ onError: (error) => {
+ onError && onError(error as Error);
+ },
+ }
);
- return (
-
- );
+ return ;
}
diff --git a/packages/react/src/components/LoginForm/types.ts b/packages/react/src/components/LoginForm/types.ts
index 936277bc..bfe36adc 100644
--- a/packages/react/src/components/LoginForm/types.ts
+++ b/packages/react/src/components/LoginForm/types.ts
@@ -1,12 +1,6 @@
type LoginSuccess = (LoginInfo: { email: string; password: string }) => void;
-import { LabelOverride, InputOverride } from '../../theme';
export interface Props {
- handleSuccess: LoginSuccess;
- emailLabel?: React.ReactNode | LabelOverride;
- button?: React.ReactNode;
- emailInput?: React.ReactNode | InputOverride;
- passwordLabel?: React.ReactNode | LabelOverride;
- passwordInput?: React.ReactNode | InputOverride;
- handleFailure?: (error: Error) => void;
+ onSuccess: LoginSuccess;
+ onError?: (error: Error) => void;
}
diff --git a/packages/react/src/components/SignUpForm/README.md b/packages/react/src/components/SignUpForm/README.md
index 5fe26fa5..92080870 100644
--- a/packages/react/src/components/SignUpForm/README.md
+++ b/packages/react/src/components/SignUpForm/README.md
@@ -11,11 +11,11 @@ const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
function SignUp() {
return (
-
+
🤩 My Great App🤩
Sign in
{
+ onSuccess={() => {
console.log('a new user has signed up');
}}
/>
@@ -26,31 +26,4 @@ function SignUp() {
## Theming
-### General theming (recommended)
-
-[theming](../../theme/README.md)
-
-### Advanced theming
-
-The labels and inputs of this form are customizable via props. You can pass any `React.Node` to it, but at a minimum an `id` must use the passed into the customized ` ` to ensure submission works properly. For completeness, spread all provided props input ` ` or ` `and override as necessary.
-
-```typescript
-import { SignUpForm, LabelOverride, InputOverride } from '@theniledev/react';
-
-const EmailLabel = (props: LabelOverride) => {
- return (
-
- Not an email
-
- );
-};
-
-const EmailInput = (props: InputOverride) => (
- <>
-
-
- >
-);
-
- ;
-```
+[theming](../../../README.md#UI%20customization)
diff --git a/packages/react/src/components/SignUpForm/index.tsx b/packages/react/src/components/SignUpForm/index.tsx
index 57f049b7..974a091b 100644
--- a/packages/react/src/components/SignUpForm/index.tsx
+++ b/packages/react/src/components/SignUpForm/index.tsx
@@ -1,77 +1,28 @@
import React from 'react';
-import { useEffect } from 'react';
import { useMutation } from '@tanstack/react-query';
import { useNile } from '../../context';
-import Button from '../_Button';
-import { Label, Input } from '../_Themeable';
+import UserForm from '../../lib/UserForm';
import { Props } from './types';
export default function SignUpForm(props: Props) {
- const {
- button,
- emailInput,
- emailLabel,
- passwordLabel,
- passwordInput,
- handleSuccess,
- } = props;
+ const { onSuccess, onError } = props;
+
const nile = useNile();
const mutation = useMutation(
(createUserRequest: { email: string; password: string }) =>
- nile.users.createUser({ createUserRequest })
- );
-
- const mutate = mutation.mutate;
-
- const wrapSuccess = React.useCallback(
- (payload: { email: string; password: string }) =>
- handleSuccess && handleSuccess(payload),
- // eslint-disable-next-line react-hooks/exhaustive-deps
- []
- );
-
- const getEmailAndPassword = React.useCallback(() => {
- const email = document.querySelector('#signup #email') as HTMLInputElement;
- const password = document.querySelector(
- '#signup #password'
- ) as HTMLInputElement;
- return [email.value, password.value];
- }, []);
-
- const handleSubmit = React.useCallback(
- async function () {
- const [email, password] = getEmailAndPassword();
- const createUserRequest = {
- email,
- password,
- };
- mutate(createUserRequest);
- },
- [getEmailAndPassword, mutate]
- );
-
- useEffect(() => {
- if (mutation.isSuccess) {
- const [email, password] = getEmailAndPassword();
- wrapSuccess({ email, password });
+ nile.users.createUser({ createUserRequest }),
+ {
+ onSuccess: (_, data) => {
+ onSuccess && onSuccess(data);
+ },
+ onError: (error) => {
+ onError && onError(error as Error);
+ },
}
- }, [getEmailAndPassword, wrapSuccess, mutation.isSuccess]);
-
- return (
-
);
+
+ return ;
}
diff --git a/packages/react/src/components/SignUpForm/types.ts b/packages/react/src/components/SignUpForm/types.ts
index 20629302..8db14f5b 100644
--- a/packages/react/src/components/SignUpForm/types.ts
+++ b/packages/react/src/components/SignUpForm/types.ts
@@ -1,12 +1,6 @@
type SignInSuccess = (loginInfo: { email: string; password: string }) => void;
-import { LabelOverride, InputOverride } from '../../theme';
export interface Props {
- handleSuccess: SignInSuccess;
- emailLabel?: React.ReactNode | LabelOverride;
- button?: React.ReactNode;
- emailInput?: React.ReactNode | InputOverride;
- passwordLabel?: React.ReactNode | LabelOverride;
- passwordInput?: React.ReactNode | InputOverride;
- handleFailure?: (e: Error) => void;
+ onSuccess: SignInSuccess;
+ onError?: (e: Error) => void;
}
diff --git a/packages/react/src/components/_Button/Button.test.tsx b/packages/react/src/components/_Button/Button.test.tsx
deleted file mode 100644
index 275d20dc..00000000
--- a/packages/react/src/components/_Button/Button.test.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import * as Context from '../../context';
-
-import Button from '.';
-
-jest.mock('../../context');
-
-describe('Button', () => {
- it('renders non-themed', async () => {
- render(
-
- );
- expect(screen.getByRole('button').className).toEqual('signupButton');
- });
- it('renders themed string', () => {
- // @ts-expect-error - for testing
- Context.useNileContextTheme = () => 'something';
- render(
-
- );
- expect(screen.getByRole('button').className).toEqual(
- 'something-signupButton'
- );
- });
- it('renders themed component', () => {
- const onClick = jest.fn();
- render(
- mybutton}
- onClick={onClick}
- text="mario"
- name="signupButton"
- />
- );
- const button = screen.getByText('mybutton');
- fireEvent.click(button);
- expect(onClick).toHaveBeenCalled();
- });
-
- it('calls both the passed and themed onclicks', () => {
- const onClick = jest.fn();
- const onClick2 = jest.fn();
- render(
- {
- onClick2();
- return true;
- }}
- >
- mybutton
-
- }
- onClick={onClick}
- text="mario"
- name="signupButton"
- />
- );
- const button = screen.getByText('mybutton');
- fireEvent.click(button);
- expect(onClick).toHaveBeenCalled();
- expect(onClick2).toHaveBeenCalled();
- });
-});
diff --git a/packages/react/src/components/_Button/README.md b/packages/react/src/components/_Button/README.md
deleted file mode 100644
index cdaba88d..00000000
--- a/packages/react/src/components/_Button/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# \_Button
-
-Overridding a button
-
-When passing a custom button, the `onClick` handler should return true or false in order to submit the generated payload
-
-```
- {
- // ...
- }}
- button={ {
- const canSubmit = validate();
- return canSubmit;
- }}>myButton }
-/>
-```
diff --git a/packages/react/src/components/_Button/index.tsx b/packages/react/src/components/_Button/index.tsx
deleted file mode 100644
index e91a96fb..00000000
--- a/packages/react/src/components/_Button/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { useTheme, ButtonThemeName } from '../../theme';
-
-type ButtonProps = {
- type?: 'button' | 'submit' | 'reset';
- onClick?: () => void;
- name: ButtonThemeName;
- text: string;
- node: React.ReactNode;
-};
-
-export default function Button(props: ButtonProps) {
- const { type, text, onClick, name, node } = props;
- const theme = useTheme(name);
-
- const buttonType = type ?? 'button';
- if (React.isValidElement(node)) {
- const combineOnClick = (e: MouseEvent) => {
- const submit = node.props.onClick && node.props.onClick(e);
- if (!node.props.onClick) {
- onClick && onClick();
- } else if (submit) {
- onClick && onClick();
- }
- };
- const props = { onClick: combineOnClick, type: buttonType };
- return React.cloneElement(node, props);
- }
-
- return (
-
- {text}
-
- );
-}
diff --git a/packages/react/src/components/_Themeable/index.tsx b/packages/react/src/components/_Themeable/index.tsx
deleted file mode 100644
index b5544a6d..00000000
--- a/packages/react/src/components/_Themeable/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-import { useTheme, InputThemeName } from '../../theme';
-
-type LabelCallbackProps = { htmlFor: InputThemeName };
-type InputCallbackProps = { id: InputThemeName };
-type LabelThemeNode =
- | null
- | React.ReactNode
- | ((props: LabelCallbackProps) => React.ReactNode);
-type InputThemeNode =
- | null
- | React.ReactNode
- | ((props: InputCallbackProps) => React.ReactNode);
-
-export function Input({
- name,
- node,
-}: {
- name: InputThemeName;
- node: InputThemeNode;
-}) {
- const theme = useTheme(name);
- if (node === null) {
- return null;
- }
-
- const props = { id: name };
-
- if (typeof node === 'function') {
- return <>{node(props)}>;
- }
-
- if (React.isValidElement(node)) {
- return <>{React.cloneElement(node, props)}>;
- }
-
- return (
-
- );
-}
-
-export function Label({
- htmlFor,
- text,
- node,
-}: {
- text: string;
- htmlFor: InputThemeName;
- node: LabelThemeNode;
-}) {
- const theme = useTheme(htmlFor);
- if (node === null) {
- return null;
- }
-
- const props = { htmlFor };
-
- if (typeof node === 'function') {
- return <>{node(props)}>;
- }
-
- if (React.isValidElement(node)) {
- return <>{React.cloneElement(node, props)}>;
- }
-
- return (
-
- {text}
-
- );
-}
diff --git a/packages/react/src/context/index.tsx b/packages/react/src/context/index.tsx
index a4bbdb26..8fca16b7 100644
--- a/packages/react/src/context/index.tsx
+++ b/packages/react/src/context/index.tsx
@@ -2,13 +2,16 @@
// @ts-nocheck
import React, { useMemo, createContext, useContext } from 'react';
import Nile, { NileApi } from '@theniledev/js';
+import { CssVarsProvider } from '@mui/joy/styles';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+const queryClient = new QueryClient();
import { NileContext, NileProviderProps } from './types';
const defaultContext: NileContext = {
instance: Nile({ basePath: '', workspace: 'none', credentials: 'include' }),
workspace: '',
- theme: '',
+ theme: {},
};
const context = createContext(defaultContext);
@@ -28,7 +31,23 @@ export const NileProvider = (props: NileProviderProps) => {
};
}, [props.basePath, props.theme, props.workspace]);
- return {children} ;
+ if (props.theme) {
+ return (
+
+
+ {children}
+
+
+ );
+ }
+
+ return (
+
+
+ {children}
+
+
+ );
};
const useNileContext = (): NileContext => {
diff --git a/packages/react/src/context/types.ts b/packages/react/src/context/types.ts
index d534c7f0..0c4a8064 100644
--- a/packages/react/src/context/types.ts
+++ b/packages/react/src/context/types.ts
@@ -1,9 +1,10 @@
import { NileApi } from '@theniledev/js';
import React from 'react';
+import { Theme } from '@mui/joy/styles';
export interface NileContext {
instance: NileApi;
- theme?: string;
+ theme?: Theme;
}
export interface NileProviderProps {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4044fae0..ead9fad6 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -2,4 +2,3 @@ export { default as LoginForm } from './components/LoginForm';
export { default as SignUpForm } from './components/SignUpForm';
export { NileProvider, useNile } from './context';
-export { LabelOverride, InputOverride } from './theme';
diff --git a/packages/react/src/lib/UserForm/index.tsx b/packages/react/src/lib/UserForm/index.tsx
new file mode 100644
index 00000000..c8fc75ed
--- /dev/null
+++ b/packages/react/src/lib/UserForm/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import TextField from '@mui/joy/TextField';
+import Button from '@mui/joy/Button';
+import { useForm } from 'react-hook-form';
+import { LoginInfo } from '@theniledev/js';
+import Stack from '@mui/joy/Stack';
+
+export default function LoginForm(props: {
+ buttonText: string;
+ mutation: { mutate: (data: LoginInfo) => void };
+}) {
+ const { mutation, buttonText } = props;
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ const onSubmit = React.useCallback(
+ (data: LoginInfo) => {
+ mutation.mutate(data);
+ },
+ [mutation]
+ );
+
+ return (
+ onSubmit(data as LoginInfo))}
+ spacing={2}
+ >
+
+
+
+
+ {buttonText}
+
+ );
+}
diff --git a/packages/react/src/theme/README.md b/packages/react/src/theme/README.md
deleted file mode 100644
index da1300c9..00000000
--- a/packages/react/src/theme/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Theme
-
-A string can be provided to prepend the classnames for all dom elements, if the default styles are not to your liking. Additional overriding can be done at the compoenent level.
-
-```typescript
-
-
-
-```
-
-```css
-form#signup label.instaExpense-email {
- padding: 12px 30px;
-}
-
-form#signup input.instaExpense-email {
- border: 20px dotted papayawhip;
-}
-```
diff --git a/packages/react/src/theme/index.ts b/packages/react/src/theme/index.ts
deleted file mode 100644
index 8bd0ab35..00000000
--- a/packages/react/src/theme/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useMemo } from 'react';
-
-import { useNileContextTheme } from '../context';
-
-const ThemeConfig = {
- email: 'email',
- password: 'password',
- signupButton: 'signupButton',
- loginButton: 'loginButton',
-};
-
-export type InputThemeName = 'email' | 'password';
-export type ButtonThemeName = 'signupButton' | 'loginButton';
-export type LabelOverride = (props: { htmlFor: string }) => React.ReactNode;
-export type InputOverride = (props: { id: string }) => React.ReactNode;
-
-export const useTheme = (name: InputThemeName | ButtonThemeName) => {
- const contextTheme = useNileContextTheme();
- return useMemo(() => {
- if (!contextTheme) {
- return ThemeConfig[name];
- }
- return `${contextTheme}-${ThemeConfig[name]}`;
- }, [contextTheme, name]);
-};
diff --git a/packages/react/stories/Placeholder.stories.tsx b/packages/react/stories/LoginForm.stories.tsx
similarity index 56%
rename from packages/react/stories/Placeholder.stories.tsx
rename to packages/react/stories/LoginForm.stories.tsx
index 557b5863..a7d55e0a 100644
--- a/packages/react/stories/Placeholder.stories.tsx
+++ b/packages/react/stories/LoginForm.stories.tsx
@@ -1,12 +1,13 @@
+// Button.stories.ts|tsx
+
import React from 'react';
import { Meta, Story } from '@storybook/react';
-const Placeholder = () => {
- return placeholder
;
-};
+import LoginForm from '../src/components/LoginForm';
+import { NileProvider } from '../src/context';
+
const meta: Meta = {
- title: 'Welcome',
- component: Placeholder,
+ component: LoginForm,
argTypes: {
children: {
control: {
@@ -21,10 +22,14 @@ const meta: Meta = {
export default meta;
-const Template: Story = (args) => ;
+const Template: Story = () => (
+
+
+ alert('success!')} />
+
+
+);
// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const Default = Template.bind({});
-
-Default.args = {};
diff --git a/packages/react/stories/SignUpForm.stories.tsx b/packages/react/stories/SignUpForm.stories.tsx
new file mode 100644
index 00000000..4252589d
--- /dev/null
+++ b/packages/react/stories/SignUpForm.stories.tsx
@@ -0,0 +1,35 @@
+// Button.stories.ts|tsx
+
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import SignUpForm from '../src/components/SignUpForm';
+import { NileProvider } from '../src/context';
+
+const meta: Meta = {
+ component: SignUpForm,
+ argTypes: {
+ children: {
+ control: {
+ type: 'text',
+ },
+ },
+ },
+ parameters: {
+ controls: { expanded: true },
+ },
+};
+
+export default meta;
+
+const Template: Story = () => (
+
+
+ alert('success!')} />
+
+
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 2d7419fb..018990e1 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -4,6 +4,7 @@
"compilerOptions": {
"module": "esnext",
"lib": ["dom", "esnext"],
+ "baseUrl": "./src",
"importHelpers": true,
// output .d.ts declaration files for consumers
"declaration": true,
diff --git a/yarn.lock b/yarn.lock
index 986ced63..edcb0af8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -208,7 +208,7 @@
dependencies:
"@babel/types" "^7.18.9"
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -600,7 +600,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-syntax-jsx@^7.18.6":
+"@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
@@ -1125,7 +1125,7 @@
core-js-pure "^3.20.2"
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.18.9"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz"
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -1446,6 +1446,24 @@
resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+"@emotion/babel-plugin@^11.10.0":
+ version "11.10.0"
+ resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.0.tgz#ae545b8faa6b42d3a50ec86b70b758296f3c4467"
+ integrity sha512-xVnpDAAbtxL1dsuSelU5A7BnY/lftws0wUexNJZTPsvX/1tM4GZJbclgODhvW4E+NH7E5VFcH0bBn30NvniPJA==
+ dependencies:
+ "@babel/helper-module-imports" "^7.16.7"
+ "@babel/plugin-syntax-jsx" "^7.17.12"
+ "@babel/runtime" "^7.18.3"
+ "@emotion/hash" "^0.9.0"
+ "@emotion/memoize" "^0.8.0"
+ "@emotion/serialize" "^1.1.0"
+ babel-plugin-macros "^3.1.0"
+ convert-source-map "^1.5.0"
+ escape-string-regexp "^4.0.0"
+ find-root "^1.1.0"
+ source-map "^0.5.7"
+ stylis "4.0.13"
+
"@emotion/cache@^10.0.27":
version "10.0.29"
resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
@@ -1456,6 +1474,17 @@
"@emotion/utils" "0.11.3"
"@emotion/weak-memoize" "0.2.5"
+"@emotion/cache@^11.10.0", "@emotion/cache@^11.9.3":
+ version "11.10.1"
+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.1.tgz#75a157c2a6bb9220450f73ebef1df2e1467dc65d"
+ integrity sha512-uZTj3Yz5D69GE25iFZcIQtibnVCFsc/6+XIozyL3ycgWvEdif2uEw9wlUt6umjLr4Keg9K6xRPHmD8LGi+6p1A==
+ dependencies:
+ "@emotion/memoize" "^0.8.0"
+ "@emotion/sheet" "^1.2.0"
+ "@emotion/utils" "^1.2.0"
+ "@emotion/weak-memoize" "^0.3.0"
+ stylis "4.0.13"
+
"@emotion/core@^10.0.20":
version "10.3.1"
resolved "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz"
@@ -1482,6 +1511,11 @@
resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+"@emotion/hash@^0.9.0":
+ version "0.9.0"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+ integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
"@emotion/is-prop-valid@0.8.8":
version "0.8.8"
resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
@@ -1489,11 +1523,36 @@
dependencies:
"@emotion/memoize" "0.7.4"
+"@emotion/is-prop-valid@^1.1.3", "@emotion/is-prop-valid@^1.2.0":
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+ integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+ dependencies:
+ "@emotion/memoize" "^0.8.0"
+
"@emotion/memoize@0.7.4":
version "0.7.4"
resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+"@emotion/memoize@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+ integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.10.0":
+ version "11.10.0"
+ resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.0.tgz#53c577f063f26493f68a05188fb87528d912ff2e"
+ integrity sha512-K6z9zlHxxBXwN8TcpwBKcEsBsOw4JWCCmR+BeeOWgqp8GIU1yA2Odd41bwdAAr0ssbQrbJbVnndvv7oiv1bZeQ==
+ dependencies:
+ "@babel/runtime" "^7.18.3"
+ "@emotion/babel-plugin" "^11.10.0"
+ "@emotion/cache" "^11.10.0"
+ "@emotion/serialize" "^1.1.0"
+ "@emotion/utils" "^1.2.0"
+ "@emotion/weak-memoize" "^0.3.0"
+ hoist-non-react-statics "^3.3.1"
+
"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
version "0.11.16"
resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz"
@@ -1505,11 +1564,27 @@
"@emotion/utils" "0.11.3"
csstype "^2.5.7"
+"@emotion/serialize@^1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8"
+ integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==
+ dependencies:
+ "@emotion/hash" "^0.9.0"
+ "@emotion/memoize" "^0.8.0"
+ "@emotion/unitless" "^0.8.0"
+ "@emotion/utils" "^1.2.0"
+ csstype "^3.0.2"
+
"@emotion/sheet@0.9.4":
version "0.9.4"
resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz"
integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+"@emotion/sheet@^1.2.0":
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5"
+ integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
+
"@emotion/styled-base@^10.3.0":
version "10.3.0"
resolved "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz"
@@ -1528,6 +1603,17 @@
"@emotion/styled-base" "^10.3.0"
babel-plugin-emotion "^10.0.27"
+"@emotion/styled@^11.10.0":
+ version "11.10.0"
+ resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.0.tgz#c19484dab4206ae46727c07efb4316423dd21312"
+ integrity sha512-V9oaEH6V4KePeQpgUE83i8ht+4Ri3E8Djp/ZPJ4DQlqWhSKITvgzlR3/YQE2hdfP4Jw3qVRkANJz01LLqK9/TA==
+ dependencies:
+ "@babel/runtime" "^7.18.3"
+ "@emotion/babel-plugin" "^11.10.0"
+ "@emotion/is-prop-valid" "^1.2.0"
+ "@emotion/serialize" "^1.1.0"
+ "@emotion/utils" "^1.2.0"
+
"@emotion/stylis@0.8.5":
version "0.8.5"
resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
@@ -1538,16 +1624,31 @@
resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/unitless@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+ integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
"@emotion/utils@0.11.3":
version "0.11.3"
resolved "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz"
integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+"@emotion/utils@^1.2.0":
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+ integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
"@emotion/weak-memoize@0.2.5":
version "0.2.5"
resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+"@emotion/weak-memoize@^0.3.0":
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+ integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
"@esbuild/linux-loong64@0.15.1":
version "0.15.1"
resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.1.tgz#f293d9442201fa7448248f05590139bb8e521856"
@@ -2654,6 +2755,84 @@
call-me-maybe "^1.0.1"
glob-to-regexp "^0.3.0"
+"@mui/base@5.0.0-alpha.92":
+ version "5.0.0-alpha.92"
+ resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.92.tgz#5c2ca31801fe21a8fec9bfda2cf5f44b1e3c7284"
+ integrity sha512-ZgnSLrTXL4iUdLQhjp01dAOTQPQlnwrqjZRwDT3E6LZXEYn6cMv1MY6LZkWcF/zxrUnyasnsyMAgZ5d8AXS7bA==
+ dependencies:
+ "@babel/runtime" "^7.17.2"
+ "@emotion/is-prop-valid" "^1.1.3"
+ "@mui/types" "^7.1.5"
+ "@mui/utils" "^5.9.3"
+ "@popperjs/core" "^2.11.5"
+ clsx "^1.2.1"
+ prop-types "^15.8.1"
+ react-is "^18.2.0"
+
+"@mui/joy@^5.0.0-alpha.40":
+ version "5.0.0-alpha.40"
+ resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-alpha.40.tgz#2960bbd12f723b35fc7febc8ec7b51390cd6e4d3"
+ integrity sha512-z2PFzr4XTitK7RtDJFnSAe94/tqvrA0D9GN1KBMf0nK3wU4lkAGW52RkPtuWP8Fy8T7dvsvmkGWyZKhc0biPqQ==
+ dependencies:
+ "@babel/runtime" "^7.17.2"
+ "@mui/base" "5.0.0-alpha.92"
+ "@mui/system" "^5.10.0"
+ "@mui/types" "^7.1.5"
+ "@mui/utils" "^5.9.3"
+ clsx "^1.2.1"
+ csstype "^3.1.0"
+ prop-types "^15.8.1"
+ react-is "^18.2.0"
+
+"@mui/private-theming@^5.9.3":
+ version "5.9.3"
+ resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.9.3.tgz#8ea06dbe0522b0cf4ba5ee19b1a4d7f74539ae1c"
+ integrity sha512-Ys3WO39WqoGciGX9k5AIi/k2zJhlydv4FzlEEwtw9OqdMaV0ydK/TdZekKzjP9sTI/JcdAP3H5DWtUaPLQJjWg==
+ dependencies:
+ "@babel/runtime" "^7.17.2"
+ "@mui/utils" "^5.9.3"
+ prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.10.0":
+ version "5.10.0"
+ resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.0.tgz#5c904c1f021a8ee1b3e3b8a3d05c9f4ea68c43a0"
+ integrity sha512-V0MmOx7KBDomDYg2/dRItVsvrpHpd51uZZiNqeuXiZruUJ1vPwtxztpvtSjX/xKvIxN7C0mxf8jmuwVUn6uaEA==
+ dependencies:
+ "@babel/runtime" "^7.17.2"
+ "@emotion/cache" "^11.9.3"
+ csstype "^3.1.0"
+ prop-types "^15.8.1"
+
+"@mui/system@^5.10.0":
+ version "5.10.0"
+ resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.0.tgz#48daf4aa8e61424c232378acb27a735abfb1fcc1"
+ integrity sha512-HNu3LdA+37cWqgJBEhOF4F5LX4WVmvg6SoHRfajRO0neKXLdooibMP3W1bhSd27QcPxyMUmvY9/Dlp9znDeCRw==
+ dependencies:
+ "@babel/runtime" "^7.17.2"
+ "@mui/private-theming" "^5.9.3"
+ "@mui/styled-engine" "^5.10.0"
+ "@mui/types" "^7.1.5"
+ "@mui/utils" "^5.9.3"
+ clsx "^1.2.1"
+ csstype "^3.1.0"
+ prop-types "^15.8.1"
+
+"@mui/types@^7.1.5":
+ version "7.1.5"
+ resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.5.tgz#5e5cc49d719bc86522983359bc1f90eddcff0624"
+ integrity sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA==
+
+"@mui/utils@^5.9.3":
+ version "5.9.3"
+ resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.9.3.tgz#a11e0824f00b7ea40257b390060ce167fe861d02"
+ integrity sha512-l0N5bcrenE9hnwZ/jPecpIRqsDFHkPXoFUcmkgysaJwVZzJ3yQkGXB47eqmXX5yyGrSc6HksbbqXEaUya+siew==
+ dependencies:
+ "@babel/runtime" "^7.17.2"
+ "@types/prop-types" "^15.7.5"
+ "@types/react-is" "^16.7.1 || ^17.0.0"
+ prop-types "^15.8.1"
+ react-is "^18.2.0"
+
"@nestjs/common@8.4.4":
version "8.4.4"
resolved "https://registry.npmjs.org/@nestjs/common/-/common-8.4.4.tgz"
@@ -3391,6 +3570,11 @@
schema-utils "^3.0.0"
source-map "^0.7.3"
+"@popperjs/core@^2.11.5":
+ version "2.11.6"
+ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+ integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
"@pulumi/aws@^5.10.0":
version "5.10.0"
resolved "https://registry.yarnpkg.com/@pulumi/aws/-/aws-5.10.0.tgz#b7d412aa9615ac3a194b2d42e208117b5ce4f040"
@@ -3545,7 +3729,7 @@
dependencies:
semver "7.3.7"
-"@size-limit/preset-small-lib@^8.0.0":
+"@size-limit/preset-small-lib@^8.0.1":
version "8.0.1"
resolved "https://registry.yarnpkg.com/@size-limit/preset-small-lib/-/preset-small-lib-8.0.1.tgz#21611de08f419bc979070770ea035c7cabf7a0fe"
integrity sha512-EV+UXGZJU9kiT8R4N9dxjRAJ37tzjuP+e2DfpRtv7cx1ErFiB6k//wEhw9nLmJMWWhfvcVEvJYyKm3+i0pbWUQ==
@@ -3782,7 +3966,7 @@
global "^4.3.2"
util-deprecate "^1.0.2"
-"@storybook/addons@6.5.10", "@storybook/addons@^6.4.21":
+"@storybook/addons@6.5.10", "@storybook/addons@^6.5.10":
version "6.5.10"
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.10.tgz#bff2f8fb8453e9df04fa6dbc41341fd05f4cdeba"
integrity sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g==
@@ -4336,7 +4520,7 @@
react-docgen-typescript "^2.1.1"
tslib "^2.0.0"
-"@storybook/react@^6.4.22":
+"@storybook/react@^6.5.10":
version "6.5.10"
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.10.tgz#6e9f5cf5e4c81d966774c08c87fb2414052db454"
integrity sha512-m8S1qQrwA7pDGwdKEvL6LV3YKvSzVUY297Fq+xcTU3irnAy4sHDuFoLqV6Mi1510mErK1r8+rf+0R5rEXB219g==
@@ -4526,7 +4710,7 @@
resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.0.10.tgz"
integrity sha512-9LsABpZXkWZHi4P1ozRETEDXQocLAxVzQaIhganxbNuz/uA3PsCAJxJTiQrknG5htLMzOF5MqM9G10e6DCxV1A==
-"@tanstack/react-query@^4.0.5":
+"@tanstack/react-query@^4.0.5", "@tanstack/react-query@^4.1.3":
version "4.1.3"
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.1.3.tgz#ebe5b668e321ba63a21ef369b5d263e2466c0e14"
integrity sha512-BHI/dV3LOuVOZAaifM6u680Wi5rmiHu4aD3WkvrQT/9fYhHDhTzMdJO8l2Xh0UR7JhM8e9O3f89SJhD3T8Ejgw==
@@ -4865,7 +5049,7 @@
resolved "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz"
integrity sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.5":
version "15.7.5"
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -4889,6 +5073,13 @@
dependencies:
"@types/react" "*"
+"@types/react-is@^16.7.1 || ^17.0.0":
+ version "17.0.3"
+ resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+ integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+ dependencies:
+ "@types/react" "*"
+
"@types/react-syntax-highlighter@11.0.4":
version "11.0.4"
resolved "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz"
@@ -5123,14 +5314,6 @@
"@typescript-eslint/types" "5.31.0"
"@typescript-eslint/visitor-keys" "5.31.0"
-"@typescript-eslint/scope-manager@5.32.0":
- version "5.32.0"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.32.0.tgz#763386e963a8def470580cc36cf9228864190b95"
- integrity sha512-KyAE+tUON0D7tNz92p1uetRqVJiiAkeluvwvZOqBmW9z2XApmk5WSMV9FrzOroAcVxJZB3GfUwVKr98Dr/OjOg==
- dependencies:
- "@typescript-eslint/types" "5.32.0"
- "@typescript-eslint/visitor-keys" "5.32.0"
-
"@typescript-eslint/scope-manager@5.33.0":
version "5.33.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.33.0.tgz#509d7fa540a2c58f66bdcfcf278a3fa79002e18d"
@@ -5158,11 +5341,6 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.31.0.tgz#7aa389122b64b18e473c1672fb3b8310e5f07a9a"
integrity sha512-/f/rMaEseux+I4wmR6mfpM2wvtNZb1p9hAV77hWfuKc3pmaANp5dLAZSiE3/8oXTYTt3uV9KW5yZKJsMievp6g==
-"@typescript-eslint/types@5.32.0":
- version "5.32.0"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.32.0.tgz#484273021eeeae87ddb288f39586ef5efeb6dcd8"
- integrity sha512-EBUKs68DOcT/EjGfzywp+f8wG9Zw6gj6BjWu7KV/IYllqKJFPlZlLSYw/PTvVyiRw50t6wVbgv4p9uE2h6sZrQ==
-
"@typescript-eslint/types@5.33.0":
version "5.33.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.33.0.tgz#d41c584831805554b063791338b0220b613a275b"
@@ -5207,19 +5385,6 @@
semver "^7.3.7"
tsutils "^3.21.0"
-"@typescript-eslint/typescript-estree@5.32.0":
- version "5.32.0"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.32.0.tgz#282943f34babf07a4afa7b0ff347a8e7b6030d12"
- integrity sha512-ZVAUkvPk3ITGtCLU5J4atCw9RTxK+SRc6hXqLtllC2sGSeMFWN+YwbiJR9CFrSFJ3w4SJfcWtDwNb/DmUIHdhg==
- dependencies:
- "@typescript-eslint/types" "5.32.0"
- "@typescript-eslint/visitor-keys" "5.32.0"
- debug "^4.3.4"
- globby "^11.1.0"
- is-glob "^4.0.3"
- semver "^7.3.7"
- tsutils "^3.21.0"
-
"@typescript-eslint/typescript-estree@5.33.0":
version "5.33.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.0.tgz#02d9c9ade6f4897c09e3508c27de53ad6bfa54cf"
@@ -5273,14 +5438,6 @@
"@typescript-eslint/types" "5.31.0"
eslint-visitor-keys "^3.3.0"
-"@typescript-eslint/visitor-keys@5.32.0":
- version "5.32.0"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.32.0.tgz#b9715d0b11fdb5dd10fd0c42ff13987470525394"
- integrity sha512-S54xOHZgfThiZ38/ZGTgB2rqx51CMJ5MCfVT2IplK4Q7hgzGfe0nLzLCcenDnc/cSjP568hdeKfeDcBgqNHD/g==
- dependencies:
- "@typescript-eslint/types" "5.32.0"
- eslint-visitor-keys "^3.3.0"
-
"@typescript-eslint/visitor-keys@5.33.0":
version "5.33.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.0.tgz#fbcbb074e460c11046e067bc3384b5d66b555484"
@@ -7362,6 +7519,11 @@ cloneable-readable@^1.0.0:
process-nextick-args "^2.0.0"
readable-stream "^2.3.5"
+clsx@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+ integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
cmd-shim@^5.0.0:
version "5.0.0"
resolved "https://registry.npmjs.org/cmd-shim/-/cmd-shim-5.0.0.tgz"
@@ -8034,7 +8196,7 @@ csstype@^2.5.7:
resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz"
integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz"
integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
@@ -10930,7 +11092,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -15718,7 +15880,7 @@ react-helmet-async@^1.0.2:
react-fast-compare "^3.2.0"
shallowequal "^1.1.0"
-react-hook-form@^7.31.1:
+react-hook-form@^7.31.1, react-hook-form@^7.34.1:
version "7.34.1"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.34.1.tgz#06cb216daf706bf9ae4969747115afae0d09410d"
integrity sha512-tH7TaZgAURMhjzVE2M/EFmxHz2HdaPMAVs9FXTweNW551VlhXSuVcpcYlkiMZf2zHQiTztupVFpBHJFTma+N7w==
@@ -16863,10 +17025,10 @@ sisteransi@^1.0.5:
resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
-size-limit@^8.0.0:
- version "8.0.0"
- resolved "https://registry.npmjs.org/size-limit/-/size-limit-8.0.0.tgz"
- integrity sha512-344dzCZZiTz+N0WS801SNG/qd8MCa6dzJhsj8gLQg4JlmddwUdi/Ol0HfliEVL7jgtOz8fNgDeB2+14xwalvVA==
+size-limit@^8.0.1:
+ version "8.0.1"
+ resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-8.0.1.tgz#4c89666e93fe38c893e4b03b7d1131ca78108e94"
+ integrity sha512-VHrozqkQTYfcv1OlZIRIL0x6f+xhZ3TT+RTXC5AvKn/yA+3PIWERrKWqHMJPD7G/Vi0SuBtWAn3IvCGx2/UB1g==
dependencies:
bytes-iec "^3.1.1"
chokidar "^3.5.3"
@@ -17495,6 +17657,11 @@ styled-jsx@5.0.4:
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.4.tgz#5b1bd0b9ab44caae3dd1361295559706e044aa53"
integrity sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==
+stylis@4.0.13:
+ version "4.0.13"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+ integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"