amotify 0.0.9 → 0.0.11

package/src/functions/Layout/TabBar.tsx

@@ -11,12 +11,8 @@ import {
 import {
   Input
 } from '@fn';
-const {
-  useEffect,
-  useState
-} = React;
 
-export const TabBar: FNC<amotify.fn.Layout.TabBar.Params> = ( params ) => {
+export const TabBar: React.FC<amotify.fn.Layout.TabBar.Params> = ( params ) => {
   let {
     tabIndex,
     tabs,
@@ -25,7 +21,7 @@ export const TabBar: FNC<amotify.fn.Layout.TabBar.Params> = ( params ) => {
     ...others
   } = params;
 
-  useEffect( () => {
+  React.useEffect( () => {
     if ( componentDidMount ) componentDidMount();
   },[] );
 

package/src/functions/Loader/corner.tsx

@@ -1,26 +1,20 @@
 import {
-  useStore
+  useStore,
+  React
 } from '@global';
 import {
   Box,
   Flex
 } from '@atoms';
-import {
-  Row
-} from '@mols';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
 import { memoryID } from './parts';
 
 export const Corner = () => {
-  let [ val_active,set_active ] = useState( false );
+  let [ val_active,set_active ] = React.useState( false );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: memoryID + '-corner',
       value: {

package/src/functions/Loader/mini.tsx

@@ -1,13 +1,10 @@
 import {
-  useStore
+  useStore,
+  React
 } from '@global';
 import {
   Row
 } from '@mols';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
@@ -22,9 +19,9 @@ export const Mini = ( params: amotify.fn.Loader.CompInput & {
     loaderID = '',
     ...props
   } = params;
-  let [ val_key ] = useState( loaderID );
-  let [ val_componentID ] = useState( $.uuidGen() );
-  let [ val_active,set_active ] = useState( showInitial );
+  let [ val_key ] = React.useState( loaderID );
+  let [ val_componentID ] = React.useState( $.uuidGen() );
+  let [ val_active,set_active ] = React.useState( showInitial );
 
   let Size: amotify.UniStyles.Sizes.SizeParams = 0;
   if ( size == 'S' ) {
@@ -48,7 +45,7 @@ export const Mini = ( params: amotify.fn.Loader.CompInput & {
   }[ color as 'theme' ];
 
   let QuerySelector = '[data-component-id="' + val_componentID + '"]';
-  useEffect( () => {
+  React.useEffect( () => {
     if ( val_active ) {
       $( QuerySelector )
         .removeClass( style.Hide )
@@ -62,7 +59,7 @@ export const Mini = ( params: amotify.fn.Loader.CompInput & {
     }
   },[ val_active ] );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: val_componentID,
       value: {

package/src/functions/Loader/parts.tsx

@@ -1,11 +1,8 @@
+import React from 'react';
 import {
   LaunchReactApplication,
   useStore
 } from '@global';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
@@ -18,11 +15,11 @@ const SizeWrapper: {
   ( params: {
     color: amotify.fn.Loader.Colors
   } ): {
-    S: FNC<amotify.fn.Loader.CompInput>
-    R: FNC<amotify.fn.Loader.CompInput>
-    L: FNC<amotify.fn.Loader.CompInput>
-    XL: FNC<amotify.fn.Loader.CompInput>
-    MAX: FNC<amotify.fn.Loader.CompInput>
+    S: React.FC<amotify.fn.Loader.CompInput>
+    R: React.FC<amotify.fn.Loader.CompInput>
+    L: React.FC<amotify.fn.Loader.CompInput>
+    XL: React.FC<amotify.fn.Loader.CompInput>
+    MAX: React.FC<amotify.fn.Loader.CompInput>
   }
 } = ( params ) => {
   let color = params.color;

package/src/functions/Loader/top.tsx

@@ -1,26 +1,20 @@
 import {
-  useStore
+  useStore,
+  React
 } from '@global';
 import {
   Box,
   Flex
 } from '@atoms';
-import {
-  Row
-} from '@mols';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
 import { memoryID } from './parts';
 
 export const Top = () => {
-  let [ val_active,set_active ] = useState( false );
+  let [ val_active,set_active ] = React.useState( false );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: memoryID + '-top',
       value: {

package/src/functions/Sheet/parts.tsx

@@ -1,4 +1,5 @@
 import {
+  React,
   LaunchReactApplication,
   useStore
 } from '@global';
@@ -18,10 +19,6 @@ import {
   Input,
   Layout
 } from '@fn';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
@@ -81,9 +78,9 @@ const Comps = {
   mainSheetScrolls: 0,
   subSheetLength: 0,
   Core: ( params: Params ) => {
-    let [ val_componentID ] = useState( $.uuidGen() );
-    let [ val_params,set_params ] = useState( params );
-    let [ val_open,set_open ] = useState( true );
+    let [ val_componentID ] = React.useState( $.uuidGen() );
+    let [ val_params,set_params ] = React.useState( params );
+    let [ val_open,set_open ] = React.useState( true );
 
     let {
       type,
@@ -113,7 +110,7 @@ const Comps = {
       'custom': 'Custom',
     }[ type ] as 'Normal' ];
 
-    useEffect( () => {
+    React.useEffect( () => {
       useStore.set( {
         key: sheetID!,
         value: {
@@ -148,7 +145,7 @@ const Comps = {
         }
       } );
     } );
-    useEffect( () => {
+    React.useEffect( () => {
       let {
         closeOption
       } = params;
@@ -168,7 +165,7 @@ const Comps = {
         } );
       } );
     },[] );
-    useEffect( () => {
+    React.useEffect( () => {
       $.fnScope( () => {
         // #ROOT
         if ( !isNewSheet ) return;
@@ -412,8 +409,8 @@ const Comps = {
         'L': 3
       }
 
-      let [ val_stableSize,set_stableSize ] = useState( size as any );
-      let [ val_edit,set_edit ] = useState( {
+      let [ val_stableSize,set_stableSize ] = React.useState( size as any );
+      let [ val_edit,set_edit ] = React.useState( {
         process: false,
         processStart: 0,
         originY: 0,
@@ -527,7 +524,7 @@ const Comps = {
       }
 
       const mounted = React.useRef( false );
-      useEffect( () => {
+      React.useEffect( () => {
         if ( mounted.current ) {
           if ( val_stableSize == 'ZERO' ) {
             if ( swipeDown ) Sheet.close( sheetID! );
@@ -828,8 +825,8 @@ const Sheet: amotify.fn.Sheet.Methods = {
           transformOrigin: 'top'
         },
         content: () => {
-          let [ val_image ] = useState( $.flatArray( src ) );
-          let [ val_viewIndex,set_viewIndex ] = useState( 0 );
+          let [ val_image ] = React.useState( $.flatArray( src ) );
+          let [ val_viewIndex,set_viewIndex ] = React.useState( 0 );
 
           let Radio: amotify.fn.Input.List.OptionParams[] = [];
           let Slides: ReactElement[] = [];

package/src/functions/SnackBar/parts.tsx

@@ -1,6 +1,7 @@
 import {
   LaunchReactApplication,
-  useStore
+  useStore,
+  React
 } from '@global';
 import {
   Box,
@@ -14,10 +15,6 @@ import {
 import {
   Buttons
 } from '@fn';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
@@ -38,7 +35,7 @@ type ElementParams = amotify.fn.SnackBar.AddParams & {
   snackID: string
 }
 
-const Cell: FNC<ElementParams> = ( props ) => {
+const Cell: React.FC<ElementParams> = ( props ) => {
   let {
     snackID,
     secondsToClose = 10,
@@ -48,10 +45,10 @@ const Cell: FNC<ElementParams> = ( props ) => {
     ...others
   } = props;
 
-  let [ val_componentID ] = useState( componentID );
-  let [ val_mouseOn,set_mouseOn ] = useState( false );
+  let [ val_componentID ] = React.useState( componentID );
+  let [ val_mouseOn,set_mouseOn ] = React.useState( false );
 
-  useEffect( () => {
+  React.useEffect( () => {
     let Query = '[data-component-id="' + val_componentID + '"]';
     setTimeout( () => {
       $( Query ).addClass( style.FadeIn );
@@ -67,7 +64,7 @@ const Cell: FNC<ElementParams> = ( props ) => {
     } );
   },[] );
 
-  useEffect( () => {
+  React.useEffect( () => {
     $.interval.clear( 'SnackBar-' + val_componentID );
     if ( !val_mouseOn ) {
       setTimeout( () => {
@@ -138,10 +135,10 @@ const Cell: FNC<ElementParams> = ( props ) => {
 
 let SnackBarElements: ElementParams[] = [];
 
-const SnackBarsWrap: FNC<{}> = () => {
-  let [ val_refresh,set_refresh ] = useState( $.uuidGen() );
+const SnackBarsWrap: React.FC<{}> = () => {
+  let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: 'SnackBar',
       privateKey: SnackBar.__memoryID,

package/src/functions/Table/Drag/parts.tsx

@@ -1,5 +1,6 @@
 import {
-  useStore
+  useStore,
+  React
 } from '@global';
 import {
   FAIcon
@@ -8,10 +9,6 @@ import {
   Buttons,
   Tooltips,
 } from '@fn';
-const {
-  useState,
-  useEffect,
-} = React;
 
 import {
   Comps,
@@ -20,7 +17,7 @@ import {
 
 import style from '../style.module.scss';
 
-const HeadRow: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
+const HeadRow: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
   let {
     cellStyles = {},
     cellClassName = '',
@@ -70,7 +67,7 @@ const HeadRow: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
     children={ Cols }
   /> );
 }
-const BodyRows: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
+const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
   let {
     cellStyles = {},
     cellClassName = '',
@@ -81,8 +78,8 @@ const BodyRows: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
     onOrderChanged
   } = props;
 
-  let [ val_componentID ] = useState( $.uuidGen() );
-  let [ val_info,set_info ] = useState( {
+  let [ val_componentID ] = React.useState( $.uuidGen() );
+  let [ val_info,set_info ] = React.useState( {
     rows: rows,
     origin: 0,
     to: NaN
@@ -253,7 +250,7 @@ const BodyRows: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
     /> )
   }
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: val_componentID,
       value: {
@@ -291,7 +288,7 @@ const BodyRows: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
       }
     } )
   } );
-  useEffect( () => {
+  React.useEffect( () => {
     return () => {
       useStore.delete( val_componentID );
     }
@@ -303,7 +300,7 @@ const BodyRows: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
 }
 
 
-export const DragTable: FNC<amotify.fn.Tables.Drag.Params> = ( params ) => {
+export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) => {
   params.colLength = params.colLength + 1;
 
   if ( params.head ) {

package/src/functions/Table/Normal/parts.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import {
   Comps,
   DefaultCellSystemStyles
 } from '../_';
 import style from '../style.module.scss';
 
-const HeadRow: FNC<amotify.fn.Tables.Normal.Params> = ( params ) => {
+const HeadRow: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
   let {
     cellStyles = {},
     cellClassName = '',
@@ -51,7 +52,7 @@ const HeadRow: FNC<amotify.fn.Tables.Normal.Params> = ( params ) => {
     children={ Cols }
   /> );
 }
-const BodyRows: FNC<amotify.fn.Tables.Normal.Params> = ( params ) => {
+const BodyRows: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
   let {
     cellStyles = {},
     cellClassName = '',
@@ -109,7 +110,7 @@ const BodyRows: FNC<amotify.fn.Tables.Normal.Params> = ( params ) => {
   </> );
 }
 
-export const NormalTable: FNC<amotify.fn.Tables.Normal.Params> = ( params ) => {
+export const NormalTable: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
   params.rows = params.rows.map( ( row,rowIndex ) => {
     row.rowID = row.rowID || rowIndex;
     return row;

package/src/functions/Table/_.tsx

@@ -1,5 +1,6 @@
 import {
-  StyleConverter
+  StyleConverter,
+  React
 } from '@global';
 
 import {
@@ -8,7 +9,13 @@ import {
 } from '@atoms';
 
 export const Comps: amotify.fn.Tables.CompsMethods = {
-  Table: ( params ) => ( <table { ...StyleConverter.ToClassName( params ) } /> ),
+  Table: ( params ) => {
+    let Params = StyleConverter.ToClassName( params );
+    return <table
+      { ...Params }
+      border={ Params.border as any }
+    />;
+  },
   Head: ( params ) => ( <thead { ...StyleConverter.ToClassName( params ) } /> ),
   Body: ( params ) => ( <tbody { ...StyleConverter.ToClassName( params ) } /> ),
   Row: ( params ) => ( <tr { ...StyleConverter.ToClassName( params ) } /> ),
@@ -37,7 +44,7 @@ import { DragTable } from './Drag/parts';
 
 import style from './style.module.scss';
 
-const Wrapper: FNC<amotify.fn.Tables.Uni.Params & {
+const Wrapper: React.FC<amotify.fn.Tables.Uni.Params & {
   type: amotify.fn.Tables.Types
 }> = ( params ) => {
   let {

package/src/functions/Tooltips/parts.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Box
 } from '@atoms';

package/src/global/LaunchReactApplication.tsx

@@ -1,7 +1,8 @@
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDOMCLient from 'react-dom/client';
 import * as ReactRouterDom from 'react-router-dom';
 
-export const LaunchReactApplication: amotify.glob.LaunchReactApplicationParams = ( props ) => {
+export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams = ( props ) => {
   let {
     baseElement = '#ROOT',
     reactElement,
@@ -26,5 +27,5 @@ export const LaunchReactApplication: amotify.glob.LaunchReactApplicationParams =
   }
   let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
 
-  ReactDom.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
+  ReactDOMCLient.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
 }

package/src/global/styleConverter.tsx

@@ -238,7 +238,7 @@ const FNs = {
   }
 }
 
-export const ReadStyleSet: amotify.glob.StyleConverter.ReadStyleSet = ( rawParams ) => {
+export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawParams ) => {
   let params: amotifyBasicElement = { ...rawParams } as any;
   let {
     gradients,
@@ -367,7 +367,7 @@ export const ReadStyleSet: amotify.glob.StyleConverter.ReadStyleSet = ( rawParam
 
   return ReturnParams as any;
 }
-export const ToClassName: amotify.glob.StyleConverter.ToClassName = ( rawParams ) => {
+export const ToClassName: amotify.global.StyleConverter.ToClassName = ( rawParams ) => {
   let params = ReadStyleSet( rawParams ) as amotifyBasicElement;
 
   let {

package/src/launch.tsx

@@ -10,8 +10,8 @@ export { publicURI }
 import './@jsminAmotifyExtension/_';
 import {
   React,
-  ReactDom,
-  ReactRouterDom,
+  ReactDOM,
+  ReactRouterDOM,
   pageTransit,
   useStore,
   useRecycle,
@@ -66,7 +66,12 @@ import {
 
 const amotify: amotify = {
   config: defaultConfig,
-  glob: { React,ReactDom,ReactRouterDom: ReactRouterDom as any,pageTransit,useStore,useRecycle,StyleConverter,LaunchReactApplication },
+  global: {
+    React,
+    ReactDOM,
+    ReactRouterDOM,
+    pageTransit,useStore,useRecycle,StyleConverter,LaunchReactApplication
+  },
   atoms: { Flex,FlexBr,FAIcon,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
   mols: { List,Accordion,LinkifyText,Text,Column,Row },
   orgs: { DisplayStyleInput },

package/src/molecules/Accordion/parts.tsx

@@ -5,14 +5,10 @@ import {
 import {
   Box
 } from '@atoms';
-const {
-  useEffect,
-  useState,
-} = React;
 
 import style from './style.module.scss';
 
-const Component: FNC<amotify.mols.Accordion.Params> = ( params ) => {
+const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
   let {
     accordionID = '',
     slideAnimation = 'fast',
@@ -20,16 +16,16 @@ const Component: FNC<amotify.mols.Accordion.Params> = ( params ) => {
     ...others
   } = params;
 
-  let [ val_wrapID ] = useState( $.uuidGen() );
-  let [ val_contentID ] = useState( $.uuidGen() );
-  let [ val_open,set_open ] = useState( open );
+  let [ val_wrapID ] = React.useState( $.uuidGen() );
+  let [ val_contentID ] = React.useState( $.uuidGen() );
+  let [ val_open,set_open ] = React.useState( open );
 
   if ( val_open != open ) set_open( open );
 
   let Query = '[data-accordion-content-id="' + val_contentID + '"]';
 
   const mounted = React.useRef( false );
-  useEffect( () => {
+  React.useEffect( () => {
     let Content = $( Query )[ 0 ];
     if ( Content ) {
       let contentHeight = Content.offsetHeight;
@@ -45,7 +41,7 @@ const Component: FNC<amotify.mols.Accordion.Params> = ( params ) => {
       } )
     }
   },[] );
-  useEffect( () => {
+  React.useEffect( () => {
     let Wrap = $( '#' + val_wrapID );
     let Content = $( Query )[ 0 ];
     if ( mounted.current ) {

package/src/molecules/LinkifyText/parts.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   FAIcon
 } from '@atoms';
@@ -10,7 +11,7 @@ const {
 } = Buttons;
 
 
-export const LinkifyText: FNC<amotify.mols.LinkifyTextProps> = ( props ) => {
+export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) => {
   let {
     text,
     placeholder

package/src/molecules/List.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import {
   Flex
 } from '@atoms';
 
-export const List: FNC<amotify.mols.List.Params> = ( params ) => {
+export const List: React.FC<amotify.mols.List.Params> = ( params ) => {
   let {
     rows,
     rowStyles: DefaultRowStyles,

package/src/organisms/DisplayStyleInput/darkmode.tsx

@@ -16,11 +16,6 @@ import {
   Input
 } from '@fn';
 
-const {
-  useState,
-  useEffect
-} = React;
-
 const ColorCell = ( params: {
   colorType: amotify.DarkModeTypes
 } ) => {
@@ -79,10 +74,10 @@ const ColorCell = ( params: {
 }
 
 export const Darkmode = ( params: amotify.orgs.DisplayStyleInput.DarkmodeInput ) => {
-  let [ val_darkmode,set_darkmode ] = useState( amotify.config.darkMode || 'light' );
+  let [ val_darkmode,set_darkmode ] = React.useState( amotify.config.darkMode || 'light' );
 
   const mounted = React.useRef( false );
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mounted.current ) {
       params.onUpdate( val_darkmode );
     } else {

package/src/organisms/DisplayStyleInput/themeColor.tsx

@@ -16,11 +16,6 @@ import {
   Input
 } from '@fn';
 
-const {
-  useState,
-  useEffect
-} = React;
-
 type ColorIconParams = {
   key: string
   icon: ReactElement
@@ -137,7 +132,7 @@ const GenOption = ( params: ColorIconParams ) => {
 }
 
 const ThemeColor: {
-  ( type: 'all' | 'brand' | 'original' | 'basic' ): FNC<amotify.orgs.DisplayStyleInput.ThemeColorInput>
+  ( type: 'all' | 'brand' | 'original' | 'basic' ): React.FC<amotify.orgs.DisplayStyleInput.ThemeColorInput>
 } = ( type ) => {
   let ColorsArray: ColorIconParams[][] = [];
   if ( type == 'all' ) {
@@ -172,9 +167,9 @@ const ThemeColor: {
   }
   const Comp = ( params: amotify.orgs.DisplayStyleInput.ThemeColorInput ) => {
     const mounted = React.useRef( false );
-    let [ val_ColorKey,set_ColorKey ] = useState( amotify.config.themeColor );
+    let [ val_ColorKey,set_ColorKey ] = React.useState( amotify.config.themeColor );
 
-    useEffect( () => {
+    React.useEffect( () => {
       if ( mounted.current ) {
         params.onUpdate( val_ColorKey );
       } else {