CHANGED: README

2024-02-02 14:39:02 +04:00
parent 231bdbec3a
commit d970f5a5b3
23 changed files with 206 additions and 102 deletions
--- a/src/primitive-components/button-layout/button-layout.tsx
+++ b/src/primitive-components/button-layout/button-layout.tsx
@@ -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,
 };
--- a/src/primitive-components/button-layout/button-layout.types.ts
+++ b/src/primitive-components/button-layout/button-layout.types.ts
@@ -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>;
--- a/src/primitive-components/button/button.tsx
+++ b/src/primitive-components/button/button.tsx
@@ -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']),
+};
--- a/src/primitive-components/button/button.types.ts
+++ b/src/primitive-components/button/button.types.ts
@@ -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> &
--- a/src/primitive-components/checkbox-layout/check-box-layout.tsx
+++ b/src/primitive-components/checkbox-layout/check-box-layout.tsx
@@ -38,7 +38,6 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
 );

 CheckBoxLayout.propTypes = {
-    indeterminate: bool,
    typeInput: string,
-    type: string,
+    indeterminate: bool,
 };
--- a/src/primitive-components/divider/divider.tsx
+++ b/src/primitive-components/divider/divider.tsx
@@ -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']),
+};
--- a/src/primitive-components/fab/fab.tsx
+++ b/src/primitive-components/fab/fab.tsx
@@ -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']),
+};
--- a/src/primitive-components/fab/fab.types.ts
+++ b/src/primitive-components/fab/fab.types.ts
@@ -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';
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/src/primitive-components/icon-button/icon-button.tsx
@@ -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']),
+};
--- a/src/primitive-components/icon/icon.tsx
+++ b/src/primitive-components/icon/icon.tsx
@@ -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 };
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@@ -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
--- a/src/primitive-components/ripple/ripple.tsx
+++ b/src/primitive-components/ripple/ripple.tsx
@@ -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),
                    );
                }
            });
--- a/src/primitive-components/segmented-buttons/segmented-buttons.tsx
+++ b/src/primitive-components/segmented-buttons/segmented-buttons.tsx
@@ -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 (
@@ -18,4 +17,4 @@ export const SegmentedButtons = forwardRef<
            {children}
        </div>
    );
-});
+});
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@@ -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,
+};
--- a/src/primitive-components/text-field/text-field.tsx
+++ b/src/primitive-components/text-field/text-field.tsx
@@ -92,8 +92,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(

 TextField.propTypes = {
    children: string,
-    className: string,
-    placeholder: string,
    withAfterIcon: bool,
    withBeforeIcon: bool,
    supportingText: string,
--- a/src/styles/divider.sass
+++ b/src/styles/divider.sass
@@ -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%
+        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%
+        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
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -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 */
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -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