@bigbinary/neeto-slack-frontend 0.1.0 → 0.2.1

package/README.md

@@ -15,6 +15,7 @@ Available components:
 - [Connect](#connect)
 - [Configure](#configure)
 - [Finish](#finish)
+- [Settings](#settings)
 
 View the [example app](./example/src/App.jsx) to see usage.
 
@@ -414,6 +415,216 @@ Extra fields that need to be displayed in the finish page.
 </tbody>
 </table>
 
+### Settings
+
+![image](https://user-images.githubusercontent.com/49012815/222901321-f9710196-6721-4ad4-affc-679f65ad4919.png)
+
+```js
+const SETTINGS_FORM_INITIAL_VALUES = {
+  channels: [
+    { label: "general", value: "K87KJHKS987" },
+    { label: "hq", value: "IJHKJ76889H" },
+  ],
+  selectedChannel: { label: "general", value: "K87KJHKS987" },
+  name: "",
+};
+
+const { slack, handleSubmit, isSubmitting } = useSlackApi();
+const SETTINGS_FORM_VALIDATION_SCHEMA = {
+  name: yup.string().required(),
+};
+
+return (
+  <Settings
+    teamName={slack.teamName}
+    initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
+    handleSubmit={handleSubmit}
+    isSubmitting={isSubmitting}
+    className="neeto-ui-my-2"
+    validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
+  >
+    {({isDisabled, ...formikProps}) => (
+      <Input name="name" value={formikProps.values.name} disabled={isDisabled} className="neeto-ui-my-2" />
+    )}
+  </Settings>;
+);
+```
+
+<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 on the ` Configure` page. `isDisabled` should
+be used to disable fields such that they are enabled only by clicking the edit
+button.
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td  style="vertical-align: top;">
+
+loading
+
+</td>
+<td style="vertical-align: top;">
+
+boolean
+
+</td>
+<td  style="vertical-align: top;">
+
+A spinner is disabled instead of form when loading is true.
+
+</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>
+
 ## Development
 
 Install all the dependencies by executing the following command
@@ -445,8 +656,24 @@ will run the example app using webpack.
    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.
+# Building and releasing.
+
+The `@bigbinary/neeto-slack-frontend` package gets published to NPM when we
+merge a PR with `patch`, `minor` or `major` label to the `main` branch. The
+`patch` label is used for bug fixes, `minor` label is used for new features and
+`major` label is used for breaking changes. You can checkout the
+`Create and publish releases` workflow in GitHub Actions to get a live update.
+
+In case if you missed to add the label, you can manually publish the package.
+For that first you need to create a PR to update the version number in the
+`package.json` file and merge it to the `main` branch. After merging the PR, you
+need to create a
+[new github release](https://github.com/bigbinary/neeto-slack-frontend/releases/new)
+from main branch. Whenever a new release is created with a new version number,
+the github actions will automatically publish the built package to npm. You can
+checkout the `Publish to npm` workflow in GitHub Actions to get a live update.
+
+Please note that before publishing the package, you need to verify the
+functionality in some of the neeto web-apps locally using `yalc` package
+manager. The usage of yalc is explained in this video:
+https://youtu.be/QBiYGP0Rhe0