-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
dev: Added several components for the Navigation menu
- Loading branch information
1 parent
dee4ce4
commit ee5274c
Showing
38 changed files
with
2,757 additions
and
1,704 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,5 @@ | ||
| import doob from '@do-ob/eslint-config'; | ||
| import reactCompiler from 'eslint-plugin-react-compiler'; | ||
|
|
||
| export default [ | ||
| ...doob.configs.recommended, | ||
|
|
||
| { | ||
| plugins: { | ||
| 'react-compiler': reactCompiler, | ||
| }, | ||
| rules: { | ||
| ...reactCompiler.rules.recommended, | ||
| 'react-compiler/react-compiler': 'error', | ||
| }, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './actions/search'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /** | ||
| * Search State type | ||
| */ | ||
| export type SearchState = Array<{ | ||
| /** | ||
| * The result ID | ||
| */ | ||
| id: string; | ||
|
|
||
| /** | ||
| * The result title | ||
| */ | ||
| title: string; | ||
|
|
||
| /** | ||
| * The result description | ||
| */ | ||
| description?: string; | ||
|
|
||
| /** | ||
| * The result URL | ||
| */ | ||
| url: string; | ||
|
|
||
| /** | ||
| * The result thumbnail | ||
| */ | ||
| thumbnail?: string; | ||
| }>; | ||
|
|
||
| /** | ||
| * Search Payload type | ||
| */ | ||
| export type SearchPayload = FormData & { | ||
| /** | ||
| * The search query | ||
| */ | ||
| query: string; | ||
| }; | ||
|
|
||
| /** | ||
| * Search action type. | ||
| */ | ||
| export type SearchAction = (state: SearchState, payload: FormData) => Promise<SearchState>; | ||
|
|
||
| /** | ||
| * Search action type | ||
| */ | ||
| export const search: SearchAction = async (state, payload) => { | ||
| const query = payload.get('query'); | ||
|
|
||
| console.log(`Searching for: ${query}`); | ||
|
|
||
| return state; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,8 @@ | ||
| export { Form } from './components/Form/Form'; | ||
| export { Navigation } from './components/Navigation/Navigation'; | ||
| export { NavigationStandard } from './components/Navigation/NavigationStandard'; | ||
| export { NavigationIsland } from './components/Navigation/NavigationIsland'; | ||
| export { NavigationStandard } from './components/Navigation/NavigationStandard'; | ||
| export { SearchButton } from './components/SearchButton/SearchButton'; | ||
| export { SearchForm } from './components/SearchForm/SearchForm'; | ||
| export { SearchInput } from './components/SearchInput/SearchInput'; | ||
| export { ThemeSwitch } from './components/ThemeSwitch/ThemeSwitch'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| 'use client'; | ||
|
|
||
| import { nop } from '@do-ob/core'; | ||
| import { useCallback, useRef, PropsWithChildren } from 'react'; | ||
|
|
||
| /** | ||
| * Form properties | ||
| */ | ||
| export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'action'> { | ||
| /** | ||
| * The form action. | ||
| */ | ||
| action?: (formData: FormData) => void; | ||
|
|
||
| /** | ||
| * If the form should submit on change | ||
| */ | ||
| changeSubmit?: boolean; | ||
|
|
||
| /** | ||
| * Change defer time | ||
| */ | ||
| changeDefer?: number; | ||
| } | ||
|
|
||
| /** | ||
| * A form that mimics React 19 form behavior. | ||
| */ | ||
| export function Form({ | ||
| action = nop, | ||
| changeSubmit = false, | ||
| changeDefer = 250, | ||
| onChange = nop, | ||
| onSubmit = nop, | ||
| children, | ||
| }: PropsWithChildren<FormProps>) { | ||
|
|
||
| const debounceTimeout = useRef<NodeJS.Timeout | null>(null); | ||
|
|
||
| const handleChange = useCallback((e: React.ChangeEvent<HTMLFormElement>) => { | ||
| onChange(e); | ||
|
|
||
| if (!changeSubmit) { | ||
| return; | ||
| } | ||
| if (debounceTimeout.current) { | ||
| clearTimeout(debounceTimeout.current); | ||
| } | ||
|
|
||
| const currentTarget = e.currentTarget; | ||
| debounceTimeout.current = setTimeout(() => { | ||
| currentTarget.requestSubmit(); | ||
| }, changeDefer); | ||
| }, [ changeDefer, onChange ]); | ||
|
|
||
| return ( | ||
| <form | ||
| className="flex w-full flex-col gap-2" | ||
| onChange={changeSubmit ? handleChange : onChange} | ||
| onSubmit={(e) => { | ||
| e.preventDefault(); | ||
| if (debounceTimeout.current) { | ||
| clearTimeout(debounceTimeout.current); | ||
| } | ||
| const formData = new FormData(e.currentTarget); | ||
| action(formData); | ||
| onSubmit(e); | ||
| }} | ||
| > | ||
| {children} | ||
| </form>); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.