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

CHANGED: README

This commit is contained in:
doryan04 2024-02-02 14:39:02 +04:00
parent 231bdbec3a
commit d970f5a5b3
23 changed files with 206 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -7,14 +7,14 @@ This repository is including and will be including components, enumerates in tab
- [x] Icon
- [x] FAB
- [X] Radio
- [ ] Segmented
- [ ] Segmented (WIP)
- [X] Checkbox
- [x] Text fields
- [X] Switches
- [ ] Chips
- [x] Icon
- [x] Ripple Effect
- [x] Dividers
- [ ] Dividers (WIP)
- [x] Badges
- [ ] Select field
- [ ] Bottom sheets

21
app/components/buttons.tsx
View File

@ -12,9 +12,24 @@ export default function Buttons() {
);
return (
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<h1> Buttons </h1>
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
width: '100%',
height: '100%',
}}
>
<div>
<h2> Default buttons </h2>
<div
@ -30,7 +45,7 @@ export default function Buttons() {
onClick={callback}
variant={'filled'}
>
Label + {state}
Label
</Button>
<Button variant={'outlined'}>Label</Button>
<Button variant={'tonal'}>Label</Button>

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

@ -5,7 +5,14 @@ import { IconButton } from '../../src/primitive-components/components';
function IconButtons() {
return (
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<h1> Icon buttons </h1>
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
<div>

79
app/page.tsx
View File

@ -9,6 +9,7 @@ import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields';
import {
ButtonLayout,
Divider,
SegmentedButtons,
} from '../src/primitive-components/components';
@ -34,24 +35,80 @@ export default function Page() {
justifyContent: 'center',
alignItems: 'center',
}}
>
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<SegmentedButtons>
<ButtonLayout>Segment 1</ButtonLayout>
<ButtonLayout>Segment 2</ButtonLayout>
</SegmentedButtons>
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<Buttons />
</div>
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<IconButtons />
<Switches />
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<Checkboxes />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Radios />
<TextFields />
<Fabs />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Badges />
</div>
<SegmentedButtons>
<ButtonLayout>
<span>Segment 1</span>
</ButtonLayout>
<ButtonLayout>
<span>Segment 1</span>
</ButtonLayout>
</SegmentedButtons>
<Switches />
<TextFields />
<Fabs />
</div>
</div>
</Fragment>
);

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

@ -7,15 +7,14 @@ import useRippleEffect from '../ripple/hooks/useRippleEffect';
import React, { forwardRef, useId, useRef, useState } from 'react';
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
({ centralRipple = false, variant, ...props }, ref) => {
({ centralRipple = false, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = props.className
? `m3 ${props.className} ${variant}${isActive ? ' is-active' : ''}`
: `m3 ${variant}${isActive ? ' is-active' : ''}`;
const classes =
`m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
return (
<button
@ -38,7 +37,6 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
);
ButtonLayout.propTypes = {
variant: string,
centralRipple: bool,
children: string,
centralRipple: bool,
};

4
src/primitive-components/button-layout/button-layout.types.ts
View File

@ -2,6 +2,4 @@ import { ButtonHTMLAttributes } from 'react';
import { RipplePropsForComponents } from '../ripple/ripple.types';
export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: string;
};
ButtonHTMLAttributes<HTMLButtonElement>;

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

@ -4,6 +4,7 @@ import { forwardRef } from 'react';
import { Icon } from '../components';
import { ButtonProps } from './button.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { bool, oneOf, string } from 'prop-types';
/**
* Button component
@ -12,18 +13,32 @@ import { ButtonLayout } from '../button-layout/button-layout';
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{ centralRipple = false, variant, disabled = false, icon, ...props },
{
icon,
className = '',
disabled = false,
variant = 'filled',
centralRipple = false,
...props
},
ref,
) => (
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={`${variant} ${className}`}
disabled={disabled}
ref={ref}
variant={variant ? variant : 'filled'}
>
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
<span className={'label-large'}>{props.children}</span>
</ButtonLayout>
),
);
Button.propTypes = {
icon: string,
children: string,
centralRipple: bool,
variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
};

3
src/primitive-components/button/button.types.ts
View File

@ -2,9 +2,10 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
import { ButtonHTMLAttributes } from 'react';
export interface ButtonMainProps {
icon?: string;
children?: string;
disabled?: boolean;
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
icon?: string;
}
export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &

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

@ -38,7 +38,6 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
);
CheckBoxLayout.propTypes = {
indeterminate: bool,
typeInput: string,
type: string,
indeterminate: bool,
};

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

@ -1,7 +1,8 @@
import { oneOf } from 'prop-types';
import React, { forwardRef } from 'react';
import { DividerProps } from './divider.types';
const Divider = forwardRef<HTMLHRElement, DividerProps>(
export const Divider = forwardRef<HTMLHRElement, DividerProps>(
({ orientation, variant, ...props }, ref) => (
<hr
{...props}
@ -11,4 +12,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
),
);
export { Divider };
Divider.propTypes = {
orientation: oneOf(['vertical', 'horizontal']),
variant: oneOf(['full-width', 'inset', 'middle-inset']),
};

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

@ -3,6 +3,7 @@
import { forwardRef } from 'react';
import { Icon } from '../components';
import { FABProps } from './fab.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
/**
@ -20,12 +21,13 @@ const sizes = {
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
(
{
variant,
disabled,
icon,
centralRipple = false,
icon = 'edit',
className = '',
size = 'default',
elevated,
elevated = false,
disabled = false,
variant = 'surface',
centralRipple = false,
...props
},
ref,
@ -33,10 +35,9 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
disabled={disabled}
ref={ref}
variant={variant ? variant : 'surface'}
>
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
{icon}
@ -49,3 +50,11 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
</ButtonLayout>
),
);
FAB.propTypes = {
icon: string,
elevated: bool,
children: string,
size: oneOf(['small', 'default', 'large', 'extended']),
variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
};

1
src/primitive-components/fab/fab.types.ts
View File

@ -3,6 +3,7 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
export interface FABMainProps {
icon: string;
children?: string;
disabled?: boolean;
elevated?: boolean;
size?: 'small' | 'default' | 'large' | 'extended';

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

@ -1,9 +1,10 @@
'use client';
import { Icon } from '../components';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
/**
* Icon button-layout component
@ -14,11 +15,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
(
{
icon,
variant,
disabled,
selected = false,
className = '',
toggled = false,
centralRipple,
disabled = false,
selected = false,
variant = 'default',
centralRipple = false,
...props
},
ref,
@ -28,6 +30,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
});
const classes = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`;
const toggle = (classes: string, icon: string) => {
setToggleIcon({
state: classes,
@ -56,11 +60,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
className={classes}
disabled={disabled}
onClick={callback}
ref={buttonRef}
variant={variant ? variant : 'default'}
>
<Icon
fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
@ -73,3 +76,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
);
},
);
IconButton.propTypes = {
icon: string,
selected: bool,
centralRipple: bool,
variant: oneOf(['default', 'filled', 'tonal', 'outlined']),
};

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

@ -2,7 +2,7 @@ import { IconProps } from './icon.types';
import React, { forwardRef } from 'react';
import { number, oneOf, string } from 'prop-types';
const Icon = forwardRef<SVGSVGElement, IconProps>(
export const Icon = forwardRef<SVGSVGElement, IconProps>(
(
{
children = '',
@ -52,5 +52,3 @@ Icon.propTypes = {
type: oneOf(['outlined', 'rounded', 'sharp']),
weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
};
export { Icon };

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

@ -1,11 +1,11 @@
'use client';
import { bool, string } from 'prop-types';
import { RadioProps } from './radio.types';
import { RippleArea } from '../ripple/ripple-area';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { bool, string } from 'prop-types';
/**
* Radio component

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

@ -1,8 +1,8 @@
'use client';
import isEmpty from './utils/utils';
import { RippleProps, RipplesProps } from './ripple.types';
import { rippleAreaContext } from './ripple-area';
import { RippleProps, RipplesProps } from './ripple.types';
import RippleEffectBuild from './utils/ripple-effect-builder';
import React, {
ReactElement,
@ -18,7 +18,7 @@ const Ripples = (props: RipplesProps) => {
const firstRender = useRef<boolean>(true);
const [pending, startTransition] = useTransition();
const LifetimeEnd = (child: ReactElement) => {
const endLifetime = (child: ReactElement) => {
if (child.props.endLifetime) {
child.props.endLifetime();
}
@ -34,11 +34,11 @@ const Ripples = (props: RipplesProps) => {
if (props.children.length > 0 && !pending) {
startTransition(() => {
if (firstRender.current || isEmpty(ripples)) {
setRipples(RippleEffectBuild(props.children, LifetimeEnd));
setRipples(RippleEffectBuild(props.children, endLifetime));
firstRender.current = false;
} else {
setRipples(
RippleEffectBuild(props.children, LifetimeEnd, ripples),
RippleEffectBuild(props.children, endLifetime, ripples),
);
}
});

3
src/primitive-components/segmented-buttons/segmented-buttons.tsx
View File

@ -6,8 +6,7 @@ export const SegmentedButtons = forwardRef<
SegmentedButtonProps
>(({ children, ...props }, ref) => {
if (children.length <= 1) {
console.error('You must build segmented button with 2 or more buttton');
return <></>;
throw 'You must build segmented button with 2 or more buttton';
}
return (

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

@ -1,5 +1,6 @@
'use client';
import { bool } from 'prop-types';
import React, { forwardRef } from 'react';
import { SwitchMainProps } from './switch.types';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
@ -34,3 +35,8 @@ export const Switch = forwardRef<
</svg>
</div>
));
Switch.propTypes = {
icon: bool,
selected: bool,
};

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

@ -92,8 +92,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
TextField.propTypes = {
children: string,
className: string,
placeholder: string,
withAfterIcon: bool,
withBeforeIcon: bool,
supportingText: string,

26
src/styles/divider.sass
View File

@ -1,26 +1,26 @@
hr.m3.m3-divider
display: flex
align-items: end
box-sizing: border-box
border: none
outline: 0.5px solid var(--md-sys-color-outline-variant)
margin: 4px
margin-inline: 4px
position: relative
&.vertical
writing-mode: tb-rl
&, &.full-width
height: 100%
&.inset
align-self: end
height: calc(100% - 16px)
margin-top: 16px
&.middle-inset
height: calc(100% - (2 * 16px))
margin-bottom: 16px
margin-top: 16px
&.horizontal
&, &.full-width
width: 100%
&.inset
align-self: end
width: calc(100% - 16px)
margin-left: 16px
&.middle-inset
width: calc(100% - (2 * 16px))
margin-left: 16px
margin-right: 16px

30
src/styles/generics.css
View File

@ -694,35 +694,30 @@ div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
}
hr.m3.m3-divider {
display: flex;
align-items: end;
box-sizing: border-box;
border: none;
outline: 0.5px solid var(--md-sys-color-outline-variant);
margin: 4px;
margin-inline: 4px;
position: relative;
}
hr.m3.m3-divider.vertical {
writing-mode: tb-rl;
}
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
height: 100%;
}
hr.m3.m3-divider.vertical.inset {
align-self: end;
height: calc(100% - 16px);
margin-top: 16px;
}
hr.m3.m3-divider.vertical.middle-inset {
height: calc(100% - 32px);
margin-bottom: 16px;
margin-top: 16px;
}
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
hr.m3.m3-divider.horizontal {
width: 100%;
}
hr.m3.m3-divider.horizontal.inset {
align-self: end;
width: calc(100% - 16px);
margin-left: 16px;
}
hr.m3.m3-divider.horizontal.middle-inset {
width: calc(100% - 32px);
margin-left: 16px;
margin-right: 16px;
}
label.m3.m3-checkbox-label {
@ -1197,13 +1192,10 @@ html {
.m3.m3-wrapper {
width: 100%;
position: relative;
display: block;
background-color: var(--md-sys-color-surface);
border-radius: 25px;
padding: 25px;
display: flex;
align-items: center;
flex-direction: column;
height: min-content;
}
/*# sourceMappingURL=generics.css.map */

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

7
src/styles/generics.sass
View File

@ -26,11 +26,8 @@ html
.m3.m3-wrapper
width: 100%
position: relative
display: block
background-color: var(--md-sys-color-surface)
border-radius: 25px
padding: 25px
display: flex
align-items: center
flex-direction: column
height: min-content