feat(filters): update file structure for filters, rename 'FiltersList…

…' to be 'Filters', make 'FilterMenu' and 'Badge' sub-components in 'Filters', update all tests/generated files, add file structure for 'QuickFilters', update build steps in root package.json to not treat 'components/filters' as a build directory (#2932)

package.json

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

packages/components/filters/filters-list/README.md → packages/components/filters/README.md

@@ -1,22 +1,22 @@
 <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
 <!-- This file is created by the `yarn generate-readme` script. -->
 
-# FiltersList
+# Filters
 
 ## Description
 
-The FiltersList component displays all active filters. It also allows for adding and removing filters.
+The `Filters` component displays all active filters. It also allows for adding and removing filters.
 
 This description is a stub and shold be expanded as development continues.
 
 ## Installation
 
 ```
-yarn add @commercetools-uikit/filters-list
+yarn add @commercetools-uikit/filters
 ```
 
 ```
-npm --save install @commercetools-uikit/filters-list
+npm --save install @commercetools-uikit/filters
 ```
 
 Additionally install the peer dependencies (if not present)
@@ -32,10 +32,10 @@ npm --save install react
 ## Usage
 
 ```jsx
-import FiltersList from '@commercetools-uikit/filters-list';
+import Filters from '@commercetools-uikit/filters';
 
 /**TODO: EXPAND THIS */
-const Example = () => <FiltersList />;
+const Example = () => <Filters />;
 
 export default Example;
 ```

packages/components/filters/docs/description.md

@@ -0,0 +1,3 @@
+The `Filters` component displays all active filters. It also allows for adding and removing filters.
+
+This description is a stub and shold be expanded as development continues.

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

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

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

@@ -1,12 +1,12 @@
 {
-  "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`.",
+  "name": "@commercetools-uikit/filters",
+  "description": "The `Filters` component displays filter controls.",
   "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"
+    "directory": "packages/components/filters"
   },
   "homepage": "https://uikit.commercetools.com",
   "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
@@ -15,8 +15,8 @@
     "access": "public"
   },
   "sideEffects": false,
-  "main": "dist/commercetools-uikit-filter-menu.cjs.js",
-  "module": "dist/commercetools-uikit-filter-menu.esm.js",
+  "main": "dist/commercetools-uikit-filters.cjs.js",
+  "module": "dist/commercetools-uikit-filters.esm.js",
   "files": ["dist"],
   "dependencies": {
     "@babel/runtime": "^7.20.13",

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

@@ -1,4 +1,4 @@
-import { screen, render } from '../../../../../../test/test-utils';
+import { screen, render } from '../../../../../test/test-utils';
 import Badge from './badge';
 
 /**

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

@@ -0,0 +1 @@
+export type { TFiltersProps } from './filters';

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

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

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

@@ -1,4 +1,4 @@
-import { Badge } from '../badge';
+import { Badge } from '../../badge';
 import { Chip } from '../chip';
 
 export type TFilterMenuTriggerButtonProps = {

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

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

packages/components/filters/filters-list/src/filters-list.spec.tsx → packages/components/filters/src/filters.spec.tsx

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

packages/components/filters/src/filters.stories.tsx

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

packages/components/filters/src/filters.tsx

@@ -0,0 +1,11 @@
+export type TFiltersProps = {
+  /**
+   * This is a stub prop
+   */
+  label?: string;
+};
+
+function Filters(props: TFiltersProps) {
+  return <div>{props.label}</div>;
+}
+export default Filters;

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

@@ -1,6 +1,6 @@
-import { Suite, Spec } from '../../../../../test/percy';
+import { Suite, Spec } from '../../../../test/percy';
 
-export const routePath = '/filter-menu';
+export const routePath = '/filters';
 
 export const component = () => (
   <Suite>

packages/components/filters/filters-list/src/filters-list.visualspec.js → packages/components/filters/src/filters.visualspec.js

@@ -3,7 +3,7 @@ import { getDocument, queries } from 'pptr-testing-library';
 
 describe('FiltersList', () => {
   beforeAll(async () => {
-    await page.goto(`${globalThis.HOST}/filters-list`);
+    await page.goto(`${globalThis.HOST}/filters`);
   });
 
   it.skip('Default', async () => {

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

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

packages/components/filters/filter-menu/LICENSE → packages/components/quick-filters/LICENSE

@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

packages/components/quick-filters/README.md

@@ -0,0 +1,47 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# QuickFilters
+
+## Description
+
+The `QuickFilters` component displays a selection of `Tag` components that represent the available filter actions.
+
+This description is a stub and shold be expanded as development continues.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/quick-filters
+```
+
+```
+npm --save install @commercetools-uikit/quick-filters
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import QuickFilters from '@commercetools-uikit/quick-filters';
+
+/**TODO: EXPAND THIS */
+const Example = () => <QuickFilters />;
+
+export default Example;
+```
+
+## Properties
+
+| Props   | Type     | Required | Default | Description          |
+| ------- | -------- | :------: | ------- | -------------------- |
+| `label` | `string` |    ✅    |         | This is a stub prop! |

packages/components/quick-filters/docs/description.md

@@ -0,0 +1,3 @@
+The `QuickFilters` component displays a selection of `Tag` components that represent the available filter actions.
+
+This description is a stub and shold be expanded as development continues.

packages/components/quick-filters/docs/usage-example.js

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