@xanui/core 1.1.2 → 1.1.3

package/src/theme/ThemeProvider.tsx

@@ -1,140 +0,0 @@
-import * as React from "react"
-import { ThemeOptions } from "./types"
-import Tag from "../Tag"
-import { TagComponentType, TagProps } from "../Tag/types"
-import { BreakpointProvider } from "../breakpoint"
-import { ThemeContex, ThemeFactory } from "./core"
-import ThemeCssVars from "./ThemeCssVars"
-import { css } from "../css"
-
-export type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {
-   theme: string;
-   resetCss?: boolean;
-   scrollbarCss?: boolean;
-   isRootProvider?: boolean;
-   renderIsRoot?: React.ReactElement;
-}
-
-const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps) => {
-   const THEME = ThemeFactory.get(theme) as ThemeOptions
-   if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)
-   resetCss ??= true
-   scrollbarCss ??= true
-
-   React.useMemo(() => {
-      if (!!Object.keys(THEME.globalStyle).length) {
-         css({
-            "@global": THEME.globalStyle
-         })
-      }
-
-      css({
-         "@global": {
-            [`.xui-${theme}-theme-root`]: ThemeCssVars(THEME)
-         }
-      })
-
-      if (scrollbarCss && typeof document !== 'undefined') {
-         let thumbSize = 10
-         let thumbColor = THEME.colors.divider
-         let trackColor = THEME.colors.background.secondary
-         css({
-            "@global": {
-               "*": {
-                  scrollbarWidth: "thin",
-                  scrollbarColor: `${thumbColor} ${trackColor}`,
-               },
-               "::-webkit-scrollbar": {
-                  width: thumbSize,
-                  height: thumbSize,
-               },
-               "::-webkit-scrollbar-thumb": {
-                  backgroundColor: thumbColor,
-                  borderRadius: "5px",
-                  border: "2px solid #f4f4f4",
-               },
-               "::-webkit-scrollbar-thumb:hover": {
-                  backgroundColor: thumbColor,
-               },
-               "::-webkit-scrollbar-track": {
-                  backgroundColor: trackColor,
-                  borderRadius: "5px",
-               },
-            }
-         })
-      }
-
-      resetCss && css({
-         "@global": {
-            "*": {
-               m: 0,
-               p: 0,
-               outline: "none",
-               boxSizing: "border-box",
-               verticalAlign: "baseline",
-            },
-            "html, body": {
-               minHeight: "100%",
-               "-webkit-font-smoothing": "antialiased"
-            } as any,
-            "img, picture, video, canvas, svg": {
-               maxWidth: "100%",
-               display: "block"
-            },
-            "input, button, textarea, select": {
-               font: "inherit"
-            },
-            "table": {
-               borderCollapse: "collapse",
-               borderSpacing: 0
-            },
-            "ol, ul": {
-               listStyle: "none"
-            },
-            "a": {
-               display: "inline-block"
-            },
-            "p, h1, h2, h3, h4, h5, h6": {
-               overflowWrap: "break-word",
-            }
-         }
-      })
-   }, [theme])
-
-   return (
-      <ThemeContex.Provider value={theme}>
-         {
-            isRootProvider ? <BreakpointProvider>
-               <Tag
-                  minHeight="100%"
-                  bgcolor={THEME.colors.background.primary}
-                  fontFamily={THEME.typography.fontFamily}
-                  fontSize={THEME.typography.text.fontSize}
-                  fontWeight={THEME.typography.text.fontWeight}
-                  lineHeight={THEME.typography.text.lineHeight}
-                  {...props}
-                  baseClass={`${theme}-theme-root`}
-                  direction={THEME.rtl ? "rtl" : "ltr"}
-               >
-                  {children}
-                  {renderIsRoot}
-               </Tag>
-            </BreakpointProvider> : <Tag
-               minHeight="100%"
-               bgcolor={THEME.colors.background.primary}
-               fontFamily={THEME.typography.fontFamily}
-               fontSize={THEME.typography.text.fontSize}
-               fontWeight={THEME.typography.text.fontWeight}
-               lineHeight={THEME.typography.text.lineHeight}
-               {...props}
-               baseClass={`${theme}-theme-root`}
-               direction={THEME.rtl ? "rtl" : "ltr"}
-            >
-               {children}
-            </Tag>
-         }
-      </ThemeContex.Provider>
-   )
-}
-
-export default ThemeProvider

package/src/theme/core.ts

@@ -1,21 +0,0 @@
-import React from "react"
-import { ObjectType, ThemeOptions } from "./types"
-
-export const ThemeFactory = new Map<string, ThemeOptions>()
-export const ThemeContex = React.createContext("light")
-export const getTheme = (theme: string) => ThemeFactory.get(theme)
-export const useTheme = (): ThemeOptions => ThemeFactory.get(React.useContext(ThemeContex)) as any
-
-export const mergeObject = (a: ObjectType, b: ObjectType) => {
-   a = { ...a }
-   b = { ...b }
-   for (const key in b) {
-      const v = (b as any)[key]
-      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {
-         a[key] = mergeObject(a[key], b[key])
-      } else {
-         a[key] = v
-      }
-   }
-   return a
-}

package/src/theme/createColor.ts

@@ -1,53 +0,0 @@
-import { ThemeOptions, ThemeColor } from "./types"
-import { alpha } from "../css"
-
-const createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {
-   let color = theme.colors[name]
-   let { primary, secondary } = color as any
-   let text = (color as any).text || theme.colors.text.primary
-   let _alpha = alpha(primary, .1)
-
-   const isBag = (a: any, b: any) => name === "background" ? a : b
-
-   return {
-      alpha: _alpha,
-      template: {
-         outline: {
-            bgcolor: "transparent",
-            color: isBag(text, primary),
-            border: 1,
-            borderColor: isBag("divider", alpha(primary, .4)),
-            hover: {
-               color: isBag(text, primary),
-               borderColor: isBag("divider", alpha(primary, .8)),
-            }
-         },
-         fill: {
-            bgcolor: isBag(secondary, primary),
-            color: text,
-            hover: {
-               bgcolor: isBag(alpha(secondary, .6), secondary),
-               color: text,
-            }
-         },
-         text: {
-            bgcolor: "transparent",
-            color: isBag(text, primary),
-            hover: {
-               bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),
-               color: isBag(text, primary),
-            }
-         },
-         alpha: {
-            bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),
-            color: isBag(text, primary),
-            hover: {
-               bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),
-               color: isBag(text, primary),
-            }
-         }
-      }
-   }
-}
-
-export default createColor

package/src/theme/createTheme.ts

@@ -1,33 +0,0 @@
-import { ThemeOptions, ThemeOptionInput } from "./types"
-import defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'
-import { mergeObject, ThemeFactory } from "./core"
-import createColor from "./createColor"
-import { breakpoints } from "../css"
-
-export const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {
-   if (!ThemeFactory.has(name)) {
-      let theme: any = mergeObject(defaultThemeOption, {
-         ...(darkMode ? darkColorPallete : {}),
-         ...options,
-         name,
-         breakpoints: breakpoints
-      })
-
-      theme = mergeObject(theme, {
-         colors: {
-            background: createColor(theme, "background"),
-            brand: createColor(theme, "brand"),
-            accent: createColor(theme, "accent"),
-            info: createColor(theme, "info"),
-            success: createColor(theme, "success"),
-            warning: createColor(theme, "warning"),
-            danger: createColor(theme, "danger")
-         }
-      })
-      ThemeFactory.set(name, theme)
-   } else {
-      throw new Error(`theme "${name}" already exists!`);
-   }
-
-   return ThemeFactory.get(name) as ThemeOptions
-}

package/src/theme/createThemeSwitcher.ts

@@ -1,18 +0,0 @@
-import { createBucket } from "react-state-bucket"
-import { getTheme } from "./core"
-
-const createThemeSwitcher = (defaultTheme: string, store?: "session" | "local") => {
-   const useThemeState = createBucket({ name: defaultTheme }, { store })
-   const useThemeSwitcher = () => {
-      const state = useThemeState()
-      return {
-         name: state.get("name"),
-         theme: getTheme(state.get("name")),
-         change: (theme: string) => state.set("name", theme)
-      }
-   }
-   return useThemeSwitcher
-}
-
-
-export default createThemeSwitcher

package/src/theme/index.tsx

@@ -1,17 +0,0 @@
-import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'
-import { createTheme } from "./createTheme"
-import ThemeProvider from './ThemeProvider'
-import createThemeSwitcher from './createThemeSwitcher'
-import { getTheme, useTheme } from './core'
-export type { ThemeProviderProps } from './ThemeProvider'
-
-export {
-    ThemeProvider,
-    createThemeSwitcher,
-    getTheme,
-    useTheme
-}
-
-createTheme("light", { colors: lightColorPallete })
-createTheme("dark", { colors: darkColorPallete })
-

package/src/useAnimation.ts

@@ -1,40 +0,0 @@
-import { css } from './css'
-import { useId } from 'react'
-import { CSSProps } from './css/types'
-
-export const animationEases = {
-    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-    easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-    sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
-    linear: "cubic-bezier(0, 0, 1, 1)",
-    easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
-}
-
-export interface UseAnimationProps {
-    delay?: number;
-    duration?: number;
-    from: CSSProps;
-    to: CSSProps;
-    ease?: keyof typeof animationEases;
-}
-
-const useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {
-    let _delay = delay || 0;
-    let _duration = duration || 600;
-    let _ease = ease || "easeBounceOut"
-    const id = "anim" + useId().replace(/:/g, "")
-    const anim = css({
-        animationName: id,
-        animationDelay: _delay + "ms",
-        animationDuration: _duration + "ms",
-        animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,
-        [`@keyframes ${id}`]: {
-            from: from as any,
-            to: to as any
-        }
-    })
-    return anim.classname
-}
-
-export default useAnimation

package/src/useColorTemplate.ts

@@ -1,11 +0,0 @@
-import { useTheme } from "./theme"
-export type ColorTemplateColors = "default" | "brand" | "accent" | "info" | "success" | "warning" | "danger"
-export type ColorTemplateType = "fill" | "outline" | "text" | "alpha"
-
-const useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {
-    const theme: any = useTheme()
-    let _color = color === 'default' ? "background" : color as any
-    return theme.colors[_color]?.template[type]
-}
-
-export default useColorTemplate

package/src/useInterface.ts

@@ -1,13 +0,0 @@
-import { useTheme } from "./theme"
-
-const useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {
-    const theme = useTheme()
-    const _interface = theme.interfaces[name]
-
-    if (_interface) {
-        defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)
-    }
-    return [{ ...defaultProps, ...userPorps }, theme]
-}
-
-export default useInterface

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2015", // <-- Change from "es5" to "es2015"
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}