From 5878437f77e1fcb842647300a5561a424b8ae321 Mon Sep 17 00:00:00 2001 From: Josip Paladin Date: Tue, 12 Dec 2023 09:40:56 +0100 Subject: [PATCH 1/4] init search header component --- apps/docs/components/ExampleSearchHeader.tsx | 7 ++ .../react-ui/components/search-header.mdx | 33 ++++++++ .../react-ui/SearchHeader/SearchHeader.tsx | 82 +++++++++++++++++++ packages/react-ui/SearchHeader/index.tsx | 1 + .../changes/Added SearchHeader component | 0 packages/react-ui/index.tsx | 3 +- 6 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 apps/docs/components/ExampleSearchHeader.tsx create mode 100644 apps/docs/pages/react-ui/components/search-header.mdx create mode 100644 packages/react-ui/SearchHeader/SearchHeader.tsx create mode 100644 packages/react-ui/SearchHeader/index.tsx create mode 100644 packages/react-ui/changes/Added SearchHeader component diff --git a/apps/docs/components/ExampleSearchHeader.tsx b/apps/docs/components/ExampleSearchHeader.tsx new file mode 100644 index 00000000..01fa29a5 --- /dev/null +++ b/apps/docs/components/ExampleSearchHeader.tsx @@ -0,0 +1,7 @@ +import { SearchHeader } from '@enterwell/react-ui'; + +export function ExampleSearchHeader() { + return ( + + ) +} \ No newline at end of file diff --git a/apps/docs/pages/react-ui/components/search-header.mdx b/apps/docs/pages/react-ui/components/search-header.mdx new file mode 100644 index 00000000..3424c511 --- /dev/null +++ b/apps/docs/pages/react-ui/components/search-header.mdx @@ -0,0 +1,33 @@ +--- +title: SearchHeader +--- + +import { SearchHeader } from '@enterwell/react-ui'; +import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx'; +import { ExampleSearchHeader } from '../../../components/ExampleSearchHeader.tsx'; +import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs'; + +# SearchHeader + +## Description + + + +### Parameters + + + +## Example + + + +## Inspect + +
+ Source code + +
\ No newline at end of file diff --git a/packages/react-ui/SearchHeader/SearchHeader.tsx b/packages/react-ui/SearchHeader/SearchHeader.tsx new file mode 100644 index 00000000..f15af810 --- /dev/null +++ b/packages/react-ui/SearchHeader/SearchHeader.tsx @@ -0,0 +1,82 @@ +import React, { type MouseEvent } from 'react'; +import { + Typography, Stack, IconButton, InputBase, type TypographyProps +} from '@mui/material'; +import SearchIcon from '@mui/icons-material/Search'; +import ClearIcon from '@mui/icons-material/Clear'; + +export type SearchHeaderProps = TypographyProps & { + onSubmit?: (searchTerm: string) => void, +} + +/** + * Search header. + * @param props The props of the component. + * @returns The search header component. + */ +export default function SearchHeader({ + onSubmit, + children, + ...rest +}: SearchHeaderProps) { + const [isSearching, setIsSearching] = React.useState(false); + const [searchTerm, setSearchTerm] = React.useState(''); + + const handleSearchClick = (e: MouseEvent) => { + e.stopPropagation(); + setIsSearching(true); + }; + + const handleClearClick = (e: MouseEvent) => { + e.stopPropagation(); + setSearchTerm(''); + setIsSearching(false); + if (onSubmit) + onSubmit(''); + }; + + const handleInputBlur = () => { + if (searchTerm === '') { + setIsSearching(false); + if (onSubmit) + onSubmit(''); + } + }; + + const handleSubmit = (e: any) => { + if (e.key === 'Enter' && onSubmit) { + onSubmit(searchTerm); + } else if (e.key === 'Escape') { + handleClearClick(e); + } + }; + + return isSearching ? ( + + + + )} + autoFocus + placeholder="Pretraži po pojmu" + onClick={(e) => e.stopPropagation()} + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + onKeyDown={handleSubmit} + onBlur={handleInputBlur} + sx={{ + fontSize: 16, + }} + /> + ) : ( + + {children} + {onSubmit && ( + + + + )} + + ); +} diff --git a/packages/react-ui/SearchHeader/index.tsx b/packages/react-ui/SearchHeader/index.tsx new file mode 100644 index 00000000..cfa1983a --- /dev/null +++ b/packages/react-ui/SearchHeader/index.tsx @@ -0,0 +1 @@ +export * from "./SearchHeader"; diff --git a/packages/react-ui/changes/Added SearchHeader component b/packages/react-ui/changes/Added SearchHeader component new file mode 100644 index 00000000..e69de29b diff --git a/packages/react-ui/index.tsx b/packages/react-ui/index.tsx index 340b98ee..9e5500af 100644 --- a/packages/react-ui/index.tsx +++ b/packages/react-ui/index.tsx @@ -9,4 +9,5 @@ export * from "./TimeInput"; export * from "./DateTimeRangePicker"; export * from "./ConfirmDialog"; export * from "./DropdownButton"; -export * from "./PageDrawer"; \ No newline at end of file +export * from "./PageDrawer"; +export * from "./SearchHeader"; \ No newline at end of file From ad91aff586d52d1309b6faf884cf7345955837cf Mon Sep 17 00:00:00 2001 From: Josip Paladin Date: Tue, 12 Dec 2023 23:47:02 +0100 Subject: [PATCH 2/4] init sizing --- apps/docs/components/ExampleSearchHeader.tsx | 7 +++- .../react-ui/SearchHeader/SearchHeader.tsx | 34 +++++++++++++------ packages/react-ui/temp/react-ui.api.md | 9 +++++ 3 files changed, 38 insertions(+), 12 deletions(-) diff --git a/apps/docs/components/ExampleSearchHeader.tsx b/apps/docs/components/ExampleSearchHeader.tsx index 01fa29a5..225ad1ae 100644 --- a/apps/docs/components/ExampleSearchHeader.tsx +++ b/apps/docs/components/ExampleSearchHeader.tsx @@ -2,6 +2,11 @@ import { SearchHeader } from '@enterwell/react-ui'; export function ExampleSearchHeader() { return ( - + console.log(searchTerm)} + placeholder='Search by term'> + Search + ) } \ No newline at end of file diff --git a/packages/react-ui/SearchHeader/SearchHeader.tsx b/packages/react-ui/SearchHeader/SearchHeader.tsx index f15af810..9ddd6c75 100644 --- a/packages/react-ui/SearchHeader/SearchHeader.tsx +++ b/packages/react-ui/SearchHeader/SearchHeader.tsx @@ -1,27 +1,37 @@ import React, { type MouseEvent } from 'react'; import { - Typography, Stack, IconButton, InputBase, type TypographyProps + Typography, Stack, IconButton, InputBase, useTheme, type TypographyProps } from '@mui/material'; -import SearchIcon from '@mui/icons-material/Search'; -import ClearIcon from '@mui/icons-material/Clear'; +import { Variant } from '@mui/material/styles/createTypography'; +import { Search, Clear } from '@mui/icons-material'; +/** + * The SearchHeader component props. + * @public + */ export type SearchHeaderProps = TypographyProps & { onSubmit?: (searchTerm: string) => void, + placeholder: string } /** * Search header. - * @param props The props of the component. + * @param props - The props of the component. * @returns The search header component. + * @public */ -export default function SearchHeader({ +export function SearchHeader({ onSubmit, + placeholder, children, + variant = 'h1', ...rest }: SearchHeaderProps) { const [isSearching, setIsSearching] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(''); + const theme = useTheme(); + console.log("theme.", theme.typography) const handleSearchClick = (e: MouseEvent) => { e.stopPropagation(); setIsSearching(true); @@ -51,30 +61,32 @@ export default function SearchHeader({ } }; + const fontSize = variant ? theme.typography[variant as Variant].fontSize : undefined; + return isSearching ? ( - + )} autoFocus - placeholder="Pretraži po pojmu" + placeholder={placeholder} onClick={(e) => e.stopPropagation()} value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} onKeyDown={handleSubmit} onBlur={handleInputBlur} sx={{ - fontSize: 16, + fontSize: fontSize }} /> ) : ( - {children} + {children} {onSubmit && ( - - + + )} diff --git a/packages/react-ui/temp/react-ui.api.md b/packages/react-ui/temp/react-ui.api.md index 3f81932f..65e32f8a 100644 --- a/packages/react-ui/temp/react-ui.api.md +++ b/packages/react-ui/temp/react-ui.api.md @@ -20,6 +20,7 @@ import { ReactNode } from 'react'; import { SyntheticEvent } from 'react'; import { TextField } from '@mui/material'; import { TextFieldProps } from '@mui/material'; +import { TypographyProps } from '@mui/material'; // @public export function ConfirmButton({ header, message, confirmButtonText, color, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element; @@ -114,6 +115,14 @@ export type PageDrawerProps = HTMLAttributes & { onResize?: (height: number | undefined) => void; }; +// @public +export function SearchHeader({ onSubmit, children, ...rest }: SearchHeaderProps): react_jsx_runtime.JSX.Element; + +// @public +export type SearchHeaderProps = TypographyProps & { + onSubmit?: (searchTerm: string) => void; +}; + // @public export function Select({ multiple, value, options, placeholder, loading: parentLoading, label, onChange, displayOption, pageSize, onPage, debounce, noOptionsText, loadingOptionsText, error, helperText, required, disableFilterOptions, stopPropagationOnKeyCodeSpace, onBlur, listStartDecorator, listEndDecorator, ...rest }: SelectProps): react_jsx_runtime.JSX.Element; From e90423b027e1dd63f4365ced4ad6dcedc4ce9f9d Mon Sep 17 00:00:00 2001 From: Josip Paladin Date: Wed, 13 Dec 2023 09:46:45 +0100 Subject: [PATCH 3/4] remove props --- packages/react-ui/SearchHeader/SearchHeader.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/react-ui/SearchHeader/SearchHeader.tsx b/packages/react-ui/SearchHeader/SearchHeader.tsx index 9ddd6c75..de0f51f8 100644 --- a/packages/react-ui/SearchHeader/SearchHeader.tsx +++ b/packages/react-ui/SearchHeader/SearchHeader.tsx @@ -1,6 +1,6 @@ import React, { type MouseEvent } from 'react'; import { - Typography, Stack, IconButton, InputBase, useTheme, type TypographyProps + Typography, Stack, IconButton, InputBase, useTheme } from '@mui/material'; import { Variant } from '@mui/material/styles/createTypography'; import { Search, Clear } from '@mui/icons-material'; @@ -9,9 +9,11 @@ import { Search, Clear } from '@mui/icons-material'; * The SearchHeader component props. * @public */ -export type SearchHeaderProps = TypographyProps & { +export type SearchHeaderProps = { onSubmit?: (searchTerm: string) => void, - placeholder: string + placeholder: string, + variant: Variant, + children: React.ReactNode } /** @@ -67,7 +69,7 @@ export function SearchHeader({ - + )} autoFocus @@ -77,13 +79,10 @@ export function SearchHeader({ onChange={(e) => setSearchTerm(e.target.value)} onKeyDown={handleSubmit} onBlur={handleInputBlur} - sx={{ - fontSize: fontSize - }} /> ) : ( - {children} + {children} {onSubmit && ( From 28fc029c7626410a0fda741d4058d77de95e2e47 Mon Sep 17 00:00:00 2001 From: Josip Paladin Date: Fri, 15 Dec 2023 10:16:14 +0100 Subject: [PATCH 4/4] default variant tsdoc --- packages/react-ui/SearchHeader/SearchHeader.tsx | 16 +++++++++------- packages/react-ui/temp/react-ui.api.md | 9 ++++++--- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/react-ui/SearchHeader/SearchHeader.tsx b/packages/react-ui/SearchHeader/SearchHeader.tsx index de0f51f8..ccfed7eb 100644 --- a/packages/react-ui/SearchHeader/SearchHeader.tsx +++ b/packages/react-ui/SearchHeader/SearchHeader.tsx @@ -1,4 +1,4 @@ -import React, { type MouseEvent } from 'react'; +import React, { ReactNode, type MouseEvent } from 'react'; import { Typography, Stack, IconButton, InputBase, useTheme } from '@mui/material'; @@ -11,9 +11,12 @@ import { Search, Clear } from '@mui/icons-material'; */ export type SearchHeaderProps = { onSubmit?: (searchTerm: string) => void, - placeholder: string, - variant: Variant, - children: React.ReactNode + placeholder?: string | undefined, + /** + * @defaultValue 'h1' + */ + variant?: Variant | undefined, + children?: ReactNode | undefined } /** @@ -26,14 +29,13 @@ export function SearchHeader({ onSubmit, placeholder, children, - variant = 'h1', - ...rest + variant = 'h1' }: SearchHeaderProps) { const [isSearching, setIsSearching] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(''); const theme = useTheme(); - console.log("theme.", theme.typography) + const handleSearchClick = (e: MouseEvent) => { e.stopPropagation(); setIsSearching(true); diff --git a/packages/react-ui/temp/react-ui.api.md b/packages/react-ui/temp/react-ui.api.md index 65e32f8a..0ce6193f 100644 --- a/packages/react-ui/temp/react-ui.api.md +++ b/packages/react-ui/temp/react-ui.api.md @@ -20,7 +20,7 @@ import { ReactNode } from 'react'; import { SyntheticEvent } from 'react'; import { TextField } from '@mui/material'; import { TextFieldProps } from '@mui/material'; -import { TypographyProps } from '@mui/material'; +import { Variant } from '@mui/material/styles/createTypography'; // @public export function ConfirmButton({ header, message, confirmButtonText, color, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element; @@ -116,11 +116,14 @@ export type PageDrawerProps = HTMLAttributes & { }; // @public -export function SearchHeader({ onSubmit, children, ...rest }: SearchHeaderProps): react_jsx_runtime.JSX.Element; +export function SearchHeader({ onSubmit, placeholder, children, variant }: SearchHeaderProps): react_jsx_runtime.JSX.Element; // @public -export type SearchHeaderProps = TypographyProps & { +export type SearchHeaderProps = { onSubmit?: (searchTerm: string) => void; + placeholder?: string | undefined; + variant?: Variant | undefined; + children?: ReactNode | undefined; }; // @public