doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

CHANGED: Types

This commit is contained in:
doryan04 2024-02-01 16:23:59 +04:00
parent dc4b8baaf8
commit ab4ae37015
19 changed files with 238 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/buttons.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { Button } from '../../src/primitive-components/material-you-components'; import { Button } from '../../src/primitive-components/components';
export default function Buttons() { export default function Buttons() {
const [state, setState] = useState(1); const [state, setState] = useState(1);

5
app/components/checkboxes.tsx
View File

@ -1,10 +1,7 @@
'use client'; 'use client';
import React from 'react'; import React from 'react';
import { import { Button, Checkbox } from '../../src/primitive-components/components';
Button,
Checkbox,
} from '../../src/primitive-components/material-you-components';
export default function Checkboxes() { export default function Checkboxes() {
return ( return (

2
app/components/fabs.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { FAB } from '../../src/primitive-components/material-you-components'; import { FAB } from '../../src/primitive-components/components';
export default function Fabs() { export default function Fabs() {
return ( return (

2
app/components/icon-buttons.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import React from 'react'; import React from 'react';
import { IconButton } from '../../src/primitive-components/material-you-components'; import { IconButton } from '../../src/primitive-components/components';
function IconButtons() { function IconButtons() {
return ( return (

2
app/components/radios.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Radio } from '../../src/primitive-components/material-you-components'; import { Radio } from '../../src/primitive-components/components';
export default function Radios() { export default function Radios() {
return ( return (

2
app/components/switches.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import React from 'react'; import React from 'react';
import { Switch } from '../../src/primitive-components/material-you-components'; import { Switch } from '../../src/primitive-components/components';
export default function Switches() { export default function Switches() {
return ( return (

53
src/primitive-components/badge/badge.tsx
View File

@ -1,36 +1,33 @@
import { BadgeProps } from './badges.types'; import { bool, string } from 'prop-types';
import { bool, number, string } from 'prop-types';
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import { BadgeProps } from './badges.types';
const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge( const Badge = forwardRef<SVGSVGElement, BadgeProps>(
{ disableValue = false, ...props }, ({ disableValue = false, children, ...props }, ref) => {
ref, const digitLength = children ? 16 + (children.length - 1) * 6 : 6,
) { disableValueClassName =
const digitLength = props.children disableValue || (!children ?? true) ? 'disable-value' : '';
? 16 + (props.children.length - 1) * 6
: 6,
disableValueClassName =
disableValue || (!props.children ?? true) ? 'disable-value' : '';
return ( return (
<svg <svg
{...props} {...props}
className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()} className={`m3 m3-badge ${props.className ?? ''}${disableValueClassName}`.trimEnd()}
ref={ref} height={'16px'}
width={`${digitLength}px`} ref={ref}
> width={`${digitLength}px`}
{props.children && ( >
<text x={'50%'} y={'50%'}> {children && (
{props.children} <text x={'50%'} y={'50%'}>
</text> {children}
)} </text>
</svg> )}
); </svg>
}); );
},
);
Badge.propTypes = { Badge.propTypes = {
children: number, children: string,
className: string,
disableValue: bool, disableValue: bool,
}; };

75
src/primitive-components/button-layout/button-layout.tsx
View File

@ -1,48 +1,45 @@
'use client'; 'use client';
import { bool, string } from 'prop-types';
import { RippleArea } from '../ripple/ripple-area'; import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types'; import { ButtonLayoutProps } from './button-layout.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect'; import useRippleEffect from '../ripple/hooks/useRippleEffect';
import React, { import React, { forwardRef, useId, useRef, useState } from 'react';
forwardRef,
PropsWithChildren,
useId,
useRef,
useState,
} from 'react';
const ButtonLayout = forwardRef< export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
HTMLButtonElement, function ButtonBase({ centralRipple = false, ...props }, ref) {
PropsWithChildren<any> & IRippleProps const [isActive, setIsActive] = useState<boolean>(false),
>(function ButtonBase({ centralRipple = false, ...props }, ref) { ripplesRef = useRef(null),
const [isActive, setIsActive] = useState<boolean>(false), buttonId = useId(),
ripplesRef = useRef(null), events = useRippleEffect(ripplesRef, setIsActive);
buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive);
const { variant, disabled, className } = props; const { variant, disabled, className } = props;
const classes = className const classes = className
? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}` ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
: `m3 ${variant}${isActive ? ' is-active' : ''}`; : `m3 ${variant}${isActive ? ' is-active' : ''}`;
return ( return (
<button <button
{...props} {...props}
{...events} {...events}
className={classes} className={classes}
disabled={disabled} disabled={disabled}
id={buttonId} id={buttonId}
ref={ref} ref={ref}
> >
{props.children} {props.children}
<RippleArea <RippleArea
callback={setIsActive} callback={setIsActive}
central={centralRipple} central={centralRipple}
ref={ripplesRef} ref={ripplesRef}
/> />
</button> </button>
); );
}); },
);
export { ButtonLayout }; ButtonLayout.propTypes = {
centralRipple: bool,
children: string,
};

10
src/primitive-components/button/button.tsx
View File

@ -1,20 +1,16 @@
'use client'; 'use client';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { Icon } from '../material-you-components'; import { Icon } from '../components';
import { IRippleProps } from '../ripple/ripple.types'; import { ButtonProps } from './button.types';
import { ButtonLayout } from '../button-layout/button-layout'; import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonMainProps } from '../button-layout/button.types';
/** /**
* Button component * Button component
** description ** description
*/ */
export const Button = forwardRef< export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
HTMLButtonElement,
ButtonMainProps & IRippleProps
>(
( (
{ centralRipple = false, variant, disabled = false, icon, ...props }, { centralRipple = false, variant, disabled = false, icon, ...props },
ref, ref,

52
src/primitive-components/checkbox-layout/check-box-layout.tsx
View File

@ -6,33 +6,39 @@ import React, {
useImperativeHandle, useImperativeHandle,
useRef, useRef,
} from 'react'; } from 'react';
import { bool, string } from 'prop-types';
import { CheckboxLayoutProps } from './checkbox-layout.types'; import { CheckboxLayoutProps } from './checkbox-layout.types';
export const CheckBoxLayout = forwardRef(function CheckBoxBase( export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
{ indeterminate, typeInput, type, ...props }: CheckboxLayoutProps, ({ indeterminate, typeInput, type, ...props }, ref) => {
ref, const checkboxRef = useRef<HTMLInputElement>(null);
): JSX.Element {
const checkboxRef = useRef<any>(null);
useEffect(() => { useEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true; checkboxRef.current.indeterminate = indeterminate === true;
}, []); }, []);
useImperativeHandle(ref, () => checkboxRef.current); useImperativeHandle(ref, () => checkboxRef.current);
const classesType = typeInput || type; const classesType = typeInput || type;
const classes = const classes =
props.className !== undefined props.className !== undefined
? `m3 m3-${type} ${props.className}` ? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`; : `m3 m3-${classesType}`;
return ( return (
<input <input
ref={checkboxRef} ref={checkboxRef}
{...props} {...props}
className={classes.trimEnd()} className={classes.trimEnd()}
type={type} type={type}
/> />
); );
}); },
);
CheckBoxLayout.propTypes = {
indeterminate: bool,
typeInput: string,
type: string,
};

77
src/primitive-components/checkbox/checkbox.tsx
View File

@ -1,12 +1,12 @@
'use client'; 'use client';
import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleArea } from '../ripple/ripple-area'; import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect'; import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout'; import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { import {
forwardRef, forwardRef,
PropsWithChildren,
useEffect, useEffect,
useImperativeHandle, useImperativeHandle,
useRef, useRef,
@ -18,42 +18,45 @@ import {
** description ** description
*/ */
export const Checkbox = forwardRef< export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
HTMLInputElement, ({ centralRipple, ...props }, ref) => {
PropsWithChildren<any> & IRippleProps const [isActive, setIsActive] = useState<boolean>(false),
>(({ centralRipple, ...props }, ref) => { [checked, setChecked] = useState<boolean>(props.checked ?? false),
const [isActive, setIsActive] = useState<boolean>(false), ripplesRef = useRef(null),
[checked, setChecked] = useState<boolean>(props.checked ?? false), checkboxRef = useRef(null),
ripplesRef = useRef(null), events = useRippleEffect(ripplesRef, setIsActive);
checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = const classes =
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd(); `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString();
useImperativeHandle(ref, () => checkboxRef.current); useImperativeHandle(ref, () => checkboxRef.current);
useEffect(() => { useEffect(() => {
setChecked(!checked); setChecked(!checked);
}, [checkboxRef.current?.checked]); }, [checkboxRef.current?.checked]);
return ( return (
<label {...events} className={classes}> <label {...events} className={classes}>
<CheckBoxLayout <CheckBoxLayout
{...props} {...props}
indeterminate={indeterminate} indeterminate={props.indeterminate}
ref={checkboxRef} ref={checkboxRef}
type={'checkbox'} type={'checkbox'}
/> />
<span className={'m3 m3-checkbox-state-layer'} /> <span className={'m3 m3-checkbox-state-layer'} />
<RippleArea <RippleArea
callback={setIsActive} callback={setIsActive}
central={centralRipple} central={centralRipple}
className={'m3-checkbox-ripple-layer'} className={'m3-checkbox-ripple-layer'}
ref={ripplesRef} ref={ripplesRef}
/> />
{props.children} {props.children}
</label> </label>
); );
}); },
);
Checkbox.propTypes = {
indeterminate: bool,
centralRipple: bool,
};

0
src/primitive-components/material-you-components.tsx → src/primitive-components/components.tsx
View File

8
src/primitive-components/divider/divider.tsx
View File

@ -1,9 +1,5 @@
import React, { forwardRef, PropsWithChildren } from 'react'; import React, { forwardRef } from 'react';
import { DividerProps } from './divider.types';
interface DividerProps extends PropsWithChildren<any> {
orientation?: 'vertical' | 'horizontal';
variant?: 'full-width' | 'inset' | 'middle-inset';
}
const Divider = forwardRef<HTMLHRElement, DividerProps>( const Divider = forwardRef<HTMLHRElement, DividerProps>(
({ orientation, variant, ...props }, ref) => ( ({ orientation, variant, ...props }, ref) => (

7
src/primitive-components/fab/fab.tsx
View File

@ -1,9 +1,8 @@
'use client'; 'use client';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { Icon } from '../material-you-components'; import { Icon } from '../components';
import { IRippleProps } from '../ripple/ripple.types'; import { FABProps } from './fab.types';
import { FABMainProps } from '../button-layout/button.types';
import { ButtonLayout } from '../button-layout/button-layout'; import { ButtonLayout } from '../button-layout/button-layout';
/** /**
@ -18,7 +17,7 @@ const sizes = {
extended: 24, extended: 24,
}; };
export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>( export const FAB = forwardRef<HTMLButtonElement, FABProps>(
( (
{ {
variant, variant,

42
src/primitive-components/icon-button/icon-button.tsx
View File

@ -1,10 +1,8 @@
'use client'; 'use client';
import { Icon } from '../material-you-components'; import { Icon } from '../components';
import { toggleIconType } from './icon-button.types';
import { IRippleProps } from '../ripple/ripple.types';
import { ButtonLayout } from '../button-layout/button-layout'; import { ButtonLayout } from '../button-layout/button-layout';
import { IconButtonMainProps } from '../button-layout/button.types'; import { IconButtonProps, StateToggleIconType } from './icon-button.types';
import { import {
forwardRef, forwardRef,
useCallback, useCallback,
@ -18,10 +16,7 @@ import {
** description ** description
*/ */
export const IconButton = forwardRef< export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
HTMLButtonElement,
IconButtonMainProps & IRippleProps
>(
( (
{ {
icon, icon,
@ -34,32 +29,35 @@ export const IconButton = forwardRef<
}, },
ref, ref,
) => { ) => {
const [toggleIcon, setToggleIcon] = useState<toggleIconType>({ const [toggleIcon, setToggleIcon] = useState<StateToggleIconType>({
state: selected == true ? 'selected' : 'unselected', state: selected == true ? 'selected' : 'unselected',
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle', icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
}); });
const toggle = (classes: string, icon: string) => { const toggle = (classes: string, icon: string) => {
setToggleIcon(() => ({ setToggleIcon({
state: classes, state: classes,
icon: icon, icon: icon,
})); });
}; };
const buttonRef = useRef<HTMLButtonElement>(null); const buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback(() => { const callback = useCallback(
if (toggled) { (e: MouseEvent) => {
if (toggleIcon.state === 'selected') { if (toggled) {
toggle('', toggled.unselected ?? 'add_circle'); if (toggleIcon.state === 'selected') {
} else { toggle('', toggled.unselected ?? 'add_circle');
toggle('selected', toggled.selected ?? 'add_circle'); } else {
toggle('selected', toggled.selected ?? 'add_circle');
}
} }
} if (props.onClick) {
if (props.onClick) { props.onClick.apply(null, e);
props.onClick(); }
} },
}, [toggleIcon]); [toggleIcon],
);
useImperativeHandle(ref, () => buttonRef.current); useImperativeHandle(ref, () => buttonRef.current);

81
src/primitive-components/icon/icon.tsx
View File

@ -1,53 +1,56 @@
import { IconProps } from './icon.types'; import { IconProps } from './icon.types';
import { bool, number, string } from 'prop-types'; import React, { forwardRef } from 'react';
import React, { ForwardedRef, forwardRef } from 'react'; import { number, oneOf, string } from 'prop-types';
const Icon = forwardRef(function Icon( const Icon = forwardRef<SVGSVGElement, IconProps>(
{ (
grade = 0, {
weight = 500, children = '',
svgSize = 20, grade = 0,
fill = false, weight = 500,
iconSize = 20, svgSize = 20,
opticalSize = 24, fillIcon = 0,
type = 'outlined', iconSize = 20,
...props opticalSize = 24,
}: IconProps, type = 'outlined',
ref: ForwardedRef<any>, ...props
) { },
const fontVariation = { ref,
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`, ) => {
}; const fontVariation = {
fontVariationSettings: `'FILL' ${fillIcon}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
};
return ( return (
<svg <svg
{...props} {...props}
className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()} className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
height={svgSize} height={svgSize}
ref={ref} ref={ref}
width={svgSize} width={svgSize}
>
<text
className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
style={fontVariation}
x={'50%'}
y={'50%'}
> >
{props.children ?? 'add_circle'} <text
</text> className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
</svg> style={fontVariation}
); x={'50%'}
}); y={'50%'}
>
{children ?? 'add_circle'}
</text>
</svg>
);
},
);
Icon.propTypes = { Icon.propTypes = {
fill: bool,
type: string,
grade: number, grade: number,
weight: number,
svgSize: number, svgSize: number,
iconSize: number, iconSize: number,
children: string, children: string,
opticalSize: number, opticalSize: number,
fillIcon: oneOf([0, 1]),
type: oneOf(['outlined', 'rounded', 'sharp']),
weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
}; };
export { Icon }; export { Icon };

49
src/primitive-components/radio/radio.tsx
View File

@ -1,38 +1,37 @@
'use client'; 'use client';
import { RadioProps } from './radio.types';
import { RippleArea } from '../ripple/ripple-area'; import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types'; import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect'; import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout'; import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
/** /**
* Radio component * Radio component
** description ** description
*/ */
export const Radio = forwardRef< export const Radio = forwardRef<HTMLInputElement, RadioProps>(
HTMLInputElement, ({ centralRipple, ...props }, ref) => {
PropsWithChildren<HTMLElement> & IRippleProps const [isActive, setIsActive] = useState<boolean>(false),
>(({ centralRipple, ...props }, ref) => { ripplesRef = useRef(null),
const [isActive, setIsActive] = useState<boolean>(false), events = useRippleEffect(ripplesRef, setIsActive);
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = const classes =
`m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd(); `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
return ( return (
<label {...events} className={classes}> <label {...events} className={classes}>
<CheckBoxLayout {...props} ref={ref} type={'radio'} /> <CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} /> <span className={'m3 m3-radio-state-layer'} />
<RippleArea <RippleArea
callback={setIsActive} callback={setIsActive}
central={centralRipple} central={centralRipple}
className={'m3-checkbox-ripple-layer'} className={'m3-checkbox-ripple-layer'}
ref={ripplesRef} ref={ripplesRef}
/> />
{props.children} {props.children}
</label> </label>
); );
}); },
);

3
src/primitive-components/switch/switch.tsx
View File

@ -11,11 +11,12 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>( export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
({ icon, disabled, selected = false, ...props }, ref) => ( ({ icon, disabled, selected = false, ...props }, ref) => (
<div className={'m3 m3-switch-exp'} ref={ref}> <div className={'m3 m3-switch-exp'}>
<CheckBoxLayout <CheckBoxLayout
{...props} {...props}
className={`m3 ${props.className ?? ''}`.trimEnd()} className={`m3 ${props.className ?? ''}`.trimEnd()}
disabled={disabled} disabled={disabled}
ref={ref}
type={'checkbox'} type={'checkbox'}
/> />
<svg> <svg>

14
src/primitive-components/text-field/text-field.tsx
View File

@ -1,8 +1,8 @@
'use client'; 'use client';
import React, { forwardRef, useState } from 'react'; import { bool, oneOf, string } from 'prop-types';
import { bool, string } from 'prop-types'; import React, { FocusEvent, forwardRef, useState } from 'react';
import { type TextFieldInterface } from './text-field.types'; import { TextFieldInterface } from './text-field.types';
export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>( export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
( (
@ -15,11 +15,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
}, },
ref, ref,
) => { ) => {
const [raised, setRaised] = useState<boolean>( const [raised, setRaised] = useState<boolean>(!props.placeholder);
props.placeholder ?? false,
);
const callback = (e: any): void => { const callback = (e: FocusEvent<HTMLInputElement>): void => {
if ( if (
e.type === 'blur' && e.type === 'blur' &&
e.target.value.length === 0 && e.target.value.length === 0 &&
@ -97,7 +95,7 @@ TextField.propTypes = {
withBeforeIcon: bool, withBeforeIcon: bool,
withAfterIcon: bool, withAfterIcon: bool,
className: string, className: string,
variant: string, variant: oneOf(['filled', 'outlined']),
placeholder: string, placeholder: string,
supportingText: string, supportingText: string,
}; };