amotify 0.0.3 → 0.0.4

package/src/Molecules/LinkifyText/parts.tsx

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,30 @@
+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

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

package/src/Organisms/DisplayStyleInput/_.tsx

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,210 @@
+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

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

package/src/Templates/PlayGround/parts.tsx

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,38 @@
+@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);
+  }
+}