amotify 0.0.6 → 0.0.8

package/src/Atoms/Logo/parts.tsx

@@ -0,0 +1,335 @@
+import {
+  Box,
+  Flex,
+  Img
+} from '~/Atoms/@export';
+
+import style from './style.module.scss';
+
+import { publicURI } from '../../launch';
+
+const SVG = {
+  ComunIcon: () => {
+    return ( <svg viewBox="0,0,1200,1200" className={ style.ComunIcon }>
+      <g>
+        <path
+          d='
+        M
+        100,600
+        A 500,500 0 0,0 600,1100
+        A 100,100 0 0,0 600,900
+        A 300,300 0 0,1 300,600
+        A 100,100 0 0,0 100,600
+        Z
+        '
+          className={ style.P1 }
+          style={ {
+            opacity: .9,
+            fill: '#16a3ec'
+          } }
+        />
+        <path
+          d='
+        M
+        600,1100
+        A 500,500 0 0,0 1100,600
+        A 100,100 0 0,0 900,600
+        A 300,300 0 0,1 600,900
+        A 100,100 0 1,0 600,1100
+        Z
+        '
+          className={ style.P2 }
+          style={ {
+            opacity: .9,
+            fill: '#ea6093'
+          } }
+        />
+
+        <path
+          d='
+        M
+        600,100
+        A 500,500 0 0,0 100,600
+        A 100,100 0 0,0 300,600
+        A 300,300 0 0,1 600,300
+        A 100,100 0 0,0 600,100
+        Z
+        '
+          className={ style.P3 }
+          style={ {
+            opacity: .9,
+            fill: '#387cfe'
+          } }
+        />
+
+        <path
+          d='
+        M
+        600,100
+        A 100,100 0 0,1 700,200
+        A 300,300 0 0,0 1000,500
+        A 100,100 0 0,1 1100,600
+        A 100,100 0 0,1 1000,700
+        A 500,500 0 0,1 500,200
+        A 100,100 0 0,1 600,100
+        Z
+        '
+          className={ style.P4 }
+          style={ {
+            opacity: .9,
+            fill: '#9a66ff'
+          } }
+        />
+      </g>
+    </svg> );
+  },
+  MingooIcon: () => {
+    const CircleSet = ( p: number ) => {
+      return ( <>
+        <path
+          d='
+            M
+            600,100
+            A 80,80 0 0,1 600,260
+            A 80,80 0 0,1 600,100
+            L600,600
+            L600,300
+            Z
+            '
+          className={ [
+            style.OuterCircle,
+            style.P,
+            style[ 'P_' + p ]
+          ].join( ' ' ) }
+          style={ {
+            fill: '#c56ff0'
+            // fill: '#9a66ff'
+          } }
+        />
+        <path
+          d='
+            M
+            600,300
+            A 45,45 0 0,1 600,390
+            A 45,45 0 0,1 600,300
+            L600,600
+            L600,300
+            Z
+            '
+          className={ [
+            style.InnerCircle,
+            style.P,
+            style[ 'P_' + p ]
+          ].join( ' ' ) }
+          style={ {
+            fill: '#ea6093'
+            // fill: '#ffa500'
+          } }
+        />
+      </> );
+    }
+    return <svg viewBox="0,0,1200,1200" className={ style.MingooIcon }>
+      { CircleSet( 0 ) }
+      { CircleSet( 1 ) }
+      { CircleSet( 2 ) }
+      { CircleSet( 3 ) }
+      { CircleSet( 4 ) }
+      { CircleSet( 5 ) }
+      { CircleSet( 6 ) }
+      { CircleSet( 7 ) }
+      { CircleSet( 8 ) }
+    </svg>;
+  }
+}
+
+
+const Mingoos = {
+  Icon: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => ( <Logo.Icon
+    { ...params }
+  >
+    <SVG.MingooIcon />
+  </Logo.Icon> ),
+  Title: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => ( <Logo.Title
+    height={ 'auto' }
+    className={ style.ComunTitle }
+    { ...params }
+    freeCSS={ {
+      letterSpacing: '3px',
+      ...params.freeCSS
+    } }
+  >
+    mingoo
+  </Logo.Title> ),
+  LogoH: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
+    let { size,color,...others } = params;
+
+    return ( <Flex
+      gap={ '1/2' }
+      flexCenter
+      { ...others }
+    >
+      <Mingoos.Icon size={ size } color={ color } />
+      <Mingoos.Title size={ size } color={ color } />
+    </Flex> );
+  },
+  LogoV: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
+    let { size,color,...others } = params;
+
+    return ( <Flex
+      flexType="col"
+      gap={ '1/2' }
+      { ...others }
+    >
+      <Mingoos.Icon
+        margin={ 'auto' }
+        size={ size }
+        color={ color }
+      />
+      <Mingoos.Title
+        size={ size } color={ color }
+      />
+    </Flex> );
+  }
+}
+const Comuns = {
+  Icon: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => ( <Logo.Icon
+    { ...params }
+  >
+    <SVG.ComunIcon />
+  </Logo.Icon> ),
+  Title: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => ( <Logo.Title
+    height={ 'auto' }
+    className={ style.ComunTitle }
+    { ...params }
+    freeCSS={ {
+      letterSpacing: '3px',
+      ...params.freeCSS
+    } }
+  >
+    comun
+  </Logo.Title> ),
+  LogoH: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
+    let { size,color,...others } = params;
+
+    return ( <Flex
+      gap={ '1/2' }
+      flexCenter
+      { ...others }
+    >
+      <Comuns.Icon size={ size } color={ color } />
+      <Comuns.Title size={ size } color={ color } />
+    </Flex> );
+  },
+  LogoV: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
+    let { size,color,...others } = params;
+
+    return ( <Flex
+      flexType="col"
+      gap={ '1/2' }
+      { ...others }
+    >
+      <Comuns.Icon
+        margin={ 'auto' }
+        size={ size }
+        color={ color }
+      />
+      <Comuns.Title
+        size={ size } color={ color }
+      />
+    </Flex> );
+  }
+}
+export const Logo: amotify.atoms.Logos.Methods = {
+  Icon: ( props: amotify.atoms.Logos.Params ) => {
+    let {
+      size = 'R',
+      color = 'normal',
+      className = '',
+      children: Children,
+      ...others
+    } = props;
+
+    return ( <Flex
+      verticalAlign='center'
+      className={ [
+        className,
+        style.Icon,
+        style[ 'Size_' + size ]
+      ].join( ' ' ) }
+      { ...others }
+    >
+      { $.is.function( Children ) ? <Children /> : Children }
+    </Flex > );
+  },
+  Title: ( props: amotify.atoms.Logos.Params ) => {
+    let {
+      size = 'R',
+      color = 'normal',
+      className = '',
+      children: Children,
+      ...others
+    } = props;
+
+    return <Flex
+      verticalAlign='center'
+      fontColor={ color == 'white' ? 'white' : 'logo' }
+      className={ [
+        className,
+        style.Title,
+        style[ 'Size_' + size ]
+      ].join( ' ' ) }
+      { ...others }
+      freeCSS={ {
+        lineHeight: '1.25',
+        ...others.freeCSS
+      } }
+    >
+      { $.is.function( Children ) ? <Children /> : Children }
+    </Flex>;
+  },
+
+  Brands: {
+    MingooIcon: Mingoos.Icon,
+    MingooTitle: Mingoos.Title,
+    MingooLogoH: Mingoos.LogoH,
+    MingooLogoV: Mingoos.LogoV,
+
+    ComunIcon: Comuns.Icon,
+    ComunTitle: Comuns.Title,
+    ComunLogoH: Comuns.LogoH,
+    ComunLogoV: Comuns.LogoV,
+
+    Google: ( params ) => ( <Logo.Icon
+      { ...params }
+    >
+      <Img
+        src={ publicURI + '@env/@logos/brands/Google_Icon.svg' }
+        alt=''
+      />
+    </Logo.Icon> ),
+    Facebook: ( params ) => ( <Logo.Icon
+      { ...params }
+    >
+      <Img
+        src={ publicURI + '@env/@logos/brands/FaceBook_Icon.svg' }
+        alt=''
+      />
+    </Logo.Icon> ),
+    Twitter: ( params ) => ( <Logo.Icon
+      { ...params }
+    >
+      <Img
+        src={ publicURI + '@env/@logos/brands/Twitter_Icon.svg' }
+        alt=''
+      />
+    </Logo.Icon> ),
+    LINE: ( params ) => ( <Logo.Icon
+      { ...params }
+    >
+      <Img
+        src={ publicURI + '@env/@logos/brands/Line_Icon.svg' }
+        alt=''
+      />
+    </Logo.Icon> ),
+  }
+}

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

@@ -0,0 +1,96 @@
+@use 'src/@styles/props' as *;
+@use'src/@styles/styleSet' as *;
+
+.Size_ {
+  &S {
+    width: $unit2;
+    height: $unit2;
+    font-size: $unit1;
+  }
+  &R {
+    width: $unit3;
+    height: $unit3;
+    font-size: $unit1-5;
+  }
+  &L {
+    width: $unit4;
+    height: $unit4;
+    font-size: $unit2-5;
+  }
+  &2L {
+    width: $unit6;
+    height: $unit6;
+    font-size: $unit3;
+  }
+  &3L {
+    width: $unit8;
+    height: $unit8;
+    font-size: $unit4;
+  }
+}
+
+.Icon {
+
+}
+.Title {
+  width: auto;
+}
+
+
+.ComunIcon {
+  path {
+    filter: drop-shadow($shadow4);
+  }
+}
+.ComunTitle {
+  letter-spacing: 3px;
+}
+.MingooIcon {
+  .P {
+    transform-box: fill-box;
+    transform-origin: bottom !important;
+    &.P_0 {
+      transform: rotate(0deg);
+    }
+    &.P_1 {
+      transform: rotate(-30deg);
+    }
+    &.P_2 {
+      transform: rotate(-60deg);
+    }
+    &.P_3 {
+      transform: rotate(-90deg);
+    }
+    &.P_4 {
+      transform: rotate(-120deg);
+    }
+    &.P_5 {
+      transform: rotate(-150deg);
+    }
+    &.P_6 {
+      transform: rotate(-180deg);
+    }
+    &.P_7 {
+      transform: rotate(-210deg);
+    }
+    &.P_8 {
+      transform: rotate(-240deg);
+    }
+    &.P_9 {
+      transform: rotate(-270deg);
+      opacity: .3;
+    }
+    &.P_10 {
+      transform: rotate(30deg);
+      opacity: .3;
+    }
+    &.P_11 {
+      transform: rotate(60deg);
+      opacity: .3;
+    }
+    &.P_12 {
+      transform: rotate(90deg);
+      opacity: .3;
+    }
+  }
+}

package/src/Atoms/Various/parts.tsx

@@ -0,0 +1,157 @@
+import {
+  StyleConverter
+} from '~/Global/@export';
+
+import { publicURI } from '../../launch';
+
+import style from './style.module.scss';
+
+export const Box: FNC<amotify.atoms.BoxInput> = ( params ) => {
+  let {
+    freeCSS,
+    ...Params
+  } = StyleConverter.ToClassName( params );
+  return ( <div { ...Params } /> );
+}
+export const Span: FNC<amotify.atoms.SpanProps> = ( params ) => {
+  let {
+    freeCSS,
+    ...Params
+  } = StyleConverter.ToClassName( params );
+  return ( <span { ...Params } /> );
+}
+
+export const Placeholder: FNC<amotify.atoms.PlaceholderParams> = ( params ) => {
+  let {
+    color = 'cloud',
+    ...others
+  } = params;
+  let DefStyles: amotifyUniStyleParams = {
+    flexCenter: true,
+    position: 'relative',
+    ssCardBox: true,
+    border: 'unset',
+    overflow: 'hidden',
+    backgroundColor: '3.layer.canvas',
+  }
+
+  return ( <Box
+    className={ [
+      style.Placeholder,
+      params.className
+    ].join( ' ' ) }
+    { ...DefStyles }
+    { ...others }
+  >
+    <Box
+      className={ [
+        style.Body,
+        style[ 'Color_' + color ],
+      ].join( ' ' ) }
+    />
+  </Box> );
+}
+
+let Img: amotify.atoms.Image.Methods = {} as any;
+{
+  const ImageComp: FNC<amotify.atoms.Image.CompInput> = ( params ) => {
+    let {
+      src = '',
+      alt = '',
+      showExpand,
+      ...others
+    } = params;
+
+    others.freeCSS = {
+      cursor: showExpand ? 'zoom-in' : 'inherit',
+      ...others.freeCSS
+    }
+    let {
+      className = '',
+      ...Others
+    } = StyleConverter.ToClassName( others );
+
+    let ClassName = [
+      style.Img,
+      style[ 'ShowExpand_' + showExpand ],
+      className
+    ].join( ' ' );
+
+    return <img
+      src={ src }
+      alt={ alt }
+      className={ ClassName }
+      onMouseDown={ ( event ) => {
+        if ( showExpand ) event.stopPropagation();
+      } }
+      onTouchStart={ ( event ) => {
+        if ( showExpand ) event.stopPropagation();
+      } }
+      onClick={ ( event ) => {
+        if ( showExpand ) {
+          event.stopPropagation();
+          amotify.fn.Sheet.open( {
+            type: 'image',
+            src: showExpand != true ? showExpand : src
+          } );
+        }
+      } }
+      { ...Others }
+    />;
+  }
+  Img = ImageComp as any;
+  Img.uri = {
+    comunIcon: publicURI + 'app/admin/@logo/icon.png',
+    comunIconClear: publicURI + 'app/admin/@logo/iconClear.png',
+    mingooIcon: '',
+    defaultIcon: ( type ) => {
+      return publicURI + '@env/@icon/' + ( type || 'image' ) + '.png';
+    },
+  }
+}
+export { Img }
+
+export const Flex: FNC<amotify.atoms.FlexProps> = ( props ) => {
+  let {
+    children,
+    freeCSS,
+    ...others
+  } = props;
+
+  return ( <Box
+    flexType={ 'row' }
+    flexWrap={ true }
+    display='flex'
+    freeCSS={ {
+      wordBreak: 'break-word',
+      ...freeCSS
+    } }
+    { ...others }
+    children={ children }
+  /> );
+}
+
+export const FlexBr: FNC<amotifyUniStyleParams> = ( params ) => ( <Box
+  width={ 1 }
+  flexSizing='none'
+  { ...params }
+/> );
+
+export const Grid: FNC<amotify.atoms.GridProps> = ( props ) => {
+  let {
+    children,
+    freeCSS,
+    ...others
+  } = props;
+
+  return ( <Box
+    freeCSS={ {
+      display: 'grid',
+      ...freeCSS
+    } }
+    { ...others }
+    children={ children }
+  /> );
+}
+
+export const Paragraph: FNC<amotify.atoms.ParagraphProps> = ( props ) => ( <p { ...StyleConverter.ToClassName( props ) } /> )

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

@@ -0,0 +1,40 @@
+@use 'src/@styles/props' as *;
+@use'src/@styles/styleSet' as *;
+.Img {
+  &.ShowExpand_true {
+    transition: $animation-time-middle;
+    &:hover {
+      opacity: .8;
+    }
+  }
+}
+@keyframes PlaceholderEffect {
+  0% {
+    left: -50%;
+    opacity: 0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    left: 150%;
+    opacity: 0;
+  }
+}
+.Placeholder {
+  .Body {
+    @include absoluteCovered();
+    width: 40%;
+    background: linear-gradient(to right,
+        transparent,
+        $color-layer5
+        );
+    animation: 1.5s PlaceholderEffect linear infinite;
+    &.Color_white {
+      background: linear-gradient(to right,
+        transparent,
+        $color-layer3
+        );
+    }
+  }
+}

package/src/Functions/@export.tsx

@@ -0,0 +1,29 @@
+import {
+  Effects
+} from './Effects/_';
+
+import { Buttons } from './Button/_';
+import { Input } from './Input/_';
+import { Inputs } from './Inputs/_';
+import { Layout } from './Layout/_';
+import { Table } from './Table/_';
+import { Sheet } from './Sheet/parts';
+import { SnackBar } from './SnackBar/parts';
+import { Loader } from './Loader/parts';
+import { Tooltips } from './Tooltips/parts';
+
+import { Cropper } from './Cropper/parts';
+
+export {
+  Buttons,
+  Input,
+  Inputs,
+  Table,
+  Layout,
+  Sheet,
+  SnackBar,
+  Loader,
+  Tooltips,
+  Effects,
+  Cropper,
+}