amotify 0.0.2 → 0.0.4

package/src/@styles/init.scss

@@ -0,0 +1,154 @@
+@use '@uniVar' as *;
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  &:before, &:after {
+    box-sizing: border-box;
+  }
+}
+html {
+  &.usrDevice_ {
+    &Windows {
+      * {
+        &::-webkit-scrollbar, &::-webkit-scrollbar-track {
+          width: $unit2_3;
+          height: $unit1_2;
+          background-color: $color-layer1;
+        }
+        &::-webkit-scrollbar-thumb {
+          width: $unit2_3;
+          height: $unit2_3;
+          background-color: $color-layer5;
+        }
+      }
+    }
+    &Android {}
+    &macOSX {}
+    &iPhone {}
+    &iPad {}
+  }
+  * {
+    line-height: 1.5;
+    &::selection {
+      background-color: $color-theme !important;
+      color: #fff !important;
+    }
+  }
+}
+body {
+  letter-spacing: .5px;
+  word-wrap: break-word;
+  word-break: normal;
+  color: $font-color2;
+  font-size: $font-size2;
+  font-family:
+    Noto Sans,
+    Noto Sans JP,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-kerning: normal;
+  // -webkit-font-smoothing: antialiased;
+  caret-color: $color-theme;
+  transition: opacity $animation-time-middle;
+  background-color: $color-dark;
+  #ROOT {
+    max-width: 200rem;
+    min-height: $viewHeight;
+    background-color: $color-base;
+    position: relative;
+    margin: 0 auto;
+    padding: 0;
+    z-index: 1;
+  }
+}
+a, button, label, input, button, select, textarea {
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  outline: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(#000, 0);
+  touch-action: manipulation;
+  background-color: transparent;
+  border: none;
+  border-style: none;
+  text-decoration: none;
+}
+input, select, textarea {
+  &[ disabled] {
+    box-shadow: none !important;
+    background-color: $color-layer3 !important;
+    color: $font-color5 !important;
+    filter: grayscale(50%);
+    cursor: not-allowed !important;
+  }
+}
+a, button, label, select {
+  cursor: pointer;
+}
+input, textarea {
+  cursor: text;
+}
+input, textarea {
+  &::placeholder {
+    font-family: inherit;
+    color: $font-color5;
+  }
+}
+input {
+  &:-webkit-autofill {
+    box-shadow: 0 0 0 100rem $color-layer3 inset !important;
+    -webkit-text-fill-color: $font-color3;
+  }
+  &[ type="radio"], &[ type="checkbox"], &[ type="file"] {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    appearance: none;
+  }
+  min-width: 0;
+  display: block;
+  &[ type="text"], &[ type="number"] {
+    width: 100%;
+  }
+  &[ type="number"] {
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+}
+textarea {
+  display: block;
+  width: 100%;
+  min-height: $unit4;
+}
+a, label, button, canvas {
+  vertical-align: bottom;
+}
+svg {
+  vertical-align: top;
+  object-fit: cover;
+  height: 100%;
+}
+img {
+  user-drag: none;
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+}
+img, video, iframe {
+  vertical-align: top;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}

package/src/@types/_.tsx

@@ -0,0 +1,6 @@
+import './module';
+import './state';
+import './amot';
+import './index';
+import './fn';
+import './jsminAmotifyExtension';

package/src/@types/amot.tsx

@@ -0,0 +1,323 @@
+import React from 'react';
+import * as ReactDom from "react-dom";
+import * as ReactRouterDom from "react-router";
+
+export {}
+
+declare global {
+  namespace amotify {
+    namespace glob {
+      type LaunchReactApplicationParams = {
+        ( params: {
+          baseElement?: HTMLElement | string
+          reactElement: ReactElement
+          nonRouter?: boolean
+          appearances?: {
+            roundness?: RoundnessTypes
+            themeColor?: amotify.ThemeColorTypes
+            tone?: amotify.ToneTypes
+            darkMode?: amotify.DarkModeTypes
+          }
+        } ): void
+      }
+  
+      type useStoreParams = {
+        set( params: {
+          key: string
+          value: any
+          privateKey?: string
+        } ): boolean
+        update( params: {
+          key: string
+          value: any
+          privateKey?: string
+        } ): boolean
+        get( key: string,privateKey?: string ): any
+        delete( key: string,privateKey?: string ): boolean
+      }
+      type useRecycleParams = {
+        set( key: string ): string
+        do( key: string ): void
+      }
+      type PageTransitParams = {
+        open( url: string ): void
+        pushSync( url: string ): void
+        pushAsync( url: string ): void
+        push( url: string,newTab?: boolean ): void
+        back(): void
+      }
+  
+      namespace StyleConverter {
+        type ReadStyleSet = {
+          <T>( params: T ): T
+        }
+        type ToClassName = {
+          <T>( params: T ): T
+        }
+      }
+  
+      type Methods = {
+        React: typeof React
+        ReactRouterDom: typeof ReactRouterDom
+        ReactDom: typeof ReactDom
+  
+        StyleConverter: {
+          ReadStyleSet: StyleConverter.ReadStyleSet
+          ToClassName: StyleConverter.ToClassName
+        }
+  
+        pageTransit: PageTransitParams
+        useStore: glob.useStoreParams
+        useRecycle: glob.useRecycleParams
+        LaunchReactApplication: glob.LaunchReactApplicationParams
+      }
+    }
+  
+    namespace atoms {
+      type BoxInput = amotifyBasicElement & {
+        children?: ReactElement
+      } & React.HTMLAttributes<HTMLDivElement>
+      type SpanProps = amotifyBasicElement & {
+        children?: ReactElement
+      } & React.HTMLAttributes<HTMLSpanElement>
+      type ParagraphProps = amotifyBasicElement & {
+        children?: ReactElement
+      } & React.HTMLAttributes<HTMLParagraphElement>
+  
+      type FlexProps = amotifyBasicElement & {
+        children?: ReactElement
+      } & React.HTMLAttributes<HTMLDivElement>
+  
+      type GridProps = amotifyBasicElement & {
+        children: ReactElement
+  
+        onClick?: {
+          ( event: React.MouseEvent<HTMLDivElement,MouseEvent> ): void
+        }
+      } & React.HTMLAttributes<HTMLDivElement>
+  
+      namespace FAIcon {
+        type Method = FNC<FAIconFNC> & ShortCuts
+        type FAIconFNC = amotifyBasicElement & {
+          iconFamily?: 'classic' | 'sharp'
+  
+          isSolidIcon?: boolean
+          isRegularIcon?: boolean
+          isLightIcon?: boolean
+          isThinIcon?: boolean
+          isDuotoneIcon?: boolean
+  
+          iconAnimation?: false | 'beat' | 'beat-fade' | 'bounce' | 'fade' | 'flip' | 'shake' | 'spin' | 'spin-reverse' | 'spin-pulse'
+          isBrandIcon?: boolean
+          d?: string
+        } & React.HTMLAttributes<HTMLDivElement>
+        type ShortCuts = {
+          [ key in ShortCutNames ]: FNC<Omit<FAIconFNC,'d'>>
+        }
+        type ShortCutNames =
+          'User' | 'Times' | 'Desktop' |
+  
+          'AngleRight' | 'AngleLeft' | 'AngleUp' | 'AngleDown' |
+          'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'ChevronDown' |
+          'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretDown' |
+          'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' |
+  
+          'Rotate' | 'RotateLeft' | 'RotateRight' | 'Redo' |
+          'Play' | 'Pause' | 'Stop' | 'ForwardStep' | 'BackwardStep' |
+          'Check' | 'CheckCircle' |
+          'Question' | 'QuestionCircle' | 'Exclamation' | 'ExclamationTriangle' |
+          'Home' | 'Share' | 'Volume' |
+          'Search' | 'YenSign' | 'Heart' | 'Star' |
+          'Edit' | 'Pen' | 'Copy' | 'Files' | 'File' |
+          'Backspace' | 'TrashAlt' | 'Bars' | 'Download' |
+          'Link' | 'LinkSlash' | 'ExternalLinkAlt' |
+          'Gear' |
+          'Plus' | 'Minus' | 'Equals' | 'Calculator' |
+          'Image' | 'BadgePercent'
+      }
+  
+      namespace Image {
+        type Methods = FNC<CompInput> & DefaultImages;
+        type CompInput = amotifyBasicElement & {
+          src: string
+          alt?: string
+          showExpand?: boolean | string
+        } & React.HTMLAttributes<HTMLImageElement>
+  
+        type DefaultImages = {
+          uri: {
+            mingooIcon: string
+            comunIcon: string
+            comunIconClear: string
+            defaultIcon( type:
+              'image' |
+              'object' |
+              'user' |
+              'group' |
+              'store'
+            ): string
+          }
+  
+        }
+      }
+  
+  
+      namespace Logos {
+        type Methods = {
+          Icon: ( params: Params ) => JSX.Element
+          Title: ( params: Params ) => JSX.Element
+  
+          Brands: {
+            MingooIcon: ( params: DefaultLogoTypes ) => JSX.Element
+            MingooTitle: ( params: DefaultLogoTypes ) => JSX.Element
+            MingooLogoH: ( params: DefaultLogoTypes ) => JSX.Element
+            MingooLogoV: ( params: DefaultLogoTypes ) => JSX.Element
+  
+            ComunIcon: ( params: DefaultLogoTypes ) => JSX.Element
+            ComunTitle: ( params: DefaultLogoTypes ) => JSX.Element
+            ComunLogoH: ( params: DefaultLogoTypes ) => JSX.Element
+            ComunLogoV: ( params: DefaultLogoTypes ) => JSX.Element
+  
+            Google: ( params: DefaultLogoTypes ) => JSX.Element
+            Facebook: ( params: DefaultLogoTypes ) => JSX.Element
+            Twitter: ( params: DefaultLogoTypes ) => JSX.Element
+            LINE: ( params: DefaultLogoTypes ) => JSX.Element
+          }
+        }
+        type Params = amotifyBasicElement & {
+          size?: 'S' | 'R' | 'L' | '2L' | '3L'
+          color?: 'normal' | 'white'
+          children?: ReactElement | FNC<any>
+        }
+        type DefaultLogoTypes = amotifyBasicElement & {
+          size?: 'S' | 'R' | 'L' | '2L' | '3L'
+          color?: 'normal' | 'white'
+        }
+      }
+  
+      type PlaceholderParams = amotify.atoms.BoxInput & {
+        color?: 'cloud' | 'white'
+      }
+  
+      type Methods = {
+        Box: FNC<atoms.BoxInput>
+  
+        Flex: FNC<atoms.FlexProps>
+        FlexBr: FNC<amotifyUniStyleParams>
+  
+        Placeholder: FNC<PlaceholderParams>
+  
+        Grid: FNC<atoms.GridProps>
+  
+        FAIcon: FAIcon.Method
+  
+        Span: FNC<atoms.SpanProps>
+        Paragraph: FNC<atoms.ParagraphProps>
+        Img: atoms.Image.Methods
+  
+        Logo: Logos.Methods
+      }
+    }
+  
+    namespace mols {
+      namespace Accordion {
+        type Params = {
+          open?: boolean
+          accordionID?: string
+          slideAnimation?: 'none' | 'fast' | 'slow'
+          children: ReactElement
+          onToggleEvent?: {
+            ( open: boolean ): void
+          }
+        } & atoms.BoxInput
+        type FNParams = {
+          fn: {
+            open( accordionID: string ): void
+            close( accordionID: string ): void
+            toggle( accordionID: string ): void
+          }
+        }
+        type SetParams = FNC<Params> & FNParams
+      }
+  
+      namespace List {
+        type Params = amotifyBasicElement & {
+          rowStyles?: amotifyUniStyleParams
+          rows: RowsParams[]
+        }
+  
+        type RowsParams = {
+          children: ReactElement
+        } & amotifyBasicElement
+      }
+  
+      type LinkifyTextProps = {
+        text: string
+        placeholder?: ReactElement
+      }
+  
+      type Methods = {
+        List: FNC<mols.List.Params>
+        Accordion: mols.Accordion.SetParams
+        LinkifyText: FNC<mols.LinkifyTextProps>
+        Text: {
+          NowrapSpan: FNC<atoms.SpanProps>
+          Title: FNC<atoms.BoxInput>
+          SubTitle: FNC<atoms.BoxInput>
+          ThirdTitle: FNC<atoms.BoxInput>
+          Paragraph: FNC<atoms.BoxInput>
+          Normal: FNC<atoms.BoxInput>
+          Description: FNC<atoms.BoxInput>
+          Supplement: FNC<atoms.BoxInput>
+        }
+        Column: FNC<atoms.FlexProps>
+        Row: {
+          Center: FNC<atoms.FlexProps>
+          Left: FNC<atoms.FlexProps>
+          Right: FNC<atoms.FlexProps>
+          Separate: FNC<atoms.FlexProps>
+        }
+      }
+    }
+  
+    namespace orgs {
+      namespace DisplayStyleInput {
+        type Methods = {
+          Darkmode: FNC<DarkmodeInput>
+          ThemeColor: {
+            ALL: FNC<ThemeColorInput>
+            Basics: FNC<ThemeColorInput>
+            Originals: FNC<ThemeColorInput>
+            Brands: FNC<ThemeColorInput>
+            Keys: {
+              Brands: ColorIconParams[]
+              Basics: ColorIconParams[]
+              Originals: ColorIconParams[]
+            }
+          }
+        }
+        type ColorIconParams = {
+          key: string
+          icon: ReactElement
+          label?: ReactElement
+        }
+  
+        type DarkmodeInput = atoms.BoxInput & {
+          onUpdate( params: amotify.DarkModeTypes ): void
+        }
+        type ThemeColorInput = atoms.BoxInput & {
+          onUpdate( params: amotify.ThemeColorTypes ): void
+        }
+      }
+      type Methods = {
+        DisplayStyleInput: DisplayStyleInput.Methods
+      }
+    }
+  
+    namespace temps {
+      type Methods = {
+        PlayGround: FNC<{}>
+      }
+    }
+  }
+}