amotify 0.0.2 → 0.0.4

package/src/@types/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import * as ReactRouterDom from "react-router";
+
+declare global {
+  type ReactElement = React.ReactNode | React.ReactNode[]
+  type React = typeof React
+
+  type FNC<P> = React.FC<P>;
+
+  interface plainObject {
+    [ index: string ]: any;
+  }
+
+  namespace amotify {
+    type ToneTypes = 'default' | 'flat' | 'sharp'
+    type DarkModeTypes = 'light' | 'auto' | 'dark' | 'dim'
+    type ThemeColorTypes = 'comun' | 'leaf' | 'heart' | 'droplet' |
+
+      'brick' | 'flower' | 'lip' | 'wine' | 'theater' | 'bat' | 'poizon' | 'eggplant' | 'ufo' | 'alien' | 'tombstone' | 'ninja' | 'moon' | 'rain' | 'unicorn' | 'axe' | 'gem' | 'soap' | 'drizzle' | 'building' | 'fish' | 'icicles' | 'water' | 'tree1' | 'tree2' | 'tree3' | 'battery' | 'seedle' | 'greenTea' | 'oak' | 'salad' | 'cloudy' | 'lemon' | 'angel' | 'parasol' | 'pizza' | 'thunder' | 'latte' | 'island' | 'shovel' | 'coffee' | 'carrot' | 'cactus' | 'volcano' | 'choco' | 'industry' | 'gun' | 'galaxy' |
+
+      'line' | 'twitter' | 'amazon' | 'facebook' | 'android' | 'slackBlue' | 'slackGreen' | 'slackRed' | 'slackYellow' | 'slackBase' | 'googleBlue' | 'googleGreen' | 'googleYellow' | 'googleRed'
+
+    type RoundnessTypes = 0 | 1 | 2 | 3 | 4 | 5
+
+    namespace config {
+      type Methods = {
+        version: string
+        tone: amotify.ToneTypes
+        themeColor: amotify.ThemeColorTypes
+        darkMode: amotify.DarkModeTypes
+        roundness: amotify.RoundnessTypes
+        device: {
+          isWhat: 'Windows' | 'Android' | 'iPhone' | 'iPad' | 'macOSX' | 'undefined'
+          isBreakpoint(): boolean
+          isPhonepoint(): boolean
+          isSystemDarkmode(): boolean
+          isPhone: boolean
+          isTouchDevice: boolean
+          isIOS: boolean
+        }
+        update: {
+          tone( value: amotify.ToneTypes ): void
+          themeColor( value: amotify.ThemeColorTypes ): void
+          darkMode( value: amotify.DarkModeTypes ): void
+          roundness( value: amotify.RoundnessTypes ): void
+        }
+        readExtraCDN( url: string ): Promise<boolean>
+      }
+    }
+  }
+  interface amotify {
+    config: amotify.config.Methods
+    glob: amotify.glob.Methods
+    atoms: amotify.atoms.Methods
+    mols: amotify.mols.Methods
+    orgs: amotify.orgs.Methods
+    temps: amotify.temps.Methods
+    fn: amotify.fn.Methods
+  }
+  var amotify: amotify;
+
+
+  namespace _WebSocket {
+    interface Methods {
+      emit( path: string,data: any ): _WebSocket.Methods
+      on( path: string,data: {
+        ( data: any ): void
+      } ): _WebSocket.Methods
+    }
+  }
+  var io: {
+    ( url: string ): _WebSocket.Methods
+  }
+}

package/src/@types/jsminAmotifyExtension.tsx

@@ -0,0 +1,143 @@
+export { }
+
+declare global {
+  // Fetch
+  interface JsminExtension {
+    fetch: {
+      get: JsminExtension.Fetch.CoreParams
+      post: JsminExtension.Fetch.CoreParams
+      put: JsminExtension.Fetch.CoreParams
+      options: JsminExtension.Fetch.CoreParams
+      waitList: string[]
+      defaultHeaders: plainObject
+      defaultResultCallback?: {
+        ( params: Jsmin.Fetch.Output ): void
+      }
+    }
+  }
+  namespace JsminExtension {
+    namespace Fetch {
+      type CoreParams = {
+        ( params: JsminExtension.Fetch.Input,callback?: JsminExtension.Fetch.callback ): Promise<Jsmin.Fetch.Output>
+      }
+      type Input = {
+        key: string
+        topLoader?: boolean
+        cornerLoader?: boolean
+        trafficControl?: number
+        preventMultiRequest?: boolean
+      } & Omit<Jsmin.Fetch.Input,'method'>
+      type callback = {
+        ( result: Jsmin.Fetch.Output ): void
+      }
+    }
+  }
+  // SpreadSheet
+  interface JsminExtension {
+    spreadSheet: {
+      readFromFile( file: amotify.fn.Input.Filer.CustomFile ): Promise<JsminExtension.SpreadSheet.Method>
+      readFromJson( v: JsminExtension.SpreadSheet.JsonTypes ): Promise<JsminExtension.SpreadSheet.Method>
+    }
+  }
+  namespace JsminExtension {
+    namespace SpreadSheet {
+      interface Instance {
+        fn: Method
+        prototype: Method
+
+        ( v: any,a: string ): any
+      }
+      interface Method {
+        getWorkbook(): any
+        updateFileName( fileName: string ): void
+        updateMerges( merges: MergeTypes[][] ): void
+        updateStyles( styles: StyleTypes[][] ): void
+        toJson(): {
+          fileName: string
+          sheets: {
+            sheetName: string
+            rows: any[]
+          }[]
+        }
+        export( type?: 'xlsx' | 'csv' ): void
+      }
+
+      type JsonTypes = {
+        fileName: string
+        sheets: SheetParams[]
+      }
+      type SheetParams = {
+        sheetName: string
+        rows: RowParams[]
+        headers?: HeaderParams[]
+        merges?: MergeTypes[]
+        styles?: StyleTypes[]
+      }
+      type HeaderParams = {
+        key: string
+        value: string
+      }
+      type RowParams = {
+        [ key: string ]: string | number
+      }
+      type MergeTypes = [ string,string ] | [ null,null ]
+      type StyleTypes = {
+        type: 'cell' | 'row' | 'column'
+        target: string | number | ( string | number )[]
+        values: {
+          [ key: string ]: any
+        }
+      }
+    }
+  }
+
+  // Others
+  interface JsminExtension {
+    formCollect( form: string ): Promise<{
+      valid: boolean
+      data: plainObject
+    }>
+    NoticeHttpStatus( params: {
+      status: number
+      statusText: string
+      label: ReactElement
+    } & amotify.fn.SnackBar.AddParams ): void
+
+    copyToClipboard( data: any ): Promise<{
+      ok: boolean
+      body: any
+    }>
+    getCurrentLocation: {
+      (): Promise<JsminExtension.getCurrentLocationOutput>
+    }
+    CDNReader: {
+      ( url: string ): void
+    }
+    ImageLoader: {
+      ( dataUrl: string,img?: HTMLImageElement ): Promise<HTMLImageElement>
+    }
+    isJSXElement( v: any ): v is JSX.Element
+  }
+  namespace JsminExtension {
+    type getCurrentLocationOutput = {
+      ok: false
+      status: number
+      body: {
+        reason: any
+      }
+    } | {
+      ok: true
+      status: 200
+      body: {
+        lat: number
+        lng: number
+      }
+    }
+
+  }
+  type base64ToBlobTypeProps = 'image/png' | 'image/jpeg' | string
+
+  interface String {
+    zen2hanNumber(): string
+  }
+}

package/src/@types/module.tsx

@@ -0,0 +1,2 @@
+declare module "*.scss";
+declare module "react-dom";

package/src/@types/state.tsx

@@ -0,0 +1,199 @@
+export { }
+declare global {
+  type amotifyBasicElement = amotify.UniStyles.BasicTagParams & amotifyUniStyleParams
+  type amotifyUniStyleParams = amotify.UniStyles.Params & {
+    freeCSS?: React.CSSProperties
+
+    UnderBreakPointStyles?: amotify.UniStyles.Params
+    hoverStyles?: amotify.UniStyles.Params
+    focusStyles?: amotify.UniStyles.Params
+    activeStyles?: amotify.UniStyles.Params
+
+    ssEffectsOnActive?: amotify.UniStyles.Others.EffectsOnActiveTypes | amotify.UniStyles.Others.EffectsOnActiveTypes[] | false
+    ssPushable?: boolean
+    ssLastChildLossBorder?: 'bottom' | 'right' | false
+  }
+  namespace amotify {
+    namespace UniStyles {
+      type BasicTagParams = {
+        className?: string
+        id?: string
+        componentID?: string
+      }
+
+      type Params = Pargins.Params & Fonts.Params & Borders.Params & FlexGrids.Params & Sizes.Params & StyleSets.Params & {
+        backgroundColor?: Others.BackgroundColorParams
+        gradients?: {
+          deg: number
+          colors: string[]
+        }
+
+        boxShadow?: 0 | 1 | 2 | 3 | 4 | -1 | -2 | -3 | 'none' | 'borderBox'
+
+        display?: 'block' | 'none' | 'flex' | 'grid' | 'inlineBlock' | 'inlineFlex'
+
+        gap?: Others.gapParams
+        overflow?: Others.overflowParams
+        position?: 'relative' | 'absolute' | 'fixed' | 'sticky' | 'static'
+
+        top?: Others.TRBLParams | 'topBase' | 'topNavigationHeight'
+        right?: Others.TRBLParams
+        bottom?: Others.TRBLParams
+        left?: Others.TRBLParams
+
+        opacity?: 'trans' | 'low' | 'middle' | 'high' | 'most'
+
+        transition?: 'none' | 'short' | 'middle' | 'long'
+      }
+      namespace Pargins {
+        type Params = {
+          margin?: GroupParams
+          marginTop?: UnitParams
+          marginRight?: UnitParams
+          marginBottom?: UnitParams
+          marginLeft?: UnitParams
+
+          padding?: GroupParams
+          paddingTop?: UnitParams
+          paddingRight?: UnitParams
+          paddingBottom?: UnitParams
+          paddingLeft?: UnitParams
+        }
+
+        type UnitParams =
+          0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' |
+          1 | 1.5 | 2 | 2.5 | 3 | 4 |
+          'auto' | 'safeAreaTop' | 'safeAreaBottom'
+        type GroupParams = UnitParams | [ UnitParams,UnitParams ] | [ UnitParams,UnitParams,UnitParams,UnitParams ]
+      }
+      namespace Borders {
+        type Params = {
+          border?: BorderParams
+          borderTop?: BorderParams
+          borderRight?: BorderParams
+          borderBottom?: BorderParams
+          borderLeft?: BorderParams
+
+          borderWidth?: WidthParams
+          borderColor?: ColorParams
+          borderStyle?: StyleParams
+
+          borderRadius?: RadiusParams
+          borderTopLeftRadius?: RadiusParams
+          borderTopRightRadius?: RadiusParams
+          borderBottomLeftRadius?: RadiusParams
+          borderBottomRightRadius?: RadiusParams
+        }
+        type BorderParams = boolean | '0.trans' | '1.thin' | '2.normal' | '3.strong' | 'unset'
+        type WidthParams = 0 | 1 | 2 | 3 | 4
+        type ColorParams = '0.trans' | '1.thin' | '2.normal' | '3.strong' | 'theme' | 'posi' | 'nega' | 'warn' | 'white'
+        type StyleParams = 'solid' | 'dashed' | 'double' | 'dotted'
+        type RadiusParams = 0 | '1/3' | '2/3' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'sphere' | 'inherit' |
+          '1.tone.primary' | '2.tone.secondary' | '3.tone.tertiary'
+      }
+      namespace FlexGrids {
+        type Params = {
+          flexSizing?: 'none' | 'auto' | 0
+          flexWrap?: boolean
+          flexCenter?: boolean
+          flexType?: TypeParams
+          flexChilds?: 'even' | 'auto' | 'none' | 'unset'
+          flexGrid?: GridParams
+          flexNewLine?: boolean
+          verticalAlign?: VerticalAlignParams
+          horizontalAlign?: HorizontalAlignParams
+
+          gridCenter?: boolean
+          gridCols?: GridColsParams
+        }
+
+        type TypeParams = 'row' | 'row-r' | 'col' | 'col-r'
+        type VerticalAlignParams = 'center' | 'top' | 'bottom' | 'baseline' | 'unset'
+        type HorizontalAlignParams = 'center' | 'left' | 'right' | 'between' | 'around' | 'even' | 'unset'
+        type GridParams = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'unset'
+
+        type GridColsParams = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+      }
+      namespace Fonts {
+        type Params = {
+          fontColor?: ColorParams
+          fontSize?: SizeParams
+          fontWeight?: WeightParams
+
+          isBoldFont?: boolean
+          isRounded?: boolean
+
+          textAlign?: 'left' | 'center' | 'right'
+        }
+        type WeightParams = '1.lighter' | '2.normal' | '3.bold'
+        type ColorParams =
+          Others.UniColors |
+          '1.clear' | '2.normal' | '3.blur' | '4.thin' | '5.translucent' | '6.clear' |
+          'mono' | 'monoSecond' | 'logo'
+        type SizeParams =
+          '0.xs' |
+          '1.mini' |
+          '2.normal' |
+          '3.paragraph' |
+          '4.thirdTitle' |
+          '5.subTitle' |
+          '6.title' |
+          '7.landing' |
+          '8.xl' | 'inherit'
+      }
+      namespace Sizes {
+        type Params = {
+          maxHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset'
+          minHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset'
+          minWidth?: 0 | 1 | 'unset'
+          maxWidth?: 0 | 1 | 'unset'
+
+          unitWidth?: SizeParams
+          unitHeight?: SizeParams
+          width?: 0 | 1 | 'viewWidth' | 'auto'
+          height?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'auto'
+        }
+
+        type SizeParams = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 6 | 8 | 12 | 'unset'
+      }
+      namespace StyleSets {
+        type Params = {
+          ssCardBox?: boolean | 'border' | 'layer' | 'cloud' | 'shadow'
+          ssSphere?: Sizes.SizeParams
+          ssSquare?: Sizes.SizeParams
+          ssAbsoluteCovered?: boolean
+          ssTextEllipsis?: boolean
+        }
+      }
+      namespace Others {
+        type gapUnitParams = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 4
+        type gapParams = gapUnitParams | [ gapUnitParams,gapUnitParams ]
+
+        type overflowUnitParams = 'auto' | 'hidden' | 'scroll' | 'visible' | 'unset'
+        type overflowParams = overflowUnitParams | [ overflowUnitParams,overflowUnitParams ]
+
+        type UniColors = 'inherit' | 'theme' | 'posi' | 'nega' | 'warn' | 'white' | 'black' | amotify.ThemeColorTypes
+        type BackgroundColorParams = UniColors |
+          '1.layer.base' | '2.layer.cloud' | '3.layer.canvas' | '4.layer.darken' | '5.layer.darker' | '6.layer.darkest' |
+          'cloud' |
+
+          'lcOpFew' | 'lcOpLow' | 'lcOpMiddle' | 'lcOpHigh' |
+          'tcOpFew' | 'tcOpLow' | 'tcOpMiddle' | 'tcOpHigh' |
+          'tcLighten' | 'tcLighter' | 'tcLightest' |
+          'tcDarken' | 'tcDarker' | 'tcDarkest' |
+          'negaOpLow' | 'negaOpMiddle' |
+          'posiOpLow' | 'posiOpMiddle' |
+          'trans' | 'dark' | 'monoPrime' | 'monoSecond' | 'none'
+
+        type TRBLParams =
+          0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' |
+          1 | 2 | 3 | 4 |
+          '50%' | '100%'
+
+        type EffectsOnActiveTypes =
+          'ripple.white' | 'ripple.cloud' | 'ripple.theme' | 'none' |
+          'expand' | 'shrink' | 'pudding' | 'fade'
+      }
+    }
+  }
+}

package/src/Atoms/@export.tsx

@@ -0,0 +1,32 @@
+import {
+  Box,
+  Span,
+  Img,
+  Flex,
+  FlexBr,
+  Grid,
+  Paragraph,
+  Placeholder
+} from './Various/parts';
+
+import { FAIcon } from './FAIcon/parts';
+
+import { Logo } from './Logo/parts';
+
+export {
+  Flex,
+  FlexBr,
+
+  FAIcon,
+
+  Placeholder,
+
+  Grid,
+
+  Logo,
+
+  Box,
+  Span,
+  Paragraph,
+  Img
+}

package/src/Atoms/FAIcon/parts.tsx

@@ -0,0 +1,117 @@
+import style from './style.module.scss';
+
+import {
+  Box
+} from '../Various/parts';
+
+const FaIconComp: FNC<amotify.atoms.FAIcon.FAIconFNC> = ( params ) => {
+  let {
+    iconAnimation = false,
+    iconFamily,
+
+    isSolidIcon,
+    isRegularIcon,
+    isLightIcon,
+    isThinIcon,
+    isDuotoneIcon,
+
+    isBrandIcon = false,
+    d = 'image-slash',
+    ...others
+  } = params;
+
+  let ClassNames = [
+    style.FAIcon,
+    'fa-' + d,
+    'fa-fw'
+  ];
+
+  if ( !isBrandIcon ) {
+    let { tone } = amotify.config;
+    if ( !isSolidIcon && !isRegularIcon && !isLightIcon && !isThinIcon && !isDuotoneIcon ) isRegularIcon = true;
+    if ( tone == 'default' ) {
+    } else if ( tone == 'sharp' ) {
+      iconFamily = iconFamily || 'sharp';
+    }
+
+    let iconStyle =
+      isSolidIcon ? 'solid' :
+        isRegularIcon ? 'regular' :
+          isLightIcon ? 'light' :
+            isThinIcon ? 'thin' :
+              isDuotoneIcon ? 'duotone' :
+                'regular';
+
+    iconFamily = iconFamily || 'classic';
+
+    if ( iconAnimation == 'spin-reverse' ) iconAnimation = 'spin fa-spin-reverse' as any;
+
+    ClassNames = [
+      'fa-' + iconFamily,
+      'fa-' + iconStyle,
+      ...ClassNames
+    ];
+    if ( iconAnimation ) ClassNames.push( 'fa-' + iconAnimation );
+  } else {
+    ClassNames = [
+      'fa-brands',
+      ...ClassNames
+    ];
+  }
+
+
+  return ( <Box
+    verticalAlign='center'
+    horizontalAlign='center'
+    { ...others }
+    freeCSS={ {
+      display: 'inline-flex',
+      ...others.freeCSS
+    } }
+  >
+    <i className={ ClassNames.join( ' ' ) } />
+  </Box> );
+}
+
+
+const FAIcon: amotify.atoms.FAIcon.Method = FaIconComp as any;
+
+let shortKeys = [
+  'user',
+  'times',
+  'descktop',
+
+  'angle-right','angle-left','angle-up','angle-down',
+  'chevron-left','chevron-right','chevron-up','chevron-down',
+  'caret-left','caretRight','caret-up','caret-down',
+  'arrow-left','arrow-right','arrow-up','arrow-down',
+
+  'rotate','rotate-left','rotate-right','redo',
+
+  'play','pause','stop','forward-step','backward-step',
+  'check','check-circle',
+  'question','question-circle','exclamation','exclamation-triangle',
+  'home','share','volume',
+  'search','yen-sign','heart','star',
+
+  'edit','pen','copy','files','file',
+  'backspace',
+  'trash-alt',
+  'bars',
+  'download',
+  'link','link-slash','external-link-alt',
+  'gear',
+  'plus','minus','equals','calculator',
+  'image',
+  'badge-percent'
+];
+for ( let key of shortKeys ) {
+  FAIcon[ key.toCapital() as 'User' ] = ( params: amotify.atoms.FAIcon.FAIconFNC ) => {
+    return <FaIconComp
+      d={ key }
+      { ...params }
+    />;
+  };
+}
+
+export { FAIcon }

package/src/Atoms/FAIcon/style.module.scss

@@ -0,0 +1,9 @@
+@use '@uniVar' as *;
+@use'@styleSet' as *;
+
+.FAIcon {
+  &:global.fa-duotone {
+    // --fa-primary-opacity: 1;
+    // --fa-secondary-opacity: 0.30;
+  }
+}