@xanui/core 1.1.0 → 1.1.2

package/src/Transition/variants.ts

@@ -0,0 +1,178 @@
+import { TransitionElementProps } from "."
+
+export const slideDown = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateY(-${_arg.height}px)!important`,
+        },
+        to: {
+            transform: `translateY(0)!important`,
+        }
+    }
+}
+
+export const slideUp = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateY(${_arg.height}px)!important`,
+        },
+        to: {
+            transform: `translateY(0)!important`,
+        }
+    }
+}
+
+export const slideRight = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateX(-${_arg.width}px)!important`,
+        },
+        to: {
+            transform: `translateX(0)!important`,
+        }
+    }
+}
+
+export const slideLeft = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateX(${_arg.width}px)!important`,
+        },
+        to: {
+            transform: `translateX(0)!important`,
+        }
+    }
+}
+
+export const fade = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            opacity: 0
+        },
+        to: {
+            opacity: 1
+        }
+    }
+}
+
+export const fadeDown = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateY(-30px)!important`,
+            opacity: 0
+        },
+        to: {
+            transform: `translateY(0)!important`,
+            opacity: 1
+        }
+    }
+}
+
+export const fadeUp = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateY(30px)!important`,
+            opacity: 0
+        },
+        to: {
+            transform: `translateY(0)!important`,
+            opacity: 1
+        }
+    }
+}
+
+export const fadeRight = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateX(-30px)!important`,
+            opacity: 0
+        },
+        to: {
+            transform: `translateX(0)!important`,
+            opacity: 1
+        }
+    }
+}
+
+export const fadeLeft = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: `translateX(30px)!important`,
+            opacity: 0
+        },
+        to: {
+            transform: `translateX(0)!important`,
+            opacity: 1
+        }
+    }
+}
+
+export const grow = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: "scale(.8, .6)!important",
+            opacity: 0
+        },
+        to: {
+            transform: "scale(1)!important",
+            opacity: 1
+        }
+    }
+}
+
+export const zoom = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: "scale(.8)!important",
+            opacity: 0
+        },
+        to: {
+            transform: "scale(1)!important",
+            opacity: 1
+        }
+    }
+}
+
+export const zoomOver = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            transform: "scale(1.2)!important",
+            opacity: 0
+        },
+        to: {
+            transform: "scale(1)!important",
+            opacity: 1
+        }
+    }
+}
+
+export const collapsVerticle = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            height: 0 + "px!important",
+            overflow: "hidden"
+        },
+        to: {
+            height: _arg?.height ? _arg?.height + "px!important" : "auto",
+            overflow: "hidden"
+        }
+    }
+}
+
+
+export const collapsHorizental = (_arg: TransitionElementProps) => {
+    return {
+        from: {
+            width: 0 + "px!important",
+            overflow: "hidden"
+        },
+        to: {
+            width: _arg?.width ? _arg?.width + "px!important" : "auto",
+            overflow: "hidden"
+        }
+    }
+}
+
+
+
+

package/src/breakpoint/index.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode, useState } from "react";
+import isWindow from "../isWindow";
+import { breakpoints } from "../css";
+import { BreakpointKeys } from "../css/types";
+
+export const BreakpointCtx = React.createContext<BreakpointKeys>("xl")
+
+const getKey = (): BreakpointKeys => {
+    const isWin = isWindow()
+    if (isWin) {
+        const width = window.innerWidth
+        if (width < breakpoints.sm) {
+            return 'xs'
+        } else if (width > breakpoints.xs && width < breakpoints.md) {
+            return 'sm'
+        } else if (width > breakpoints.sm && width < breakpoints.lg) {
+            return 'md'
+        } else if (width > breakpoints.md && width < breakpoints.xl) {
+            return 'lg'
+        } else {
+            return 'xl'
+        }
+    } else {
+        return 'xl'
+    }
+}
+
+export const BreakpointProvider = ({ children }: { children?: ReactNode }) => {
+    const [current, setCurrent] = useState<BreakpointKeys>(getKey)
+
+    const handler = () => {
+        let c = getKey()
+        if (current !== c) {
+            setCurrent(c)
+        }
+    }
+
+    React.useEffect(() => {
+        window.removeEventListener("resize", handler)
+        window.addEventListener("resize", handler)
+        handler()
+        return () => {
+            window.removeEventListener("resize", handler)
+        }
+    }, [current])
+
+    return (
+        <BreakpointCtx.Provider value={current}>
+            {children}
+        </BreakpointCtx.Provider>
+    )
+}

package/src/breakpoint/useBreakpoint.ts

@@ -0,0 +1,31 @@
+import { useContext } from "react"
+import { BreakpointCtx } from "."
+import isWindow from "../isWindow"
+import { breakpoints } from "../css"
+import { BreakpointKeys } from "../css/types"
+
+const useBreakpoint = () => {
+   const val = useContext(BreakpointCtx)
+   const isWin = isWindow()
+   const o = {
+      value: val,
+      is: (key: BreakpointKeys) => val === key,
+      isDown: (key: BreakpointKeys) => {
+         if (isWin) {
+            return window.innerWidth > breakpoints[key]
+         }
+         return false
+      },
+      isUp: (key: BreakpointKeys) => {
+         if (isWin) {
+            return window.innerWidth < breakpoints[key]
+         }
+         return false
+      },
+      isOrDown: (key: BreakpointKeys) => o.is(key) || o.isDown(key),
+      isOrUp: (key: BreakpointKeys) => o.is(key) || o.isUp(key)
+   }
+   return o
+}
+
+export default useBreakpoint

package/src/breakpoint/useBreakpointProps.ts

@@ -0,0 +1,57 @@
+import React, { isValidElement } from "react"
+import useBreakpoint from "./useBreakpoint"
+import { BreakpointKeys } from "../css/types"
+
+export type useBreakpointPropsType<P> = P | {
+   [key in BreakpointKeys]?: P
+}
+
+const useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {
+   const bpoint = useBreakpoint()
+   const stringifiedElement = JSON.stringify(props, (key, value) => {
+      if (key === '_owner' || key === '_store') {
+         return undefined; // Skip circular references
+      }
+      return value;
+   }, 2);
+
+   let format: any = React.useMemo(() => {
+
+      const _format: any = {
+         xs: {},
+         sm: {},
+         md: {},
+         lg: {},
+         xl: {}
+      }
+      for (let prop in props) {
+         let val = (props as any)[prop]
+         if (!isValidElement(val) && typeof val === 'object') {
+            for (let breakpoin in val) {
+               _format[breakpoin][prop] = (props as any)[prop][breakpoin]
+            }
+         } else {
+            _format.xs[prop] = (props as any)[prop]
+         }
+      }
+
+      return _format
+   }, [stringifiedElement, bpoint.value])
+
+   return React.useMemo(() => {
+      let _props = format.xs || {};
+      for (let key of ['sm', 'md', 'lg', 'xl']) {
+         if (bpoint.isOrDown(key as any)) {
+            _props = { ..._props, ...format[key] };
+         }
+         if (bpoint.is(key as any)) {
+            break;
+         }
+      }
+      return _props;
+   }, [format, bpoint.value]);
+}
+
+
+
+export default useBreakpoinProps

package/src/css/aliases.ts

@@ -0,0 +1,35 @@
+import { OptionAliases } from 'oncss'
+import { Aliases } from './types'
+
+const isStr = (v: any, or: any) => typeof v === 'string' ? v : or
+
+const aliases: OptionAliases<Aliases> = {
+   bgcolor: (v) => ({ backgroundColor: v }),
+   bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
+   bg: (v) => ({ background: v }),
+   p: (v) => ({ padding: isStr(v, 8 * v) }),
+   pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
+   pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
+   pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
+   pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
+   px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
+   py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
+   m: (v) => ({ margin: isStr(v, 8 * v) }),
+   mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
+   mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
+   mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
+   ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
+   mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
+   my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
+   radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
+   borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
+   shadow: (v) => ({ boxShadow: v }),
+   flexBox: (v) => (v ? { display: "flex" } : {}),
+   flexRow: (v) => (v ? { flexDirection: "row" } : {}),
+   flexColumn: (v) => (v ? { flexDirection: "column" } : {}),
+   flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
+   direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
+   gap: (v) => ({ gap: isStr(v, 8 * v) }),
+};
+
+export default aliases

package/src/css/getProps.ts

@@ -0,0 +1,38 @@
+import { CSSProps } from "./types";
+
+const getProps = (prop: string, value: string, _css: CSSProps) => {
+    let important;
+    if (typeof value === 'string') {
+        const split = value.split("!")
+        important = split[1] ? "!important" : ""
+        value = split[0]
+    }
+
+    if (prop === 'disabled') {
+        if ((value as any) === true) {
+            return {
+                pointerEvents: "none!important",
+                cursor: "default!important",
+                userSelect: "none!important",
+                opacity: ".8!important"
+            } as any
+        }
+        return {}
+    }
+
+    if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop as any)) {
+        const keys: any = Object.keys(_css)
+        let p: any = {
+            [`${prop}Width`]: value + 'px' + (important || ""),
+        }
+        if (!keys.includes(`${prop}Color`)) {
+            p[`${prop}Color`] = "divider"
+        }
+        if (!keys.includes(`${prop}Style`)) {
+            p[`${prop}Style`] = "solid"
+        }
+        return p
+    }
+}
+
+export default getProps

package/src/css/getValue.ts

@@ -0,0 +1,117 @@
+import { CSSProps } from "./types"
+
+const getColor = (color: string) => {
+    return {
+        [`${color}`]: `var(--color-${color}-primary)`,
+        [`${color}.primary`]: `var(--color-${color}-primary)`,
+        [`${color}.secondary`]: `var(--color-${color}-secondary)`,
+        [`${color}.text`]: `var(--color-${color}-text)`,
+        [`${color}.alpha`]: `var(--color-${color}-alpha)`
+    }
+}
+
+const withImportant = (important: any, value: any) => important ? value + important : value
+const colors: any = {
+    "text": `var(--color-text-primary)`,
+    "text.primary": `var(--color-text-primary)`,
+    "text.secondary": `var(--color-text-secondary)`,
+
+    "background": `var(--color-background-primary)`,
+    "background.primary": `var(--color-background-primary)`,
+    "background.secondary": `var(--color-background-secondary)`,
+    "background.alpha": `var(--color-background-alpha)`,
+    "divider": `var(--color-divider)`,
+
+    ...getColor("brand"),
+    ...getColor("accent"),
+    ...getColor("info"),
+    ...getColor("success"),
+    ...getColor("warning"),
+    ...getColor("danger"),
+}
+
+const breakpoints: any = {
+    "xs": "var(--bp-xs)",
+    "sm": "var(--bp-sm)",
+    "md": "var(--bp-md)",
+    "lg": "var(--bp-lg)",
+    "xl": "var(--bp-xl)"
+}
+
+let fontsizes: any = {
+    "h1": "var(--fontsize-h1)",
+    "h2": "var(--fontsize-h2)",
+    "h3": "var(--fontsize-h3)",
+    "h4": "var(--fontsize-h4)",
+    "h5": "var(--fontsize-h5)",
+    "h6": "var(--fontsize-h6)",
+    "text": "var(--fontsize-text)",
+    "button": "var(--fontsize-button)",
+    "small": "var(--fontsize-small)"
+}
+
+let lineHeights: any = {
+    "h1": "var(--lineheight-h1)",
+    "h2": "var(--lineheight-h2)",
+    "h3": "var(--lineheight-h3)",
+    "h4": "var(--lineheight-h4)",
+    "h5": "var(--lineheight-h5)",
+    "h6": "var(--lineheight-h6)",
+    "text": "var(--lineheight-text)",
+    "button": "var(--lineheight-button)",
+    "small": "var(--lineheight-small)"
+}
+
+let fontWeights: any = {
+    "h1": "var(--fontweight-h1)",
+    "h2": "var(--fontweight-h2)",
+    "h3": "var(--fontweight-h3)",
+    "h4": "var(--fontweight-h4)",
+    "h5": "var(--fontweight-h5)",
+    "h6": "var(--fontweight-h6)",
+    "text": "var(--fontweight-text)",
+    "button": "var(--fontweight-button)",
+    "small": "var(--fontweight-small)"
+}
+
+let font: any = {
+    "h1": "var(--font-h1)",
+    "h2": "var(--font-h2)",
+    "h3": "var(--font-h3)",
+    "h4": "var(--font-h4)",
+    "h5": "var(--font-h5)",
+    "h6": "var(--font-h6)",
+    "text": "var(--font-text)",
+    "button": "var(--font-button)",
+    "small": "var(--font-small)"
+}
+
+const getValue = (prop: any, value: string | number, _css: CSSProps): any => {
+    let important;
+
+    if (typeof value === 'string') {
+        const split = value.split("!")
+        important = split[1] ? "!important" : ""
+        value = split[0]
+    }
+
+    if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {
+        return withImportant(important, breakpoints[value] || value)
+    } else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {
+        return withImportant(important, "var(--font-family)")
+    } if (prop === 'font' && typeof value === "string" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
+        return withImportant(important, font[value] || value)
+    } if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
+        return withImportant(important, fontWeights[value] || value)
+    } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
+        return withImportant(important, lineHeights[value] || value)
+    } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {
+        return withImportant(important, fontsizes[value] || value)
+    } else if (typeof value === "number" && ["shadow", "boxShadow"].includes(prop)) {
+        return withImportant(important, `var(--shadow-${value})`)
+    }
+
+    return withImportant(important, colors[value] || value)
+}
+
+export default getValue

package/src/css/index.ts

@@ -0,0 +1,78 @@
+import getValue from "./getValue"
+import getProps from "./getProps"
+import aliases from "./aliases"
+import { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'
+import { css as _css } from "oncss"
+
+export {
+    getValue,
+    getProps
+}
+
+export const breakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+}
+
+export const css = (props: CSSProps, options?: CSSOptionProps) => {
+    const cssOptions: CSSOptionProps = {
+        ...options,
+        breakpoints,
+        aliases,
+        getValue: (p: any, v: any, _c: any, dept) => {
+            if (options?.getValue) {
+                let _val = options?.getValue(p, v, _c, dept)
+                if (_val) return _val
+            }
+            return getValue(p, v, _c)
+        },
+        getProps: (p: any, v: any, _c: any, dept) => {
+            if (options?.getProps) {
+                let _p = options?.getProps(p, v, _c, dept)
+                if (_p) return _p
+            }
+            return getProps(p, v, _c)
+        },
+    }
+    return _css<Aliases, BreakpointKeys>(props, cssOptions)
+}
+
+export const adjustColor = (hex: string, factor: number) => {
+
+    hex = hex.replace(/^#/, '')
+
+    let r = parseInt(hex.slice(0, 2), 16)
+    let g = parseInt(hex.slice(2, 4), 16)
+    let b = parseInt(hex.slice(4, 6), 16)
+
+    r = Math.floor(r * factor)
+    g = Math.floor(g * factor)
+    b = Math.floor(b * factor)
+
+    r = Math.min(255, Math.max(0, r))
+    g = Math.min(255, Math.max(0, g))
+    b = Math.min(255, Math.max(0, b))
+
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+export const adjustTextContrast = (color: string) => {
+    color = color.replace(/^#/, '')
+    const r = parseInt(color.slice(0, 2), 16);
+    const g = parseInt(color.slice(2, 4), 16);
+    const b = parseInt(color.slice(4, 6), 16);
+
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#111111' : '#FFFFFF';
+}
+
+export const alpha = (color: string, opacity = 1) => {
+    if (typeof opacity !== 'number') return color
+    let _opacity = opacity * 100
+    if (!color.startsWith("#")) throw new Error(`color must be hex`)
+    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
+};
+

package/{css/types.d.ts → src/css/types.ts}

@@ -1,11 +1,10 @@
-import * as CSS from 'csstype';
-import { ColorsRefTypes, TypographyRefTypes, ThemeOptions } from '../theme/types';
-import * as oncss from 'oncss';
-export type FN = (theme: ThemeOptions) => string | number;
-export type CSSBreakpointType = {
-    [key in BreakpointKeys]: string | number;
-};
-export type CSSValueType<T extends keyof CSS.Properties> = CSS.Properties[T] | Partial<CSSBreakpointType> | number;
+import * as CSS from 'csstype'
+import { ColorsRefTypes, TypographyRefTypes, ThemeOptions, } from '../theme/types';
+import * as oncss from 'oncss'
+export type FN = (theme: ThemeOptions) => string | number
+export type CSSBreakpointType = { [key in BreakpointKeys]: string | number }
+export type CSSValueType<T extends keyof CSS.Properties> = CSS.Properties[T] | Partial<CSSBreakpointType> | number
+
 export type Aliases = {
     bgcolor?: CSSValueType<'background'> | ColorsRefTypes;
     bgimage?: CSSValueType<'backgroundImage'>;
@@ -26,6 +25,7 @@ export type Aliases = {
     my?: CSSValueType<'margin'>;
     size?: CSSValueType<'width'>;
     spacing?: Partial<CSSBreakpointType> | number;
+
     radius?: CSSValueType<'borderRadius'> | number;
     borderRadius?: CSSValueType<'borderRadius'> | number;
     shadow?: CSSValueType<'boxShadow'> | number;
@@ -35,20 +35,26 @@ export type Aliases = {
     flexWraped?: boolean;
     direction?: "row" | "column" | CSSValueType<'direction'>;
     gap?: CSSValueType<'gap'>;
+
     color?: CSSValueType<'color'> | ColorsRefTypes;
     width?: CSSValueType<'width'> | BreakpointKeys;
-    height?: CSSValueType<'height'>;
+    height?: CSSValueType<'height'>
     borderColor?: CSSValueType<'backgroundColor'> | ColorsRefTypes;
+
     fontFamily?: CSSValueType<"fontFamily"> | "default";
     fontSize?: CSSValueType<"fontSize"> | TypographyRefTypes;
     minWidth?: CSSValueType<"minWidth"> | BreakpointKeys;
     maxWidth?: CSSValueType<"maxWidth"> | BreakpointKeys;
-    minHeight?: CSSValueType<"minHeight">;
-    maxHeight?: CSSValueType<"maxHeight">;
-};
-export type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl";
-export type CSSProps = oncss.CSSProps<Aliases, BreakpointKeys>;
-export type CSSOptionProps = oncss.CSSOptionProps<Aliases, BreakpointKeys>;
+    minHeight?: CSSValueType<"minHeight">
+    maxHeight?: CSSValueType<"maxHeight">
+}
+
+
+export type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl"
+
+export type CSSProps = oncss.CSSProps<Aliases, BreakpointKeys>
+export type CSSOptionProps = oncss.CSSOptionProps<Aliases, BreakpointKeys>
+
 export type GlobalCSS = {
     [key: string]: oncss.CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
-};
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+import Tag from './Tag'
+import useTagProps from './Tag/useTagProps'
+import useAnimation from './useAnimation'
+import useColorTemplate from './useColorTemplate'
+import useBreakpoint from './breakpoint/useBreakpoint'
+import useBreakpointProps from './breakpoint/useBreakpointProps'
+import ServerStyleTags from './ServerStyleTags'
+import isWindow from './isWindow'
+import useInterface from './useInterface'
+import Transition from './Transition'
+
+export * from './css'
+export * from "./theme"
+export * from './css/types'
+export * from './Tag/types'
+export * from './theme/types'
+export * from './useColorTemplate'
+export * from './useAnimation'
+export type * from './Transition'
+export type * from './Tag/types'
+export type { useBreakpointPropsType } from './breakpoint/useBreakpointProps'
+
+export {
+    Tag,
+    useTagProps,
+    useAnimation,
+    Transition,
+    useColorTemplate,
+    ServerStyleTags,
+    useBreakpoint,
+    useBreakpointProps,
+    isWindow,
+    useInterface
+}

package/src/isWindow.ts

@@ -0,0 +1,3 @@
+
+const isWindow = (): Window | void => typeof window !== 'undefined' ? window : undefined
+export default isWindow