diff --git a/package.json b/package.json index 4c9c2378c1..020540c476 100644 --- a/package.json +++ b/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/*" diff --git a/packages/components/filters/filter-menu/LICENSE b/packages/components/filters/filter-menu/LICENSE new file mode 100644 index 0000000000..cdf0ab5ed5 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/packages/components/filters/filter-menu/README.md b/packages/components/filters/filter-menu/README.md new file mode 100644 index 0000000000..44f82a1a61 --- /dev/null +++ b/packages/components/filters/filter-menu/README.md @@ -0,0 +1,49 @@ + + + +# 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 new file mode 100644 index 0000000000..60e70db96e --- /dev/null +++ b/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. diff --git a/packages/components/filters/filter-menu/docs/usage-example.js b/packages/components/filters/filter-menu/docs/usage-example.js new file mode 100644 index 0000000000..9a0d4340d0 --- /dev/null +++ b/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 = () => ; + +export default Example; diff --git a/packages/components/filters/filter-menu/index.ts b/packages/components/filters/filter-menu/index.ts new file mode 100644 index 0000000000..2e6947f31a --- /dev/null +++ b/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'; diff --git a/packages/components/filters/filter-menu/package.json b/packages/components/filters/filter-menu/package.json new file mode 100644 index 0000000000..81b98ae157 --- /dev/null +++ b/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" + } +} diff --git a/packages/components/filters/filter-menu/src/badge/badge.spec.tsx b/packages/components/filters/filter-menu/src/badge/badge.spec.tsx new file mode 100644 index 0000000000..bea614b3e1 --- /dev/null +++ b/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(); + await screen.findByText('badge'); + }); +}); diff --git a/packages/components/filters/filter-menu/src/badge/badge.tsx b/packages/components/filters/filter-menu/src/badge/badge.tsx new file mode 100644 index 0000000000..8001f5f052 --- /dev/null +++ b/packages/components/filters/filter-menu/src/badge/badge.tsx @@ -0,0 +1,5 @@ +function Badge() { + return
badge
; +} + +export default Badge; diff --git a/packages/components/filters/filter-menu/src/badge/index.ts b/packages/components/filters/filter-menu/src/badge/index.ts new file mode 100644 index 0000000000..7c74794fdd --- /dev/null +++ b/packages/components/filters/filter-menu/src/badge/index.ts @@ -0,0 +1 @@ +export { default as Badge } from './badge'; diff --git a/packages/components/filters/filter-menu/src/chip/chip.spec.tsx b/packages/components/filters/filter-menu/src/chip/chip.spec.tsx new file mode 100644 index 0000000000..b2701dde41 --- /dev/null +++ b/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(); + await screen.findByText('chip'); + }); +}); diff --git a/packages/components/filters/filter-menu/src/chip/chip.tsx b/packages/components/filters/filter-menu/src/chip/chip.tsx new file mode 100644 index 0000000000..0983398fdc --- /dev/null +++ b/packages/components/filters/filter-menu/src/chip/chip.tsx @@ -0,0 +1,5 @@ +function Chip() { + return
chip
; +} + +export default Chip; diff --git a/packages/components/filters/filter-menu/src/chip/index.ts b/packages/components/filters/filter-menu/src/chip/index.ts new file mode 100644 index 0000000000..458f31eb08 --- /dev/null +++ b/packages/components/filters/filter-menu/src/chip/index.ts @@ -0,0 +1 @@ +export { default as Chip } from './chip'; diff --git a/packages/components/filters/filter-menu/src/export-types.ts b/packages/components/filters/filter-menu/src/export-types.ts new file mode 100644 index 0000000000..6cea38eeec --- /dev/null +++ b/packages/components/filters/filter-menu/src/export-types.ts @@ -0,0 +1 @@ +export type { TFilterMenuProps } from './filter-menu'; diff --git a/packages/components/filters/filter-menu/src/filter-menu.readme.mdx b/packages/components/filters/filter-menu/src/filter-menu.readme.mdx new file mode 100644 index 0000000000..4bb67a431e --- /dev/null +++ b/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' + + + +{ReadMe} diff --git a/packages/components/filters/filter-menu/src/filter-menu.spec.tsx b/packages/components/filters/filter-menu/src/filter-menu.spec.tsx new file mode 100644 index 0000000000..463b48a90e --- /dev/null +++ b/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(); + await screen.findByText('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 new file mode 100644 index 0000000000..833d9693a7 --- /dev/null +++ b/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 = { + 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/filter-menu/src/filter-menu.tsx b/packages/components/filters/filter-menu/src/filter-menu.tsx new file mode 100644 index 0000000000..806723e49b --- /dev/null +++ b/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 ( + }> +
+