feat(react): have opinions about libs, upgrade to use them

.eslintignore

@@ -1,3 +1,5 @@
 dist
 lib/nile/src/generated
-node_modules
+node_modules
+!.storybook
+storybook-static

.gitignore

@@ -15,3 +15,5 @@ node_modules
 !.yarn/cache
 #.pnp.*
 package-lock.json
+
+storybook-static

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  ."
   }
 }

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 (
-    <QueryClientProvider client={queryClient}>
-      <NileProvider basePath="http://localhost:8080" workspace="1">
-        <Component {...pageProps} />
-      </NileProvider>
-    </QueryClientProvider>
+    <NileProvider basePath="http://localhost:8080" workspace="1">
+      <Component {...pageProps} />
+    </NileProvider>
   );
 }
 

packages/examples/pages/org.tsx

@@ -39,7 +39,7 @@ function Org() {
     <>
       <h1>🤩 InstaExpense 🤩</h1>
       <LoginForm
-        handleSuccess={() => {
+        onSuccess={() => {
           setSuccess(true);
         }}
       />

packages/examples/pages/signin.tsx

@@ -13,7 +13,7 @@ function SignIn() {
       <h1>🤩 InstaExpense 🤩</h1>
       <h2>Sign in</h2>
       <LoginForm
-        handleSuccess={() => {
+        onSuccess={() => {
           if (redirect) {
             router.push(`/${redirect}`);
           } else {

packages/examples/pages/signup.tsx

@@ -9,7 +9,7 @@ function Signup() {
       <h1>🤩 InstaExpense 🤩</h1>
       <h2>Sign up</h2>
       <SignUpForm
-        handleSuccess={() => {
+        onSuccess={() => {
           alert('user signed up!');
         }}
       />

packages/react/.storybook/main.js

@@ -1,8 +1,42 @@
+// 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'],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   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;
+  },
 };

packages/react/README.md

@@ -1,16 +1,20 @@
 # @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';
 const API_URL = 'https://localhost:8080'; // location of nile instance
 
 function App() {
   return (
-    <NileProvider apiUrl={API_URL}>
+    <NileProvider basePath={API_URL}>
       <div>Welcome to my great app</div>
     </NileProvider>
   );
@@ -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 `<NileProvider />`. 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 `<NileProvider />`. 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 (
+    <NileProvider basePath={API_URL} theme={customTheme}>
+      <div>Welcome to my great app</div>
+    </NileProvider>
+  );
+}
+```
+
 ## Available components
 
 [LoginForm](./src/components/LoginForm/README.md)

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"
   }
 }

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 (
-    <NileProvider apiUrl={API_URL}>
+    <NileProvider basePath={API_URL}>
       <h1>🤩 My Great App🤩</h1>
       <h2>Sign in</h2>
       <LoginForm
-        handleSuccess={() => {
+        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 `<input />` to ensure submission works properly. For completeness, spread all provided props input `<input />` or `<label />`and override as necessary.
-
-```typescript
-import { LoginForm, LabelOverride, InputOverride } from '@theniledev/react';
-
-const EmailLabel = (props: LabelOverride) => {
-  return (
-    <label {...props} htmlFor="fancyName">
-      Not an email
-    </label>
-  );
-};
-
-const EmailInput = (props: InputOverride) => (
-  <>
-    <img src="/fancy-name.svg" alt="fancy name" />
-    <input {...props} type="email" name="fancyName" placeholder="Email" />
-  </>
-);
-
-<LoginForm emailLabel={EmailLabel} emailInput={EmailInput} />;
-```
+[theming](../../../README.md#UI%20customization)