amotify 0.0.13 → 0.0.14

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

@@ -3,7 +3,7 @@ import {
   React
 } from '@global';
 import {
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Buttons,
@@ -15,6 +15,8 @@ import {
   DefaultCellSystemStyles
 } from '../_';
 
+import { faGripDotsVertical } from '@fortawesome/pro-solid-svg-icons/faGripDotsVertical';
+
 import style from '../style.module.scss';
 
 const HeadRow: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
@@ -141,9 +143,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
             } );
           } }
         >
-          <FAIcon
-            d='grip-dots-vertical'
-          />
+          <FAI icon={ faGripDotsVertical } />
         </Buttons.Button.Clear.R>
       </Comps.TH> );
     }
@@ -205,7 +205,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
         cellClassName
       ].join( ' ' ) }
     >
-      <FAIcon.ArrowRight
+      <FAI.ArrowRight
         fontColor='theme'
       />
     </Comps.TH> );
@@ -315,15 +315,13 @@ export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) =>
               parent: event.currentTarget,
               padding: [ 0,1 ],
               content: <Tooltips.Comps.Body>
-                <FAIcon
-                  d='grip-dots-vertical'
-                />
+                <FAI icon={ faGripDotsVertical } />
                 ボタンをドラッグして順序を変更
               </Tooltips.Comps.Body>
             } );
           } }
         >
-          <FAIcon.QuestionCircle />
+          <FAI.QuestionCircle />
         </Buttons.Button.Plain>,
         padding: [ 0,1 ],
         unitWidth: 4

package/src/functions/Table/_.tsx

@@ -5,7 +5,7 @@ import {
 
 import {
   Box,
-  FAIcon
+  FAI
 } from '@atoms';
 
 export const Comps: amotify.fn.Tables.CompsMethods = {
@@ -27,7 +27,7 @@ export const Comps: amotify.fn.Tables.CompsMethods = {
     type: 'td',
     unitWidth: 4,
     // data: '',
-    children: <FAIcon.AngleRight
+    children: <FAI.AngleRight
       fontColor={ 'theme' }
       fontSize={ '4.thirdTitle' }
     />

package/src/global/LaunchReactApplication.tsx

@@ -1,16 +1,18 @@
+import { baseElements } from '@global';
 import React from 'react';
 import ReactDOMCLient from 'react-dom/client';
 import * as ReactRouterDom from 'react-router-dom';
 
 export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams = ( props ) => {
   let {
-    baseElement = '#ROOT',
+    baseElement = '#' + baseElements.rootID,
     reactElement,
     nonRouter = false,
+    isRoot = true,
     appearances
   } = props;
-  let Base = $( baseElement )[ 0 ];
-  if ( !Base || !reactElement ) return;
+  let base = $( baseElement );
+  if ( !base[ 0 ] || !reactElement ) return;
   if ( appearances ) {
     let {
       roundness,
@@ -26,6 +28,15 @@ export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams
   }
 
   let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
-  // ReactDOMCLient.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
-  ReactDOMCLient.createRoot( Base ).render( <>{ reactDom }</> );
+
+  if ( isRoot ) {
+    base.addClass( 'amotify_base_element_root' );
+    if ( base[ 0 ].id ) {
+      baseElements.rootID = base[ 0 ].id;
+    } else {
+      base.setAttribute( 'id',baseElements.rootID );
+    }
+  }
+
+  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> );
 }

package/src/launch.tsx

@@ -1,8 +1,16 @@
-import 'jsmin-front/dist/@types';
+import 'jsmin-front/@types';
+import 'jsmin-front/dist/jsmin';
 
 import '../@types/_';
 
 if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
+import { launchID } from './@variables';
+export const baseElements = {
+  rootID: 'ROOT_' + launchID,
+  loaderID: 'LOADER_' + launchID,
+  sheetID: 'SHEET_' + launchID,
+  snackbarID: 'SNACKBARS_' + launchID
+}
 
 let publicURI = 'https://public.comun.jp/';
 export { publicURI }
@@ -22,7 +30,7 @@ import {
 import {
   Flex,
   FlexBr,
-  FAIcon,
+  FAI,
   Placeholder,
   Grid,
   Logo,
@@ -40,7 +48,6 @@ import {
   Row
 } from '@mols';
 import {
-  DisplayStyleInput
 } from '@orgs';
 import {
   PlayGround
@@ -73,9 +80,9 @@ const amotify: amotify = {
     ReactRouterDOM,
     pageTransit,useStore,useRecycle,StyleConverter,LaunchReactApplication
   },
-  atoms: { Flex,FlexBr,FAIcon,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
+  atoms: { Flex,FlexBr,FAI,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
   mols: { List,Accordion,LinkifyText,Text,Column,Row },
-  orgs: { DisplayStyleInput },
+  orgs: {},
   temps: { PlayGround },
   fn: { Buttons,Input,Table,Layout,Sheet,SnackBar,Loader,Tooltips,Effects,Cropper }
 }

package/src/molecules/Accordion/parts.tsx

@@ -14,6 +14,7 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
     accordionID = '',
     slideAnimation = 'fast',
     defaultOpen = false,
+    override = false,
     ...others
   } = params;
 
@@ -21,7 +22,9 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
   let [ val_contentID ] = React.useState( $.uuidGen() );
   let [ val_open,set_open ] = React.useState( defaultOpen );
 
-  if ( val_open != defaultOpen ) set_open( defaultOpen );
+  if ( val_open != defaultOpen ) {
+    if ( override ) set_open( defaultOpen );
+  }
 
   let Query = '[data-accordion-content-id="' + val_contentID + '"]';
 

package/src/molecules/LinkifyText/parts.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Buttons
@@ -10,7 +10,6 @@ const {
   Anchor
 } = Buttons;
 
-
 export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) => {
   let {
     text,
@@ -39,7 +38,7 @@ export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) =>
           href={ url }
           newTab
         >
-          { url } <FAIcon d='arrow-up-right-from-square' />
+          { url }
         </Anchor.Link> );
       }
     }

package/src/preload.tsx

@@ -1,3 +1,5 @@
+import { baseElements } from './launch';
+
 let tags: Jsmin.CreateElement.Args[] = [
   {
     tag: 'meta',parent: document.head,attr: {
@@ -24,42 +26,29 @@ let tags: Jsmin.CreateElement.Args[] = [
       rel: 'stylesheet',
       async: true
     }
-  },
-  {
-    tag: 'script',parent: document.head,attr: {
-      src: 'https://kit.fontawesome.com/6745173b38.js',async: true
-    }
-  },
-
-  // <script src="https://public.comun.jp/@env/react/v18.0.4/reactProduction.js" defer></script>
-  // <script src="https://public.comun.jp/@env/react/v18.0.4/react-dom.js" defer></script>
-  // <script src="https://public.comun.jp/@env/react/v18.0.4/react-router-dom@v5.3.0.js" defer></script>
-  // {
-  //   tag: 'script',parent: document.head,attr: {
-  //     src: 'https://public.comun.jp/@env/react/v18.0.4/reactProduction.js',async: true
-  //   }
-  // },{
-  //   tag: 'script',parent: document.head,attr: {
-  //     src: 'https://public.comun.jp/@env/react/v18.0.4/react-dom.js',async: true
-  //   }
-  // },{
-  //   tag: 'script',parent: document.head,attr: {
-  //     src: 'https://public.comun.jp/@env/react/v18.0.4/react-router-dom@v5.3.0.js',async: true
-  //   }
-  // },
-
-  {
+  },{
     tag: 'meta',parent: document.head,attr: {
       name: 'theme-color',
       content: '#45515c',
     },
     id: 'ThemeColorMetaTag'
+  },{
+    parent: document.body,
+    id: baseElements.sheetID,
+    className: 'amotify_base_element_sheet',
+  },{
+    parent: document.body,
+    id: baseElements.snackbarID,
+    className: 'amotify_base_element_snackbar',
+  },{
+    parent: document.body,
+    id: baseElements.loaderID,
+    className: 'amotify_base_element_loader',
+  },{
+    parent: document.body,
+    id: baseElements.rootID,
+    className: 'amotify_base_element_root',
   },
-  { parent: document.body,id: 'SHEET' },
-  { parent: document.body,id: 'TOOLTIPS' },
-  { parent: document.body,id: 'SNACKBARS' },
-  { parent: document.body,id: 'LOADER' },
-  { parent: document.body,id: 'ROOT' },
 ];
 for ( let tag of tags ) {
   let { id } = tag;

package/tsconfig.json

@@ -24,13 +24,24 @@
       "@styleSet": [
         "src/@styles/styleSet"
       ],
-
-      "@global": [ "src/@global" ],
-      "@atoms": [ "src/@atoms" ],
-      "@mols": [ "src/@molecules" ],
-      "@orgs": [ "src/@organisms" ],
-      "@temps": [ "src/@templates" ],
-      "@fn": [ "src/@functions" ],
+      "@global": [
+        "src/@global"
+      ],
+      "@atoms": [
+        "src/@atoms"
+      ],
+      "@mols": [
+        "src/@molecules"
+      ],
+      "@orgs": [
+        "src/@organisms"
+      ],
+      "@temps": [
+        "src/@templates"
+      ],
+      "@fn": [
+        "src/@functions"
+      ],
     },
     "strict": true,
     "skipLibCheck": true,
@@ -47,7 +58,7 @@
     // "noUnusedParameters": true,
     "strictNullChecks": true,
     "esModuleInterop": true,
-    "noEmitOnError": true,
+    "noEmitOnError": false
   },
   "exclude": [
     "node_modules",

package/webpack.config.js

@@ -43,6 +43,16 @@ module.exports = ( () => {
           }
         } )
       ],
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            test: /node_modules/,
+            filename: 'coreVender.js',
+            chunks: 'all',
+            enforce: true
+          }
+        }
+      }
     },
     externals: {
       // 'react': 'React',
@@ -51,10 +61,10 @@ module.exports = ( () => {
     },
     plugins: [
       // new BundleAnalyzerPlugin(),
-      new BrowserSync(
-        BrowserSync_option,
-        { reload: true }
-      ),
+      // new BrowserSync(
+      //   BrowserSync_option,
+      //   { reload: true }
+      // ),
       new MinCss( {
         filename: '[name].min.css'
       } ),
@@ -86,6 +96,7 @@ module.exports = ( () => {
             {
               loader: "ts-loader",
               options: {
+                allowTsInNodeModules: true,
                 // transpileOnly:true,
                 configFile: path.resolve( __dirname, 'tsconfig.json' )
               }
@@ -96,7 +107,7 @@ module.exports = ( () => {
     },
     resolve: {
       modules: [ 'node_modules' ],
-      extensions: [ '.js', '.jsx', '.tsx', 'ts' ],
+      extensions: [ '.js', '.jsx', '.tsx', '.ts' ],
       alias: {
         '~': `${ __dirname }/src`,
 

package/src/atoms/FAIcon/parts.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import {
-  Box
-} from '../Various/parts';
-
-import style from './style.module.scss';
-
-const FaIconComp: React.FC<amotify.atoms.FAIcon.FAIconFNC> = ( params ) => {
-  let {
-    iconAnimation = false,
-    iconFamily,
-
-    isSolidIcon,
-    isRegularIcon,
-    isLightIcon,
-    isThinIcon,
-    isDuotoneIcon,
-
-    isBrandIcon = false,
-    d = 'image-slash',
-    ...others
-  } = params;
-
-  let ClassNames = [
-    style.FAIcon,
-    'fa-' + d,
-    'fa-fw'
-  ];
-
-  if ( !isBrandIcon ) {
-    let { tone } = amotify.config;
-    if ( !isSolidIcon && !isRegularIcon && !isLightIcon && !isThinIcon && !isDuotoneIcon ) isRegularIcon = true;
-    if ( tone == 'default' ) {
-    } else if ( tone == 'sharp' ) {
-      iconFamily = iconFamily || 'sharp';
-    }
-
-    let iconStyle =
-      isSolidIcon ? 'solid' :
-        isRegularIcon ? 'regular' :
-          isLightIcon ? 'light' :
-            isThinIcon ? 'thin' :
-              isDuotoneIcon ? 'duotone' :
-                'regular';
-
-    iconFamily = iconFamily || 'classic';
-
-    if ( iconAnimation == 'spin-reverse' ) iconAnimation = 'spin fa-spin-reverse' as any;
-
-    ClassNames = [
-      'fa-' + iconFamily,
-      'fa-' + iconStyle,
-      ...ClassNames
-    ];
-    if ( iconAnimation ) ClassNames.push( 'fa-' + iconAnimation );
-  } else {
-    ClassNames = [
-      'fa-brands',
-      ...ClassNames
-    ];
-  }
-
-
-  return ( <Box
-    verticalAlign='center'
-    horizontalAlign='center'
-    { ...others }
-    freeCSS={ {
-      display: 'inline-flex',
-      ...others.freeCSS
-    } }
-  >
-    <i className={ ClassNames.join( ' ' ) } />
-  </Box> );
-}
-
-
-const FAIcon: amotify.atoms.FAIcon.Method = FaIconComp as any;
-
-let shortKeys = [
-  'user',
-  'times',
-  'descktop',
-
-  'angle-right','angle-left','angle-up','angle-down',
-  'chevron-left','chevron-right','chevron-up','chevron-down',
-  'caret-left','caretRight','caret-up','caret-down',
-  'arrow-left','arrow-right','arrow-up','arrow-down',
-
-  'rotate','rotate-left','rotate-right','redo',
-
-  'play','pause','stop','forward-step','backward-step',
-  'check','check-circle',
-  'question','question-circle','exclamation','exclamation-triangle',
-  'home','share','volume',
-  'search','yen-sign','heart','star',
-
-  'edit','pen','copy','files','file',
-  'backspace',
-  'trash-alt',
-  'bars',
-  'download',
-  'link','link-slash','external-link-alt',
-  'gear',
-  'plus','minus','equals','calculator',
-  'image',
-  'badge-percent'
-];
-for ( let key of shortKeys ) {
-  FAIcon[ key.toCapital() as 'User' ] = ( params: amotify.atoms.FAIcon.FAIconFNC ) => {
-    return <FaIconComp
-      d={ key }
-      { ...params }
-    />;
-  };
-}
-
-export { FAIcon }

package/src/atoms/FAIcon/style.module.scss

@@ -1,8 +0,0 @@
-@use '@props' as *;
-
-.FAIcon {
-  &:global.fa-duotone {
-    // --fa-primary-opacity: 1;
-    // --fa-secondary-opacity: 0.30;
-  }
-}

package/src/organisms/DisplayStyleInput/_.tsx

@@ -1,18 +0,0 @@
-import { Darkmode } from './darkmode';
-import {
-  ThemeColorALL,
-  ThemeColorBasic,
-  ThemeColorOriginal,
-  ThemeColorBrands,
-  Colors
-} from './themeColor';
-export const DisplayStyleInput: amotify.orgs.DisplayStyleInput.Methods = {
-  Darkmode,
-  ThemeColor: {
-    ALL: ThemeColorALL,
-    Originals: ThemeColorOriginal,
-    Brands: ThemeColorBrands,
-    Basics: ThemeColorBasic,
-    Keys: Colors,
-  }
-}

package/src/organisms/DisplayStyleInput/darkmode.tsx

@@ -1,107 +0,0 @@
-import {
-  React
-} from '@global';
-import {
-  Box,
-  Flex,
-  Img,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input
-} from '@fn';
-
-const ColorCell = ( params: {
-  colorType: amotify.DarkModeTypes
-} ) => {
-  if ( params.colorType == 'light' ) {
-    return <Box
-      freeCSS={ {
-        backgroundColor: '#FFF'
-      } }
-      width={ 1 }
-      height={ 1 }
-      isRounded
-    />
-  } else if ( params.colorType == 'dark' ) {
-    return <Box
-      freeCSS={ {
-        backgroundColor: '#333'
-      } }
-      width={ 1 }
-      height={ 1 }
-      isRounded
-    />
-  } else if ( params.colorType == 'dim' ) {
-    return <Box
-      freeCSS={ {
-        backgroundColor: '#666'
-      } }
-      width={ 1 }
-      height={ 1 }
-      isRounded
-    />
-  }
-  return <Column
-    width={ 1 }
-    height={ 1 }
-    isRounded
-    flexChilds='even'
-    overflow={ 'hidden' }
-    gap={ '1/6' }
-    freeCSS={ {
-      transform: 'rotate(-45deg)'
-    } }
-  >
-    <Box
-      freeCSS={ {
-        backgroundColor: '#FFF'
-      } }
-      borderRadius={ 1 }
-    />
-    <Box
-      freeCSS={ {
-        backgroundColor: '#333'
-      } }
-      borderRadius={ 1 }
-    />
-  </Column>
-}
-
-export const Darkmode = ( params: amotify.orgs.DisplayStyleInput.DarkmodeInput ) => {
-  let [ val_darkmode,set_darkmode ] = React.useState( amotify.config.darkMode || 'light' );
-
-  const mounted = React.useRef( false );
-  React.useEffect( () => {
-    if ( mounted.current ) {
-      params.onUpdate( val_darkmode );
-    } else {
-      mounted.current = true;
-    }
-  },[ val_darkmode ] );
-
-  return <Input.Radio
-    icon={ false }
-    value={ val_darkmode }
-    cellStyles={ {
-      padding: '1/3',
-      borderWidth: 2,
-      ssSphere: 4,
-      isRounded: true
-    } }
-    options={ [
-      { value: 'light',label: <ColorCell colorType={ 'light' } /> },
-      { value: 'dark',label: <ColorCell colorType={ 'dark' } /> },
-      { value: 'dim',label: <ColorCell colorType={ 'dim' } /> },
-      { value: 'auto',label: <ColorCell colorType={ 'auto' } /> },
-    ] }
-    onUpdateValidValue={ ( { value } ) => {
-      set_darkmode( value[ 0 ] );
-    } }
-  />;
-}