@sydsoft/base 1.47.0 → 1.49.0

package/grid/index.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+
+import styles from './index.module.css';
+
+// Row Component
+export type typeSpacingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type typeJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export type typeAlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+export type typeAlignContent = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+
+export interface RowProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'wrap' | 'wrap-reverse' | 'nowrap';
+    justifyContent?: typeJustifyContent;
+    alignContent?: typeAlignContent;
+    alignItems?: typeAlignItems;
+    rowSpacing?: typeSpacingValues;
+    colSpacing?: typeSpacingValues;
+}
+
+export const Row: React.FC<RowProps> = ({
+    children,
+    className = '',
+    style,
+    flexDirection = 'row',
+    flexWrap = 'wrap',
+    justifyContent = 'flex-start',
+    alignContent = 'center',
+    alignItems = 'center',
+    rowSpacing = 2,
+    colSpacing = 2,
+    ...other
+}) => {
+    const classes = [
+        styles.row,
+        rowSpacing !== undefined && styles[`row-spacing-${rowSpacing}`],
+        colSpacing !== undefined && styles[`col-spacing-${colSpacing}`],
+        flexDirection !== 'row' && styles[`flex-${flexDirection.replace('-', '-')}`],
+        flexWrap !== 'wrap' && styles[`flex-${flexWrap}`],
+        justifyContent !== 'flex-start' && styles[`justify-${justifyContent.replace('flex-', '').replace('space-', '')}`],
+        alignItems !== 'center' && styles[`align-items-${alignItems.replace('flex-', '')}`],
+        alignContent !== 'center' && styles[`align-content-${alignContent.replace('flex-', '')}`],
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div className={classes} style={style} {...other}>
+            {children}
+        </div>
+    );
+};
+
+// Col Component
+export type GridValues = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ColProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    xs?: GridValues;
+    sm?: GridValues;
+    md?: GridValues;
+    lg?: GridValues;
+    xl?: GridValues;
+    xxl?: GridValues;
+}
+
+export const Col: React.FC<ColProps> = ({ children, className = '', style, xs, sm, md, lg, xl, xxl, ...other }) => {
+    // Cascading logic - aynı sizin component'inizdeki gibi
+
+    const classes = [
+        styles.col,
+        // Sadece belirtilen breakpoint'ler için class ekle
+        xs && styles[`col-xs-${xs}`],
+        sm && styles[`col-sm-${sm}`],
+        md && styles[`col-md-${md}`],
+        lg && styles[`col-lg-${lg}`],
+        xl && styles[`col-xl-${xl}`],
+        xxl && styles[`col-xxl-${xxl}`],
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div className={classes} style={style} {...other}>
+            {children}
+        </div>
+    );
+};
+
+// Hidden Component
+export interface HiddenProps {
+    children: React.ReactElement;
+    hidden?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    onlyHidden?: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl')[];
+}
+
+export const Hidden: React.FC<HiddenProps> = ({ children, hidden, onlyHidden, ...other }) => {
+    const existingClassName = children.props.className || '';
+    const hiddenClasses: string[] = [];
+
+    if (onlyHidden) {
+        onlyHidden.forEach((breakpoint) => {
+            hiddenClasses.push(styles[`hidden-${breakpoint}`]);
+        });
+    } else if (hidden) {
+        // Orijinal mantık: seçilen breakpoint ve altındaki tüm breakpoint'ler gizlenir
+        const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+        const targetIndex = breakpoints.indexOf(hidden);
+
+        if (targetIndex !== -1) {
+            for (let i = 0; i <= targetIndex; i++) {
+                hiddenClasses.push(styles[`hidden-${breakpoints[i]}`]);
+            }
+        }
+    }
+
+    const newClassName = [existingClassName, ...hiddenClasses].filter(Boolean).join(' ');
+
+    return React.cloneElement(children, {
+        className: newClassName,
+        ...other
+    });
+};
+
+
+export const DevelopGridComponent: React.FC = () => {
+    const [currentBreakpoint, setCurrentBreakpoint] = useState('');
+
+    // Breakpoint detector
+    React.useEffect(() => {
+        const updateBreakpoint = () => {
+            const width = window.innerWidth;
+            let breakpoint = '';
+            if (width <= 576) breakpoint = 'XS (≤576px)';
+            else if (width <= 768) breakpoint = 'SM (577-768px)';
+            else if (width <= 992) breakpoint = 'MD (769-992px)';
+            else if (width <= 1200) breakpoint = 'LG (993-1200px)';
+            else if (width <= 1400) breakpoint = 'XL (1201-1400px)';
+            else breakpoint = 'XXL (≥1401px)';
+            setCurrentBreakpoint(breakpoint);
+        };
+
+        updateBreakpoint();
+        window.addEventListener('resize', updateBreakpoint);
+        return () => window.removeEventListener('resize', updateBreakpoint);
+    }, []);
+
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                bottom: '10px',
+                right: '10px',
+                background: '#333',
+                color: 'white',
+                padding: '10px',
+                borderRadius: '4px',
+                zIndex: 9999999
+            }}
+        >
+            Current: {currentBreakpoint}
+        </div>
+    );
+};

package/icon/icons.tsx

@@ -0,0 +1,33 @@
+export const iconMap = {
+    close: {
+        viewBox: '0 -960 960 960',
+        content: (
+            <>
+                <path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z" />
+            </>
+        )
+    },
+    search: {
+        viewBox: '0 0 24 24',
+        content: (
+            <>
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+            </>
+        )
+    },
+    edit: {
+        viewBox: '0 -960 960 960',
+        content: (
+            <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" />
+        )
+    },
+    keyboard_arrow_up: {
+        viewBox: '0 -960 960 960',
+        content: <path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" />
+    },
+    keyboard_arrow_down: {
+        viewBox: '0 -960 960 960',
+        content: <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
+    }
+};

package/icon/index.tsx

@@ -0,0 +1,95 @@
+// https://fonts.google.com/icons adresinden ikonu seçtikten sonra kopyalayalıp alıyoruz. Icon adı da en atta hangisiyse onu ekleyelim, isimler karışmasın
+// https://icons8.com/icons/set/google-drive adresinden ikonu seçtikten sonra kopyalayalıp alıyoruz. Icon adı da en atta hangisiyse onu ekleyelim, isimler karışmasın
+// https://www.svgrepo.com/svg/353811/google-drive?edit=true adresinden ikonu seçtikten sonra kopyalayalıp alıyoruz. Icon adı da en atta hangisiyse onu ekleyelim, isimler karışmasın
+
+import React from 'react';
+import { iconMap } from './icons';
+import { MaterialIconName } from './mui';
+
+export const iconList = Object.keys(iconMap) as IconName[];
+export type IconName = keyof typeof iconMap;
+
+interface BaseProps {
+    color?: string;
+    fontSize?: number | string;
+    style?: React.CSSProperties;
+    className?: string;
+    [key: string]: any;
+}
+
+// name ile customIcon mutually exclusive
+interface NameIconProps extends BaseProps {
+    name: IconName;
+    customIcon?: never;
+    iconMui?: never;
+}
+export type CustomIcon = { viewBox: string; content: React.ReactNode };
+interface CustomIconProps extends BaseProps {
+    customIcon: CustomIcon;
+    name?: never;
+    iconMui?: never;
+}
+
+// materialIcon ekleme
+interface MUIIconProps extends BaseProps {
+    iconMui: MaterialIconName;
+    name?: never;
+    customIcon?: never;
+}
+
+export type Props = NameIconProps | MUIIconProps | CustomIconProps;
+
+const defaultIconStyle: React.CSSProperties = {
+    userSelect: 'none',
+    width: '1em',
+    height: '1em',
+    // display: 'inline-block',
+    verticalAlign: 'middle',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+};
+
+export const Icon: React.FC<Props> = ({ name, iconMui, customIcon, fontSize, color, className, style, ...other }) => {
+    if (iconMui) {
+        return (
+            <span
+                className={`material-icons ${className || ''}`}
+                style={{
+                    ...defaultIconStyle,
+                    ...style,
+                    fontSize: fontSize || '1.3rem',
+                    color: color || 'inherit'
+                }}
+                aria-hidden="true"
+                {...other}
+            >
+                {iconMui}
+            </span>
+        );
+    }
+
+    const iconComponent = name ? iconMap[name] : customIcon;
+
+    if (!iconComponent) {
+        return <span>⚠️</span>;
+    }
+
+    return (
+        <span
+            className={className}
+            style={{
+                ...defaultIconStyle,
+                ...style,
+                fontSize: fontSize || '1.5rem',
+                color: color || 'inherit'
+            }}
+            {...other}
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconComponent.viewBox} fill={'currentColor'} width="1em" height="1em" style={{ display: 'block', flexShrink: 0 }}>
+                {iconComponent.content}
+            </svg>
+        </span>
+    );
+};