@integry/sdk 4.5.2 → 4.5.4

package/src/store/index.ts

@@ -0,0 +1,17 @@
+/* eslint-disable import/no-cycle */
+import createStore, { Store } from 'unistore';
+import devtools from 'unistore/devtools';
+
+import { initialState } from '@/store/initialState';
+
+import { State } from '../types/store';
+import { actionFunctions } from './actionFunctions';
+
+const createSDKStore = (): Store<State> => {
+  const createStoreWrapper = () => createStore<State>(initialState);
+  // const store = createStoreWrapper();
+  const store = devtools(createStoreWrapper());
+  return store;
+};
+
+export { createSDKStore, actionFunctions, initialState };

package/src/store/initialState.ts

@@ -0,0 +1,58 @@
+/* eslint-disable import/no-cycle */
+import { State } from '@/types/store';
+
+export const initialState: State = {
+  stepState: {
+    steps: [],
+    currentStep: {
+      type: 'CONFIRMATION',
+    },
+    stepIndex: 0,
+    fieldsListData: null,
+    showValidation: false,
+    allStepsCompleted: false,
+  },
+  genericData: {
+    deploymentId: null,
+    implicitAuthEnabled: false,
+    templateId: null,
+    stepWithActivityOutput: null,
+    isPreviewMode: false,
+    brandingApp: null,
+    name: '',
+    authModalId: '',
+    showAppAuthModal: false,
+    isAnonymous: false,
+    marketplaceId: null,
+    marketplaceDetail: null,
+    IUAccountsData: null,
+    app_id: null,
+    currentIntegrationStatus: '',
+    isTestIntegration: false,
+    deploymentIdFromConfig: null,
+    customFlowSetupRender: false,
+  },
+  stepMapping: {},
+  authMapping: {},
+  stepDataMapping: {},
+  parentChildMapping: {},
+  conditionalFieldMapping: {},
+  fieldListMapping: {},
+  integrations: [],
+  templates: [],
+  showFlowsListModal: false,
+  showAppsListModal: false,
+  showAppPageModal: false,
+  showSetupModal: false,
+  showSetupInline: false,
+  fetchingIntegrations: false,
+  fetchingTemplates: false,
+  integrationIdToEdit: null,
+  mappingInfo: null,
+  activatedTab: '',
+  showMarketplaceModal: false,
+  showRequestAppModal: false,
+  requestAppFormData: {},
+  showMarketplaceAppPageId: null,
+  selectedAuthByAppId: {},
+};

package/src/stories/Button.stories.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { Button, ButtonProps, ButtonTypes } from '@/components/Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    label: {
+      name: 'Label',
+      type: { name: 'string', required: true },
+      description: 'Button label',
+    },
+    type: {
+      name: 'Type',
+      description: 'Button type',
+      options: ['primary', 'secondary', 'link'],
+      control: { type: 'radio' },
+    },
+    size: {
+      name: 'Size',
+      description: 'Button size',
+      options: ['small', 'medium', 'large'],
+      control: { type: 'radio' },
+    },
+    isLoading: {
+      name: 'Loading',
+      description: 'Show loading state',
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    color: { name: 'Text Color', control: 'color' },
+    backgroundColor: { name: 'Background Color', control: 'color' },
+    onClick: { action: 'onClick' },
+  },
+};
+
+const Template: Story<ButtonProps> = (args: ButtonProps) => (
+  <Button {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  type: ButtonTypes.PRIMARY,
+  label: 'Primary Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  type: ButtonTypes.SECONDARY,
+  label: 'Secondary Button',
+};
+
+export const Link = Template.bind({});
+Link.args = {
+  type: ButtonTypes.LINK,
+  label: 'Link',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  label: 'Large Button',
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+  label: 'Medium Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  label: 'Small Button',
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  label: 'Save',
+  isLoading: true,
+};

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { Checkbox, CheckboxProps } from '@/components/CheckboxGroup/Checkbox';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  argTypes: {
+    isChecked: {
+      name: 'Checked',
+      description: 'Checked',
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    handleChange: { action: 'onClick' },
+  },
+};
+
+const Template: Story<CheckboxProps> = (args: CheckboxProps) => (
+  <Checkbox {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  name: 'primary',
+  label: 'Primary Button',
+  value: 'primary',
+};
+
+export const Description = Template.bind({});
+
+Description.args = {
+  name: 'primary',
+  label: 'Primary Button',
+  description: 'With description',
+  value: 'primary',
+};

package/src/stories/Checkbox/CheckboxGroup.stories.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { CheckboxGroup, CheckboxGroupProps } from '@/components/CheckboxGroup';
+
+export default {
+  title: 'CheckboxGroup',
+  component: CheckboxGroup,
+  argTypes: {
+    onChange: { action: 'onChange' },
+  },
+};
+
+const Template: Story<CheckboxGroupProps> = (args: CheckboxGroupProps) => (
+  <CheckboxGroup {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  title: 'Checkbox selection',
+  description: 'Select option/s from the following',
+  selectedItemIndices: [0, 1],
+  items: [
+    {
+      name: 'item_a',
+      value: 'item_a',
+      label: 'Item A',
+      description: 'A description for item A',
+    },
+    {
+      name: 'item_b',
+      value: 'item_b',
+      label: 'Item B',
+      description: 'A description for item B',
+    },
+    {
+      name: 'item_c',
+      value: 'item_c',
+      label: 'Item C',
+      description: 'A description for item C',
+    },
+  ],
+};

package/src/stories/EditableText.stories.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { useState } from 'preact/hooks';
+import { Story } from '@storybook/preact';
+
+import { EditableText, EditableTextProps } from '@/components/EditableText';
+
+export default {
+  title: 'EditableText',
+  component: EditableText,
+  argTypes: {
+    value: { type: 'string' },
+    handleChange: { action: 'onChange' },
+  },
+};
+
+const Template: Story<EditableTextProps> = (args: EditableTextProps) => {
+  const [value, setValue] = useState(args.value ?? '');
+
+  return (
+    <EditableText
+      {...args}
+      value={value}
+      handleChange={(val) => setValue(val)}
+    ></EditableText>
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  value: 'This is text',
+};

package/src/stories/Input/BaseInput.stories.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { BaseInput, BaseInputProps } from '@/components/Input/BaseInput';
+
+export default {
+  title: 'BaseInput',
+  component: BaseInput,
+  argTypes: {
+    handleChange: { action: 'onChange' },
+  },
+};
+
+const Template: Story<BaseInputProps> = (args: BaseInputProps) => (
+  <BaseInput {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  value: '',
+  placeholder: 'Placeholder',
+};
+
+export const WithValue = Template.bind({});
+
+WithValue.args = {
+  value: 'I am filled',
+  placeholder: 'Placeholder',
+};
+
+export const Number = Template.bind({});
+
+Number.args = {
+  type: 'number',
+  value: '10',
+  placeholder: 'Placeholder',
+};
+
+export const Password = Template.bind({});
+
+Password.args = {
+  type: 'password',
+  value: '10',
+  placeholder: 'Placeholder',
+};

package/src/stories/Input/DateInput.stories.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { DateInput, DateInputProps } from '@/components/Input';
+import { getDateFormat } from '@/utils/datetime';
+
+export default {
+  title: 'DateInput',
+  component: DateInput,
+  argTypes: {
+    onChange: { action: 'onChange' },
+  },
+};
+
+const Template: Story<DateInputProps> = (args: DateInputProps) => (
+  <DateInput {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  placeholder: 'Placeholder',
+  title: 'An input',
+  description: 'Some description',
+  value: getDateFormat(new Date()),
+};

package/src/stories/Input/Input.stories.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { Input, InputProps } from '@/components/Input';
+
+export default {
+  title: 'Input',
+  component: Input,
+  argTypes: {
+    value: { type: 'string' },
+  },
+};
+
+const Template: Story<InputProps> = (args: InputProps) => <Input {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  placeholder: 'Placeholder',
+  title: 'An input',
+  description: 'Some description',
+};

package/src/stories/Input/PasswordInput.stories.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+import { PasswordInput, PasswordInputProps } from '@/components/Input';
+
+export default {
+  title: 'PasswordInput',
+  component: PasswordInput,
+  argTypes: {
+    value: { type: 'string' },
+  },
+};
+
+const Template: Story<PasswordInputProps> = (args: PasswordInputProps) => (
+  <PasswordInput {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  placeholder: 'Placeholder',
+  title: 'A password input',
+  description: 'Some description for this password input',
+};

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,211 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/Label.stories.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/** @jsx h */
+import { h } from 'htm/preact';
+import { Story } from '@storybook/preact';
+
+import { Label, LabelProps } from '@/components/Label';
+
+export default {
+  title: 'Label',
+  component: Label,
+};
+
+const Template: Story<LabelProps> = (args: LabelProps) => <Label {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  title: 'Title',
+  description: 'Primary Button',
+};
+
+export const Secondary = Template.bind({});
+
+Secondary.args = {
+  title: 'Title',
+};