amotify 0.0.5 → 0.0.7

package/src/config.tsx

@@ -0,0 +1,132 @@
+export const script = document.currentScript;
+export const fileName = script?.attributes.getNamedItem( 'src' )!.textContent;
+export const Version = ( fileName?.match( /v\d\.\d\.\d/ ) || [ 'v0.0.0' ] )[ 0 ]!;
+
+export const userAgent = window.navigator.userAgent.toLowerCase();
+export const deviceType =
+  userAgent.indexOf( "windows nt" ) !== -1 ? 'Windows'
+    : userAgent.indexOf( "android" ) !== -1 ? 'Android'
+      : userAgent.indexOf( "iphone" ) !== -1 ? 'iPhone'
+        : userAgent.indexOf( "ipad" ) > -1 || ( userAgent.indexOf( "macintosh" ) > -1 && "ontouchend" in document ) ? 'iPad'
+          : userAgent.indexOf( "mac os x" ) !== -1 ? 'macOSX'
+            : 'undefined';
+
+export const deviceIdentifier = () => {
+  let info = {
+    isWhat: deviceType as 'Windows',
+    isTouchDevice: window.ontouchstart !== undefined && 0 < navigator.maxTouchPoints,
+    isPhone: [ 'Android','iPhone' ].includes( deviceType ),
+    isIOS: [ 'iPhone','iPad' ].includes( deviceType ),
+    isSystemDarkmode: () => {
+      return window.matchMedia( '(prefers-color-scheme: dark)' ).matches == true;
+    },
+    isBreakpoint: () => window.innerWidth <= 896,
+    isPhonepoint: () => window.innerWidth <= 690
+  }
+
+  return info;
+}
+
+export const SetThemeColorTag = () => {
+  let hex = '#45515c';
+  let meta = $( '#ThemeColorMetaTag' );
+  if ( !meta[ 0 ] ) return;
+  meta.setAttribute( 'content',hex );
+}
+
+export const defaultConfig: amotify.config.Methods = {
+  version: Version,
+  tone: 'default',
+  darkMode: 'light',
+  themeColor: 'comun',
+  roundness: 2,
+
+  device: deviceIdentifier(),
+  update: {
+    tone: ( value ) => {
+      if ( ![ 'default','flat','sharp' ].includes( value ) ) value = 'default';
+
+      if ( value == amotify.config.tone ) return;
+
+      amotify.config.tone = value;
+
+      let body = $( 'body' );
+      body
+        .removeClass( body.findClass( /^bdsTN/ ) )
+        .addClass( 'bdsTN' + value )
+        .callback( () => {
+          SetThemeColorTag();
+        } );
+
+      amotify.glob.useRecycle.do( 'RootViewController' );
+    },
+    themeColor: ( value ) => {
+      if ( ![
+        'comun','leaf','heart','droplet',
+        'brick','flower','lip','wine','theater','bat','poizon','eggplant','ufo','alien','tombstone','ninja','moon','rain','unicorn','axe','gem','soap','drizzle','building','fish','icicles','water','tree1','tree2','tree3','battery','seedle','greenTea','oak','salad','cloudy','lemon','angel','parasol','pizza','thunder','latte','island','shovel','coffee','carrot','cactus','volcano','choco','industry','gun','galaxy',
+        'line','twitter','amazon','facebook','android','slackBlue','slackGreen','slackRed','slackYellow','slackBase','googleBlue','googleGreen','googleYellow','googleRed'
+      ].includes( value ) ) value = 'comun';
+      if ( value == amotify.config.themeColor ) return;
+
+      amotify.config.themeColor = value;
+
+      let body = $( document.body );
+      body
+        .removeClass( body.findClass( /^bdsTC/ ) )
+        .addClass( 'bdsTC_' + value )
+        .callback( () => {
+          SetThemeColorTag();
+        } );
+      amotify.glob.useRecycle.do( 'RootViewController' );
+    },
+    darkMode: ( value ) => {
+      if ( ![ 'light','dark','dim','auto' ].includes( value ) ) value = 'light';
+      if ( value == amotify.config.darkMode ) return;
+      let Value = value == 'auto'
+        ? deviceIdentifier().isSystemDarkmode()
+          ? 'dark'
+          : 'light'
+        : value;
+
+      amotify.config.darkMode = value;
+
+      let body = $( 'body' );
+      body
+        .removeClass( body.findClass( /^bdsDM/ ) )
+        .addClass( 'bdsDM_' + Value );
+
+      amotify.glob.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' );
+    },
+  },
+  readExtraCDN: async ( key ) => {
+    let url = key;
+    let valid = false;
+    if ( url ) {
+      await $.CDNReader( url );
+      console.log( 'Read extraCdn : ' + key );
+      valid = true;
+    }
+    return valid;
+  }
+}
+
+$( 'body' ).addClass( [
+  'usrDevice_' + deviceIdentifier().isWhat,
+  'bdsDM_' + defaultConfig.darkMode,
+  'bdsTC_' + defaultConfig.themeColor
+] );
+
+$( window ).addEvent( {
+  eventType: 'load',
+  callback: () => {
+    let style: any = document.body.style;
+    style.setProperty( '--viewHeight',window.innerHeight + 'px' );
+  }
+} );

package/src/launch.tsx

@@ -0,0 +1,100 @@
+import 'jsmin-front/dist/@types';
+
+if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
+
+import './@types/_';
+
+let publicURI = 'https://public.comun.jp/';
+export { publicURI }
+
+import './@jsminAmotifyExtension/_';
+import {
+  React,
+  ReactDom,
+  ReactRouterDom,
+  pageTransit,
+  useStore,
+  useRecycle,
+  StyleConverter,
+  LaunchReactApplication
+} from '@global';
+import {
+  Flex,
+  FlexBr,
+  FAIcon,
+  Placeholder,
+  Grid,
+  Logo,
+  Box,
+  Span,
+  Paragraph,
+  Img
+} from '@atoms';
+import {
+  List,
+  Accordion,
+  LinkifyText,
+  Text,
+  Column,
+  Row
+} from '@mols';
+import {
+  DisplayStyleInput
+} from '@orgs';
+import {
+  PlayGround
+} from '@temps';
+import {
+  Buttons,
+  Input,
+  Inputs,
+  Table,
+  Layout,
+  Sheet,
+  SnackBar,
+  Loader,
+  Tooltips,
+  Effects,
+  Cropper,
+} from '@functions';
+
+import {
+  deviceIdentifier,
+  defaultConfig,
+  SetThemeColorTag
+} from './config';
+
+const amotify: amotify = {
+  config: defaultConfig,
+  glob: { React,ReactDom,ReactRouterDom: ReactRouterDom as any,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 },
+  temps: { PlayGround },
+  fn: { Buttons,Input,Table,Layout,Sheet,SnackBar,Loader,Tooltips,Effects,Cropper }
+}
+
+export { amotify }
+global.amotify = amotify;
+Object.freeze( global.amotify.atoms );
+Object.freeze( global.amotify.mols );
+Object.freeze( global.amotify.orgs );
+Object.freeze( global.amotify.temps );
+Object.freeze( global.amotify.fn );
+Object.freeze( global.amotify );
+
+import './@styles/@app.scss';
+import './preload';
+
+// document.oncontextmenu = () => {return false;}
+$( window ).addEvent( {
+  eventType: 'resize',
+  eventID: 'getDeviceInfo',
+  callback: () => {
+    global.amotify.config.device = deviceIdentifier();
+
+    $( document.body ).setStyleProperty( '--viewHeight',window.innerHeight + 'px' );
+  }
+} );
+
+SetThemeColorTag();

package/src/preload.tsx

@@ -0,0 +1,49 @@
+let tags: Jsmin.CreateElement.Args[] = [
+  {
+    tag: 'meta',parent: document.head,attr: {
+      name: 'viewport',content: 'width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,viewport-fit=cover'
+    },
+  },{
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.googleapis.com',rel: 'preconnect',async: true
+    }
+  },{
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.gstatic.com',rel: 'preconnect',async: true
+    }
+  },
+  {
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap',
+      rel: 'stylesheet',
+      async: true
+    }
+  },{
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;600&display=swap',
+      rel: 'stylesheet',
+      async: true
+    }
+  },
+  {
+    tag: 'script',parent: document.head,attr: {
+      src: 'https://kit.fontawesome.com/6745173b38.js',async: true
+    }
+  },{
+    tag: 'meta',parent: document.head,attr: {
+      name: 'theme-color',
+      content: '#45515c',
+    },
+    id: 'ThemeColorMetaTag'
+  },
+  { 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;
+  if ( id && $( '#' + id )[ 0 ] ) continue;
+  $.createElement( tag );
+}

package/webpack.config.js

@@ -0,0 +1,114 @@
+module.exports = ( () => {
+  let path = require( 'path' );
+  let MinCss = require( 'mini-css-extract-plugin' );
+  let RemoveWasteFiles = require( 'webpack-remove-empty-scripts' );
+  let TerserPlugin = require( 'terser-webpack-plugin' );
+  let BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin;
+  let BrowserSync = require( 'browser-sync-webpack-plugin' );
+  let BrowserSync_option = {
+    host: 'localhost',
+    // port: 10201,
+    // proxy: 'http://localhost:10300/',
+    port: 10201,
+    proxy: 'http://localhost:10200/',
+    open: false,
+    notify: false
+  }
+
+  let entry = {
+    'amotify': './src/launch.tsx'
+  }
+  console.log( entry );
+  return {
+    mode: 'development',
+    entry: entry,
+    output: {
+      filename: '[name].js',
+      path: __dirname + '/public/',
+      devtoolModuleFilenameTemplate: 'src/[resource-path]'
+    },
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin( {
+          parallel: true,
+          extractComments: false,
+          terserOptions: {
+            compress: {
+              drop_console: true
+            },
+            output: {
+              comments: /^\*?!/
+            }
+          }
+        } )
+      ],
+    },
+    externals: {
+      'react': 'React',
+      'react-dom': 'ReactDOM',
+      'react-router-dom': 'ReactRouterDOM'
+    },
+    plugins: [
+      // new BundleAnalyzerPlugin(),
+      new BrowserSync(
+        BrowserSync_option,
+        { reload: true }
+      ),
+      new MinCss( {
+        filename: '[name].min.css'
+      } ),
+      new RemoveWasteFiles,
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.scss/,
+          use: [
+            MinCss.loader,
+            'css-loader',
+            'sass-loader'
+          ]
+        },
+        {
+          test: /\.(j|t)sx?$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  '@babel/preset-env',
+                  '@babel/preset-react',
+                  '@babel/preset-typescript'
+                ]
+              }
+            },
+            {
+              loader: "ts-loader",
+              options: {
+                // transpileOnly:true,
+                configFile: path.resolve( __dirname, 'tsconfig.json' )
+              }
+            }
+          ],
+        }
+      ]
+    },
+    resolve: {
+      modules: [ 'node_modules' ],
+      extensions: [ '.js', '.jsx', '.tsx', 'ts' ],
+      alias: {
+        '~': `${ __dirname }/src`,
+        '@uniVar': path.resolve( __dirname, 'src/@styles/@variables/customProps' ),
+        '@styleSet': path.resolve( __dirname, 'src/@styles/@variables/styleSet' ),
+
+        '@global': path.resolve( __dirname, 'src/Global/@export' ),
+        '@atoms': path.resolve( __dirname, 'src/Atoms/@export' ),
+        '@mols': path.resolve( __dirname, 'src/Molecules/@export' ),
+        '@orgs': path.resolve( __dirname, 'src/Organisms/@export' ),
+        '@temps': path.resolve( __dirname, 'src/Templates/@export' ),
+        '@functions': path.resolve( __dirname, 'src/Functions/@export' )
+      }
+    },
+  }
+} )();