refactor: migrate pagination, link-button, link, primary-action-dropd…

…own, stamp to storybook v7

packages/components/buttons/link-button/README.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as LinkButtonStories from './src/link-button.stories';
+
+<Meta of={LinkButtonStories} />
+
+# Buttons: Link Button
+
+This component is deprecated. Please use either the `<FlatButton>` or `<Link>` components.

packages/components/buttons/link-button/src/link-button.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LinkButton from './link-button';
+
+const meta = {
+  title: 'Components/Buttons/LinkButton',
+  component: LinkButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  // @ts-ignore
+  args: {},
+  render: () => <></>,
+};

packages/components/link/README.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as LinkStories from './src/link.stories';
+
+<Meta of={LinkStories} />
+
+# Link
+
+## Description
+
+Links are used either to link to other UI routes, or to link to external pages. This component is a very thin wrapper over either a React Router Link, or a normal HTML \<a> tag.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/link
+```
+
+```
+npm --save install @commercetools-uikit/link
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-intl react-router-dom
+```
+
+```
+npm --save install react react-intl react-router-dom
+```
+
+## Usage
+
+```jsx
+import Link from '@commercetools-uikit/link';
+
+const Example = () => <Link to={'/foo/bar'}>Go to foo bar</Link>;
+const ExampleWithExternal = () => (
+  <Link isExternal={true} to={'https://kanyetothe.com'}>
+    Go to external link
+  </Link>
+);
+
+export default Example;
+```
+
+<Canvas of={LinkStories.Default} />

packages/components/link/src/link.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Link from './link';
+
+const meta = {
+  title: 'Components/Link',
+  component: Link,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    to: '/foo/bar',
+    isExternal: false,
+    children: 'Accessibility text',
+  },
+  argTypes: {
+    tone: {
+      control: 'select',
+      options: ['primary', 'inverted', 'secondary'],
+    },
+  },
+  render: (args) => {
+    return (
+      <Router>
+        <Link {...args} />
+      </Router>
+    );
+  },
+};

packages/components/pagination/README.mdx

@@ -0,0 +1,53 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as PaginationStories from './src/pagination.stories';
+
+<Meta of={PaginationStories} />
+
+# Pagination
+
+## Description
+
+Components for navigating through pages of items
+
+## Installation
+
+```
+yarn add @commercetools-uikit/pagination
+```
+
+```
+npm --save install @commercetools-uikit/pagination
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-intl
+```
+
+```
+npm --save install react react-intl
+```
+
+## Usage
+
+```jsx
+import { Pagination } from '@commercetools-uikit/pagination';
+
+const Example = () => {
+  const items = [{ id: '1' }, { id: '2' }];
+  return (
+    <Pagination
+      totalItems={items.length}
+      page={1}
+      onPageChange={() => {}}
+      onPerPageChange={() => {}}
+    />
+  );
+};
+
+export default Example;
+```
+
+<Canvas of={PaginationStories.Default} />

packages/components/pagination/src/page-navigator/page-size-selector.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PageNavigator from './page-navigator';
+
+const meta = {
+  title: 'Components/Pagination/PageNavigator',
+  component: PageNavigator,
+  tags: ['autodocs'],
+} satisfies Meta<typeof PageNavigator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    totalPages: 3,
+    page: 1,
+    onPageChange: () => {},
+  },
+};

packages/components/pagination/src/page-size-selector/page-size-selector.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PageSizeSelector from './page-size-selector';
+
+const meta = {
+  title: 'Components/Pagination/PageSizeSelector',
+  component: PageSizeSelector,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 180,
+      },
+    },
+  },
+} satisfies Meta<typeof PageSizeSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    pageItems: 18,
+    perPage: 20,
+    perPageRange: 's',
+    onPerPageChange: () => {},
+  },
+};

packages/components/pagination/src/pagination.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Pagination from './pagination';
+
+const meta = {
+  title: 'Components/Pagination/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 180,
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    totalItems: 200,
+    page: 1,
+    perPage: 20,
+    perPageRange: 's',
+    onPageChange: () => {},
+    onPerPageChange: () => {},
+  },
+};

packages/components/primary-action-dropdown/README.mdx

@@ -0,0 +1,60 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as PrimaryActionDropdownStories from './src/primary-action-dropdown.stories';
+
+<Meta of={PrimaryActionDropdownStories} />
+
+# PrimaryActionDropdown
+
+## Description
+
+A `PrimaryActionDropdown` is a dropdown with any number of action whereas the first action of the dropdown can be triggered without opening the dropdown
+itself.
+
+The primary action, rendered as the head of the dropdown, is always the first non-disabled `<Option />`. If all `<Option />`s are disabled, the head of the
+dropdown will be disabled.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/primary-action-dropdown
+```
+
+```
+npm --save install @commercetools-uikit/primary-action-dropdown
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import PrimaryActionDropdown, {
+  Option,
+} from '@commercetools-uikit/primary-action-dropdown';
+import { PlusBoldIcon } from '@commercetools-uikit/icons';
+
+const Example = () => (
+  <PrimaryActionDropdown>
+    <Option iconLeft={<PlusBoldIcon />} onClick={() => {}}>
+      Primary option
+    </Option>
+    <Option onClick={() => {}}>Another option</Option>
+    <Option isDisabled={true} onClick={() => {}}>
+      Even another option
+    </Option>
+  </PrimaryActionDropdown>
+);
+
+export default Example;
+```
+
+<Canvas of={PrimaryActionDropdownStories.Default} />

packages/components/primary-action-dropdown/src/primary-action-dropdown.stories.tsx

@@ -0,0 +1,71 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { BoxIcon, BrainIcon, FlameIcon } from '@commercetools-uikit/icons';
+import PrimaryActionDropdown from './primary-action-dropdown';
+import Option from './option';
+
+type PrimaryActionDropdownPropsAndCustomArgs = ComponentProps<
+  typeof PrimaryActionDropdown
+> & {
+  isDisabledOption1: boolean;
+  isDisabledOption2: boolean;
+  isDisabledOption3: boolean;
+  labelOption1: string;
+  labelOption2: string;
+  labelOption3: string;
+};
+
+const meta = {
+  title: 'Components/PrimaryActionDropdown',
+  component: PrimaryActionDropdown,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 180,
+      },
+    },
+  },
+} satisfies Meta<PrimaryActionDropdownPropsAndCustomArgs>;
+
+export default meta;
+type Story = StoryObj<PrimaryActionDropdownPropsAndCustomArgs>;
+
+export const Default: Story = {
+  args: {
+    isDisabledOption1: false,
+    isDisabledOption2: false,
+    isDisabledOption3: false,
+    labelOption1: 'Option 1',
+    labelOption2: 'Option 2',
+    labelOption3: 'Option 3',
+  },
+  render: (args) => {
+    return (
+      <PrimaryActionDropdown>
+        <Option
+          iconLeft={<BoxIcon />}
+          isDisabled={args.isDisabledOption1}
+          onClick={() => {}}
+        >
+          {args.labelOption1}
+        </Option>
+        <Option
+          iconLeft={<BrainIcon />}
+          isDisabled={args.isDisabledOption2}
+          onClick={() => {}}
+        >
+          {args.labelOption2}
+        </Option>
+        <Option
+          iconLeft={<FlameIcon />}
+          isDisabled={args.isDisabledOption3}
+          onClick={() => {}}
+        >
+          {args.labelOption3}
+        </Option>
+      </PrimaryActionDropdown>
+    );
+  },
+};