From 13e4f0adababa5383d06408a65d9315745ecb762 Mon Sep 17 00:00:00 2001 From: Byron Wall <87667330+ByronDWall@users.noreply.github.com> Date: Tue, 1 Oct 2024 13:40:18 -0400 Subject: [PATCH] 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 | 2 - .../filters/{filters-list => }/LICENSE | 0 .../filters/{filters-list => }/README.md | 12 ++--- .../components/filters/docs/description.md | 3 ++ .../components/filters/docs/usage-example.js | 6 +++ .../components/filters/filter-menu/README.md | 49 ------------------- .../filters/filter-menu/docs/description.md | 5 -- .../filters/filter-menu/docs/usage-example.js | 6 --- .../filters/filter-menu/src/export-types.ts | 1 - .../filter-menu/src/filter-menu.stories.tsx | 22 --------- .../filters/filters-list/docs/description.md | 3 -- .../filters-list/docs/usage-example.js | 6 --- .../filters/filters-list/src/export-types.ts | 1 - .../filters-list/src/filters-list.stories.tsx | 22 --------- .../filters/filters-list/src/filters-list.tsx | 11 ----- .../filters/{filter-menu => }/index.ts | 0 .../filters/{filter-menu => }/package.json | 10 ++-- .../src/badge/badge.spec.tsx | 2 +- .../{filter-menu => }/src/badge/badge.tsx | 0 .../{filter-menu => }/src/badge/index.ts | 0 .../components/filters/src/export-types.ts | 1 + .../filter-menu}/chip/chip.spec.tsx | 0 .../src => src/filter-menu}/chip/chip.tsx | 0 .../src => src/filter-menu}/chip/index.ts | 0 .../filter-menu}/filter-menu.spec.tsx | 0 .../src => src/filter-menu}/filter-menu.tsx | 0 .../filter-menu}/footer/footer.spec.tsx | 0 .../src => src/filter-menu}/footer/footer.tsx | 0 .../src => src/filter-menu}/footer/index.ts | 0 .../filter-menu}/header/header.spec.tsx | 0 .../src => src/filter-menu}/header/header.tsx | 0 .../src => src/filter-menu}/header/index.ts | 0 .../filters/src/filter-menu/index.ts | 1 + .../filter-menu}/trigger-button/index.ts | 0 .../trigger-button/trigger-button.spec.tsx | 0 .../trigger-button/trigger-button.tsx | 2 +- .../filters.readme.mdx} | 2 +- .../filters.spec.tsx} | 6 +-- .../filters/src/filters.stories.tsx | 22 +++++++++ packages/components/filters/src/filters.tsx | 11 +++++ .../filters.visualroute.jsx} | 4 +- .../filters.visualspec.js} | 2 +- .../filters/{filter-menu => }/src/index.ts | 2 +- .../filters/{filter-menu => }/src/version.ts | 0 .../filter-menu => quick-filters}/LICENSE | 2 +- packages/components/quick-filters/README.md | 47 ++++++++++++++++++ .../quick-filters/docs/description.md | 3 ++ .../quick-filters/docs/usage-example.js | 6 +++ .../filters-list => quick-filters}/index.ts | 0 .../package.json | 10 ++-- .../quick-filters/src/export-types.ts | 1 + .../src/index.ts | 2 +- .../src/quick-filters.readme.mdx} | 2 +- .../quick-filters/src/quick-filters.spec.tsx | 12 +++++ .../src/quick-filters.stories.tsx | 22 +++++++++ .../quick-filters/src/quick-filters.tsx | 12 +++++ .../src/quick-filters.visualroute.jsx} | 4 +- .../src/quick-filters.visualspec.js} | 4 +- .../src/version.ts | 0 yarn.lock | 36 +++++++------- 60 files changed, 198 insertions(+), 179 deletions(-) rename packages/components/filters/{filters-list => }/LICENSE (100%) rename packages/components/filters/{filters-list => }/README.md (68%) create mode 100644 packages/components/filters/docs/description.md create mode 100644 packages/components/filters/docs/usage-example.js delete mode 100644 packages/components/filters/filter-menu/README.md delete mode 100644 packages/components/filters/filter-menu/docs/description.md delete mode 100644 packages/components/filters/filter-menu/docs/usage-example.js delete mode 100644 packages/components/filters/filter-menu/src/export-types.ts delete mode 100644 packages/components/filters/filter-menu/src/filter-menu.stories.tsx delete mode 100644 packages/components/filters/filters-list/docs/description.md delete mode 100644 packages/components/filters/filters-list/docs/usage-example.js delete mode 100644 packages/components/filters/filters-list/src/export-types.ts delete mode 100644 packages/components/filters/filters-list/src/filters-list.stories.tsx delete mode 100644 packages/components/filters/filters-list/src/filters-list.tsx rename packages/components/filters/{filter-menu => }/index.ts (100%) rename packages/components/filters/{filter-menu => }/package.json (69%) rename packages/components/filters/{filter-menu => }/src/badge/badge.spec.tsx (77%) rename packages/components/filters/{filter-menu => }/src/badge/badge.tsx (100%) rename packages/components/filters/{filter-menu => }/src/badge/index.ts (100%) create mode 100644 packages/components/filters/src/export-types.ts rename packages/components/filters/{filter-menu/src => src/filter-menu}/chip/chip.spec.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/chip/chip.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/chip/index.ts (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/filter-menu.spec.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/filter-menu.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/footer/footer.spec.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/footer/footer.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/footer/index.ts (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/header/header.spec.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/header/header.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/header/index.ts (100%) create mode 100644 packages/components/filters/src/filter-menu/index.ts rename packages/components/filters/{filter-menu/src => src/filter-menu}/trigger-button/index.ts (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/trigger-button/trigger-button.spec.tsx (100%) rename packages/components/filters/{filter-menu/src => src/filter-menu}/trigger-button/trigger-button.tsx (89%) rename packages/components/filters/{filter-menu/src/filter-menu.readme.mdx => src/filters.readme.mdx} (62%) rename packages/components/filters/{filters-list/src/filters-list.spec.tsx => src/filters.spec.tsx} (55%) create mode 100644 packages/components/filters/src/filters.stories.tsx create mode 100644 packages/components/filters/src/filters.tsx rename packages/components/filters/{filter-menu/src/filter-menu.visualroute.jsx => src/filters.visualroute.jsx} (60%) rename packages/components/filters/{filters-list/src/filters-list.visualspec.js => src/filters.visualspec.js} (81%) rename packages/components/filters/{filter-menu => }/src/index.ts (53%) rename packages/components/filters/{filter-menu => }/src/version.ts (100%) rename packages/components/{filters/filter-menu => quick-filters}/LICENSE (99%) create mode 100644 packages/components/quick-filters/README.md create mode 100644 packages/components/quick-filters/docs/description.md create mode 100644 packages/components/quick-filters/docs/usage-example.js rename packages/components/{filters/filters-list => quick-filters}/index.ts (100%) rename packages/components/{filters/filters-list => quick-filters}/package.json (71%) create mode 100644 packages/components/quick-filters/src/export-types.ts rename packages/components/{filters/filters-list => quick-filters}/src/index.ts (52%) rename packages/components/{filters/filters-list/src/filters-list.readme.mdx => quick-filters/src/quick-filters.readme.mdx} (62%) create mode 100644 packages/components/quick-filters/src/quick-filters.spec.tsx create mode 100644 packages/components/quick-filters/src/quick-filters.stories.tsx create mode 100644 packages/components/quick-filters/src/quick-filters.tsx rename packages/components/{filters/filters-list/src/filters-list.visualroute.jsx => quick-filters/src/quick-filters.visualroute.jsx} (60%) rename packages/components/{filters/filter-menu/src/filter-menu.visualspec.js => quick-filters/src/quick-filters.visualspec.js} (70%) rename packages/components/{filters/filters-list => quick-filters}/src/version.ts (100%) diff --git a/package.json b/package.json index 5d29057232..2441bf05b8 100644 --- a/package.json +++ b/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/*" diff --git a/packages/components/filters/filters-list/LICENSE b/packages/components/filters/LICENSE similarity index 100% rename from packages/components/filters/filters-list/LICENSE rename to packages/components/filters/LICENSE diff --git a/packages/components/filters/filters-list/README.md b/packages/components/filters/README.md similarity index 68% rename from packages/components/filters/filters-list/README.md rename to packages/components/filters/README.md index 2ff832b061..4ad4aafb61 100644 --- a/packages/components/filters/filters-list/README.md +++ b/packages/components/filters/README.md @@ -1,22 +1,22 @@ -# 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 = () => ; +const Example = () => ; export default Example; ``` diff --git a/packages/components/filters/docs/description.md b/packages/components/filters/docs/description.md new file mode 100644 index 0000000000..0895f85056 --- /dev/null +++ b/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. diff --git a/packages/components/filters/docs/usage-example.js b/packages/components/filters/docs/usage-example.js new file mode 100644 index 0000000000..152f8d84bf --- /dev/null +++ b/packages/components/filters/docs/usage-example.js @@ -0,0 +1,6 @@ +import Filters from '@commercetools-uikit/filters'; + +/**TODO: EXPAND THIS */ +const Example = () => ; + +export default Example; diff --git a/packages/components/filters/filter-menu/README.md b/packages/components/filters/filter-menu/README.md deleted file mode 100644 index 44f82a1a61..0000000000 --- a/packages/components/filters/filter-menu/README.md +++ /dev/null @@ -1,49 +0,0 @@ - - - -# 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 = () => ; - -export default Example; -``` - -## Properties - -| Props | Type | Required | Default | Description | -| ------- | -------- | :------: | ------- | ------------------- | -| `label` | `string` | | | This is a stub prop | diff --git a/packages/components/filters/filter-menu/docs/description.md b/packages/components/filters/filter-menu/docs/description.md deleted file mode 100644 index 60e70db96e..0000000000 --- a/packages/components/filters/filter-menu/docs/description.md +++ /dev/null @@ -1,5 +0,0 @@ -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. diff --git a/packages/components/filters/filter-menu/docs/usage-example.js b/packages/components/filters/filter-menu/docs/usage-example.js deleted file mode 100644 index 9a0d4340d0..0000000000 --- a/packages/components/filters/filter-menu/docs/usage-example.js +++ /dev/null @@ -1,6 +0,0 @@ -import FilterMenu from '@commercetools-uikit/filter-menu'; - -/**TODO: EXPAND THIS */ -const Example = () => ; - -export default Example; diff --git a/packages/components/filters/filter-menu/src/export-types.ts b/packages/components/filters/filter-menu/src/export-types.ts deleted file mode 100644 index 6cea38eeec..0000000000 --- a/packages/components/filters/filter-menu/src/export-types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { TFilterMenuProps } from './filter-menu'; diff --git a/packages/components/filters/filter-menu/src/filter-menu.stories.tsx b/packages/components/filters/filter-menu/src/filter-menu.stories.tsx deleted file mode 100644 index 833d9693a7..0000000000 --- a/packages/components/filters/filter-menu/src/filter-menu.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import FilterMenu from './filter-menu'; - -const meta: Meta = { - title: 'components/Filters/FilterMenu', - component: FilterMenu, - tags: ['local-dev'], - argTypes: { - label: { - control: 'text', - }, - }, -}; -export default meta; - -type Story = StoryObj; - -export const BasicExample: Story = { - args: { - label: 'A label text', - }, -}; diff --git a/packages/components/filters/filters-list/docs/description.md b/packages/components/filters/filters-list/docs/description.md deleted file mode 100644 index 485a86f9eb..0000000000 --- a/packages/components/filters/filters-list/docs/description.md +++ /dev/null @@ -1,3 +0,0 @@ -The FiltersList 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. diff --git a/packages/components/filters/filters-list/docs/usage-example.js b/packages/components/filters/filters-list/docs/usage-example.js deleted file mode 100644 index 77df559ad6..0000000000 --- a/packages/components/filters/filters-list/docs/usage-example.js +++ /dev/null @@ -1,6 +0,0 @@ -import FiltersList from '@commercetools-uikit/filters-list'; - -/**TODO: EXPAND THIS */ -const Example = () => ; - -export default Example; diff --git a/packages/components/filters/filters-list/src/export-types.ts b/packages/components/filters/filters-list/src/export-types.ts deleted file mode 100644 index 88226c514d..0000000000 --- a/packages/components/filters/filters-list/src/export-types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { TFiltersListProps } from './filters-list'; diff --git a/packages/components/filters/filters-list/src/filters-list.stories.tsx b/packages/components/filters/filters-list/src/filters-list.stories.tsx deleted file mode 100644 index 7aa0a77695..0000000000 --- a/packages/components/filters/filters-list/src/filters-list.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import FiltersList from './filters-list'; - -const meta: Meta = { - title: 'components/Filters/FiltersList', - component: FiltersList, - tags: ['local-dev'], - argTypes: { - label: { - control: 'text', - }, - }, -}; -export default meta; - -type Story = StoryObj; - -export const BasicExample: Story = { - args: { - label: 'A list of filters', - }, -}; diff --git a/packages/components/filters/filters-list/src/filters-list.tsx b/packages/components/filters/filters-list/src/filters-list.tsx deleted file mode 100644 index 0d57a3498f..0000000000 --- a/packages/components/filters/filters-list/src/filters-list.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export type TFiltersListProps = { - /** - * This is a stub prop - */ - label?: string; -}; - -function FiltersList(props: TFiltersListProps) { - return
{props.label}
; -} -export default FiltersList; diff --git a/packages/components/filters/filter-menu/index.ts b/packages/components/filters/index.ts similarity index 100% rename from packages/components/filters/filter-menu/index.ts rename to packages/components/filters/index.ts diff --git a/packages/components/filters/filter-menu/package.json b/packages/components/filters/package.json similarity index 69% rename from packages/components/filters/filter-menu/package.json rename to packages/components/filters/package.json index 81b98ae157..d57582c231 100644 --- a/packages/components/filters/filter-menu/package.json +++ b/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", diff --git a/packages/components/filters/filter-menu/src/badge/badge.spec.tsx b/packages/components/filters/src/badge/badge.spec.tsx similarity index 77% rename from packages/components/filters/filter-menu/src/badge/badge.spec.tsx rename to packages/components/filters/src/badge/badge.spec.tsx index bea614b3e1..d388a02bb8 100644 --- a/packages/components/filters/filter-menu/src/badge/badge.spec.tsx +++ b/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'; /** diff --git a/packages/components/filters/filter-menu/src/badge/badge.tsx b/packages/components/filters/src/badge/badge.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/badge/badge.tsx rename to packages/components/filters/src/badge/badge.tsx diff --git a/packages/components/filters/filter-menu/src/badge/index.ts b/packages/components/filters/src/badge/index.ts similarity index 100% rename from packages/components/filters/filter-menu/src/badge/index.ts rename to packages/components/filters/src/badge/index.ts diff --git a/packages/components/filters/src/export-types.ts b/packages/components/filters/src/export-types.ts new file mode 100644 index 0000000000..80de366422 --- /dev/null +++ b/packages/components/filters/src/export-types.ts @@ -0,0 +1 @@ +export type { TFiltersProps } from './filters'; diff --git a/packages/components/filters/filter-menu/src/chip/chip.spec.tsx b/packages/components/filters/src/filter-menu/chip/chip.spec.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/chip/chip.spec.tsx rename to packages/components/filters/src/filter-menu/chip/chip.spec.tsx diff --git a/packages/components/filters/filter-menu/src/chip/chip.tsx b/packages/components/filters/src/filter-menu/chip/chip.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/chip/chip.tsx rename to packages/components/filters/src/filter-menu/chip/chip.tsx diff --git a/packages/components/filters/filter-menu/src/chip/index.ts b/packages/components/filters/src/filter-menu/chip/index.ts similarity index 100% rename from packages/components/filters/filter-menu/src/chip/index.ts rename to packages/components/filters/src/filter-menu/chip/index.ts diff --git a/packages/components/filters/filter-menu/src/filter-menu.spec.tsx b/packages/components/filters/src/filter-menu/filter-menu.spec.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/filter-menu.spec.tsx rename to packages/components/filters/src/filter-menu/filter-menu.spec.tsx diff --git a/packages/components/filters/filter-menu/src/filter-menu.tsx b/packages/components/filters/src/filter-menu/filter-menu.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/filter-menu.tsx rename to packages/components/filters/src/filter-menu/filter-menu.tsx diff --git a/packages/components/filters/filter-menu/src/footer/footer.spec.tsx b/packages/components/filters/src/filter-menu/footer/footer.spec.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/footer/footer.spec.tsx rename to packages/components/filters/src/filter-menu/footer/footer.spec.tsx diff --git a/packages/components/filters/filter-menu/src/footer/footer.tsx b/packages/components/filters/src/filter-menu/footer/footer.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/footer/footer.tsx rename to packages/components/filters/src/filter-menu/footer/footer.tsx diff --git a/packages/components/filters/filter-menu/src/footer/index.ts b/packages/components/filters/src/filter-menu/footer/index.ts similarity index 100% rename from packages/components/filters/filter-menu/src/footer/index.ts rename to packages/components/filters/src/filter-menu/footer/index.ts diff --git a/packages/components/filters/filter-menu/src/header/header.spec.tsx b/packages/components/filters/src/filter-menu/header/header.spec.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/header/header.spec.tsx rename to packages/components/filters/src/filter-menu/header/header.spec.tsx diff --git a/packages/components/filters/filter-menu/src/header/header.tsx b/packages/components/filters/src/filter-menu/header/header.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/header/header.tsx rename to packages/components/filters/src/filter-menu/header/header.tsx diff --git a/packages/components/filters/filter-menu/src/header/index.ts b/packages/components/filters/src/filter-menu/header/index.ts similarity index 100% rename from packages/components/filters/filter-menu/src/header/index.ts rename to packages/components/filters/src/filter-menu/header/index.ts diff --git a/packages/components/filters/src/filter-menu/index.ts b/packages/components/filters/src/filter-menu/index.ts new file mode 100644 index 0000000000..88d28ae246 --- /dev/null +++ b/packages/components/filters/src/filter-menu/index.ts @@ -0,0 +1 @@ +export { default } from './filter-menu'; diff --git a/packages/components/filters/filter-menu/src/trigger-button/index.ts b/packages/components/filters/src/filter-menu/trigger-button/index.ts similarity index 100% rename from packages/components/filters/filter-menu/src/trigger-button/index.ts rename to packages/components/filters/src/filter-menu/trigger-button/index.ts diff --git a/packages/components/filters/filter-menu/src/trigger-button/trigger-button.spec.tsx b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.spec.tsx similarity index 100% rename from packages/components/filters/filter-menu/src/trigger-button/trigger-button.spec.tsx rename to packages/components/filters/src/filter-menu/trigger-button/trigger-button.spec.tsx diff --git a/packages/components/filters/filter-menu/src/trigger-button/trigger-button.tsx b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx similarity index 89% rename from packages/components/filters/filter-menu/src/trigger-button/trigger-button.tsx rename to packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx index 9fdd4ae42c..12edde01e4 100644 --- a/packages/components/filters/filter-menu/src/trigger-button/trigger-button.tsx +++ b/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 = { diff --git a/packages/components/filters/filter-menu/src/filter-menu.readme.mdx b/packages/components/filters/src/filters.readme.mdx similarity index 62% rename from packages/components/filters/filter-menu/src/filter-menu.readme.mdx rename to packages/components/filters/src/filters.readme.mdx index 4bb67a431e..483ebc3a21 100644 --- a/packages/components/filters/filter-menu/src/filter-menu.readme.mdx +++ b/packages/components/filters/src/filters.readme.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/blocks'; import ReadMe from './../README.md?raw' - + {ReadMe} diff --git a/packages/components/filters/filters-list/src/filters-list.spec.tsx b/packages/components/filters/src/filters.spec.tsx similarity index 55% rename from packages/components/filters/filters-list/src/filters-list.spec.tsx rename to packages/components/filters/src/filters.spec.tsx index a437b3dd4d..8a86367fde 100644 --- a/packages/components/filters/filters-list/src/filters-list.spec.tsx +++ b/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(); + await render(); await screen.findByText('filters list'); }); }); diff --git a/packages/components/filters/src/filters.stories.tsx b/packages/components/filters/src/filters.stories.tsx new file mode 100644 index 0000000000..6ecb3decb3 --- /dev/null +++ b/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 = { + title: 'components/Filters', + component: Filters, + tags: ['local-dev'], + argTypes: { + label: { + control: 'text', + }, + }, +}; +export default meta; + +type Story = StoryObj; + +export const BasicExample: Story = { + args: { + label: 'A component for applying multiple filter controls', + }, +}; diff --git a/packages/components/filters/src/filters.tsx b/packages/components/filters/src/filters.tsx new file mode 100644 index 0000000000..ae3fe8fdea --- /dev/null +++ b/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
{props.label}
; +} +export default Filters; diff --git a/packages/components/filters/filter-menu/src/filter-menu.visualroute.jsx b/packages/components/filters/src/filters.visualroute.jsx similarity index 60% rename from packages/components/filters/filter-menu/src/filter-menu.visualroute.jsx rename to packages/components/filters/src/filters.visualroute.jsx index 3b948ff0c4..35d0478b97 100644 --- a/packages/components/filters/filter-menu/src/filter-menu.visualroute.jsx +++ b/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 = () => ( diff --git a/packages/components/filters/filters-list/src/filters-list.visualspec.js b/packages/components/filters/src/filters.visualspec.js similarity index 81% rename from packages/components/filters/filters-list/src/filters-list.visualspec.js rename to packages/components/filters/src/filters.visualspec.js index 49b5ab525f..24cd722f0a 100644 --- a/packages/components/filters/filters-list/src/filters-list.visualspec.js +++ b/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 () => { diff --git a/packages/components/filters/filter-menu/src/index.ts b/packages/components/filters/src/index.ts similarity index 53% rename from packages/components/filters/filter-menu/src/index.ts rename to packages/components/filters/src/index.ts index 4db1cb5703..1ad0dabbab 100644 --- a/packages/components/filters/filter-menu/src/index.ts +++ b/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'; diff --git a/packages/components/filters/filter-menu/src/version.ts b/packages/components/filters/src/version.ts similarity index 100% rename from packages/components/filters/filter-menu/src/version.ts rename to packages/components/filters/src/version.ts diff --git a/packages/components/filters/filter-menu/LICENSE b/packages/components/quick-filters/LICENSE similarity index 99% rename from packages/components/filters/filter-menu/LICENSE rename to packages/components/quick-filters/LICENSE index cdf0ab5ed5..a1f9136d89 100644 --- a/packages/components/filters/filter-menu/LICENSE +++ b/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. \ No newline at end of file +SOFTWARE. diff --git a/packages/components/quick-filters/README.md b/packages/components/quick-filters/README.md new file mode 100644 index 0000000000..0c7990a60d --- /dev/null +++ b/packages/components/quick-filters/README.md @@ -0,0 +1,47 @@ + + + +# 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 = () => ; + +export default Example; +``` + +## Properties + +| Props | Type | Required | Default | Description | +| ------- | -------- | :------: | ------- | -------------------- | +| `label` | `string` | ✅ | | This is a stub prop! | diff --git a/packages/components/quick-filters/docs/description.md b/packages/components/quick-filters/docs/description.md new file mode 100644 index 0000000000..80cb874bc0 --- /dev/null +++ b/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. diff --git a/packages/components/quick-filters/docs/usage-example.js b/packages/components/quick-filters/docs/usage-example.js new file mode 100644 index 0000000000..c7ea15221d --- /dev/null +++ b/packages/components/quick-filters/docs/usage-example.js @@ -0,0 +1,6 @@ +import QuickFilters from '@commercetools-uikit/quick-filters'; + +/**TODO: EXPAND THIS */ +const Example = () => ; + +export default Example; diff --git a/packages/components/filters/filters-list/index.ts b/packages/components/quick-filters/index.ts similarity index 100% rename from packages/components/filters/filters-list/index.ts rename to packages/components/quick-filters/index.ts diff --git a/packages/components/filters/filters-list/package.json b/packages/components/quick-filters/package.json similarity index 71% rename from packages/components/filters/filters-list/package.json rename to packages/components/quick-filters/package.json index dbe955932c..ff1b9bccaf 100644 --- a/packages/components/filters/filters-list/package.json +++ b/packages/components/quick-filters/package.json @@ -1,12 +1,12 @@ { - "name": "@commercetools-uikit/filters-list", - "description": "The `FiltersList` displays all active filters.", + "name": "@commercetools-uikit/quick-filters", + "description": "The `QuickFilters` 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/filters-list" + "directory": "packages/components/quick-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-filters-list.cjs.js", - "module": "dist/commercetools-uikit-filters-list.esm.js", + "main": "dist/commercetools-uikit-quick-filters.cjs.js", + "module": "dist/commercetools-uikit-quick-filters.esm.js", "files": ["dist"], "dependencies": { "@babel/runtime": "^7.20.13", diff --git a/packages/components/quick-filters/src/export-types.ts b/packages/components/quick-filters/src/export-types.ts new file mode 100644 index 0000000000..6438458fe8 --- /dev/null +++ b/packages/components/quick-filters/src/export-types.ts @@ -0,0 +1 @@ +export type { TQuickFiltersProps } from './quick-filters'; diff --git a/packages/components/filters/filters-list/src/index.ts b/packages/components/quick-filters/src/index.ts similarity index 52% rename from packages/components/filters/filters-list/src/index.ts rename to packages/components/quick-filters/src/index.ts index 3ed39b7405..a199df6fb3 100644 --- a/packages/components/filters/filters-list/src/index.ts +++ b/packages/components/quick-filters/src/index.ts @@ -1,2 +1,2 @@ -export { default } from './filters-list'; +export { default } from './quick-filters'; export { default as version } from './version'; diff --git a/packages/components/filters/filters-list/src/filters-list.readme.mdx b/packages/components/quick-filters/src/quick-filters.readme.mdx similarity index 62% rename from packages/components/filters/filters-list/src/filters-list.readme.mdx rename to packages/components/quick-filters/src/quick-filters.readme.mdx index 346090b28e..88ce506a15 100644 --- a/packages/components/filters/filters-list/src/filters-list.readme.mdx +++ b/packages/components/quick-filters/src/quick-filters.readme.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/blocks'; import ReadMe from './../README.md?raw' - + {ReadMe} diff --git a/packages/components/quick-filters/src/quick-filters.spec.tsx b/packages/components/quick-filters/src/quick-filters.spec.tsx new file mode 100644 index 0000000000..456c7a5536 --- /dev/null +++ b/packages/components/quick-filters/src/quick-filters.spec.tsx @@ -0,0 +1,12 @@ +import { screen, render } from '../../../../test/test-utils'; +import QuickFilters from './quick-filters'; + +/** + * THIS IS A PLACEHOLDER, PLEASE UPDATE IT + */ +describe('QuickFilters', () => { + it('should render the quick-filters', async () => { + await render(); + await screen.findByText('quickfilters'); + }); +}); diff --git a/packages/components/quick-filters/src/quick-filters.stories.tsx b/packages/components/quick-filters/src/quick-filters.stories.tsx new file mode 100644 index 0000000000..5b59f011a1 --- /dev/null +++ b/packages/components/quick-filters/src/quick-filters.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import QuickFilters from './quick-filters'; + +const meta: Meta = { + title: 'components/QuickFilters', + component: QuickFilters, + tags: ['local-dev'], + argTypes: { + label: { + control: 'text', + }, + }, +}; +export default meta; + +type Story = StoryObj; + +export const BasicExample: Story = { + args: { + label: 'A component for applying static filter controls', + }, +}; diff --git a/packages/components/quick-filters/src/quick-filters.tsx b/packages/components/quick-filters/src/quick-filters.tsx new file mode 100644 index 0000000000..91e0e40882 --- /dev/null +++ b/packages/components/quick-filters/src/quick-filters.tsx @@ -0,0 +1,12 @@ +export type TQuickFiltersProps = { + /** + * This is a stub prop! + */ + label: string; +}; + +function QuickFilters(props: TQuickFiltersProps) { + return
{props.label}
; +} + +export default QuickFilters; diff --git a/packages/components/filters/filters-list/src/filters-list.visualroute.jsx b/packages/components/quick-filters/src/quick-filters.visualroute.jsx similarity index 60% rename from packages/components/filters/filters-list/src/filters-list.visualroute.jsx rename to packages/components/quick-filters/src/quick-filters.visualroute.jsx index 3961bd048f..2727b1e430 100644 --- a/packages/components/filters/filters-list/src/filters-list.visualroute.jsx +++ b/packages/components/quick-filters/src/quick-filters.visualroute.jsx @@ -1,6 +1,6 @@ -import { Suite, Spec } from '../../../../../test/percy'; +import { Suite, Spec } from '../../../../test/percy'; -export const routePath = '/filters-list'; +export const routePath = '/quick-filters'; export const component = () => ( diff --git a/packages/components/filters/filter-menu/src/filter-menu.visualspec.js b/packages/components/quick-filters/src/quick-filters.visualspec.js similarity index 70% rename from packages/components/filters/filter-menu/src/filter-menu.visualspec.js rename to packages/components/quick-filters/src/quick-filters.visualspec.js index c51426bc14..f86dac56fa 100644 --- a/packages/components/filters/filter-menu/src/filter-menu.visualspec.js +++ b/packages/components/quick-filters/src/quick-filters.visualspec.js @@ -1,9 +1,9 @@ import percySnapshot from '@percy/puppeteer'; import { getDocument, queries } from 'pptr-testing-library'; -describe('FilterMenu', () => { +describe('FiltersList', () => { beforeAll(async () => { - await page.goto(`${globalThis.HOST}/filter-menu`); + await page.goto(`${globalThis.HOST}/quick-filters`); }); it.skip('Default', async () => { diff --git a/packages/components/filters/filters-list/src/version.ts b/packages/components/quick-filters/src/version.ts similarity index 100% rename from packages/components/filters/filters-list/src/version.ts rename to packages/components/quick-filters/src/version.ts diff --git a/yarn.lock b/yarn.lock index b57131adce..876484a61d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3062,9 +3062,9 @@ __metadata: languageName: unknown linkType: soft -"@commercetools-uikit/filter-menu@workspace:packages/components/filters/filter-menu": +"@commercetools-uikit/filters@workspace:packages/components/filters": version: 0.0.0-use.local - resolution: "@commercetools-uikit/filter-menu@workspace:packages/components/filters/filter-menu" + resolution: "@commercetools-uikit/filters@workspace:packages/components/filters" dependencies: "@babel/runtime": ^7.20.13 "@babel/runtime-corejs3": ^7.20.13 @@ -3079,22 +3079,6 @@ __metadata: languageName: unknown linkType: soft -"@commercetools-uikit/filters-list@workspace:packages/components/filters/filters-list": - version: 0.0.0-use.local - resolution: "@commercetools-uikit/filters-list@workspace:packages/components/filters/filters-list" - dependencies: - "@babel/runtime": ^7.20.13 - "@babel/runtime-corejs3": ^7.20.13 - "@emotion/react": ^11.10.5 - "@emotion/styled": ^11.10.5 - prop-types: 15.8.1 - react: 17.0.2 - react-intl: ^6.3.2 - peerDependencies: - react: 17.x - languageName: unknown - linkType: soft - "@commercetools-uikit/flat-button@19.11.0, @commercetools-uikit/flat-button@workspace:packages/components/buttons/flat-button": version: 0.0.0-use.local resolution: "@commercetools-uikit/flat-button@workspace:packages/components/buttons/flat-button" @@ -3882,6 +3866,22 @@ __metadata: languageName: unknown linkType: soft +"@commercetools-uikit/quick-filters@workspace:packages/components/quick-filters": + version: 0.0.0-use.local + resolution: "@commercetools-uikit/quick-filters@workspace:packages/components/quick-filters" + dependencies: + "@babel/runtime": ^7.20.13 + "@babel/runtime-corejs3": ^7.20.13 + "@emotion/react": ^11.10.5 + "@emotion/styled": ^11.10.5 + prop-types: 15.8.1 + react: 17.0.2 + react-intl: ^6.3.2 + peerDependencies: + react: 17.x + languageName: unknown + linkType: soft + "@commercetools-uikit/radio-field@19.11.0, @commercetools-uikit/radio-field@workspace:packages/components/fields/radio-field": version: 0.0.0-use.local resolution: "@commercetools-uikit/radio-field@workspace:packages/components/fields/radio-field"