Feat/imprv UI

.storybook/main.js

@@ -1,12 +1,8 @@
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 const path = require('path');
 
 module.exports = {
-  stories: [
-    '../src/**/*.stories.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
-    '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -20,6 +16,9 @@ module.exports = {
     autodocs: true,
   },
   webpackFinal: async (config) => {
+    // config.resolve.plugins = config.resolve.plugins || [];
+    // config.resolve.plugins.push(new TsconfigPathsPlugin({}));
+
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
       exclude: /node_modules/,

create_components.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# List of component names
+components=(
+    "InputBase" "InputLabel" "InputControl" "InputIcon" "InputHelperText"
+    "InputErrorMessage" "InputGroup" "TextAreaControl" "NumberInput" "DatePicker"
+    "TimePicker" "FileUpload" "ColorPicker" "SelectBase" "MultiSelect" "Combobox"
+    "AutoComplete" "CheckboxGroup" "RadioGroup" "ToggleSwitch" "ScrollArea"
+    "Badge" "Pill" "Tooltip" "Popover" "ValidationSummary" "ConfirmDialog"
+    "FormActions" "ProgressIndicator" "LoadingSpinner" "ValidationIcon"
+    "FormGroup" "FormRow" "FormDivider" "FormMessage" "FormSection"
+    "FormGrid" "FormStepper" "FormAccordion" "FormTabs" "FieldArray"
+    "DynamicField"
+)
+
+# Loop through each component and create folder and files
+for component in "${components[@]}"
+do
+    # Create component directory
+    mkdir -p "$component"
+    echo "Created directory $component"
+
+    # Create index.ts
+    touch "$component/index.ts"
+    echo "Created $component/index.ts"
+
+    # Create <component_name>.tsx
+    touch "$component/${component}.tsx"
+    echo "Created $component/${component}.tsx"
+
+    # Create TODO.md
+    touch "$component/TODO.md"
+    echo "Created $component/TODO.md"
+
+    # Create styled.ts
+    touch "$component/styled.ts"
+    echo "Created $component/styled.ts"
+
+    # Create types.ts
+    touch "$component/types.ts"
+    echo "Created $component/types.ts"
+done

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.14",
+  "version": "0.0.37",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -139,6 +139,7 @@
     "storybook": "^8.4.7",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
@@ -149,9 +150,8 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
+    "@matthew.ngo/react-form-kit": "^0.0.14",
     "lodash": "^4.17.21",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "^7.49.3",
     "styled-components": "^6.1.13",
     "yup": "^1.6.1"