amotify 0.0.8 → 0.0.10

package/src/{Functions → functions}/Loader/mini.tsx

@@ -1,13 +1,10 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Row
-} from '~/Molecules/@export';
-const {
-  useEffect,
-  useState,
-} = React;
+} from '@mols';
 
 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 → functions}/Loader/parts.tsx

@@ -1,11 +1,8 @@
+import React from 'react';
 import {
   LaunchReactApplication,
   useStore
-} from '~/Global/@export';
-const {
-  useEffect,
-  useState,
-} = React;
+} from '@global';
 
 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 → functions}/Loader/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 :global {
   #LOADER {
     z-index: 10;

package/src/{Functions → functions}/Loader/top.tsx

@@ -1,26 +1,20 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex
-} from '~/Atoms/@export';
-import {
-  Row
-} from '~/Molecules/@export';
-const {
-  useEffect,
-  useState,
-} = React;
+} from '@atoms';
 
 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 → functions}/Sheet/parts.tsx

@@ -1,27 +1,24 @@
 import {
+  React,
   LaunchReactApplication,
   useStore
-} from '~/Global/@export';
+} from '@global';
 import {
   Img,
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons,
   Input,
   Layout
-} from '~/Functions/@export';
-const {
-  useEffect,
-  useState,
-} = React;
+} from '@fn';
 
 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 → functions}/Sheet/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 //SheetBase
 :global {
   #SHEET {

package/src/{Functions → functions}/SnackBar/parts.tsx

@@ -1,23 +1,20 @@
 import {
   LaunchReactApplication,
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Row,
   Column
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons
-} from '~/Functions/@export';
-const {
-  useEffect,
-  useState,
-} = React;
+} from '@fn';
 
 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 → functions}/SnackBar/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 :global {
   #SNACKBARS {
     z-index: 8;

package/src/{Functions → functions}/Table/Data/parts.tsx

@@ -1,22 +1,22 @@
 import {
   useStore,
   React
-} from '~/Global/@export';
+} from '@global';
 import {
   Flex,
   Box,
   Span,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons,
   Input,
   Sheet,
-} from '~/Functions/@export';
+} from '@fn';
 
 import style from '../style.module.scss';
 

package/src/{Functions → functions}/Table/Drag/parts.tsx

@@ -1,17 +1,14 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Buttons,
   Tooltips,
-} from '~/Functions/@export';
-const {
-  useState,
-  useEffect,
-} = React;
+} from '@fn';
 
 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 → functions}/Table/Normal/parts.tsx

@@ -1,11 +1,11 @@
-import style from '../style.module.scss';
-
+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 = '',
@@ -52,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 = '',
@@ -110,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 → functions}/Table/_.tsx

@@ -1,12 +1,12 @@
 import {
   StyleConverter,
-  useStore
-} from '~/Global/@export';
+  React
+} from '@global';
 
 import {
   Box,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 
 export const Comps: amotify.fn.Tables.CompsMethods = {
   Table: ( params ) => ( <table { ...StyleConverter.ToClassName( params ) } /> ),
@@ -38,7 +38,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 → functions}/Table/style.module.scss

@@ -1,5 +1,6 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
+@use'@styleSet' as *;
+
 .Wrap {
   &.RowClickable_true {
     .Row {

package/src/{Functions → functions}/Tooltips/parts.tsx

@@ -1,9 +1,10 @@
+import React from 'react';
 import {
   Box
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Sheet
-} from '~/Functions/@export';
+} from '@fn';
 
 const Tooltips: amotify.fn.Tooltips.Methods = {
   __memoryID: $.uuidGen(),

package/src/{Global → 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 → global}/styleConverter.tsx

@@ -1,7 +1,3 @@
-import {
-  useStore
-} from '~/Global/@export';
-
 type StyleType = '¥' | '¥_h' | '¥_f' | '¥_a' | '¥bk';
 
 const FNs = {
@@ -19,7 +15,7 @@ const FNs = {
   },
   ev: ( v: any ) => $.is.nullish( v ),
   ClassNames: ( type: StyleType,params: amotifyUniStyleParams ) => {
-    let CLS = [];
+    let CLS: string[] = [];
 
     let {
       gap,
@@ -242,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,
@@ -371,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

@@ -1,8 +1,8 @@
 import 'jsmin-front/dist/@types';
 
-if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
+import '../@types/_';
 
-import './@types/_';
+if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
 
 let publicURI = 'https://public.comun.jp/';
 export { publicURI }
@@ -10,14 +10,14 @@ export { publicURI }
 import './@jsminAmotifyExtension/_';
 import {
   React,
-  ReactDom,
-  ReactRouterDom,
+  ReactDOM,
+  ReactRouterDOM,
   pageTransit,
   useStore,
   useRecycle,
   StyleConverter,
   LaunchReactApplication
-} from './Global/@export';
+} from './@global';
 import {
   Flex,
   FlexBr,
@@ -29,7 +29,7 @@ import {
   Span,
   Paragraph,
   Img
-} from './Atoms/@export';
+} from '@atoms';
 import {
   List,
   Accordion,
@@ -37,13 +37,13 @@ import {
   Text,
   Column,
   Row
-} from './Molecules/@export';
+} from '@mols';
 import {
   DisplayStyleInput
-} from './Organisms/@export';
+} from '@orgs';
 import {
   PlayGround
-} from './Templates/@export';
+} from './@templates';
 import {
   Buttons,
   Input,
@@ -56,7 +56,7 @@ import {
   Tooltips,
   Effects,
   Cropper,
-} from './Functions/@export';
+} from '@fn';
 
 import {
   deviceIdentifier,
@@ -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 → molecules}/Accordion/parts.tsx

@@ -1,18 +1,14 @@
 import {
   useStore,
   React
-} from '~/Global/@export';
+} from '@global';
 import {
   Box
-} from '~/Atoms/@export';
-const {
-  useEffect,
-  useState,
-} = React;
+} from '@atoms';
 
 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 ) {