amotify 0.0.13 → 0.0.14

package/src/organisms/DisplayStyleInput/themeColor.tsx

@@ -1,205 +0,0 @@
-import {
-  React
-} from '@global';
-import {
-  Box,
-  Flex,
-  Img,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input
-} from '@fn';
-
-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' ): React.FC<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 ] = React.useState( amotify.config.themeColor );
-
-    React.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' );