@integry/sdk 3.3.2-beta.6 → 3.3.2-beta.8

package/LICENSE

@@ -1,13 +1,13 @@
-Copyright 2021 Osama Aamer <osama@integry.io>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
+Copyright 2021 Osama Aamer <osama@integry.io>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
 limitations under the License.

package/README.md

@@ -1,21 +1,21 @@
-# Integry SDK
-
-### Integry at a glance
-
-Integry is an integration platform that provides integrations inside your app for your users. You can customize the look and feel of the integrations such that they appear just like your app. For example, your users can connect your app to Slack and send messages to Slack
-
-### What is this package for?
-
-Use Integry SDK to embed integration creation experiences inside your app.
-
-### Install the SDK
-
-```shell
-# yarn
-yarn add @integry/sdk
-
-# npm
-npm i @integry/sdk
-```
-
-Get started and learn more using our [documentation.](https://sdk.integry.io)
+# Integry SDK
+
+### Integry at a glance
+
+Integry is an integration platform that provides integrations inside your app for your users. You can customize the look and feel of the integrations such that they appear just like your app. For example, your users can connect your app to Slack and send messages to Slack
+
+### What is this package for?
+
+Use Integry SDK to embed integration creation experiences inside your app.
+
+### Install the SDK
+
+```shell
+# yarn
+yarn add @integry/sdk
+
+# npm
+npm i @integry/sdk
+```
+
+Get started and learn more using our [documentation.](https://sdk.integry.io)

package/README_INTERNAL.md

@@ -1,176 +1,176 @@
-# Integry SDK
-
-## General features
-
-- No extra dependencies needed, drastically reduced bundle size
-- No transpilation steps needed
-- Vanilla JS implementation
-- Improved documentation
-- Available as a package on NPM
-- Can be embedded using a script tag
-- Built-in Typescript support
-- More powerful events management
-- Multi-level customization. Start with built in components and layouts.
-- Multiple render modes including inline rendering, modal support and detached rendering where we decouple the views from one another
-- Discover more customization options starting from simple CSS overrides to extending and implementing your own custom widgets
-
-## Tech stack
-
-- [Preact](https://github.com/developit/preact)
-- [htm](https://github.com/developit/htm)
-- [Unistore](https://github.com/developit/unistore)
-- [Rollup](https://rollupjs.org/)
-- NodeJS
-- Yarn
-
-## Directory structure
-
-```
-.
-├── dist                   # Compiled files
-├── examples               # Example projects using SDK
-├── playground             # HTML files covering different debug scenarios
-├── sdk-docs               # `Docusaurus` documentation site for SDK
-├── src                    # Source files
-│   ├── components         # Preact components used in the SDK
-│   ├── contexts           # Preact contexts used in the SDK
-│   ├── extensions         # SDK HMAC and API extensions
-│   ├── features           # Directory-wise breakdown of different SDK views
-│   ├── hooks              # Preact hooks
-│   ├── interfaces         # Typescript interfaces
-│   ├── modules            # API and event emitter live here
-│   ├── store              # SDK data store setup
-│   ├── types              # Typescript types live here
-│   ├── utils              # Utilities used in the SDK
-│   ├── index.ts           # JS Modules entry point
-│   └── index.umd.ts       # UMD entry point
-├── types                  # General Typescript types for rollup
-├── rollup.config.js       # Rollup configuration
-├── tsconfig.json          # TS configuration
-└── README.md
-```
-
-## Setting up your development environment
-
-### Pre-requisites
-
-1. NodeJS
-2. yarn
-
-### Starting the local environment
-
-1. `cd` into the SDK root directory which is located at `<repo_root>/sdk-v3`
-2. Install dependencies by running `yarn install`
-3. Start the local development environment by running `yarn start`
-4. The development server will start at http://localhost:10001
-
-### Choosing which mode to debug
-
-The SDK has multiple playground HTML files to work on different areas. Each html file lives in the `sdk-v3/playground` directory and contains code which sets up the SDK and calls different methods. You can edit these files to debug different aspects of the SDK.
-
-1. http://localhost:10001/index.html
-
-You can use this playground to debug a normal SDK embed which starts from the Flows listing page. You can click on a Flow and setup integrations. You can select from the tabs at the top to either view available Flows or view existing integrations.
-
-2. http://localhost:10001/template.html
-
-You can use this playground to directly open a Flow.
-
-3. http://localhost:10001/auths.html
-
-You can use this playground to work on the app account management feature provided by the SDK.
-
-## Development
-
-### Hot reloading
-
-When you make a change to the code in development mode, Rollup will automatically re-compile the code. After it is done, you will have to refresh the page to see the latest changes.
-
-### Debugging using Redux Devtools
-
-The SDK supports Redux Devtools to look into the internal state and debug actions. Devtools are enabled by default and can be enabled/disabled in the `src/store/index.ts` file. To use the devtools, install the Redux Devtools extension, open the developer tools in your browser and then refresh the SDK playground page.
-
-### Styling
-
-Styles are co-located with each component in a `styles.module.scss` file. This is then imported into a component and used.
-
-```tsx
-import styles from './styles.module.scss';
-
-<div class=${styles.selectWrapper} />
-```
-
-## Debugging certain features
-
-### API Calls
-
-All API calls are centrally located inside the directory: `src/modules/api/index.ts`.
-
-### Manage app accounts
-
-The code for the manage app accounts feature starts with the `index.ts` entry point.
-
-```ts
-  /**
-   * Render the account connection modal
-   * @param data
-   */
-  public renderAccountConnectionModal = (data?: {
-    deploymentId?: string;
-    appId?: number;
-    authTypeId?: number;
-  }): void => {
-    //
-  }
-```
-
-This function sets up our render destination inside the HTML, initializes the store and finally calls the Preact `render` method to render the `AuthSetupContainer` component inside the target container.
-
-All of the code for managing app accounts feature is located in `src/features/containers/AuthSetupContainer`.
-
-```
-. AuthSetupContainer
-├── AppSelection.ts           # Renders the app selection screen
-├── AuthTypeSelection.ts      # Renders the auth type selection screen
-├── Footer.ts                 # Renders the footer inside auth type selection
-├── Header.ts                 # Renders the header which shows step title and close icon
-├── index.ts                  # Wraps the entire feature with state and API calls
-└── PostAdditionPopup.ts      # Renders the modal which appears after we add an auth
-```
-
-### Flow setup
-
-The code for flow setup starts with the `index.ts` entry point.
-
-```ts
-  /**
-   * Render the flow setup form we ship
-   * @param data
-   */
-  public renderFlowSetupForm = (data: {
-    flowId?: string;
-    flowContainerId: string;
-  }): void => {
-    //
-  }
-```
-
-This function sets up our render destination inside the HTML, initializes the store and finally calls the Preact `render` method to render the `FlowSetupContainer` component inside the target container.
-
-All of the code for rendering a Flow setup form is located in `src/features/containers/FlowSetupContainer/index.ts`.
-
-### Normal SDK embed
-
-The code for the normal SDK embed setup starts with the `index.ts` entry point.
-
-```ts
-  /**
-   *
-   * @param initConfig
-   */
-  public init = (initConfig: InitConfig) => {}
-```
-
-This function sets up our render destination inside the HTML, initializes the store and finally calls the Preact `render` method to render the `SDKContainer` component inside the target container.
-
-All of the code for rendering a the normal SDK embed is located in `src/features/containers/SDKContainer/index.ts`.
+# Integry SDK
+
+## General features
+
+- No extra dependencies needed, drastically reduced bundle size
+- No transpilation steps needed
+- Vanilla JS implementation
+- Improved documentation
+- Available as a package on NPM
+- Can be embedded using a script tag
+- Built-in Typescript support
+- More powerful events management
+- Multi-level customization. Start with built in components and layouts.
+- Multiple render modes including inline rendering, modal support and detached rendering where we decouple the views from one another
+- Discover more customization options starting from simple CSS overrides to extending and implementing your own custom widgets
+
+## Tech stack
+
+- [Preact](https://github.com/developit/preact)
+- [htm](https://github.com/developit/htm)
+- [Unistore](https://github.com/developit/unistore)
+- [Rollup](https://rollupjs.org/)
+- NodeJS
+- Yarn
+
+## Directory structure
+
+```
+.
+├── dist                   # Compiled files
+├── examples               # Example projects using SDK
+├── playground             # HTML files covering different debug scenarios
+├── sdk-docs               # `Docusaurus` documentation site for SDK
+├── src                    # Source files
+│   ├── components         # Preact components used in the SDK
+│   ├── contexts           # Preact contexts used in the SDK
+│   ├── extensions         # SDK HMAC and API extensions
+│   ├── features           # Directory-wise breakdown of different SDK views
+│   ├── hooks              # Preact hooks
+│   ├── interfaces         # Typescript interfaces
+│   ├── modules            # API and event emitter live here
+│   ├── store              # SDK data store setup
+│   ├── types              # Typescript types live here
+│   ├── utils              # Utilities used in the SDK
+│   ├── index.ts           # JS Modules entry point
+│   └── index.umd.ts       # UMD entry point
+├── types                  # General Typescript types for rollup
+├── rollup.config.js       # Rollup configuration
+├── tsconfig.json          # TS configuration
+└── README.md
+```
+
+## Setting up your development environment
+
+### Pre-requisites
+
+1. NodeJS
+2. yarn
+
+### Starting the local environment
+
+1. `cd` into the SDK root directory which is located at `<repo_root>/sdk-v3`
+2. Install dependencies by running `yarn install`
+3. Start the local development environment by running `yarn start`
+4. The development server will start at http://localhost:10001
+
+### Choosing which mode to debug
+
+The SDK has multiple playground HTML files to work on different areas. Each html file lives in the `sdk-v3/playground` directory and contains code which sets up the SDK and calls different methods. You can edit these files to debug different aspects of the SDK.
+
+1. http://localhost:10001/index.html
+
+You can use this playground to debug a normal SDK embed which starts from the Flows listing page. You can click on a Flow and setup integrations. You can select from the tabs at the top to either view available Flows or view existing integrations.
+
+2. http://localhost:10001/template.html
+
+You can use this playground to directly open a Flow.
+
+3. http://localhost:10001/auths.html
+
+You can use this playground to work on the app account management feature provided by the SDK.
+
+## Development
+
+### Hot reloading
+
+When you make a change to the code in development mode, Rollup will automatically re-compile the code. After it is done, you will have to refresh the page to see the latest changes.
+
+### Debugging using Redux Devtools
+
+The SDK supports Redux Devtools to look into the internal state and debug actions. Devtools are enabled by default and can be enabled/disabled in the `src/store/index.ts` file. To use the devtools, install the Redux Devtools extension, open the developer tools in your browser and then refresh the SDK playground page.
+
+### Styling
+
+Styles are co-located with each component in a `styles.module.scss` file. This is then imported into a component and used.
+
+```tsx
+import styles from './styles.module.scss';
+
+<div class=${styles.selectWrapper} />
+```
+
+## Debugging certain features
+
+### API Calls
+
+All API calls are centrally located inside the directory: `src/modules/api/index.ts`.
+
+### Manage app accounts
+
+The code for the manage app accounts feature starts with the `index.ts` entry point.
+
+```ts
+  /**
+   * Render the account connection modal
+   * @param data
+   */
+  public renderAccountConnectionModal = (data?: {
+    deploymentId?: string;
+    appId?: number;
+    authTypeId?: number;
+  }): void => {
+    //
+  }
+```
+
+This function sets up our render destination inside the HTML, initializes the store and finally calls the Preact `render` method to render the `AuthSetupContainer` component inside the target container.
+
+All of the code for managing app accounts feature is located in `src/features/containers/AuthSetupContainer`.
+
+```
+. AuthSetupContainer
+├── AppSelection.ts           # Renders the app selection screen
+├── AuthTypeSelection.ts      # Renders the auth type selection screen
+├── Footer.ts                 # Renders the footer inside auth type selection
+├── Header.ts                 # Renders the header which shows step title and close icon
+├── index.ts                  # Wraps the entire feature with state and API calls
+└── PostAdditionPopup.ts      # Renders the modal which appears after we add an auth
+```
+
+### Flow setup
+
+The code for flow setup starts with the `index.ts` entry point.
+
+```ts
+  /**
+   * Render the flow setup form we ship
+   * @param data
+   */
+  public renderFlowSetupForm = (data: {
+    flowId?: string;
+    flowContainerId: string;
+  }): void => {
+    //
+  }
+```
+
+This function sets up our render destination inside the HTML, initializes the store and finally calls the Preact `render` method to render the `FlowSetupContainer` component inside the target container.
+
+All of the code for rendering a Flow setup form is located in `src/features/containers/FlowSetupContainer/index.ts`.
+
+### Normal SDK embed
+
+The code for the normal SDK embed setup starts with the `index.ts` entry point.
+
+```ts
+  /**
+   *
+   * @param initConfig
+   */
+  public init = (initConfig: InitConfig) => {}
+```
+
+This function sets up our render destination inside the HTML, initializes the store and finally calls the Preact `render` method to render the `SDKContainer` component inside the target container.
+
+All of the code for rendering a the normal SDK embed is located in `src/features/containers/SDKContainer/index.ts`.