@integry/sdk 4.5.15 → 4.5.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.15",
+  "version": "4.5.16",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -16,8 +16,8 @@
     "test": "vitest",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "publish-beta": "npm publish --tag beta"
   },
   "keywords": [
@@ -43,12 +43,13 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^3.0.0",
     "@size-limit/preset-big-lib": "^4.10.2",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addon-a11y": "^8.5.7",
+    "@storybook/addon-actions": "^8.5.7",
+    "@storybook/addon-essentials": "^8.5.7",
+    "@storybook/addon-links": "^8.5.7",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/preact": "^6.5.12",
+    "@storybook/preact": "^8.5.7",
+    "@storybook/preact-webpack5": "^8.5.7",
     "@storybook/preset-scss": "^1.0.3",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/user-event": "^14.6.1",

package/src/stories/Button.stories.tsx

@@ -1,83 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-/* 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

@@ -1,46 +0,0 @@
-/* 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

@@ -1,35 +0,0 @@
-/* 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

@@ -1,48 +0,0 @@
-/* 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

@@ -1,28 +0,0 @@
-/* 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

@@ -1,24 +0,0 @@
-/* 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

@@ -1,26 +0,0 @@
-/* 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

@@ -1,211 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/* 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',
-};