Merge pull request #601 from TheNileDev/jrea/org-form

feat(react): add org form

packages/react/src/components/LoginForm/index.tsx

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 
 import { Attribute } from '../../lib/SimpleForm/types';
 import { useNile } from '../../context';
-import UserForm, { AttributeType } from '../../lib/SimpleForm';
+import SimpleForm, { AttributeType } from '../../lib/SimpleForm';
 
 import { Props } from './types';
 
@@ -54,7 +54,7 @@ export default function LoginForm(props: Props) {
   }, [attributes]);
 
   return (
-    <UserForm
+    <SimpleForm
       mutation={mutation}
       buttonText="Log in"
       attributes={completeAttributes}

packages/react/src/components/OrganizationForm/README.md

@@ -0,0 +1,29 @@
+# Organization creation form
+
+A form for a name of an organization.
+
+## Usage
+
+```typescript
+import { OrganizationForm, NileProvider } from '@theniledev/react';
+
+const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
+
+function App() {
+  return (
+    <NileProvider basePath={API_URL}>
+      <h1>🤩 My Great App🤩</h1>
+      <h2>Create an organization</h2>
+      <OrganizationForm
+        onSuccess={(data) => {
+          console.log('the created org:', data);
+        }}
+      />
+    </NileProvider>
+  );
+}
+```
+
+## Theming
+
+[theming](../../../README.md#UI%20customization)

packages/react/src/components/OrganizationForm/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CreateOrganizationRequest, Organization } from '@theniledev/js';
+
+import { useNile } from '../../context';
+import { useMutation } from '../../lib/queries';
+import SimpleForm, { AttributeType } from '../../lib/SimpleForm';
+
+import { Props } from './types';
+
+const attributes = [
+  {
+    name: 'name',
+    label: 'Organization name',
+    type: AttributeType.Text,
+    defaultValue: '',
+    required: true,
+  },
+];
+
+export default function AddOrgForm(props: Props) {
+  const { onSuccess, onError, cancelLink } = props;
+  const nile = useNile();
+
+  const mutation = useMutation(
+    (data: CreateOrganizationRequest) =>
+      nile.organizations.createOrganization({
+        createOrganizationRequest: data,
+      }),
+    {
+      onSuccess: (data: Organization) => {
+        onSuccess(data);
+      },
+      onError: (e: Error) => {
+        onError && onError(e as Error);
+      },
+    }
+  );
+
+  return (
+    <SimpleForm
+      mutation={mutation}
+      buttonText="Create organization"
+      attributes={attributes}
+      cancelLink={cancelLink}
+    />
+  );
+}

packages/react/src/components/OrganizationForm/types.ts

@@ -0,0 +1,9 @@
+import { Organization } from '@theniledev/js';
+
+type OrgCreateSuccess = (org: Organization) => void;
+
+export interface Props {
+  onSuccess: OrgCreateSuccess;
+  onError?: (error: Error) => void;
+  cancelLink?: string;
+}

packages/react/stories/OrganizationForm.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import OrganizationForm from '../src/components/OrganizationForm';
+import { NileProvider } from '../src/context';
+
+const meta = {
+  component: OrganizationForm,
+  args: {
+    org: 'myOrg',
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story = () => (
+  <NileProvider basePath="http://localhost:8080">
+    <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
+      <OrganizationForm
+        onSuccess={() => alert('success!')}
+        cancelLink="#linkToSomewhere"
+      />
+    </div>
+  </NileProvider>
+);
+
+export const Default = Template.bind({});