amotify 0.0.4 → 0.0.5

package/src/Molecules/LinkifyText/parts.tsx

@@ -1,54 +0,0 @@
-import {
-  FAIcon
-} from '@atoms';
-import {
-  Buttons
-} from '@functions';
-
-const {
-  Anchor
-} = Buttons;
-
-
-export const LinkifyText: FNC<amotify.mols.LinkifyTextProps> = ( props ) => {
-  let {
-    text,
-    placeholder
-  } = props;
-
-  let Description: ReactElement[] = [];
-
-  if ( text ) {
-    let urls: string[] = [];
-
-    text = text.replace( /https?:\/\/[^\s|\n|\r]*/ig,( ...args: any ) => {
-      let url = args[ 0 ];
-      urls.push( url );
-
-      return '[$_url]';
-    } );
-    let parts = text.split( '[$_url]' );
-    for ( let index = 0; index <= parts.length - 1; index++ ) {
-      let part = parts[ index ];
-      let url = urls[ index ];
-      Description.push( part );
-      if ( index < parts.length - 1 ) {
-        Description.push( <Anchor.Link
-          key={ 'Link-' + index }
-          href={ url }
-          newTab
-        >
-          { url } <FAIcon d='arrow-up-right-from-square' />
-        </Anchor.Link> );
-      }
-    }
-  } else if ( placeholder ) {
-    Description = [ placeholder ];
-  }
-
-  return (
-    <>
-      { Description }
-    </>
-  );
-}

package/src/Molecules/List.tsx

@@ -1,30 +0,0 @@
-import {
-  Flex
-} from '@atoms';
-
-export const List: FNC<amotify.mols.List.Params> = ( params ) => {
-  let {
-    rows,
-    rowStyles: DefaultRowStyles,
-    ...others
-  } = params;
-
-  let rowArray = rows.map( ( row ) => {
-    let {
-      children,
-      ...others
-    } = row;
-
-    return <Flex
-      { ...DefaultRowStyles }
-      { ...others }
-      children={ children }
-    />;
-  } )
-
-  return <Flex
-    { ...others }
-    flexType='col'
-    children={ rowArray }
-  />;
-}

package/src/Organisms/@export.tsx

@@ -1,5 +0,0 @@
-import { DisplayStyleInput } from './DisplayStyleInput/_';
-
-export {
-  DisplayStyleInput
-}

package/src/Organisms/DisplayStyleInput/_.tsx

@@ -1,18 +0,0 @@
-import { Darkmode } from './darkmode';
-import {
-  ThemeColorALL,
-  ThemeColorBasic,
-  ThemeColorOriginal,
-  ThemeColorBrands,
-  Colors
-} from './themeColor';
-export const DisplayStyleInput: amotify.orgs.DisplayStyleInput.Methods = {
-  Darkmode,
-  ThemeColor: {
-    ALL: ThemeColorALL,
-    Originals: ThemeColorOriginal,
-    Brands: ThemeColorBrands,
-    Basics: ThemeColorBasic,
-    Keys: Colors,
-  }
-}

package/src/Organisms/DisplayStyleInput/darkmode.tsx

@@ -1,112 +0,0 @@
-import {
-  React
-} from '@global';
-import {
-  Box,
-  Flex,
-  Img,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input
-} from '@functions';
-
-const {
-  useState,
-  useEffect
-} = React;
-
-const ColorCell = ( params: {
-  colorType: amotify.DarkModeTypes
-} ) => {
-  if ( params.colorType == 'light' ) {
-    return <Box
-      freeCSS={ {
-        backgroundColor: '#FFF'
-      } }
-      width={ 1 }
-      height={ 1 }
-      isRounded
-    />
-  } else if ( params.colorType == 'dark' ) {
-    return <Box
-      freeCSS={ {
-        backgroundColor: '#333'
-      } }
-      width={ 1 }
-      height={ 1 }
-      isRounded
-    />
-  } else if ( params.colorType == 'dim' ) {
-    return <Box
-      freeCSS={ {
-        backgroundColor: '#666'
-      } }
-      width={ 1 }
-      height={ 1 }
-      isRounded
-    />
-  }
-  return <Column
-    width={ 1 }
-    height={ 1 }
-    isRounded
-    flexChilds='even'
-    overflow={ 'hidden' }
-    gap={ '1/6' }
-    freeCSS={ {
-      transform: 'rotate(-45deg)'
-    } }
-  >
-    <Box
-      freeCSS={ {
-        backgroundColor: '#FFF'
-      } }
-      borderRadius={ 1 }
-    />
-    <Box
-      freeCSS={ {
-        backgroundColor: '#333'
-      } }
-      borderRadius={ 1 }
-    />
-  </Column>
-}
-
-export const Darkmode = ( params: amotify.orgs.DisplayStyleInput.DarkmodeInput ) => {
-  let [ val_darkmode,set_darkmode ] = useState( amotify.config.darkMode || 'light' );
-
-  const mounted = React.useRef( false );
-  useEffect( () => {
-    if ( mounted.current ) {
-      params.onUpdate( val_darkmode );
-    } else {
-      mounted.current = true;
-    }
-  },[ val_darkmode ] );
-
-  return <Input.Radio
-    icon={ false }
-    value={ val_darkmode }
-    cellStyles={ {
-      padding: '1/3',
-      borderWidth: 2,
-      ssSphere: 4,
-      isRounded: true
-    } }
-    options={ [
-      { value: 'light',label: <ColorCell colorType={ 'light' } /> },
-      { value: 'dark',label: <ColorCell colorType={ 'dark' } /> },
-      { value: 'dim',label: <ColorCell colorType={ 'dim' } /> },
-      { value: 'auto',label: <ColorCell colorType={ 'auto' } /> },
-    ] }
-    onUpdateValidValue={ ( { value } ) => {
-      set_darkmode( value[ 0 ] );
-    } }
-  />;
-}

package/src/Organisms/DisplayStyleInput/themeColor.tsx

@@ -1,210 +0,0 @@
-import {
-  React
-} from '@global';
-import {
-  Box,
-  Flex,
-  Img,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input
-} from '@functions';
-
-const {
-  useState,
-  useEffect
-} = React;
-
-type ColorIconParams = {
-  key: string
-  icon: ReactElement
-  label?: ReactElement
-}
-
-export const Colors = {
-  Basics: [
-    {
-      key: 'comun',icon: <Box
-        padding={ '1/2' }
-      >
-        <Img src={ Img.uri.comunIconClear } />
-      </Box>
-    },
-    { key: 'leaf',icon: 'leaf' },
-    { key: 'heart',icon: 'heart' },
-    { key: 'droplet',icon: 'droplet' },
-  ],
-  Brands: [
-    { key: 'line',icon: <FAIcon isBrandIcon d="line" />,label: 'LINE' },
-    { key: 'twitter',icon: <FAIcon isBrandIcon d="twitter" />,label: 'Twitter' },
-    { key: 'amazon',icon: <FAIcon isBrandIcon d="amazon" />,label: 'Amazon' },
-    { key: 'facebook',icon: <FAIcon isBrandIcon d="facebook" />,label: 'Facebook' },
-    { key: 'android',icon: <FAIcon isBrandIcon d="android" />,label: 'Android' },
-    { key: 'slackBlue',icon: <FAIcon isBrandIcon d="slack" />,label: 'Slack Blue' },
-    { key: 'slackGreen',icon: <FAIcon isBrandIcon d="slack" />,label: 'Slack Green' },
-    { key: 'slackRed',icon: <FAIcon isBrandIcon d="slack" />,label: 'Slack Red' },
-    { key: 'slackYellow',icon: <FAIcon isBrandIcon d="slack" />,label: 'Slack Yellow' },
-    { key: 'slackBase',icon: <FAIcon isBrandIcon d="slack" />,label: 'Slack Base' },
-    { key: 'googleBlue',icon: <FAIcon isBrandIcon d="google" />,label: 'Google Blue' },
-    { key: 'googleGreen',icon: <FAIcon isBrandIcon d="google" />,label: 'Google Green' },
-    { key: 'googleYellow',icon: <FAIcon isBrandIcon d="google" />,label: 'Google Yellow' },
-    { key: 'googleRed',icon: <FAIcon isBrandIcon d="google" />,label: 'Google Red' }
-  ],
-  Originals: [
-    { key: 'brick',icon: 'block-brick' },
-    { key: 'flower',icon: 'flower-tulip' },
-    { key: 'lip',icon: 'lips' },
-    { key: 'wine',icon: 'wine-glass' },
-    { key: 'theater',icon: 'theater-masks',label: 'entertainment' },
-    { key: 'bat',icon: 'bat' },
-    { key: 'poizon',icon: 'flask-poison' },
-    { key: 'eggplant',icon: 'eggplant' },
-    { key: 'ufo',icon: 'ufo',label: 'UFO' },
-    { key: 'alien',icon: 'alien' },
-    { key: 'tombstone',icon: 'tombstone' },
-    { key: 'ninja',icon: 'user-ninja' },
-    { key: 'moon',icon: 'moon' },
-    { key: 'rain',icon: 'cloud-showers-heavy' },
-    { key: 'unicorn',icon: 'alicorn' },
-    { key: 'axe',icon: 'axe' },
-    { key: 'gem',icon: 'gem' },
-    { key: 'soap',icon: 'soap' },
-    { key: 'drizzle',icon: 'cloud-drizzle' },
-    { key: 'building',icon: 'building' },
-    { key: 'fish',icon: 'fish' },
-    { key: 'icicles',icon: 'icicles',label: 'ice' },
-    { key: 'water',icon: 'water' },
-    { key: 'tree1',icon: 'tree-alt' },
-    { key: 'tree2',icon: 'trees' },
-    { key: 'tree3',icon: 'tree' },
-    { key: 'battery',icon: 'battery-bolt' },
-    { key: 'seedle',icon: 'seedling' },
-    { key: 'greenTea',icon: 'mug-tea' },
-    { key: 'oak',icon: 'leaf-oak' },
-    { key: 'salad',icon: 'salad' },
-    { key: 'cloud',icon: 'cloud' },
-    { key: 'lemon',icon: 'lemon' },
-    { key: 'angel',icon: 'angel' },
-    { key: 'parasol',icon: 'umbrella-beach' },
-    { key: 'pizza',icon: 'pizza-slice' },
-    { key: 'thunder',icon: 'thunderstorm' },
-    { key: 'latte',icon: 'coffee-togo' },
-    { key: 'island',icon: 'island-tropical' },
-    { key: 'shovel',icon: 'shovel' },
-    { key: 'coffee',icon: 'coffee' },
-    { key: 'carrot',icon: 'carrot' },
-    { key: 'cactus',icon: 'cactus' },
-    { key: 'volcano',icon: 'volcano' },
-    { key: 'choco',icon: 'candy-bar' },
-    { key: 'industry',icon: 'industry-windows' },
-    { key: 'gun',icon: 'gun' },
-    { key: 'galaxy',icon: 'galaxy',label: 'blakchole' },
-  ]
-}
-const GenOption = ( params: ColorIconParams ) => {
-  let { key,icon,label = '' } = params;
-
-  let Color = ( alfa?: number ) => ( `hsla( var( --cH_${ key } ),var( --cS_${ key } ),var( --cL_${ key } ),${ alfa ?? 1 } ) ` );
-
-  return {
-    value: params.key,
-    label: <>
-      { $.is.string( icon ) ? <FAIcon
-        isSolidIcon
-        d={ icon }
-      /> : icon }
-    </>,
-    freeCSS: {
-      backgroundColor: Color( 0.15 ),
-      color: Color()
-    },
-    checkedStyles: {
-      fontColor: 'white',
-      boxShadow: 3,
-      freeCSS: {
-        backgroundColor: Color(),
-        color: 'white',
-        transform: 'scale(1.1)'
-      }
-    }
-  } as amotify.fn.Input.List.OptionParams
-}
-
-const ThemeColor: {
-  ( type: 'all' | 'brand' | 'original' | 'basic' ): FNC<amotify.orgs.DisplayStyleInput.ThemeColorInput>
-} = ( type ) => {
-  let ColorsArray: ColorIconParams[][] = [];
-  if ( type == 'all' ) {
-    ColorsArray = [
-      Colors.Basics,
-      Colors.Brands,
-      Colors.Originals,
-    ];
-  } else if ( type == 'original' ) {
-    ColorsArray = [ Colors.Originals ];
-  } else if ( type == 'basic' ) {
-    ColorsArray = [ Colors.Basics ];
-  } else if ( type = 'brand' ) {
-    ColorsArray = [ Colors.Brands ];
-  }
-
-  let UniParams: amotify.fn.Input.List.PlainParams = {
-    ...{} as any,
-    tone: 'plain',
-    icon: false,
-    override: 'force',
-    flexType: 'row',
-    gap: 1,
-    horizontalAlign: 'around',
-    cellStyles: {
-      ssSphere: 3,
-      flexCenter: true,
-      borderRadius: '1.tone.primary',
-      fontSize: '3.paragraph',
-      transition: 'middle'
-    }
-  }
-  const Comp = ( params: amotify.orgs.DisplayStyleInput.ThemeColorInput ) => {
-    const mounted = React.useRef( false );
-    let [ val_ColorKey,set_ColorKey ] = useState( amotify.config.themeColor );
-
-    useEffect( () => {
-      if ( mounted.current ) {
-        params.onUpdate( val_ColorKey );
-      } else {
-        mounted.current = true;
-      }
-    },[ val_ColorKey ] );
-
-    let Inputer: ReactElement[] = ColorsArray.map( ( Colors ) => {
-      return <Input.Radio
-        { ...UniParams }
-        value={ val_ColorKey }
-        options={ Colors.map( ( info ) => {
-          return GenOption( info );
-        } ) }
-        onUpdateValidValue={ ( { value } ) => {
-          set_ColorKey( value[ 0 ] );
-        } }
-      />;
-    } );
-
-    return <Column
-      gap={ 2 }
-    >
-      { Inputer }
-    </Column>;
-  }
-  return Comp;
-}
-
-export const ThemeColorALL = ThemeColor( 'all' );
-export const ThemeColorBasic = ThemeColor( 'basic' );
-export const ThemeColorOriginal = ThemeColor( 'original' );
-export const ThemeColorBrands = ThemeColor( 'brand' );

package/src/Templates/@export.tsx

@@ -1,7 +0,0 @@
-import {
-  PlayGround
-} from './PlayGround/parts';
-
-export {
-  PlayGround
-}

package/src/Templates/PlayGround/parts.tsx

@@ -1,115 +0,0 @@
-import {
-  React,
-} from '@global';
-const {
-  useEffect,
-  useState
-} = React;
-
-import {
-  Box
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  DisplayStyleInput
-} from '@orgs';
-import {
-  Buttons,
-  Input,
-  Inputs
-} from '@functions';
-
-import style from './style.module.scss';
-
-export const PlayGround: FNC<{}> = () => {
-  return ( <>
-    <Column
-      gap={ 2 }
-    >
-      <DisplayStyleInput.Darkmode
-        onUpdate={ ( value ) => {
-          amotify.config.update.darkMode( value );
-        } }
-      />
-      <DisplayStyleInput.ThemeColor.Originals
-        onUpdate={ ( value ) => {
-          amotify.config.update.themeColor( value );
-        } }
-      />
-      <DisplayStyleInput.ThemeColor.Brands
-        onUpdate={ ( value ) => {
-          amotify.config.update.themeColor( value );
-        } }
-      />
-      <Input.Text.Normal
-      />
-      <Input.Select
-        options={ [
-          { value: 1,label: 'AAA' },
-          { value: 2,label: 'BBB' },
-          { value: 3,label: 'CCC' },
-          {
-            value: {
-              test: 1,
-            },label: 'DDD'
-          },
-        ] }
-        onUpdateValidValue={ ( { value } ) => {
-          console.log( value );
-        } }
-      />
-
-      <Buttons.Button.Prime.R
-        submitOption={ {
-          formName: 'test',
-          callback: ( form ) => {
-            console.log( form );
-          }
-        } }
-      >
-        Submit
-      </Buttons.Button.Prime.R>
-      <Box>
-        Label1
-        <Inputs.TextInput
-          tone='normal'
-        // freeCSS={ {
-        //   minWidth: '50%'
-        // } }
-        // width={ '1/2' }
-        />
-      </Box>
-      <Box>
-        Label2
-        <Inputs.TextInput
-          tone='cloud'
-          width={ 1 }
-        />
-      </Box>
-      <Box>
-        Label3
-        <Inputs.TextInput
-          tone='bottomBorder'
-          unitWidth={ 12 }
-        />
-      </Box>
-      <Box>
-        Label4
-        <Inputs.TextInput
-          tone='plain'
-          unitWidth={ 6 }
-        />
-      </Box>
-      {/* <Input.Select
-        name='test-segmented'
-        form='test'
-        required
-        list={ val_select }
-      /> */}
-    </Column>
-  </> );
-}

package/src/Templates/PlayGround/style.module.scss

@@ -1,38 +0,0 @@
-@use '@uniVar' as *;
-.TestAnimation {
-  animation: .25s ease-in-out jiggly infinite;
-  cursor: grab;
-  user-select: none;
-  &:nth-child( 5n ) {
-    animation-delay: .2s;
-    animation-duration: .24s;
-  }
-  &:nth-child( 5n + 2 ) {
-    animation-delay: .22s;
-    animation-duration: .26s;
-  }
-  &:nth-child( 5n + 4 ) {
-    animation-delay: .24s;
-    animation-duration: .28s;
-  }
-  &:nth-child( 5n + 1 ) {
-    animation-delay: .26s;
-    animation-duration: .3s;
-  }
-  &:nth-child( 5n + 3 ) {
-    animation-delay: .28s;
-    animation-duration: .32s;
-  }
-}
-
-@keyframes jiggly {
-  0% {
-    transform: rotate(-.4deg);
-  }
-  50% {
-    transform: rotate(.4deg);
-  }
-  100% {
-    transform: rotate(-.4deg);
-  }
-}