From 8910df9501afd38cd9467990f46a17147799ed3a Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Fri, 28 Oct 2022 13:00:59 +0100 Subject: [PATCH 1/5] in progress --- .../components/RepoFilter/RepoFilter.store.js | 17 +++++++++++++++++ .../src/components/RepoFilter/index.jsx | 7 +++++++ 2 files changed, 24 insertions(+) create mode 100644 solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js create mode 100644 solidjs-tailwind/src/components/RepoFilter/index.jsx diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js new file mode 100644 index 000000000..be64090de --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js @@ -0,0 +1,17 @@ +import { createSignal } from "solid-js"; + +const [search, setSearch] = createSignal(''); +const [language, setLanguage] = createSignal(''); +const [sortBy, setSortBy] = createSignal(''); +const [sortType, setSortType] = createSignal(''); + +export { + search, + language, + sortBy, + sortType, + setSearch, + setLanguage, + setSortBy, + setSortType +} diff --git a/solidjs-tailwind/src/components/RepoFilter/index.jsx b/solidjs-tailwind/src/components/RepoFilter/index.jsx new file mode 100644 index 000000000..675dcd90d --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/index.jsx @@ -0,0 +1,7 @@ +export const RepoFilter = () => { + return ( +
+

Coming soon!!

+
+ ) +} From dcfb38c6e7affbe7cb01202172b1f105a554b0c7 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Mon, 31 Oct 2022 08:47:25 +0100 Subject: [PATCH 2/5] in progress --- .../RepoFilter/RepoFIlter.stories.jsx | 10 ++++++++++ .../src/components/RepoFilter/SearchInput.jsx | 18 ++++++++++++++++++ .../src/components/RepoFilter/index.jsx | 11 ++++++++--- 3 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx create mode 100644 solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx new file mode 100644 index 000000000..81ebaa164 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx @@ -0,0 +1,10 @@ +import { RepoFilter } from '.' + +export default { + title: "components/ Repo filter", + argTypes: {}, +} + +const Template = (args) => ; + +export const Default = Template.bind({}); diff --git a/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx b/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx new file mode 100644 index 000000000..28e61fc92 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx @@ -0,0 +1,18 @@ +import { setSearch } from './RepoFilter.store'; + +const SearchInput = () => { + const handleChange = (e) => { + setSearch(e.target.value); + }; + return ( + + ); +} + +export default SearchInput; diff --git a/solidjs-tailwind/src/components/RepoFilter/index.jsx b/solidjs-tailwind/src/components/RepoFilter/index.jsx index 675dcd90d..581ca19e7 100644 --- a/solidjs-tailwind/src/components/RepoFilter/index.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/index.jsx @@ -1,7 +1,12 @@ +import SearchInput from "./SearchInput" + export const RepoFilter = () => { return ( -
-

Coming soon!!

+
+
+ +
+
- ) + ); } From 4946694e38db090defa7e336e1f2c09670466e77 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Mon, 31 Oct 2022 11:44:25 +0100 Subject: [PATCH 3/5] in progress, paused for now --- .../components/RepoFilter/FilterDropdown.jsx | 93 +++++++++++++++++++ .../RepoFilter/RepoFIlter.stories.jsx | 2 +- .../src/components/RepoFilter/RepoFilter.jsx | 17 ++++ .../src/components/RepoFilter/index.js | 1 + .../src/components/RepoFilter/index.jsx | 12 --- solidjs-tailwind/src/components/index.js | 1 + 6 files changed, 113 insertions(+), 13 deletions(-) create mode 100644 solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx create mode 100644 solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx create mode 100644 solidjs-tailwind/src/components/RepoFilter/index.js delete mode 100644 solidjs-tailwind/src/components/RepoFilter/index.jsx diff --git a/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx new file mode 100644 index 000000000..200f07fc7 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx @@ -0,0 +1,93 @@ +import { createSignal, Show } from "solid-js"; + +const FilterDropdown = () => { + const [showOptions, setShowOptions] = createSignal(false); + const toggleOption = () => setShowOptions(!showOptions()); + + return ( +
+
+ +
+ + + +
+ ); +} + +export default FilterDropdown; diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx index 81ebaa164..2054e4865 100644 --- a/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx @@ -1,4 +1,4 @@ -import { RepoFilter } from '.' +import RepoFilter from './RepoFilter'; export default { title: "components/ Repo filter", diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx new file mode 100644 index 000000000..973e65dd7 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx @@ -0,0 +1,17 @@ +import FilterDropdown from "./FilterDropdown"; +import SearchInput from "./SearchInput" + +const RepoFilter = () => { + return ( +
+
+ +
+
+ +
+
+ ); +} + +export default RepoFilter; diff --git a/solidjs-tailwind/src/components/RepoFilter/index.js b/solidjs-tailwind/src/components/RepoFilter/index.js new file mode 100644 index 000000000..9a44c4a3d --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/index.js @@ -0,0 +1 @@ +export { default as RepoFilter } from './RepoFilter'; diff --git a/solidjs-tailwind/src/components/RepoFilter/index.jsx b/solidjs-tailwind/src/components/RepoFilter/index.jsx deleted file mode 100644 index 581ca19e7..000000000 --- a/solidjs-tailwind/src/components/RepoFilter/index.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import SearchInput from "./SearchInput" - -export const RepoFilter = () => { - return ( -
-
- -
-
-
- ); -} diff --git a/solidjs-tailwind/src/components/index.js b/solidjs-tailwind/src/components/index.js index 8b537425d..60f343e25 100644 --- a/solidjs-tailwind/src/components/index.js +++ b/solidjs-tailwind/src/components/index.js @@ -1,4 +1,5 @@ export * from './CounterExample'; export * from './FetchExample'; +export * from './RepoFilter'; export { default as PageHeader } from './PageHeader'; export { default as PageFooter } from './PageFooter'; From 2bf1ccdb282093c1469640460c2eba299e41b201 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Fri, 4 Nov 2022 18:46:43 +0100 Subject: [PATCH 4/5] chore: search filter sort component --- .../components/RepoFilter/FilterDropdown.jsx | 169 +++++++++++------- .../src/components/RepoFilter/FilterText.jsx | 75 ++++++++ .../RepoFilter/RepoFIlter.stories.jsx | 7 +- .../src/components/RepoFilter/RepoFilter.jsx | 80 +++++++-- .../components/RepoFilter/RepoFilter.store.js | 6 +- .../src/components/RepoFilter/SearchInput.jsx | 4 +- .../src/components/RepoFilter/data.js | 14 ++ 7 files changed, 268 insertions(+), 87 deletions(-) create mode 100644 solidjs-tailwind/src/components/RepoFilter/FilterText.jsx create mode 100644 solidjs-tailwind/src/components/RepoFilter/data.js diff --git a/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx index 200f07fc7..c47765422 100644 --- a/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx @@ -1,93 +1,124 @@ -import { createSignal, Show } from "solid-js"; +import { + createSignal, + Show, + onCleanup, + splitProps, + For, + Switch, + Match, +} from 'solid-js'; -const FilterDropdown = () => { +function clickOutside(el, accessor) { + const onClick = (e) => { + !el.contains(e.target) && accessor()?.(); + }; + document.body.addEventListener('click', onClick); + + onCleanup(() => document.body.removeEventListener('click', onClick)); +} + +const FilterDropdown = (props) => { + const [local] = splitProps(props, ['name', 'title', 'items', 'selectOption']); const [showOptions, setShowOptions] = createSignal(false); - const toggleOption = () => setShowOptions(!showOptions()); + const toggleOption = () => setShowOptions(!showOptions()); return ( -
+
setShowOptions(false)} + >
- - ); -} +}; export default FilterDropdown; diff --git a/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx b/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx new file mode 100644 index 000000000..6ea9aa22d --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx @@ -0,0 +1,75 @@ +import { Show, splitProps } from 'solid-js'; + +const modifyFilterTypeText = (filterText = 'test') => { + if (filterText.endsWith('s')) { + if (filterText.match(new RegExp('forks', 'i'))) { + filterText = filterText.replace('s', 'ed'); + } else { + filterText = filterText.replace('s', ''); + } + } + return filterText; +}; + +const FilterText = (props) => { + const [local] = splitProps(props, ['username']); + + return ( +
+
+ + {/* {/**Filtered repo length */} + results for + {/* */} + + {modifyFilterTypeText(/**filter type */)} + + repositories + {/* search text */} + + + matching {/**search */} + + + {/* Language */} + + + written in + {/** language */} + + + sorted by + {/* Sorted text */} + {/**Sort by */} + +
+ +
+ ); +}; + +export default FilterText; diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx index 2054e4865..28f6db507 100644 --- a/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx @@ -1,10 +1,13 @@ import RepoFilter from './RepoFilter'; export default { - title: "components/ Repo filter", + title: 'components/ Repo filter', argTypes: {}, -} +}; const Template = (args) => ; export const Default = Template.bind({}); +Default.args = { + repoText: 'New', +}; diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx index 973e65dd7..f35974766 100644 --- a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx @@ -1,17 +1,75 @@ -import FilterDropdown from "./FilterDropdown"; -import SearchInput from "./SearchInput" +import { mergeProps, Show } from 'solid-js'; +import { FILTER_TYPE_OPTIONS, SORT_OPTIONS } from './data'; +import FilterDropdown from './FilterDropdown'; +import FilterText from './FilterText'; +import SearchInput from './SearchInput'; + +const RepoFilter = (props) => { + const typeOptions = Object.values(FILTER_TYPE_OPTIONS); + const sortOptions = Object.values(SORT_OPTIONS); + const languageOptions = ['All', 'HTML', 'CSS', 'PHP']; + + const merged = mergeProps({ repoBtnText: 'New' }, props); + + const selectLanguage = (value) => console.log(value); + const selectType = (value) => console.log(value); + const selectSort = (value) => console.log(value); + const isOnlySorted = true; -const RepoFilter = () => { return ( -
-
- -
-
- + <> +
+
+
+ +
+
+ + + +
+
+
-
+ + + + ); -} +}; export default RepoFilter; diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js index be64090de..a0e0a8f63 100644 --- a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.store.js @@ -1,4 +1,4 @@ -import { createSignal } from "solid-js"; +import { createSignal } from 'solid-js'; const [search, setSearch] = createSignal(''); const [language, setLanguage] = createSignal(''); @@ -13,5 +13,5 @@ export { setSearch, setLanguage, setSortBy, - setSortType -} + setSortType, +}; diff --git a/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx b/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx index 28e61fc92..c4564e920 100644 --- a/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx @@ -11,8 +11,8 @@ const SearchInput = () => { type="search" onKeyUp={handleChange} class="border p-1.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md outline-none" - /> + /> ); -} +}; export default SearchInput; diff --git a/solidjs-tailwind/src/components/RepoFilter/data.js b/solidjs-tailwind/src/components/RepoFilter/data.js new file mode 100644 index 000000000..e47a89c9a --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/data.js @@ -0,0 +1,14 @@ +export const defaultFilterType = 'All'; +export const defaultLanguage = 'All'; +export const defaultSortBy = 'Last updated'; + +export const FILTER_TYPE_OPTIONS = { + default: defaultFilterType, + forks: 'Forks', + archived: 'Archived', +}; +export const SORT_OPTIONS = { + default: defaultSortBy, + name: 'Name', + stars: 'Stars', +}; From ebbb2c1241b520e650358045d7825831ceb6bfe9 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Mon, 14 Nov 2022 11:51:24 +0100 Subject: [PATCH 5/5] fixed comments on icons --- .../components/RepoFilter/FilterDropdown.jsx | 45 ++----------------- .../src/components/RepoFilter/FilterText.jsx | 20 ++------- .../src/components/RepoFilter/RepoFilter.jsx | 17 +------ .../src/components/icons/caret.jsx | 15 +++++++ .../src/components/icons/close.jsx | 20 +++++++++ .../src/components/icons/correct.jsx | 18 ++++++++ .../src/components/icons/index.js | 4 ++ .../src/components/icons/repo-book.jsx | 19 ++++++++ 8 files changed, 86 insertions(+), 72 deletions(-) create mode 100644 solidjs-tailwind/src/components/icons/caret.jsx create mode 100644 solidjs-tailwind/src/components/icons/close.jsx create mode 100644 solidjs-tailwind/src/components/icons/correct.jsx create mode 100644 solidjs-tailwind/src/components/icons/index.js create mode 100644 solidjs-tailwind/src/components/icons/repo-book.jsx diff --git a/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx index c47765422..e59c6a948 100644 --- a/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx @@ -7,6 +7,7 @@ import { Switch, Match, } from 'solid-js'; +import { CaretIcon, CloseIcon, CorrectIcon } from '../icons'; function clickOutside(el, accessor) { const onClick = (e) => { @@ -37,17 +38,7 @@ const FilterDropdown = (props) => { aria-haspopup="true" > {local.name} - +
@@ -61,22 +52,7 @@ const FilterDropdown = (props) => {
Select {local.name}
@@ -94,20 +70,7 @@ const FilterDropdown = (props) => { > }> - - - + {item} diff --git a/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx b/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx index 6ea9aa22d..7f26730e1 100644 --- a/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx @@ -1,4 +1,5 @@ import { Show, splitProps } from 'solid-js'; +import { CloseIcon } from '../icons'; const modifyFilterTypeText = (filterText = 'test') => { if (filterText.endsWith('s')) { @@ -49,22 +50,9 @@ const FilterText = (props) => { href={'/' + local.username} class="flex items-center clear-filter group hover:text-blue-600 transition-colors delay-[60ms] no-underline gap-2 text-sm" > - - - + + + Clear filter
diff --git a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx index f35974766..c977f8a5b 100644 --- a/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx @@ -1,4 +1,5 @@ import { mergeProps, Show } from 'solid-js'; +import { RepoBookIcon } from '../icons'; import { FILTER_TYPE_OPTIONS, SORT_OPTIONS } from './data'; import FilterDropdown from './FilterDropdown'; import FilterText from './FilterText'; @@ -46,21 +47,7 @@ const RepoFilter = (props) => { href="https://github.com/new" class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold" > - - - + {merged.repoBtnText}
diff --git a/solidjs-tailwind/src/components/icons/caret.jsx b/solidjs-tailwind/src/components/icons/caret.jsx new file mode 100644 index 000000000..5eba34594 --- /dev/null +++ b/solidjs-tailwind/src/components/icons/caret.jsx @@ -0,0 +1,15 @@ +const CaretIcon = () => ( + +); + +export default CaretIcon; diff --git a/solidjs-tailwind/src/components/icons/close.jsx b/solidjs-tailwind/src/components/icons/close.jsx new file mode 100644 index 000000000..cfa592237 --- /dev/null +++ b/solidjs-tailwind/src/components/icons/close.jsx @@ -0,0 +1,20 @@ +const CloseIcon = () => ( + + + +); + +export default CloseIcon; diff --git a/solidjs-tailwind/src/components/icons/correct.jsx b/solidjs-tailwind/src/components/icons/correct.jsx new file mode 100644 index 000000000..46938adfc --- /dev/null +++ b/solidjs-tailwind/src/components/icons/correct.jsx @@ -0,0 +1,18 @@ +const CorrectIcon = () => ( + + + +); + +export default CorrectIcon; diff --git a/solidjs-tailwind/src/components/icons/index.js b/solidjs-tailwind/src/components/icons/index.js new file mode 100644 index 000000000..e00402d99 --- /dev/null +++ b/solidjs-tailwind/src/components/icons/index.js @@ -0,0 +1,4 @@ +export { default as CaretIcon } from './caret'; +export { default as CloseIcon } from './close'; +export { default as CorrectIcon } from './correct'; +export { default as RepoBookIcon } from './repo-book'; diff --git a/solidjs-tailwind/src/components/icons/repo-book.jsx b/solidjs-tailwind/src/components/icons/repo-book.jsx new file mode 100644 index 000000000..4c103f645 --- /dev/null +++ b/solidjs-tailwind/src/components/icons/repo-book.jsx @@ -0,0 +1,19 @@ +const RepoBookIcon = () => ( + + + +); + +export default RepoBookIcon;