diff --git a/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx new file mode 100644 index 000000000..e59c6a948 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/FilterDropdown.jsx @@ -0,0 +1,87 @@ +import { + createSignal, + Show, + onCleanup, + splitProps, + For, + Switch, + Match, +} from 'solid-js'; +import { CaretIcon, CloseIcon, CorrectIcon } from '../icons'; + +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()); + + 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..7f26730e1 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/FilterText.jsx @@ -0,0 +1,63 @@ +import { Show, splitProps } from 'solid-js'; +import { CloseIcon } from '../icons'; + +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 */} + +
+
+ + + + + Clear filter + +
+
+ ); +}; + +export default FilterText; 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..28f6db507 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFIlter.stories.jsx @@ -0,0 +1,13 @@ +import RepoFilter from './RepoFilter'; + +export default { + 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 new file mode 100644 index 000000000..c977f8a5b --- /dev/null +++ b/solidjs-tailwind/src/components/RepoFilter/RepoFilter.jsx @@ -0,0 +1,62 @@ +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'; +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; + + return ( + <> +
+
+
+ +
+
+ + + +
+
+
+ + + {merged.repoBtnText} + +
+
+ + + + + ); +}; + +export default RepoFilter; 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..a0e0a8f63 --- /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/SearchInput.jsx b/solidjs-tailwind/src/components/RepoFilter/SearchInput.jsx new file mode 100644 index 000000000..c4564e920 --- /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/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', +}; 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/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; diff --git a/solidjs-tailwind/src/components/index.js b/solidjs-tailwind/src/components/index.js index 368fd9929..70f011b51 100644 --- a/solidjs-tailwind/src/components/index.js +++ b/solidjs-tailwind/src/components/index.js @@ -1,5 +1,6 @@ export * from './CounterExample'; export * from './FetchExample'; +export * from './RepoFilter'; export * from './GistPanel'; export * from './RepoMeta'; export * from './RepoCard';