amotify 0.0.8 → 0.0.10

package/src/{Functions → functions}/Input/Time/_.tsx

@@ -1,14 +1,15 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Box
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Input,
   Buttons,
   Tooltips
-} from '~/Functions/@export';
+} from '@fn';
 
 import {
   BoxWrapper,
@@ -17,11 +18,6 @@ import {
   CommonEffects
 } from '../core';
 import { Picker } from './Picker';
-const {
-  useEffect,
-  useState,
-  useRef
-} = React;
 
 const PeriodMargin = ' ~ ';
 
@@ -298,7 +294,7 @@ type FocusProps = {
   prevIndex: number
 }
 
-export const TimeInput: FNC<amotify.fn.Input.Time.OriginParams> = ( params ) => {
+export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params ) => {
   let {
     tone,
     required,
@@ -323,9 +319,9 @@ export const TimeInput: FNC<amotify.fn.Input.Time.OriginParams> = ( params ) =>
     ...others
   } = params;
 
-  let [ val_era,set_era ] = useState( era! );
+  let [ val_era,set_era ] = React.useState( era! );
 
-  let [ val_status,set_status ] = useState( {
+  let [ val_status,set_status ] = React.useState( {
     componentID: params.componentID || '',
     ...DataLeveling( {
       restrict,
@@ -336,11 +332,11 @@ export const TimeInput: FNC<amotify.fn.Input.Time.OriginParams> = ( params ) =>
     eventID: $.uuidGen(),
   } as amotify.fn.Input.Status.Time );
 
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
-  let [ val_focus,set_focus ] = useState( {
+  let [ val_focus,set_focus ] = React.useState( {
     active: false,
     index: 0,
     prevIndex: -1
@@ -365,8 +361,8 @@ export const TimeInput: FNC<amotify.fn.Input.Time.OriginParams> = ( params ) =>
     }
   } );
 
-  const mounted = useRef( false );
-  useEffect( () => {
+  const mounted = React.useRef( false );
+  React.useEffect( () => {
     if ( mounted.current ) {
       set_status( {
         ...val_status,
@@ -423,7 +419,7 @@ export const TimeInput: FNC<amotify.fn.Input.Time.OriginParams> = ( params ) =>
     }
   } );
 
-  useEffect( () => {
+  React.useEffect( () => {
     let { index,active } = val_focus;
     if ( active ) {
       index = Math.max( index,0 );

package/src/{Functions → functions}/Input/Time/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Header {
   position: sticky;
   top: 0;

package/src/{Functions → functions}/Input/_.tsx

@@ -1,28 +1,23 @@
 import {
   StyleConverter,
   useStore,
-} from '~/Global/@export';
-const {
-  useState,
-  useEffect,
-  useRef
-} = React;
-
+  React
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon,
   Span
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Row,
   Text,
   Column
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons,
   Tooltips
-} from '~/Functions/@export';
+} from '@fn';
 
 import style from './style.module.scss';
 
@@ -45,12 +40,12 @@ import { FileInput } from './File/_';
 import { SliderInput } from './Slider/_';
 import { Segmented } from './Segmented/_';
 
-const UniComponent: FNC<{
+const UniComponent: React.FC<{
   componentID?: string
-  children: FNC<any>
+  children: React.FC<any>
   params: any
 }> = ( props ) => {
-  let [ val_componentID ] = useState( props.componentID || $.uuidGen() );
+  let [ val_componentID ] = React.useState( props.componentID || $.uuidGen() );
 
   props.params = {
     enableFormSubmit: true,
@@ -101,8 +96,8 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
     { ...props }
   /> ),
   Postal: ( params ) => {
-    let [ val_postalEventID ] = useState( $.uuidGen() );
-    useEffect( () => {
+    let [ val_postalEventID ] = React.useState( $.uuidGen() );
+    React.useEffect( () => {
       return () => {
         useStore.delete( val_postalEventID );
       }
@@ -181,7 +176,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
   Origin: ( props: amotify.fn.Input.Time.OriginParams ) => JSX.Element
 } = {
   Origin: ( rawParams ) => {
-    let [ val_componentID ] = useState( rawParams.componentID || $.uuidGen() );
+    let [ val_componentID ] = React.useState( rawParams.componentID || $.uuidGen() );
     rawParams.componentID = val_componentID;
 
     if ( $.is.nullish( rawParams.rightIndicator ) ) {
@@ -224,7 +219,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
   Month: ( props ) => ( <TimeInputs.Origin restrict='month' { ...props } /> ),
   Year: ( props ) => ( <TimeInputs.Origin restrict='year' { ...props } /> ),
   DateWareki: ( params ) => {
-    let [ val_componentID ] = useState( params.componentID || $.uuidGen() );
+    let [ val_componentID ] = React.useState( params.componentID || $.uuidGen() );
     params.componentID = val_componentID;
     let {
       defaultEra = 'wareki',

package/src/{Functions → functions}/Input/core.tsx

@@ -1,26 +1,21 @@
 import {
-  useStore
-} from '~/Global/@export';
-const {
-  useEffect,
-  useState,
-  useRef
-} = React;
-
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons,
   Tooltips
-} from '~/Functions/@export';
+} from '@fn';
 
 import style from './style.module.scss';
 
@@ -32,7 +27,7 @@ type BoxWrapperParams = {
   children: ReactElement
 }
 
-export const BoxWrapper: FNC<BoxWrapperParams> = ( props ) => {
+export const BoxWrapper: React.FC<BoxWrapperParams> = ( props ) => {
   let {
     children,
     val_status,
@@ -100,7 +95,7 @@ export const BoxWrapper: FNC<BoxWrapperParams> = ( props ) => {
     </Box>
   );
 }
-const GenNotices: FNC<{
+const GenNotices: React.FC<{
   notice: amotify.fn.Input.Validation.NoticeTypes[]
   val_status: amotify.fn.Input.Status.Plain
 }> = ( params ) => {
@@ -234,9 +229,9 @@ export const CommonEffects: {
     componentID
   } = val_status;
 
-  let [ val_refresh,set_refresh ] = useState( $.uuidGen() );
+  let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.update( {
       key: componentID,
       value: {
@@ -259,8 +254,8 @@ export const CommonEffects: {
     }
   },[] );
 
-  const mounted = useRef( false );
-  useEffect( () => {
+  const mounted = React.useRef( false );
+  React.useEffect( () => {
     if ( mounted.current ) {
       set_status( {
         ...val_status,
@@ -271,7 +266,7 @@ export const CommonEffects: {
       mounted.current = true;
     }
   },[ val_refresh ] );
-  useEffect( () => {
+  React.useEffect( () => {
     params.value = val_status.dataValue;
 
     $.interval.clear( 'ValidationTimer-' + componentID );
@@ -310,7 +305,7 @@ export const CommonEffects: {
     component.statusID = params.statusID;
   } )();
 
-  useEffect( () => {
+  React.useEffect( () => {
     let {
       componentID,
       eventType,

package/src/{Functions → functions}/Input/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Input {
   &:focus, &:active {
     z-index: 1;

package/src/{Functions → functions}/Inputs/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Focus {
   &:focus, &:active {
     z-index: 1;

package/src/{Functions → functions}/Inputs/text.tsx

@@ -1,23 +1,11 @@
+import React from 'react';
 import {
   StyleConverter
-} from '~/Global/@export';
-import style from './style.module.scss';
+} from '@global';
 
+import style from './style.module.scss';
 
-declare global {
-  namespace Inputs {
-    type ToneTypes = 'normal' | 'cloud' | 'bottomBorder' | 'plain'
-  
-    namespace Text {
-      type Params =
-        any &
-        React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement> &
-        {
-          tone?: ToneTypes
-        }
-    }
-  }
-}
+import { TextInputs } from './types';
 
 let ToneStyles: {
   common: amotifyBasicElement
@@ -48,7 +36,7 @@ let ToneStyles: {
   plain: {},
 }
 
-export const TextInput = ( params: Inputs.Text.Params ) => {
+export const TextInput = ( params: TextInputs.Text.Params ) => {
   params = {
     ...ToneStyles.common,
     ...ToneStyles.bottomBorder,

package/src/functions/Inputs/types.d.ts

@@ -0,0 +1,13 @@
+namespace TextInputs {
+  type ToneTypes = 'normal' | 'cloud' | 'bottomBorder' | 'plain'
+
+  namespace Text {
+    type Params =
+      any &
+      React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement> &
+      {
+        tone?: ToneTypes
+      }
+  }
+}
+export { TextInputs }

package/src/{Functions → functions}/Layout/PageNotFound.tsx

@@ -1,19 +1,18 @@
+import React from 'react';
 import {
   Box,
-  Flex,
-  FAIcon,
-  Paragraph
-} from '~/Atoms/@export';
+  FAIcon
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons
-} from '~/Functions/@export';
+} from '@fn';
 
-export const PageNotFound: FNC<{}> = () => {
+export const PageNotFound: React.FC<{}> = () => {
 
   let { href } = location;
 

package/src/{Functions → functions}/Layout/PageRouter.tsx

@@ -1,27 +1,23 @@
 import {
   useStore,
-  ReactRouterDom
-} from '~/Global/@export';
+  React
+} from '@global';
 import {
   Layout
-} from '~/Functions/@export';
-const {
-  useEffect,
-  useRef,
-} = React;
+} from '@fn';
 
-const {
-  useHistory,
+import {
+  useNavigate,
   useLocation,
   BrowserRouter,
-  Switch,
+  Routes,
   Route,
-} = ReactRouterDom;
+} from 'react-router-dom';
 
 const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFirstCallback?: Function ) => {
-  const mounted = useRef( false );
+  const mounted = React.useRef( false );
   let location = useLocation();
-  let history = useHistory();
+  let history = useNavigate();
   useStore.set( {
     key: 'history',
     value: history
@@ -29,7 +25,7 @@ const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFir
 
   amotify.fn.Sheet.closeAll( true );
 
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mounted.current ) {
       $( '#TopNavigation' )
         .callback( ( topHeader ) => {
@@ -47,10 +43,10 @@ const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFir
 
   if ( beforeCallback ) beforeCallback( location );
 
-  useEffect( () => {
+  React.useEffect( () => {
     if ( afterFirstCallback ) afterFirstCallback( location );
   },[] );
-  useEffect( () => {
+  React.useEffect( () => {
     setTimeout( () => {
       window.dispatchEvent( new Event( 'resize' ) );
     },200 );
@@ -63,29 +59,24 @@ const Switcher: React.FC<amotify.fn.Layout.PageRouter.RoutesSwitchProps> = ( pro
 
   userEffect( beforeCallBack,afterCallBack,afterFirstCallBack );
 
-  let Routes = routes.map( ( page ) => {
+  let Routing = routes.map( ( page ) => {
     let { path,content } = page;
     path = '/' + path.replace( /^\//,'' );
 
-    return (
-      <Route
-        key={ path }
-        exact
-        path={ path }
-        render={ () => ( <>{ content }</> ) }
-      />
-    );
+    return <Route
+      key={ path }
+      path={ path }
+      element={ content }
+    />;
   } );
 
-  return (
-    <Switch>
-      { Routes }
-      <Route
-        path='*'
-        render={ () => ( <><Layout.PageNotFound /></> ) }
-      />
-    </Switch>
-  );
+  return <Routes>
+    { Routing }
+    <Route
+      path='*'
+      element={ <Layout.PageNotFound /> }
+    />
+  </Routes>;
 }
 
 export const PageRouter: React.FC<amotify.fn.Layout.PageRouter.RouterProps> = ( props ) => {

package/src/{Functions → functions}/Layout/PageViewController/parts.tsx

@@ -1,15 +1,12 @@
 import {
   React
-} from '~/Global/@export';
+} from '@global';
 
-const {
-  useState,
-  useEffect
-} = React;
-
-import { Effects } from '~/Functions/@export';
+import {
+  Effects
+} from '@fn';
 
-export const PageViewController: FNC<amotify.fn.Layout.PageViewController.Params> = ( params ) => {
+export const PageViewController: React.FC<amotify.fn.Layout.PageViewController.Params> = ( params ) => {
   let {
     viewIndex = 0,
     views,
@@ -21,7 +18,7 @@ export const PageViewController: FNC<amotify.fn.Layout.PageViewController.Params
   } = params;
   viewIndex = Math.min( Math.max( viewIndex,0 ),views.length );
 
-  let [ val_index,set_index ] = useState( viewIndex );
+  let [ val_index,set_index ] = React.useState( viewIndex );
   if ( val_index != viewIndex ) set_index( viewIndex );
 
   return (

package/src/{Functions → functions}/Layout/Plate.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import {
   Box
-} from '~/Atoms/@export';
+} from '@atoms';
 
-export const Plate: FNC<amotify.fn.Layout.Plate.Params> = ( props ) => {
+export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
   let {
     size = 'R',
     ...others

package/src/{Functions → functions}/Layout/RootViewController/parts.tsx

@@ -2,19 +2,17 @@ import {
   React,
   useRecycle,
   pageTransit
-} from '~/Global/@export';
+} from '@global';
 import {
   Box,
   Flex,
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
-  Column,
-  Row
-} from '~/Molecules/@export';
+  Column
+} from '@mols';
 import {
-  Buttons,
-  Input
-} from '~/Functions/@export';
+  Buttons
+} from '@fn';
 
 import style from './style.module.scss';
 

package/src/{Functions → functions}/Layout/RootViewController/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Content {
   @media (max-width:$breakPoint ) {
     min-height: calc($viewHeight - $topNavigationHeight - $footerNavigationHeight );

package/src/{Functions → functions}/Layout/SwipeView/parts.tsx

@@ -1,19 +1,14 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex
-} from '~/Atoms/@export';
-const {
-  useState,
-  useEffect,
-  useRef,
-} = React;
+} from '@atoms';
 
 import style from './style.module.scss';
 
-
 type SlideEventProps = {
   eventType: 'usr' | 'sys' | 'init' | 'adjustLoop'
   index: number
@@ -38,7 +33,7 @@ export const SwipeView = ( params: amotify.fn.Layout.SwipeView.Params ) => {
     slideIndex={ Math.max( Math.min( params.slideIndex!,params.slides.length - 1 ),0 ) }
   /> );
 }
-export const Core: FNC<amotify.fn.Layout.SwipeView.Params> = ( params ) => {
+export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) => {
   let {
     options: {
       onSlideCallback,
@@ -53,21 +48,21 @@ export const Core: FNC<amotify.fn.Layout.SwipeView.Params> = ( params ) => {
     ...others
   } = params;
 
-  let [ val_swipeID ] = useState( $.uuidGen() );
-  let [ val_event,set_event ] = useState( {
+  let [ val_swipeID ] = React.useState( $.uuidGen() );
+  let [ val_event,set_event ] = React.useState( {
     eventType: 'init',
     index: params.slideIndex
   } as SlideEventProps );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: 'SwipeTimer-' + val_swipeID,
       value: null
     } );
   },[] );
 
-  const mounted = useRef( false );
-  useEffect( () => {
+  const mounted = React.useRef( false );
+  React.useEffect( () => {
     set_event( {
       eventType: 'usr',
       index: params.slideIndex!
@@ -76,7 +71,7 @@ export const Core: FNC<amotify.fn.Layout.SwipeView.Params> = ( params ) => {
     if ( !mounted.current ) mounted.current = true;
   },[ params.slideIndex ] );
 
-  useEffect( () => {
+  React.useEffect( () => {
     let Index = val_event.index + ( loop ? 1 : 0 );
     let CopyIndex = [ -1,slides.length ].includes( val_event.index );
 

package/src/{Functions → functions}/Layout/SwipeView/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Rail {
   &.ShowOther_true {
     > .Child {

package/src/{Functions → functions}/Layout/TabBar.tsx

@@ -1,22 +1,18 @@
 import {
   React,
-} from '~/Global/@export';
+} from '@global';
 import {
   Box,
   Flex
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Row
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Input
-} from '~/Functions/@export';
-const {
-  useEffect,
-  useState
-} = React;
+} from '@fn';
 
-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 → functions}/Loader/corner.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 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: {