amotify 0.0.8 → 0.0.10

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "amotify",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
   "scripts": {
-    "clean-cdn": "rimraf public",
-    "clean-dist": "rimraf dist",
+    "clean": "rimraf dist",
     "devCDN:webpack": "webpack --mode development --watch",
     "devCDN:server": "nodemon app.js --ignore public --ignore package.json --ignore src --ignore webpack.config.js --ignore tsconfig.json",
     "proCDN:webpack": "webpack --mode production",
-    "allBuild:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
-    "typesBuild:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json tsc --emitDeclarationOnly",
-    "build": "run-p clean-dist allBuild:*",
-    "build-types": "run-p clean-dist typesBuild:*",
-    "server": "run-p clean-cdn devCDN:*",
-    "cdn": "run-p clean-cdn proCDN:*"
+    "start": "run-p clean devCDN:*",
+    "build": "run-p clean proCDN:*"
   },
   "repository": {
     "type": "git",
@@ -32,6 +27,12 @@
     "url": "https://github.com/IkkoKoyama/amotify/issues"
   },
   "homepage": "https://github.com/IkkoKoyama/amotify#readme",
+  "dependencies": {
+    "@types/react": "^18.2.37",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -39,8 +40,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@types/express": "^4.17.13",
     "@types/google.maps": "^3.50.0",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^18.2.15",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "babel-loader": "^8.2.3",
@@ -57,7 +57,6 @@
     "sass-loader": "^12.6.0",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.8",
-    "tsc-alias": "^1.8.8",
     "webpack": "^5.69.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",

package/src/{Atoms/@export.tsx → @atoms.tsx}

@@ -7,11 +7,11 @@ import {
   Grid,
   Paragraph,
   Placeholder
-} from './Various/parts';
+} from './atoms/Various/parts';
 
-import { FAIcon } from './FAIcon/parts';
+import { FAIcon } from './atoms/FAIcon/parts';
 
-import { Logo } from './Logo/parts';
+import { Logo } from './atoms/Logo/parts';
 
 export {
   Flex,

package/src/@functions.tsx

@@ -0,0 +1,29 @@
+import {
+  Effects
+} from './functions/Effects/_';
+
+import { Buttons } from './functions/Button/_';
+import { Input } from './functions/Input/_';
+import { Inputs } from './functions/Inputs/_';
+import { Layout } from './functions/Layout/_';
+import { Table } from './functions/Table/_';
+import { Sheet } from './functions/Sheet/parts';
+import { SnackBar } from './functions/SnackBar/parts';
+import { Loader } from './functions/Loader/parts';
+import { Tooltips } from './functions/Tooltips/parts';
+
+import { Cropper } from './functions/Cropper/parts';
+
+export {
+  Buttons,
+  Input,
+  Inputs,
+  Table,
+  Layout,
+  Sheet,
+  SnackBar,
+  Loader,
+  Tooltips,
+  Effects,
+  Cropper,
+}

package/src/{Global/@export.tsx → @global.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
-import * as ReactDom from 'react-dom';
-import * as ReactRouterDom from 'react-router-dom';
+import ReactDOM from 'react-dom';
+import * as ReactRouterDOM from 'react-router-dom';
 
-import { LaunchReactApplication } from './LaunchReactApplication';
+import { LaunchReactApplication } from './global/LaunchReactApplication';
 
 const Inmemory: {
   [ key: string ]: {
@@ -10,7 +10,7 @@ const Inmemory: {
     value: any
   }
 } = {}
-const useStore: amotify.glob.useStoreParams = {
+const useStore: amotify.global.useStoreParams = {
   set: ( params ) => {
     let {
       key,
@@ -57,7 +57,7 @@ const useStore: amotify.glob.useStoreParams = {
     return true;
   }
 }
-const useRecycle: amotify.glob.useRecycleParams = {
+const useRecycle: amotify.global.useRecycleParams = {
   set: ( key ) => {
     let [ val_recycleID ] = React.useState( $.uuidGen() );
     let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
@@ -90,7 +90,7 @@ const useRecycle: amotify.glob.useRecycleParams = {
   }
 }
 
-const pageTransit: amotify.glob.PageTransitParams = {
+const pageTransit: amotify.global.PageTransitParams = {
   open: ( url ) => {
     window.open( url );
   },
@@ -119,7 +119,7 @@ const pageTransit: amotify.glob.PageTransitParams = {
 import {
   ReadStyleSet,
   ToClassName
-} from './styleConverter';
+} from './global/styleConverter';
 
 const StyleConverter = {
   ReadStyleSet,
@@ -128,8 +128,8 @@ const StyleConverter = {
 
 export {
   React,
-  ReactDom,
-  ReactRouterDom,
+  ReactDOM,
+  ReactRouterDOM,
   pageTransit,
   useStore,
   useRecycle,

package/src/@jsminAmotifyExtension/formCollect.tsx

@@ -1,6 +1,6 @@
 import {
   useStore
-} from '~/Global/@export';
+} from '@global';
 
 let formProcess = false;
 $.formCollect = async ( form ) => {

package/src/{Molecules/@export.tsx → @molecules.tsx}

@@ -1,11 +1,12 @@
+import React from 'react';
 import {
   Span,
   Box,
   Flex
-} from '~/Atoms/@export';
-import { List } from './List';
-import { Accordion } from './Accordion/parts';
-import { LinkifyText } from './LinkifyText/parts';
+} from '@atoms';
+import { List } from './molecules/List';
+import { Accordion } from './molecules/Accordion/parts';
+import { LinkifyText } from './molecules/LinkifyText/parts';
 
 const Text = {
   Title: ( params: amotify.atoms.BoxInput ) => ( <Box

package/src/@organisms.tsx

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

package/src/@styles/UniStyling.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use './props' as *;
 @use './styleSet' as *;
 @use './themeColor' as themeColor;
 @mixin UniStyles($DS ) {

package/src/@styles/init.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use './props' as *;
 * {
   padding: 0;
   margin: 0;

package/src/@styles/styleSet.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use './props' as *;
 
 @mixin OriginScrollBar {
   overflow: auto;

package/src/{Templates/@export.tsx → @templates.tsx}

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

package/src/{Atoms → atoms}/FAIcon/parts.tsx

@@ -1,10 +1,11 @@
-import style from './style.module.scss';
-
+import React from 'react';
 import {
   Box
 } from '../Various/parts';
 
-const FaIconComp: FNC<amotify.atoms.FAIcon.FAIconFNC> = ( params ) => {
+import style from './style.module.scss';
+
+const FaIconComp: React.FC<amotify.atoms.FAIcon.FAIconFNC> = ( params ) => {
   let {
     iconAnimation = false,
     iconFamily,

package/src/{Atoms → atoms}/FAIcon/style.module.scss

@@ -1,5 +1,4 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
 
 .FAIcon {
   &:global.fa-duotone {

package/src/{Atoms → atoms}/Logo/parts.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import {
-  Box,
   Flex,
   Img
-} from '~/Atoms/@export';
+} from '@atoms';
 
 import style from './style.module.scss';
 

package/src/{Atoms → atoms}/Logo/style.module.scss

@@ -1,5 +1,4 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
 
 .Size_ {
   &S {

package/src/{Atoms → atoms}/Various/parts.tsx

@@ -1,19 +1,20 @@
+import React from 'react';
 import {
   StyleConverter
-} from '~/Global/@export';
+} from '@global';
 
 import { publicURI } from '../../launch';
 
 import style from './style.module.scss';
 
-export const Box: FNC<amotify.atoms.BoxInput> = ( params ) => {
+export const Box: React.FC<amotify.atoms.BoxInput> = ( params ) => {
   let {
     freeCSS,
     ...Params
   } = StyleConverter.ToClassName( params );
   return ( <div { ...Params } /> );
 }
-export const Span: FNC<amotify.atoms.SpanProps> = ( params ) => {
+export const Span: React.FC<amotify.atoms.SpanProps> = ( params ) => {
   let {
     freeCSS,
     ...Params
@@ -21,7 +22,7 @@ export const Span: FNC<amotify.atoms.SpanProps> = ( params ) => {
   return ( <span { ...Params } /> );
 }
 
-export const Placeholder: FNC<amotify.atoms.PlaceholderParams> = ( params ) => {
+export const Placeholder: React.FC<amotify.atoms.PlaceholderParams> = ( params ) => {
   let {
     color = 'cloud',
     ...others
@@ -54,7 +55,7 @@ export const Placeholder: FNC<amotify.atoms.PlaceholderParams> = ( params ) => {
 
 let Img: amotify.atoms.Image.Methods = {} as any;
 {
-  const ImageComp: FNC<amotify.atoms.Image.CompInput> = ( params ) => {
+  const ImageComp: React.FC<amotify.atoms.Image.CompInput> = ( params ) => {
     let {
       src = '',
       alt = '',
@@ -111,7 +112,7 @@ let Img: amotify.atoms.Image.Methods = {} as any;
 }
 export { Img }
 
-export const Flex: FNC<amotify.atoms.FlexProps> = ( props ) => {
+export const Flex: React.FC<amotify.atoms.FlexProps> = ( props ) => {
   let {
     children,
     freeCSS,
@@ -131,13 +132,13 @@ export const Flex: FNC<amotify.atoms.FlexProps> = ( props ) => {
   /> );
 }
 
-export const FlexBr: FNC<amotifyUniStyleParams> = ( params ) => ( <Box
+export const FlexBr: React.FC<amotifyUniStyleParams> = ( params ) => ( <Box
   width={ 1 }
   flexSizing='none'
   { ...params }
 /> );
 
-export const Grid: FNC<amotify.atoms.GridProps> = ( props ) => {
+export const Grid: React.FC<amotify.atoms.GridProps> = ( props ) => {
   let {
     children,
     freeCSS,
@@ -154,4 +155,4 @@ export const Grid: FNC<amotify.atoms.GridProps> = ( props ) => {
   /> );
 }
 
-export const Paragraph: FNC<amotify.atoms.ParagraphProps> = ( props ) => ( <p { ...StyleConverter.ToClassName( props ) } /> )
+export const Paragraph: React.FC<amotify.atoms.ParagraphProps> = ( props ) => ( <p { ...StyleConverter.ToClassName( props ) } /> )

package/src/{Atoms → atoms}/Various/style.module.scss

@@ -1,5 +1,6 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
+@use'@styleSet' as *;
+
 .Img {
   &.ShowExpand_true {
     transition: $animation-time-middle;

package/src/config.tsx

@@ -58,7 +58,7 @@ export const defaultConfig: amotify.config.Methods = {
           SetThemeColorTag();
         } );
 
-      amotify.glob.useRecycle.do( 'RootViewController' );
+      amotify.global.useRecycle.do( 'RootViewController' );
     },
     themeColor: ( value ) => {
       if ( ![
@@ -77,7 +77,7 @@ export const defaultConfig: amotify.config.Methods = {
         .callback( () => {
           SetThemeColorTag();
         } );
-      amotify.glob.useRecycle.do( 'RootViewController' );
+      amotify.global.useRecycle.do( 'RootViewController' );
     },
     darkMode: ( value ) => {
       if ( ![ 'light','dark','dim','auto' ].includes( value ) ) value = 'light';
@@ -95,14 +95,14 @@ export const defaultConfig: amotify.config.Methods = {
         .removeClass( body.findClass( /^bdsDM/ ) )
         .addClass( 'bdsDM_' + Value );
 
-      amotify.glob.useRecycle.do( 'RootViewController' );
+      amotify.global.useRecycle.do( 'RootViewController' );
     },
     roundness: ( value ) => {
       if ( !( value >= 0 && value <= 5 ) ) value = 2;
       if ( value == amotify.config.roundness ) return;
 
       amotify.config.roundness = value;
-      amotify.glob.useRecycle.do( 'RootViewController' );
+      amotify.global.useRecycle.do( 'RootViewController' );
     },
   },
   readExtraCDN: async ( key ) => {

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

@@ -1,7 +1,8 @@
+import React from 'react';
 import {
   StyleConverter,
   pageTransit
-} from '~/Global/@export';
+} from '@global';
 
 import style from './style.module.scss';
 

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

@@ -1,5 +1,6 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
+@use'@styleSet' as *;
+
 .Wrap {
   position: relative;
   @include DisableduserSelect();

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

@@ -1,28 +1,24 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 
 import {
   Buttons,
   Input,
   Sheet,
   Loader
-} from '~/Functions/@export';
-
-const {
-  useState,
-  useEffect,
-} = React;
+} from '@fn';
 
 import style from './style.module.scss';
 
@@ -566,8 +562,8 @@ class CroppImage {
 }
 
 const Comps: {
-  Core: FNC<CoreProps>
-  SettingRegion: FNC<{
+  Core: React.FC<CoreProps>
+  SettingRegion: React.FC<{
     DefaultOptions: plainObject
     val_scale: number
     set_scale: React.Dispatch<React.SetStateAction<number>>
@@ -591,7 +587,7 @@ const Comps: {
       develops = []
     } = options;
 
-    let [ val_componentID ] = useState( $.uuidGen( 32 ) );
+    let [ val_componentID ] = React.useState( $.uuidGen( 32 ) );
 
     const DefaultOptions = {
       scale: {
@@ -604,12 +600,12 @@ const Comps: {
       tone: 0
     }
 
-    let [ val_scale,set_scale ] = useState( DefaultOptions.scale.default );
-    let [ val_rotate,set_rotate ] = useState( DefaultOptions.rotate )
-    let [ val_grayScale,set_grayScale ] = useState( DefaultOptions.grayScale );
-    let [ val_tone,set_tone ] = useState( DefaultOptions.tone );
+    let [ val_scale,set_scale ] = React.useState( DefaultOptions.scale.default );
+    let [ val_rotate,set_rotate ] = React.useState( DefaultOptions.rotate )
+    let [ val_grayScale,set_grayScale ] = React.useState( DefaultOptions.grayScale );
+    let [ val_tone,set_tone ] = React.useState( DefaultOptions.tone );
 
-    useEffect( () => {
+    React.useEffect( () => {
       useStore.set( {
         key: val_componentID,
         value: {}
@@ -747,13 +743,13 @@ const Comps: {
         },1000 );
       } )();
     },[ val_file.id ] );
-    useEffect( () => {
+    React.useEffect( () => {
       let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
       if ( Instance ) {
         Instance.updateScale( val_scale );
       }
     },[ val_scale ] );
-    useEffect( () => {
+    React.useEffect( () => {
       let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
       if ( Instance ) {
         Instance.updateFilter( {

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

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Wrap {
   &.Use_ {
     &profile {

package/src/{Functions → functions}/Effects/Fade.tsx

@@ -1,14 +1,9 @@
 import {
   React
-} from '~/Global/@export';
+} from '@global';
 import {
   Box
-} from '~/Atoms/@export';
-
-const {
-  useState,
-  useEffect
-} = React;
+} from '@atoms';
 
 export const FadeEffects: amotify.fn.Effects.Methods = {
   ...{} as any,
@@ -19,9 +14,9 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
       componentID = $.uuidGen(),
       ...others
     } = params;
-    let [ val_componentID ] = useState( componentID );
+    let [ val_componentID ] = React.useState( componentID );
 
-    useEffect( () => {
+    React.useEffect( () => {
       setTimeout( () => {
         let Element = $( '[data-component-id="' + val_componentID + '"]' );
         if ( !Element[ 0 ] ) return;
@@ -51,9 +46,9 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
       componentID = $.uuidGen(),
       ...others
     } = params;
-    let [ val_componentID ] = useState( componentID );
+    let [ val_componentID ] = React.useState( componentID );
 
-    useEffect( () => {
+    React.useEffect( () => {
       setTimeout( () => {
         let Element = $( '[data-component-id="' + val_componentID + '"]' );
         if ( !Element[ 0 ] ) return;

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

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Ripple {
   &Element {
     transition: $animation-time-short;

package/src/{Functions → functions}/Input/Chips/Selector.tsx

@@ -1,28 +1,24 @@
 import {
-  useRecycle,
   useStore,
-} from '~/Global/@export';
-const {
-  useEffect,
-  useState
-} = React;
+  React
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon,
   Span
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Input,
   Buttons,
   Loader,
   Sheet
-} from '~/Functions/@export';
+} from '@fn';
 
 import style from './style.module.scss';
 
@@ -39,16 +35,16 @@ const Selector = ( params: {
   onDynamicSearch?: amotify.fn.Input.Chips.onDynamicSearch
 } ) => {
   type StatusTypes = 'show' | 'interlude';
-  let [ val_status,set_status ] = useState( 'show' as StatusTypes );
-  let [ val_keyword,set_keyword ] = useState( '' );
-  let [ val_componentID ] = useState( $.uuidGen() );
+  let [ val_status,set_status ] = React.useState( 'show' as StatusTypes );
+  let [ val_keyword,set_keyword ] = React.useState( '' );
+  let [ val_componentID ] = React.useState( $.uuidGen() );
 
-  let [ val_options,set_options ] = useState( params.options );
-  let [ val_focus,set_focus ] = useState( val_options[ 0 ] || null );
-  let [ val_selected,set_selected ] = useState( params.selected );
-  let [ val_keyEvent,set_keyEvent ] = useState( 'init' );
+  let [ val_options,set_options ] = React.useState( params.options );
+  let [ val_focus,set_focus ] = React.useState( val_options[ 0 ] || null );
+  let [ val_selected,set_selected ] = React.useState( params.selected );
+  let [ val_keyEvent,set_keyEvent ] = React.useState( 'init' );
 
-  useEffect( () => {
+  React.useEffect( () => {
     useStore.set( {
       key: params.selectorID,
       value: {
@@ -62,7 +58,7 @@ const Selector = ( params: {
     } );
   },[] );
   const mountedOptions = React.useRef( false );
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mountedOptions.current ) {
       Sheet.reposition( params.selectorID );
     } else {
@@ -70,7 +66,7 @@ const Selector = ( params: {
     }
   },[ val_options ] );
   const mountedKeyword = React.useRef( false );
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mountedKeyword.current ) {
       set_status( 'interlude' );
       set_focus( val_options[ 0 ] || null );
@@ -111,7 +107,7 @@ const Selector = ( params: {
     }
   },[ val_keyword ] );
   const mountedSelected = React.useRef( false );
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mountedSelected.current ) {
       params.onUpdated( {
         values: val_selected
@@ -120,7 +116,7 @@ const Selector = ( params: {
       mountedSelected.current = true;
     }
   },[ val_selected ] );
-  useEffect( () => {
+  React.useEffect( () => {
     $.fnScope( () => {
       if ( $.is.nullish( val_focus ) ) return;
       if ( val_keyEvent == 'MouseEvent' ) return;