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';
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() {
const [state, setState] = useState(1);

5
app/components/checkboxes.tsx
View File

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

2
app/components/fabs.tsx
View File

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

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

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

2
app/components/radios.tsx
View File

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

2
app/components/switches.tsx
View File

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

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

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

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

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

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

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

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

@ -6,33 +6,39 @@ import React, {
useImperativeHandle,
useRef,
} from 'react';
import { bool, string } from 'prop-types';
import { CheckboxLayoutProps } from './checkbox-layout.types';
export const CheckBoxLayout = forwardRef(function CheckBoxBase(
{ indeterminate, typeInput, type, ...props }: CheckboxLayoutProps,
ref,
): JSX.Element {
const checkboxRef = useRef<any>(null);
export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
({ indeterminate, typeInput, type, ...props }, ref) => {
const checkboxRef = useRef<HTMLInputElement>(null);
useEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true;
}, []);
useEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true;
}, []);
useImperativeHandle(ref, () => checkboxRef.current);
useImperativeHandle(ref, () => checkboxRef.current);
const classesType = typeInput || type;
const classesType = typeInput || type;
const classes =
props.className !== undefined
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
const classes =
props.className !== undefined
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
return (
<input
ref={checkboxRef}
{...props}
className={classes.trimEnd()}
type={type}
/>
);
});
return (
<input
ref={checkboxRef}
{...props}
className={classes.trimEnd()}
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';
import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import {
forwardRef,
PropsWithChildren,
useEffect,
useImperativeHandle,
useRef,
@ -18,42 +18,45 @@ import {
** description
*/
export const Checkbox = forwardRef<
HTMLInputElement,
PropsWithChildren<any> & IRippleProps
>(({ centralRipple, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
[checked, setChecked] = useState<boolean>(props.checked ?? false),
ripplesRef = useRef(null),
checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({ centralRipple, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
[checked, setChecked] = useState<boolean>(props.checked ?? false),
ripplesRef = useRef(null),
checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes =
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString();
const classes =
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
useImperativeHandle(ref, () => checkboxRef.current);
useImperativeHandle(ref, () => checkboxRef.current);
useEffect(() => {
setChecked(!checked);
}, [checkboxRef.current?.checked]);
useEffect(() => {
setChecked(!checked);
}, [checkboxRef.current?.checked]);
return (
<label {...events} className={classes}>
<CheckBoxLayout
{...props}
indeterminate={indeterminate}
ref={checkboxRef}
type={'checkbox'}
/>
<span className={'m3 m3-checkbox-state-layer'} />
<RippleArea
callback={setIsActive}
central={centralRipple}
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
{props.children}
</label>
);
});
return (
<label {...events} className={classes}>
<CheckBoxLayout
{...props}
indeterminate={props.indeterminate}
ref={checkboxRef}
type={'checkbox'}
/>
<span className={'m3 m3-checkbox-state-layer'} />
<RippleArea
callback={setIsActive}
central={centralRipple}
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
{props.children}
</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';
interface DividerProps extends PropsWithChildren<any> {
orientation?: 'vertical' | 'horizontal';
variant?: 'full-width' | 'inset' | 'middle-inset';
}
import React, { forwardRef } from 'react';
import { DividerProps } from './divider.types';
const Divider = forwardRef<HTMLHRElement, DividerProps>(
({ orientation, variant, ...props }, ref) => (

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

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

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

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

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

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

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

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

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

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