diff --git a/components/tools/FiltersDropdown.stories.tsx b/components/tools/FiltersDropdown.stories.tsx new file mode 100644 index 000000000000..3b586c39b9a5 --- /dev/null +++ b/components/tools/FiltersDropdown.stories.tsx @@ -0,0 +1,75 @@ +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; + +import type { Language, Technology } from '@/types/components/tools/ToolDataType'; + +import tags from '../../config/all-tags.json'; +import FiltersDropdown from './FiltersDropdown'; + +const meta: Meta = { + title: 'Components/FiltersDropdown', + component: FiltersDropdown, + argTypes: { + dataList: { + control: false + }, + checkedOptions: { + control: { + type: 'object' + } + }, + setCheckedOptions: { + control: false + } + } +}; + +export default meta; + +type Story = StoryObj; + +const Dropdown: Story = { + args: { + checkedOptions: [] + }, + + render: (args) => { + const [{ checkedOptions }, updateArgs] = useArgs(); + + const setCheckedOptions: React.Dispatch> = (newValue) => { + if (typeof newValue === 'function') { + const updatedValue = (newValue as (prevState: string[]) => string[])(checkedOptions); + + updateArgs({ checkedOptions: updatedValue }); + } else { + updateArgs({ checkedOptions: newValue }); + } + }; + + return ; + } +}; + +const languageList = tags.languages as Language[]; + +export const LanguageDropdown: Story = { + ...Dropdown, + + args: { + ...Dropdown.args, + dataList: languageList, + checkedOptions: [] + } +}; + +const technologyList = tags.technologies as Technology[]; + +export const TechnologyDropdown: Story = { + ...Dropdown, + + args: { + ...Dropdown.args, + dataList: technologyList, + checkedOptions: [] + } +}; diff --git a/components/tools/FiltersDropdown.tsx b/components/tools/FiltersDropdown.tsx index beb68e81eb5a..9c2bc3f1094b 100644 --- a/components/tools/FiltersDropdown.tsx +++ b/components/tools/FiltersDropdown.tsx @@ -2,11 +2,9 @@ import { twMerge } from 'tailwind-merge'; import type { Category, Language, Technology } from '@/types/components/tools/ToolDataType'; -import Checkbox from './Checkbox'; - type DataList = Language[] | Technology[] | Category[]; -interface FiltersDropdownProps { +export interface FiltersDropdownProps { dataList?: DataList; checkedOptions?: string[]; setCheckedOptions: React.Dispatch>; @@ -27,7 +25,7 @@ export default function FiltersDropdown({ setCheckedOptions, className = '' }: FiltersDropdownProps) { - const handleClickOption = (option: string) => { + const handleClickOption = (event: React.MouseEvent, option: string) => { const isChecked = checkedOptions.includes(option); const updatedOptions = isChecked ? checkedOptions.filter((item) => item !== option) : [...checkedOptions, option]; @@ -36,13 +34,30 @@ export default function FiltersDropdown({ return (
{dataList.map((data, index) => { const checked = checkedOptions.includes(data.name); - return ; + return ( +
handleClickOption(event, data.name)} + > + {checked ? ( + checked + ) : ( + unchecked + )} +
{data.name}
+
+ ); })}
); diff --git a/package-lock.json b/package-lock.json index 376d20951273..1716e954afd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@next/mdx": "^14.1.0", "@octokit/graphql": "^7.0.2", "@slack/web-api": "^7.0.2", + "@storybook/addons": "^7.6.17", "@storybook/preview-api": "^8.2.2", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.7", @@ -2457,6 +2458,15 @@ "tslib": "^2.4.0" } }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -6431,6 +6441,93 @@ "storybook": "^8.2.9" } }, + "node_modules/@storybook/addons": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.6.17.tgz", + "integrity": "sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==", + "license": "MIT", + "dependencies": { + "@storybook/manager-api": "7.6.17", + "@storybook/preview-api": "7.6.17", + "@storybook/types": "7.6.17" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addons/node_modules/@storybook/manager-api": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.17.tgz", + "integrity": "sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==", + "license": "MIT", + "dependencies": { + "@storybook/channels": "7.6.17", + "@storybook/client-logger": "7.6.17", + "@storybook/core-events": "7.6.17", + "@storybook/csf": "^0.1.2", + "@storybook/global": "^5.0.0", + "@storybook/router": "7.6.17", + "@storybook/theming": "7.6.17", + "@storybook/types": "7.6.17", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "store2": "^2.14.2", + "telejson": "^7.2.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addons/node_modules/@storybook/preview-api": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.17.tgz", + "integrity": "sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==", + "license": "MIT", + "dependencies": { + "@storybook/channels": "7.6.17", + "@storybook/client-logger": "7.6.17", + "@storybook/core-events": "7.6.17", + "@storybook/csf": "^0.1.2", + "@storybook/global": "^5.0.0", + "@storybook/types": "7.6.17", + "@types/qs": "^6.9.5", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addons/node_modules/@storybook/theming": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.17.tgz", + "integrity": "sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==", + "license": "MIT", + "dependencies": { + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@storybook/client-logger": "7.6.17", + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@storybook/blocks": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.2.9.tgz", @@ -6540,6 +6637,37 @@ "node": ">=14.14" } }, + "node_modules/@storybook/channels": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.17.tgz", + "integrity": "sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==", + "license": "MIT", + "dependencies": { + "@storybook/client-logger": "7.6.17", + "@storybook/core-events": "7.6.17", + "@storybook/global": "^5.0.0", + "qs": "^6.10.0", + "telejson": "^7.2.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/client-logger": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.17.tgz", + "integrity": "sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==", + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/codemod": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.9.tgz", @@ -6640,6 +6768,19 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/core-events": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.17.tgz", + "integrity": "sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==", + "license": "MIT", + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/core-webpack": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.2.9.tgz", @@ -6701,8 +6842,7 @@ "node_modules/@storybook/global": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz", - "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==", - "dev": true + "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==" }, "node_modules/@storybook/icons": { "version": "1.2.10", @@ -7012,6 +7152,21 @@ "undici-types": "~5.26.4" } }, + "node_modules/@storybook/router": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.17.tgz", + "integrity": "sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==", + "license": "MIT", + "dependencies": { + "@storybook/client-logger": "7.6.17", + "memoizerific": "^1.11.3", + "qs": "^6.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/test": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.9.tgz", @@ -7048,6 +7203,22 @@ "storybook": "^8.2.9" } }, + "node_modules/@storybook/types": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.17.tgz", + "integrity": "sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==", + "license": "MIT", + "dependencies": { + "@storybook/channels": "7.6.17", + "@types/babel__core": "^7.0.0", + "@types/express": "^4.7.0", + "file-system-cache": "2.3.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", @@ -7243,7 +7414,6 @@ "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", - "dev": true, "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", @@ -7256,7 +7426,6 @@ "version": "7.6.8", "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", - "dev": true, "dependencies": { "@babel/types": "^7.0.0" } @@ -7265,7 +7434,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", - "dev": true, "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" @@ -7275,7 +7443,6 @@ "version": "7.20.6", "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz", "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==", - "dev": true, "dependencies": { "@babel/types": "^7.20.7" } @@ -13984,6 +14151,30 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-system-cache": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz", + "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==", + "license": "MIT", + "dependencies": { + "fs-extra": "11.1.1", + "ramda": "0.29.0" + } + }, + "node_modules/file-system-cache/node_modules/fs-extra": { + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, "node_modules/filesize": { "version": "10.1.2", "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.2.tgz", @@ -18269,8 +18460,7 @@ "node_modules/map-or-similar": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz", - "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==", - "dev": true + "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==" }, "node_modules/markdown-extensions": { "version": "2.0.0", @@ -19875,7 +20065,6 @@ "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==", - "dev": true, "dependencies": { "map-or-similar": "^1.5.0" } @@ -24591,6 +24780,16 @@ "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==", "dev": true }, + "node_modules/ramda": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz", + "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ramda" + } + }, "node_modules/randomatic": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz", @@ -27045,6 +27244,12 @@ "node": ">= 0.4" } }, + "node_modules/store2": { + "version": "2.14.3", + "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz", + "integrity": "sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==", + "license": "MIT" + }, "node_modules/storybook": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.9.tgz", @@ -27876,6 +28081,12 @@ "node": ">= 4.7.0" } }, + "node_modules/synchronous-promise": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz", + "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==", + "license": "BSD-3-Clause" + }, "node_modules/synckit": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.0.tgz", @@ -28104,7 +28315,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz", "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==", - "dev": true, "dependencies": { "memoizerific": "^1.11.3" } diff --git a/package.json b/package.json index 04ba37b586eb..55b340381e26 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@next/mdx": "^14.1.0", "@octokit/graphql": "^7.0.2", "@slack/web-api": "^7.0.2", + "@storybook/addons": "^7.6.17", "@storybook/preview-api": "^8.2.2", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.7", diff --git a/public/img/illustrations/icons/CheckedIcon.svg b/public/img/illustrations/icons/CheckedIcon.svg index 591b807daf7b..50697b1ac6e9 100644 --- a/public/img/illustrations/icons/CheckedIcon.svg +++ b/public/img/illustrations/icons/CheckedIcon.svg @@ -2,7 +2,7 @@ - + diff --git a/public/img/illustrations/icons/UncheckedIcon.svg b/public/img/illustrations/icons/UncheckedIcon.svg index d57fb6e3885b..57d4281a6c90 100644 --- a/public/img/illustrations/icons/UncheckedIcon.svg +++ b/public/img/illustrations/icons/UncheckedIcon.svg @@ -1,3 +1,3 @@ - +