amotify 0.0.64 → 0.0.66

package/src/molecules/Accordion/parts.tsx

@@ -1,146 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box
-} from '@atoms'
-
-import style from './style.module.scss'
-
-const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
-  params = { ...params }
-  let {
-    accordionID = '',
-    slideAnimation = 'fast',
-    defaultOpen = false,
-    override = false,
-    ...others
-  } = params
-
-  let [ val_wrapID ] = React.useState( $.uuidGen() )
-  let [ val_contentID ] = React.useState( $.uuidGen() )
-  let [ val_open,set_open ] = React.useState( defaultOpen )
-
-  if ( val_open != defaultOpen ) {
-    if ( override ) set_open( defaultOpen )
-  }
-
-  let Query = '[data-accordion-content-id="' + val_contentID + '"]'
-
-  const mounted = React.useRef( false )
-  React.useEffect( () => {
-    let Content = $( Query )[ 0 ]
-    if ( Content ) {
-      let contentHeight = Content.offsetHeight
-      let transitionTime = 0
-      if ( slideAnimation == 'fast' ) {
-        transitionTime = contentHeight / 1000
-        transitionTime = Math.max( transitionTime,.2 )
-      } else if ( slideAnimation == 'slow' ) {
-        transitionTime = contentHeight / 300
-      }
-      $( '#' + val_wrapID ).css( {
-        transition: transitionTime + 's'
-      } )
-    }
-  },[] )
-  React.useEffect( () => {
-    let Wrap = $( '#' + val_wrapID )
-    let Content = $( Query )[ 0 ]
-    if ( mounted.current ) {
-      if ( Content ) {
-        let contentHeight = Content.offsetHeight
-        if ( $.is.exist( contentHeight ) ) {
-          if ( val_open ) {
-            Wrap.css( {
-              maxHeight: ( contentHeight + 1 ) + 'px',
-            } ).await( 200 ).css( {
-              maxHeight: 'unset',
-              overflow: ( params.overflow as any ) || 'unset'
-            } )
-          } else {
-            Wrap.css( {
-              maxHeight: ( contentHeight + 1 ) + 'px',
-            } ).await( 100 ).css( {
-              maxHeight: 0 + 'px',
-              overflow: 'hidden'
-            } )
-          }
-        }
-      }
-    } else {
-      mounted.current = true
-      if ( Content ) {
-        let contentHeight = Content.offsetHeight
-        if ( $.is.exist( contentHeight ) ) {
-          if ( val_open ) {
-            Wrap.css( {
-              maxHeight: ( contentHeight + 1 ) + 'px',
-            } ).await( 200 ).css( {
-              maxHeight: 'unset',
-              overflow: ( params.overflow as any ) || 'unset'
-            } )
-          } else {
-            Wrap
-              .css( {
-                maxHeight: 0 + 'px',
-                overflow: 'hidden'
-              } )
-          }
-        }
-      }
-    }
-  },[ val_open ] )
-
-  if ( accordionID ) {
-    useStore.set( {
-      key: 'Accordion-' + accordionID,
-      value: {
-        open: () => {
-          set_open( true )
-          // params.open = true
-        },
-        close: () => {
-          set_open( false )
-          // params.open = false
-        },
-        toggle: () => {
-          set_open( !val_open )
-          // params.open = !val_open
-        }
-      }
-    } )
-  }
-
-  return <Box
-    className={ [
-      style.Wrap,
-      style[ 'Open_' + val_open ]
-    ].join( ' ' ) }
-    id={ val_wrapID }
-  >
-    <Box
-      data-accordion-content-id={ val_contentID }
-      { ...others }
-    />
-  </Box>
-}
-
-const Accordion: amotify.mols.Accordion.SetParams = Component as any
-Accordion.fn = {
-  open: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id )
-    !component || component.open()
-  },
-  close: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id )
-    !component || component.close()
-  },
-  toggle: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id )
-    !component || component.toggle()
-  }
-}
-
-export { Accordion }

package/src/molecules/Accordion/style.module.scss

@@ -1,13 +0,0 @@
-@use '@props' as *;
-.Wrap {
-  &.Open_true {
-    opacity: 1;
-  }
-  &.Open_false {
-    opacity: 0 !important;
-    pointer-events: none !important;
-    * {
-      pointer-events: none !important;
-    }
-  }
-}

package/src/molecules/LinkifyText/parts.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import {
-  FAI
-} from '@atoms'
-import {
-  Buttons
-} from '@fn'
-
-const {
-  Anchor
-} = Buttons
-
-export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) => {
-  let {
-    text,
-    placeholder
-  } = props
-
-  let Description: ReactElement[] = []
-
-  if ( text ) {
-    let urls: string[] = []
-
-    text = text.replace( /https?:\/\/[^\s|\n|\r]*/ig,( ...args: any ) => {
-      let url = args[ 0 ]
-      urls.push( url )
-
-      return '[$_url]'
-    } )
-    let parts = text.split( '[$_url]' )
-    for ( let index = 0; index <= parts.length - 1; index++ ) {
-      let part = parts[ index ]
-      let url = urls[ index ]
-      Description.push( part )
-      if ( index < parts.length - 1 ) {
-        Description.push( <Anchor.Link
-          key={ 'Link-' + index }
-          href={ url }
-          newTab
-        >
-          { url }
-        </Anchor.Link> )
-      }
-    }
-  } else if ( placeholder ) {
-    Description = [ placeholder ]
-  }
-
-  return <>
-    { Description }
-  </>
-}

package/src/molecules/List.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {
-  Flex
-} from '@atoms'
-
-export const List: React.FC<amotify.mols.List.Params> = ( params ) => {
-  let {
-    rows,
-    rowStyles: DefaultRowStyles,
-    ...others
-  } = params
-
-  let rowArray = rows.map( ( row ) => {
-    let {
-      children,
-      ...others
-    } = row
-
-    return <Flex
-      { ...DefaultRowStyles }
-      { ...others }
-      children={ children }
-    />
-  } )
-
-  return <Flex
-    { ...others }
-    flexType='col'
-    children={ rowArray }
-  />
-}

package/src/preload.tsx

@@ -1,31 +0,0 @@
-import { launchID } from './@variables'
-
-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: 'meta',
-    parent: document.head,
-    id: 'ThemeColorMetaTag',
-    attr: { name: 'theme-color',content: '#45515c' },
-  },
-  {
-    parent: document.body,
-    tag: 'amotify-app',
-    id: launchID,
-    html: `
-    <div class="AMOTIFY_be AMOTIFY_be_sheet"></div>
-    <div class="AMOTIFY_be AMOTIFY_be_snackbar"></div>
-    <div class="AMOTIFY_be AMOTIFY_be_loader"></div>
-    <div class="AMOTIFY_be AMOTIFY_be_root"></div>
-    `
-  }
-]
-for ( let tag of tags ) {
-  if ( tag.id && $( '#' + tag.id )[ 0 ] ) continue
-  $.createElement( tag )
-}

package/src/templates/PlayGround/parts.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import {
-  Box
-} from '@atoms'
-import {
-  Column
-} from '@mols'
-import {
-  Buttons,
-  Input,
-  Inputs,
-  Table
-} from '@fn'
-
-import style from './style.module.scss'
-
-export const PlayGround: React.FC<{}> = () => {
-  return <>
-    <Box
-      padding={ 2 }
-      border
-      backgroundColor='cloud'
-    >
-      <Table.Comps.Table
-        border='2.normal'
-        borderLeft='2.normal'
-      >
-
-      </Table.Comps.Table>
-      AAAA
-    </Box>
-    <Column
-      gap={ 2 }
-    >
-      <Input.Text.Normal
-      />
-      <Input.Select
-        options={ [
-          { value: 1,label: 'AAA' },
-          { value: 2,label: 'BBB' },
-          { value: 3,label: 'CCC' },
-          {
-            value: {
-              test: 1,
-            },label: 'DDD'
-          },
-        ] }
-        onUpdateValidValue={ ( { value } ) => {
-          console.log( value )
-        } }
-      />
-
-      <Buttons.Button.Prime.R
-        submitOption={ {
-          formName: 'test',
-          callback: ( form ) => {
-            console.log( form )
-          }
-        } }
-      >
-        Submit
-      </Buttons.Button.Prime.R>
-      <Box>
-        Label1
-        <Inputs.TextInput
-          tone='normal'
-        // freeCSS={ {
-        //   minWidth: '50%'
-        // } }
-        // width={ '1/2' }
-        />
-      </Box>
-      <Box>
-        Label2
-        <Inputs.TextInput
-          tone='cloud'
-          width={ 1 }
-        />
-      </Box>
-      <Box>
-        Label3
-        <Inputs.TextInput
-          tone='bottomBorder'
-          unitWidth={ 12 }
-        />
-      </Box>
-      <Box>
-        Label4
-        <Inputs.TextInput
-          tone='plain'
-          unitWidth={ 6 }
-        />
-      </Box>
-    </Column>
-  </>
-}

package/src/templates/PlayGround/style.module.scss

@@ -1,38 +0,0 @@
-@use '@props' as *;
-.TestAnimation {
-  animation: .25s ease-in-out jiggly infinite;
-  cursor: grab;
-  user-select: none;
-  &:nth-child( 5n ) {
-    animation-delay: .2s;
-    animation-duration: .24s;
-  }
-  &:nth-child( 5n + 2 ) {
-    animation-delay: .22s;
-    animation-duration: .26s;
-  }
-  &:nth-child( 5n + 4 ) {
-    animation-delay: .24s;
-    animation-duration: .28s;
-  }
-  &:nth-child( 5n + 1 ) {
-    animation-delay: .26s;
-    animation-duration: .3s;
-  }
-  &:nth-child( 5n + 3 ) {
-    animation-delay: .28s;
-    animation-duration: .32s;
-  }
-}
-
-@keyframes jiggly {
-  0% {
-    transform: rotate(-.4deg);
-  }
-  50% {
-    transform: rotate(.4deg);
-  }
-  100% {
-    transform: rotate(-.4deg);
-  }
-}

package/webpack.config.js

@@ -1,146 +0,0 @@
-module.exports = ( () => {
-  let path = require( 'path' )
-  let MinCss = require( 'mini-css-extract-plugin' )
-  let RemoveWasteFiles = require( 'webpack-remove-empty-scripts' )
-  let webpack = require( 'webpack' )
-  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 project = {
-    name: 'amotify',
-    ver: 'v0.0.53',
-    author: 'mingoo LLC.',
-    details: 'https://mingoo.co.jp/'
-  }
-
-  let entry = {
-    'amotify': './src/launch.tsx'
-  }
-  console.log( entry )
-  return {
-    mode: 'development',
-    entry: entry,
-    output: {
-      filename: '[name].js',
-      path: __dirname + '/dist/',
-      devtoolModuleFilenameTemplate: 'src/[resource-path]'
-    },
-    optimization: {
-      minimize: true,
-      minimizer: [
-        new TerserPlugin( {
-          parallel: true,
-          extractComments: false,
-          terserOptions: {
-            compress: {
-              drop_console: true
-            },
-            output: {
-              comments: /^\*?!/
-            }
-          }
-        } )
-      ],
-      splitChunks: {
-        cacheGroups: {
-          vendor: {
-            test: /node_modules/,
-            filename: 'coreVender.js',
-            chunks: 'all',
-            enforce: true
-          }
-        }
-      }
-    },
-    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,
-      new webpack.BannerPlugin( {
-        banner: `
-        ${ project.name } JavaScript Library ${ project.ver }
-        ${ project.details }
-       
-        Copyright ${ project.author }
-        Released under the MIT license
-        ${ project.details }license
-
-        Last updated: ${ new Date().toLocaleDateString() }
-        `
-      } )
-    ],
-    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: {
-                allowTsInNodeModules: true,
-                // transpileOnly:true,
-                configFile: path.resolve( __dirname, 'tsconfig.json' )
-              }
-            }
-          ],
-        }
-      ]
-    },
-    resolve: {
-      modules: [ 'node_modules' ],
-      extensions: [ '.js', '.jsx', '.tsx', '.ts' ],
-      alias: {
-        '~': `${ __dirname }/src`,
-
-        '@props': path.resolve( __dirname, 'src/@styles/props' ),
-        '@brandVar': path.resolve( __dirname, 'src/@styles/brand' ),
-        '@styleSet': path.resolve( __dirname, 'src/@styles/styleSet' ),
-
-        '@global': path.resolve( __dirname, 'src/@global' ),
-        '@atoms': path.resolve( __dirname, 'src/@atoms' ),
-        '@mols': path.resolve( __dirname, 'src/@molecules' ),
-        '@orgs': path.resolve( __dirname, 'src/@organisms' ),
-        '@temps': path.resolve( __dirname, 'src/@templates' ),
-        '@fn': path.resolve( __dirname, 'src/@functions' ),
-      }
-    },
-  }
-} )()