@bigbinary/neeto-slack-frontend 0.1.0

package/README.md

@@ -0,0 +1,452 @@
+@bigbinary/neeto-slack-frontend
+
+UI for slack integration for all neeto products.
+
+## Installation
+
+```bash
+yarn add @bigbinary/neeto-slack-frontend
+```
+
+## Usage
+
+Available components:
+
+- [Connect](#connect)
+- [Configure](#configure)
+- [Finish](#finish)
+
+View the [example app](./example/src/App.jsx) to see usage.
+
+### Connect
+
+```js
+const handleRedirect = () => {
+  window.location.assign(slackAuthorizationUrl);
+};
+
+return(
+  <Connect handleRedirectToSlack={handleRedirect} />;
+);
+```
+
+<table>
+<thead>
+<tr>
+<th>
+
+Prop
+
+</th>
+<th>
+
+Type
+
+</th>
+<th>
+
+Description
+
+</th>
+</tr>
+</thead>
+<tbody>
+
+<tr>
+<td  style="vertical-align: top;">
+
+handleRedirectToSlack
+
+</td>
+<td style="vertical-align: top;">
+
+Function
+
+</td>
+<td  style="vertical-align: top;">
+
+Handles the redirect to the slack OAuth url
+
+</td>
+</tr>
+<tr></tr>
+</tbody>
+</table>
+
+### Configure
+
+```js
+const CONFIGURE_FORM_INITIAL_VALUES = {
+  channels: [
+    { label: "general", value: "K87KJHKS987" },
+    { label: "hq", value: "IJHKJ76889H" },
+  ],
+  selectedChannel: { label: "general", value: "K87KJHKS987" },
+  name: "",
+};
+
+const { slack, handleSubmit, isSubmitting } = useSlackApi();
+const CONFIGURE_FORM_VALIDATION_SCHEMA = {
+  name: yup.string().required(),
+};
+
+return (
+  <Configure
+    teamName={slack.teamName}
+    initialFormValues={CONFIGURE_FORM_INITIAL_VALUES}
+    handleSubmit={handleSubmit}
+    isSubmitting={isSubmitting}
+    className="neeto-ui-my-2"
+    validationSchema={CONFIGURE_FORM_VALIDATION_SCHEMA}
+  >
+    <Input name="name" className="neeto-ui-my-2" />
+  </Configure>;
+);
+```
+
+<table>
+<thead>
+<tr>
+<th>
+
+Prop
+
+</th>
+<th>
+
+Type
+
+</th>
+<th>
+
+Description
+
+</th>
+</tr>
+</thead>
+<tbody>
+
+<tr>
+<td  style="vertical-align: top;">
+
+children
+
+</td>
+<td style="vertical-align: top;">
+
+Function | JSX.Element
+
+</td>
+<td  style="vertical-align: top;">
+
+Extra form fields to be included in the `Configure` page
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+teamName
+
+</td>
+<td style="vertical-align: top;">
+
+String
+
+</td>
+<td  style="vertical-align: top;">
+
+Slack team name to be displayed.
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+initialFormValues
+
+</td>
+<td style="vertical-align: top;">
+
+Object
+
+</td>
+<td  style="vertical-align: top;">
+
+Initial form values for formik. <br/> (Note: Include channels array &
+selectedChannel value) <br/> [Example](./example/src/constants.js)
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+handleSubmit
+
+</td>
+<td style="vertical-align: top;">
+
+Function
+
+</td>
+<td  style="vertical-align: top;">
+
+Handle formik submit.
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+isSubmitting
+
+</td>
+<td style="vertical-align: top;">
+
+bool
+
+</td>
+<td  style="vertical-align: top;">
+
+Boolean which is set when submitting the form.
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+className?
+
+</td>
+<td style="vertical-align: top;">
+
+String
+
+</td>
+<td  style="vertical-align: top;">
+
+Custom classnames to be applied to Configure component
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+validationSchema
+
+</td>
+<td style="vertical-align: top;">
+
+Object
+
+</td>
+<td  style="vertical-align: top;">
+
+Validation schema for fields using yup.<br/> (Note: No need to include
+selectedChannel validation. Also no need to wrap validationSchema in
+yup.object().shape({..}))<br/> [Example](./example/src/constants.js)
+
+</td>
+</tr>
+<tr></tr>
+</tbody>
+</table>
+
+### Finish
+
+```js
+const selectedChannel = "General";
+const { configuration } = useSlackApi();
+
+return (
+  <Finish
+    selectedChannel={selectedChannel}
+    teamName={configuration.teamName}
+    otherFields={[
+      {
+        name: "Update type",
+        value: configuration.notificationKind,
+      },
+    ]}
+    onBack={() => setActiveTab("configure")}
+    onClose={onClose}
+  />
+);
+```
+
+<table>
+<thead>
+<tr>
+<th>
+
+Prop
+
+</th>
+<th>
+
+Type
+
+</th>
+<th>
+
+Description
+
+</th>
+</tr>
+</thead>
+<tbody>
+
+<tr>
+<td  style="vertical-align: top;">
+
+children
+
+</td>
+<td style="vertical-align: top;">
+
+JSX.Element
+
+</td>
+<td  style="vertical-align: top;">
+
+Extra form fields to be included in the Finish page
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+onBack
+
+</td>
+<td style="vertical-align: top;">
+
+Function
+
+</td>
+<td  style="vertical-align: top;">
+
+Function that handles redirect to Configure page
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+onClose
+
+</td>
+<td style="vertical-align: top;">
+
+Function
+
+</td>
+<td  style="vertical-align: top;">
+
+Function that handles closing of the modal
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+selectedChannel
+
+</td>
+<td style="vertical-align: top;">
+
+String
+
+</td>
+<td  style="vertical-align: top;">
+
+Selected slack channel name
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+teamName
+
+</td>
+<td style="vertical-align: top;">
+
+String
+
+</td>
+<td  style="vertical-align: top;">
+
+Slack team name to be displayed
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+otherFields
+
+</td>
+<td style="vertical-align: top;">
+
+Array
+
+</td>
+<td  style="vertical-align: top;">
+
+Extra fields that need to be displayed in the finish page.
+[Example](./example/src/App.js)
+
+</td>
+</tr>
+<tr></tr>
+</tbody>
+</table>
+
+## Development
+
+Install all the dependencies by executing the following command
+
+```bash
+yarn install
+```
+
+### Using example app
+
+Start the development server using the `yarn start` command. Development server
+will run the example app using webpack.
+
+### Using host application
+
+1. Clone this repository.
+2. Run `yarn install` to download the dependencies and setup the development
+   environment.
+3. Have a host application ready.
+4. Run `yarn build --watch` to automatically transpile code as you save the
+   file. You can omit the `--watch` flag if you want to run the build only once.
+5. In a different terminal, run `yalc publish` to publish the
+   neeto-slack-frontend to the local yalc store.
+6. Run `yalc add @bigbinary/neeto-slack-frontend` to install the
+   neeto-slack-frontend to the host application.
+7. After making necessary changes to `neeto-slack-frontend`, run `yalc push` to
+   push the changes to the host application (assuming that you are in watch mode
+   and the changes are bundled automatically). Restart webpack-dev-server in
+   host if changes are not applied.
+8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
+
+## Building
+
+The neetoSlack package gets auto-published to npm for every new merge to the
+main branch. You can checkout the publish workflow in git actions to get a live
+update.