UI Improvements

jest-setup.tsx

@@ -1,2 +1 @@
-// jest-setup.tsx
 import '@testing-library/jest-dom';

package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@rsbuild/core": "^0.7.10",
     "@rsbuild/plugin-react": "^0.7.10",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.4.1",

samples/utils/BarChartControls.tsx

@@ -55,164 +55,95 @@ const BarChartControls: React.FC<BarChartControlsProps> = ({
   };
 
   return (
-    <form className="grid grid-cols-2 gap-4 mb-8">
-      <div>
-        <label className="form-label">
-          Width:
-          <input
-            type="number"
-            value={width}
-            onChange={(e) => setWidth(parseInt(e.target.value, 10))}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Height:
-          <input
-            type="number"
-            value={height}
-            onChange={(e) => setHeight(parseInt(e.target.value, 10))}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Bar Category Gap:
+    <div className="bg-white p-6 shadow-lg rounded-lg mb-5 max-w-md">
+      <h2 className="text-xl font-semibold mb-6 text-gray-700">Chart Settings</h2>
+      <form className="space-y-6">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Width</label>
+            <input
+              type="number"
+              value={width}
+              onChange={(e) => setWidth(parseInt(e.target.value, 10))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Height</label>
+            <input
+              type="number"
+              value={height}
+              onChange={(e) => setHeight(parseInt(e.target.value, 10))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Bar Category Gap</label>
           <input
             type="text"
             value={barCategoryGap}
-            onChange={(e) => setBarCategoryGap(e.target.value)}  // Asume string
-            className="form-input ml-2 border rounded px-2 py-1"
+            onChange={(e) => setBarCategoryGap(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
           />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Bar Gap:
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Bar Gap</label>
           <input
             type="number"
             value={barGap}
-            onChange={(e) => setBarGap(parseInt(e.target.value, 10))}  // Asume number
-            className="form-input ml-2 border rounded px-2 py-1"
+            onChange={(e) => setBarGap(parseInt(e.target.value, 10))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
           />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Layout:
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Layout</label>
           <select
             value={layout}
             onChange={(e) => setLayout(e.target.value as 'horizontal' | 'vertical')}
-            className="form-input ml-2 border rounded px-2 py-1"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
           >
             <option value="horizontal">Horizontal</option>
             <option value="vertical">Vertical</option>
           </select>
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Top:
-          <input
-            type="number"
-            value={margin.top}
-            onChange={(e) => handleMarginChange(e, 'top')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Right:
-          <input
-            type="number"
-            value={margin.right}
-            onChange={(e) => handleMarginChange(e, 'right')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Bottom:
-          <input
-            type="number"
-            value={margin.bottom}
-            onChange={(e) => handleMarginChange(e, 'bottom')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Left:
-          <input
-            type="number"
-            value={margin.left}
-            onChange={(e) => handleMarginChange(e, 'left')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show X Axis:
-          <input
-            type="checkbox"
-            checked={showXAxis}
-            onChange={(e) => setShowXAxis(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Y Axis:
-          <input
-            type="checkbox"
-            checked={showYAxis}
-            onChange={(e) => setShowYAxis(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Cartesian Grid:
-          <input
-            type="checkbox"
-            checked={showCartesianGrid}
-            onChange={(e) => setShowCartesianGrid(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Tooltip:
-          <input
-            type="checkbox"
-            checked={showTooltip}
-            onChange={(e) => setShowTooltip(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Legend:
-          <input
-            type="checkbox"
-            checked={showLegend}
-            onChange={(e) => setShowLegend(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-    </form>
+        </div>
+        <div>
+          <h3 className="text-lg font-medium text-gray-700 mb-2">Margin</h3>
+          <div className="grid grid-cols-2 gap-4">
+            {['top', 'right', 'bottom', 'left'].map((side) => (
+              <div key={side}>
+                <label className="block text-sm font-medium text-gray-700 mb-1 capitalize">{side}</label>
+                <input
+                  type="number"
+                  value={margin[side as keyof typeof margin]}
+                  onChange={(e) => handleMarginChange(e, side)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="space-y-2">
+          {[
+            { label: 'Show X Axis', checked: showXAxis, onChange: setShowXAxis },
+            { label: 'Show Y Axis', checked: showYAxis, onChange: setShowYAxis },
+            { label: 'Show Cartesian Grid', checked: showCartesianGrid, onChange: setShowCartesianGrid },
+            { label: 'Show Tooltip', checked: showTooltip, onChange: setShowTooltip },
+            { label: 'Show Legend', checked: showLegend, onChange: setShowLegend },
+          ].map((item) => (
+            <label key={item.label} className="flex items-center space-x-2 text-gray-700 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
+              <input
+                type="checkbox"
+                checked={item.checked}
+                onChange={(e) => item.onChange(e.target.checked)}
+                className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
+              />
+              <span className="text-sm">{item.label}</span>
+            </label>
+          ))}
+        </div>
+      </form>
+    </div>
   );
 };
 

samples/utils/BarChartWrapper.tsx

@@ -21,49 +21,53 @@ const BarChartWrapper: React.FC<BarChartWrapperProps> = ({ data, children }) =>
   const [showLegend, setShowLegend] = useState(true);
 
   return (
-    <div>
-      <BarChartControls
-        width={width}
-        setWidth={setWidth}
-        height={height}
-        setHeight={setHeight}
-        barCategoryGap={barCategoryGap}
-        setBarCategoryGap={setBarCategoryGap}
-        barGap={barGap}
-        setBarGap={setBarGap}
-        layout={layout}
-        setLayout={setLayout}
-        margin={margin}
-        setMargin={setMargin}
-        showXAxis={showXAxis}
-        setShowXAxis={setShowXAxis}
-        showYAxis={showYAxis}
-        setShowYAxis={setShowYAxis}
-        showCartesianGrid={showCartesianGrid}
-        setShowCartesianGrid={setShowCartesianGrid}
-        showTooltip={showTooltip}
-        setShowTooltip={setShowTooltip}
-        showLegend={showLegend}
-        setShowLegend={setShowLegend}
-      />
-      <BarChart
-        data={data}
-        width={width}
-        height={height}
-        margin={margin}
-        barCategoryGap={barCategoryGap}
-        barGap={barGap}
-        layout={layout}
-      >
-        {showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
-        {showXAxis && <XAxis />}
-        {showYAxis && <YAxis />}
-        {showTooltip && <Tooltip />}
-        {showLegend && <Legend />}
-        {children}
-      </BarChart>
+    <div className="flex flex-col lg:flex-row gap-6 p-6">
+      <div className="lg:w-1/3">
+        <BarChartControls
+          width={width}
+          setWidth={setWidth}
+          height={height}
+          setHeight={setHeight}
+          barCategoryGap={barCategoryGap}
+          setBarCategoryGap={setBarCategoryGap}
+          barGap={barGap}
+          setBarGap={setBarGap}
+          layout={layout}
+          setLayout={setLayout}
+          margin={margin}
+          setMargin={setMargin}
+          showXAxis={showXAxis}
+          setShowXAxis={setShowXAxis}
+          showYAxis={showYAxis}
+          setShowYAxis={setShowYAxis}
+          showCartesianGrid={showCartesianGrid}
+          setShowCartesianGrid={setShowCartesianGrid}
+          showTooltip={showTooltip}
+          setShowTooltip={setShowTooltip}
+          showLegend={showLegend}
+          setShowLegend={setShowLegend}
+        />
+      </div>
+      <div className="lg:w-2/3">
+        <BarChart
+          data={data}
+          width={width}
+          height={height}
+          margin={margin}
+          barCategoryGap={barCategoryGap}
+          barGap={barGap}
+          layout={layout}
+        >
+          {showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
+          {showXAxis && <XAxis />}
+          {showYAxis && <YAxis />}
+          {showTooltip && <Tooltip />}
+          {showLegend && <Legend />}
+          {children}
+        </BarChart>
+      </div>
     </div>
   );
 };
 
-export default BarChartWrapper;
+export default BarChartWrapper;