@xaypay/tui 0.1.9 → 0.2.0

package/tui.config.js

@@ -1,11 +1,11 @@
 import React from 'react'
 
-const boxSizing = 'border-box'
-const fontStyle = 'normal'
-const fontFamily = 'Arial'
-const fontWeight = 500
+const boxSizing = 'border-box';
+const fontStyle = 'normal';
+const fontFamily = 'Arial';
+const fontWeight = 500;
 
-const transparent = 'transparent'
+const transparent = 'transparent';
 
 const presetColors = {
     info: '#F24C4C',
@@ -17,7 +17,7 @@ const presetColors = {
     warning: '#FECD29',
     secondary: '#D1D1D1',
     primary: '#051942',
-    primarySecond: '#00236A',
+    primarySecond: '#00236A'
 }
 
 const fontObject = {
@@ -42,7 +42,7 @@ export default {
         disabled: false,
         className: '',
         transition: 'background-color 240ms, color 240ms',
-
+        
         box: {
             sizing: boxSizing,
         },
@@ -55,29 +55,18 @@ export default {
             disabledBackground: 'rgba(238, 238, 238, 1)',
         },
 
-        font: { ...fontObject },
+        font: {...fontObject},
 
         text: {
             transform: 'none',
             colors: {
                 hover: '#001745',
-            },
-        },
-
-        title: {
-            width: '',
-            color: '',
-            radius: '',
-            padding: '5px',
-            colors: {
-                backgroud: '#ccc',
-            },
-            font: { ...fontObject },
+            }
         },
 
         icon: {
-            marginRight: '10px',
-        },
+            marginRight: '10px'
+        }
     },
     // default properties for <Input /> component
     INPUT: {
@@ -104,18 +93,18 @@ export default {
             background: 'white',
             backgroundDisable: presetColors.secondary,
         },
-
-        font: { ...fontObject },
-
+        
+        font: {...fontObject},
+        
         label: {
             color: presetColors.dark,
             display: 'block',
             lineHeight: '22px',
             marginBottom: '6px',
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
-
+        
         error: {
             left: '0px',
             color: presetColors.danger,
@@ -124,7 +113,7 @@ export default {
             marginTop: '10px',
             lineHeight: '19px',
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         tel: {
@@ -137,10 +126,10 @@ export default {
                 color: presetColors.secondary,
 
                 colors: {
-                    hover: presetColors.dark,
-                },
-            },
-        },
+                    hover: presetColors.dark
+                }
+            }
+        }
     },
     // default properties for <Tooltip /> component
     TOOLTIP: {
@@ -150,7 +139,7 @@ export default {
         radius: '3px',
         className: '',
         // icon: React.createElement(SvgChecked, { fill: 'red' }),
-
+        
         parent: {
             width: '46px',
             height: '46px',
@@ -158,14 +147,15 @@ export default {
 
             colors: {
                 background: transparent,
-            },
-        },
+            }
 
+        },
+        
         colors: {
             background: '#03a9f4',
         },
-
-        font: { ...fontObject },
+        
+        font: {...fontObject}
     },
     // default properties for <Typography /> component
     TYPOGRAPHY: {
@@ -277,7 +267,7 @@ export default {
             lineHeighth5: 'normal',
             lineHeighth6: 'normal',
             lineHeightspan: 'normal',
-        },
+        }
     },
     // default properties for <Select /> component
     SELECT: {
@@ -291,7 +281,7 @@ export default {
             shadow: `0 0 0 2px ${presetColors.secondary}`, // like border
             shadowHover: `0 0 0 2px ${presetColors.dark}`, // like border
         },
-
+        
         label: {
             color: presetColors.dark,
             display: 'block',
@@ -299,7 +289,7 @@ export default {
             marginBottom: '6px',
             textTransform: 'none',
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         selected: {
@@ -310,7 +300,8 @@ export default {
             minHeight: '46px',
             lineHeight: '22px',
             transition: 'border-color 240ms',
-
+            
+            
             box: {
                 sizing: boxSizing,
             },
@@ -321,7 +312,7 @@ export default {
                 backgroundDisable: presetColors.secondary,
             },
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         options: {
@@ -342,18 +333,18 @@ export default {
                 minHeight: '46px',
                 lineHeight: '25px',
                 marginBottom: '2px',
-
+                
                 box: {
                     sizing: boxSizing,
                 },
-
+    
                 colors: {
                     hover: presetColors.primarySecond,
                     backgroud: '#ffffff',
                     backgroudHover: 'unset',
                 },
 
-                font: { ...fontObject },
+                font: {...fontObject}
             },
         },
 
@@ -363,11 +354,11 @@ export default {
             zIndex: 10,
 
             box: {
-                shadow: `0 0 0 2px ${presetColors.danger}`,
+                shadow: `0 0 0 2px ${presetColors.danger}`
             },
 
-            font: { ...fontObject },
-        },
+            font: {...fontObject}
+        }
     },
     // default properties for <Textarea /> component
     TEXTAREA: {
@@ -403,21 +394,21 @@ export default {
             display: 'block',
             marginBottom: '10px',
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
-        font: { ...fontObject },
+        font: {...fontObject},
 
         error: {
             color: '#E40E00',
             marginTop: '10px',
 
             box: {
-                shadow: `0 0 0 2px ${presetColors.danger}`, // like border
+                shadow: `0 0 0 2px ${presetColors.danger}` // like border
             },
 
-            font: { ...fontObject },
-        },
+            font: {...fontObject}
+        }
     },
     // default properties for <NewAutocomplete /> component
     AUTOCOMPLETE: {
@@ -440,7 +431,7 @@ export default {
             shadowHover: `0 0 0 2px ${presetColors.dark}`, // like border
             shadowActive: `0 0 0 2px ${presetColors.primarySecond}`, // like border
         },
-        font: { ...fontObject },
+        font: {...fontObject},
 
         parent: {
             display: 'flex',
@@ -459,7 +450,7 @@ export default {
             marginBottom: '6px',
             textTransform: 'none',
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         contentBottom: {
@@ -497,28 +488,28 @@ export default {
                     backgroundHover: 'initial',
                 },
 
-                font: { ...fontObject },
+                font: {...fontObject}
             },
-
+            
             colors: {
                 background: presetColors.extraLight,
             },
-
+            
             box: {
                 shadow: '0 0 10px rgba(60, 57, 62, 0.08)',
                 sizing: boxSizing,
-            },
+            }
         },
 
         error: {
             color: presetColors.danger,
             marginTop: '10px',
 
-            font: { ...fontObject },
+            font: {...fontObject},
 
             box: {
-                shadow: `0 0 0 2px ${presetColors.danger}`, // like border
-            },
+                shadow: `0 0 0 2px ${presetColors.danger}` // like border
+            }
         },
 
         innerError: {
@@ -526,18 +517,18 @@ export default {
 
             colors: {
                 background: 'gray',
-            },
-        },
+            }
+        }
     },
     // default properties for <Captcha /> component
     CAPTCHA: {
         className: '',
-
+        
         label: {
             color: presetColors.dark,
 
-            font: { ...fontObject },
-        },
+            font: {...fontObject}
+        }
     },
     // default properties for <File /> component
     FILE: {
@@ -547,7 +538,7 @@ export default {
         maxWidth: '440px',
         className: '',
 
-        areaImage: {
+        areaImage: {  
             width: '27.8rem',
             height: 'auto',
         },
@@ -556,7 +547,7 @@ export default {
         upload: 'Բեռնել',
         uploadColor: presetColors.success,
         putFileHere: 'Տեղադրել ֆայլը այստեղ',
-
+        
         sizeText: 'Առավելագույնը',
         timeForRemoveError: 4000,
         extentionsRowMarginTop: '40px',
@@ -568,7 +559,7 @@ export default {
 
             colors: {
                 hover: presetColors.primarySecond,
-            },
+            }
         },
 
         colors: {
@@ -579,15 +570,15 @@ export default {
         label: {
             color: '#4A4A4D',
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
-        font: { ...fontObject },
+        font: {...fontObject},
 
         error: {
             color: presetColors.danger,
 
-            font: { ...fontObject },
+            font: {...fontObject},
 
             format: 'ֆայլի սխալ ֆորմատ',
             maxSize: 'Առավելագույն ծավալ',
@@ -604,7 +595,7 @@ export default {
                 loading: presetColors.primary,
             },
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         uploadBtn: {
@@ -618,7 +609,7 @@ export default {
                 backgroundHover: 'rgba(0, 35, 106, 1)',
             },
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         listItem: {
@@ -631,28 +622,29 @@ export default {
                 backgroundError: '#F6F8F8',
             },
 
-            font: { ...fontObject },
+            font: {...fontObject},
 
             error: {
                 color: '#E40E00',
-                font: { ...fontObject },
-            },
+                font: {...fontObject}
+            }
         },
 
         icon: {
-            // comment here for example,
-            // pdf: React.createElement(SvgChecked, { fill: 'green' }),
-            // png: React.createElement(SvgChecked, { fill: 'green' }),
-            // jpg: React.createElement(SvgChecked, { fill: 'green' }),
-            // jpeg: React.createElement(SvgChecked, { fill: 'green' }),
-            // heic: React.createElement(SvgChecked, { fill: 'green' }),
-            // wrong: React.createElement(SvgChecked, { fill: 'green' }),
-            // upload: React.createElement(SvgChecked, { fill: 'green' }),
-            // required: React.createElement(SvgChecked, { fill: 'green' }),
-            // removeFile: React.createElement(SvgChecked, { fill: 'green' }),
-            // deleteComponent: React.createElement(SvgChecked, { fill: 'green' }),
+            // comment here for example, 
+            
+            // pdf: React.createElement(SvgChecked, { fill: 'green' }),      
+            // png: React.createElement(SvgChecked, { fill: 'green' }),      
+            // jpg: React.createElement(SvgChecked, { fill: 'green' }),      
+            // jpeg: React.createElement(SvgChecked, { fill: 'green' }),      
+            // heic: React.createElement(SvgChecked, { fill: 'green' }),      
+            // wrong: React.createElement(SvgChecked, { fill: 'green' }),      
+            // upload: React.createElement(SvgChecked, { fill: 'green' }),      
+            // required: React.createElement(SvgChecked, { fill: 'green' }),      
+            // removeFile: React.createElement(SvgChecked, { fill: 'green' }),      
+            // deleteComponent: React.createElement(SvgChecked, { fill: 'green' }),      
             // deleteItem: React.createElement(SvgUnchecked, { fill: 'green' }),
-        },
+        }
     },
     // default properties for <Modal /> component
     MODAL: {
@@ -684,7 +676,7 @@ export default {
         header: {
             color: presetColors.primarySecond,
             height: '30px',
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         image: {
@@ -697,41 +689,41 @@ export default {
         },
 
         icon: {
-            // zoom: React.createElement(SvgChecked, { fill: 'green' }),
-            // prev: React.createElement(SvgChecked, { fill: 'green' }),
-            // next: React.createElement(SvgChecked, { fill: 'green' }),
-            // close: React.createElement(SvgChecked, { fill: 'green' }),
-            // closeSlide: React.createElement(SvgChecked, { fill: 'green' }),
+            // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
+            // prev: React.createElement(SvgChecked, { fill: 'green' }),      
+            // next: React.createElement(SvgChecked, { fill: 'green' }),      
+            // close: React.createElement(SvgChecked, { fill: 'green' }),      
+            // closeSlide: React.createElement(SvgChecked, { fill: 'green' }),      
         },
-        closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))', // for close div background color
+        closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
     },
     // default properties for <Checkbox /> component
     CHECKBOX: {
         className: '',
         marginBottom: '10px',
 
-        colors: {
+        colors: {    
             checked: presetColors.primarySecond,
             unChecked: presetColors.secondary,
         },
 
         label: {
             marginLeft: '10px',
-        },
+        }
 
-        // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),
+        // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),      
         // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
     },
     // default properties for <Table /> component
     TABLE: {
         className: '',
         textAlign: 'center',
-
+        
         column: {
             maxWidth: '',
             minWidth: '',
         },
-
+        
         head: {
             color: presetColors.extraLight,
             radius: '14px',
@@ -741,7 +733,7 @@ export default {
                 background: presetColors.primarySecond,
             },
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
 
         body: {
@@ -766,16 +758,16 @@ export default {
                 },
 
                 border: '1px solid',
-                borderColor: presetColors.light,
+                borderColor: presetColors.light
             },
 
-            font: { ...fontObject },
+            font: {...fontObject}
         },
-
+        
         openList: {
             color: '#A3A5A9',
-            font: { ...fontObject },
-        },
+            font: {...fontObject}
+        } 
     },
     // default properties for <Pagination /> component
     PAGINATION: {
@@ -787,10 +779,10 @@ export default {
         icon: {
             // info: React.createElement(SvgChecked, { just: 'must' }),
             // warn: React.createElement(SvgUnchecked, { just: 'must' }),
-            // close: React.createElement(SvgChecked, { fill: 'green' }),
-            // error: React.createElement(SvgChecked, { fill: 'green' }),
-            // success: React.createElement(SvgChecked, { fill: 'green' }),
-        },
+            // close: React.createElement(SvgChecked, { fill: 'green' }),      
+            // error: React.createElement(SvgChecked, { fill: 'green' }),      
+            // success: React.createElement(SvgChecked, { fill: 'green' }),      
+        }
     },
     // default properties for <Stepper /> component
     STEPPER: {
@@ -818,7 +810,7 @@ export default {
             color: '#3C3D46',
             lineHeight: '21px',
 
-            font: { ...fontObject },
-        },
+            font: {...fontObject}
+        }
     },
 }

package/vite.config.mjs

@@ -0,0 +1,82 @@
+import fs from 'fs'
+import fsPromises from 'fs/promises'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+
+const folders = fs.readdirSync('./src', { withFileTypes: true })
+const fileNames = folders.filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name)
+
+const filePaths = fileNames.reduce(
+    (acc, cur) => ({
+        // @ts-ignore
+        ...acc,
+        [cur]: `/${cur === 'src' ? cur : 'src/' + cur}`,
+    }),
+    ''
+)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react(),svgr()],
+    resolve: {
+        // @ts-ignore
+        alias: { ...filePaths },
+    },
+    // TODO: remove if unnecessary
+    // build: {
+    //     // Output directory for the production build.
+    //     outDir: 'dist',
+    //     // Directory relative to outDir where built files will be served.
+    //     assetsDir: '',
+    //     // Inline the index.html's assets. If false, the assets folder will be created.
+    //     assetsInlineLimit: 4096,
+    //     // Whether to generate sourcemaps for production builds.
+    //     sourcemap: false,
+    //     // Minify the production build using terser.
+    //     minify: false, // 'terser' or 'esbuild' or false
+    //     // Specify additional rollup plugins.
+    //     rollupOptions: {
+    //         // Externalize certain dependencies, preventing them from being bundled.
+    //         external: [],
+    //         input: 'src/index.js',
+    //         fileName: (format) => {
+
+    //         }
+    //     //     output: {
+    //     //         entryFileNames: `[name].js`,
+    //     //         chunkFileNames: `[name].js`,
+    //     //         assetFileNames: `[name].[ext]`,
+    //     //    }
+    //     },
+    //     // lib: {
+    //     //     entry: './src/index.js',
+    //     //     name: 'TUI', // Adjust as needed for library name
+    //     //     fileName: (format) => {
+    //     //         return format === 'cjs' ? `index.js` : `index.${format}.js`
+    //     //     },
+    //     //     formats: ['cjs', 'es'],
+    //     // }
+    // },
+    // external: ['prop-types', 'classnames'],
+    esbuild: {
+        loader: 'jsx',
+        include: /src\/.*\.jsx?$/,
+        exclude: [],
+    },
+    optimizeDeps: {
+        esbuildOptions: {
+            plugins: [
+                {
+                    name: 'load-js-files-as-jsx',
+                    setup(build) {
+                        build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
+                            loader: 'jsx',
+                            contents: await fsPromises.readFile(args.path, 'utf8'),
+                        }))
+                    },
+                },
+            ],
+        },
+    },
+})