Fct 1111 | add initial file structure for new Filters components (#…

…2912)

* chore(readmes): run yarn generate-readmes and commit results

* feat(filters): add placeholder test files for unit and vrt tests, add versioning

* FCT-1112 | display story only when running storybook locally (#2902)

* feat(local only storybook): add ability to only display a story in the sidebar when running storybook locally by adding a 'local-dev' tag to the story meta

* feat(local only storybook): use tag in mdx files as well

* feat(local only storybook): add local story stubs for FiltersList, add documentation for local-dev tag in storybook/README.md

* fix(tag): remove local-dev tag from dropdownmenu readme

* fix(serve cmd): revert change specifying ./storybook-static filepath in storybook/package.json in order to merge local dev tagging to filters files branch

* feat(filter menu file structure): add component file for trigger button

* chore(spacing): change spacing in filter-menu

* chore(ci): ! for running checks

package.json

@@ -49,6 +49,7 @@
     "packages/components/buttons/*",
     "packages/components/dropdowns/*",
     "packages/components/fields/*",
+    "packages/components/filters/*",
     "packages/components/inputs/*",
     "packages/components/spacings/*",
     "presets/*",
@@ -62,6 +63,7 @@
       "packages/components/buttons/*",
       "packages/components/dropdowns/*",
       "packages/components/fields/*",
+      "packages/components/filters/*",
       "packages/components/inputs/*",
       "packages/components/spacings/*",
       "presets/*"

packages/components/filters/filter-menu/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/components/filters/filter-menu/README.md

@@ -0,0 +1,49 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# FilterMenu
+
+## Description
+
+This component should be used to display an active filter in the `FiltersList`.
+
+It displays each selected filter option in the menu trigger, and allows for selecting options in the menu body.
+
+This description is a stub and should be expanded as development continues.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/filter-menu
+```
+
+```
+npm --save install @commercetools-uikit/filter-menu
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import FilterMenu from '@commercetools-uikit/filter-menu';
+
+/**TODO: EXPAND THIS */
+const Example = () => <FilterMenu />;
+
+export default Example;
+```
+
+## Properties
+
+| Props   | Type     | Required | Default | Description         |
+| ------- | -------- | :------: | ------- | ------------------- |
+| `label` | `string` |          |         | This is a stub prop |

packages/components/filters/filter-menu/docs/description.md

@@ -0,0 +1,5 @@
+This component should be used to display an active filter in the `FiltersList`.
+
+It displays each selected filter option in the menu trigger, and allows for selecting options in the menu body.
+
+This description is a stub and should be expanded as development continues.

packages/components/filters/filter-menu/docs/usage-example.js

@@ -0,0 +1,6 @@
+import FilterMenu from '@commercetools-uikit/filter-menu';
+
+/**TODO: EXPAND THIS */
+const Example = () => <FilterMenu />;
+
+export default Example;

packages/components/filters/filter-menu/index.ts

@@ -0,0 +1,6 @@
+// This file exists  because we want jest to use our non-compiled code to run tests
+// if this file is missing, and you have a `module` or `main` that points to a non-existing file
+// (ie, a bundle that hasn't been built yet) then jest will fail if the bundle is not yet built.
+// all apps should export all their named exports from their root index.js
+export { default } from './src';
+export * from './src';

packages/components/filters/filter-menu/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@commercetools-uikit/filter-menu",
+  "description": "The `FilterMenu` is the menu that displays the available and selected options for a specific filter in the `FiltersList`.",
+  "version": "19.11.0",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/filters/filter-menu"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-filter-menu.cjs.js",
+  "module": "dist/commercetools-uikit-filter-menu.esm.js",
+  "files": ["dist"],
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/dropdown-menu": "workspace:^",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "prop-types": "15.8.1",
+    "react-intl": "^6.3.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}

packages/components/filters/filter-menu/src/badge/badge.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import Badge from './badge';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Badge', () => {
+  it('should render the badge', async () => {
+    await render(<Badge />);
+    await screen.findByText('badge');
+  });
+});

packages/components/filters/filter-menu/src/badge/badge.tsx

@@ -0,0 +1,5 @@
+function Badge() {
+  return <div>badge</div>;
+}
+
+export default Badge;

packages/components/filters/filter-menu/src/badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from './badge';

packages/components/filters/filter-menu/src/chip/chip.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import Chip from './chip';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Chip', () => {
+  it('should render the chip', async () => {
+    await render(<Chip />);
+    await screen.findByText('chip');
+  });
+});

packages/components/filters/filter-menu/src/chip/chip.tsx

@@ -0,0 +1,5 @@
+function Chip() {
+  return <div>chip</div>;
+}
+
+export default Chip;

packages/components/filters/filter-menu/src/chip/index.ts

@@ -0,0 +1 @@
+export { default as Chip } from './chip';

packages/components/filters/filter-menu/src/export-types.ts

@@ -0,0 +1 @@
+export type { TFilterMenuProps } from './filter-menu';

packages/components/filters/filter-menu/src/filter-menu.readme.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import ReadMe from './../README.md?raw'
+
+<Meta tags={['local-dev']} title="components/Filters/FilterMenu/Readme" />
+
+<Markdown>{ReadMe}</Markdown>

packages/components/filters/filter-menu/src/filter-menu.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../test/test-utils';
+import FilterMenu from './filter-menu';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu FilterMenu', () => {
+  it('should render the filter-menu', async () => {
+    await render(<FilterMenu label="filter menu" />);
+    await screen.findByText('filter menu');
+  });
+});

packages/components/filters/filter-menu/src/filter-menu.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FilterMenu from './filter-menu';
+
+const meta: Meta<typeof FilterMenu> = {
+  title: 'components/Filters/FilterMenu',
+  component: FilterMenu,
+  tags: ['local-dev'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof FilterMenu>;
+
+export const BasicExample: Story = {
+  args: {
+    label: 'A label text',
+  },
+};

packages/components/filters/filter-menu/src/filter-menu.tsx

@@ -0,0 +1,21 @@
+import DropdownMenu from '@commercetools-uikit/dropdown-menu';
+import { Footer } from './footer';
+import { Header } from './header';
+import { TriggerButton } from './trigger-button';
+
+export type TFilterMenuProps = {
+  /**
+   * This is a stub prop!
+   */
+  label: string;
+};
+function FilterMenu(props: TFilterMenuProps) {
+  return (
+    <DropdownMenu triggerElement={<TriggerButton label={props.label} />}>
+      <Header />
+      <Footer />
+    </DropdownMenu>
+  );
+}
+
+export default FilterMenu;

packages/components/filters/filter-menu/src/filter-menu.visualroute.jsx

@@ -0,0 +1,11 @@
+import { Suite, Spec } from '../../../../../test/percy';
+
+export const routePath = '/filter-menu';
+
+export const component = () => (
+  <Suite>
+    <Spec label="this is a placeholder test">
+      {/**ACTUAL TEST GOES HERE */}
+    </Spec>
+  </Suite>
+);

packages/components/filters/filter-menu/src/filter-menu.visualspec.js

@@ -0,0 +1,12 @@
+import percySnapshot from '@percy/puppeteer';
+import { getDocument, queries } from 'pptr-testing-library';
+
+describe('FilterMenu', () => {
+  beforeAll(async () => {
+    await page.goto(`${globalThis.HOST}/filter-menu`);
+  });
+
+  it.skip('Default', async () => {
+    // THIS IS A STUB
+  });
+});

packages/components/filters/filter-menu/src/footer/footer.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import Footer from './footer';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Footer', () => {
+  it('should render the footer', async () => {
+    await render(<Footer />);
+    await screen.findByText('footer');
+  });
+});

packages/components/filters/filter-menu/src/footer/footer.tsx

@@ -0,0 +1,5 @@
+function Footer() {
+  return <div>footer</div>;
+}
+
+export default Footer;

packages/components/filters/filter-menu/src/footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './footer';

packages/components/filters/filter-menu/src/header/header.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import Header from './header';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Header', () => {
+  it('should render the header', async () => {
+    await render(<Header />);
+    await screen.findByText('header');
+  });
+});

packages/components/filters/filter-menu/src/header/header.tsx

@@ -0,0 +1,5 @@
+function Header() {
+  return <div>header</div>;
+}
+
+export default Header;

packages/components/filters/filter-menu/src/header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './header';

packages/components/filters/filter-menu/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './filter-menu';
+export { default as version } from './version';

packages/components/filters/filter-menu/src/trigger-button/index.ts

@@ -0,0 +1 @@
+export { default as TriggerButton } from './trigger-button';

packages/components/filters/filter-menu/src/trigger-button/trigger-button.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import TriggerButton from './trigger-button';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Trigger Button', () => {
+  it('should render the trigger button', async () => {
+    await render(<TriggerButton label="trigger button" />);
+    await screen.findByText(/trigger button/i);
+  });
+});

packages/components/filters/filter-menu/src/trigger-button/trigger-button.tsx

@@ -0,0 +1,18 @@
+import { Badge } from '../badge';
+import { Chip } from '../chip';
+
+export type TFilterMenuTriggerButtonProps = {
+  label: string;
+};
+
+const TriggerButton = (props: TFilterMenuTriggerButtonProps) => {
+  return (
+    <button>
+      <div>{props.label}</div>
+      <Badge />
+      <Chip />
+    </button>
+  );
+};
+
+export default TriggerButton;

packages/components/filters/filter-menu/src/version.ts

@@ -0,0 +1,2 @@
+// NOTE: This string will be replaced on build time with the package version.
+export default '__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__';

packages/components/filters/filters-list/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.