@qwickapps/react-framework 1.3.0

package/src/stories/form/FormComponents.stories.tsx

@@ -0,0 +1,588 @@
+/**
+ * Form Components Stories - Testing new base props pattern
+ */
+
+import { Box, Paper, Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../../components/buttons/Button';
+import { TextField } from '../../components/input/TextField';
+import { GridCell } from '../../components/layout/GridCell';
+import GridLayout from '../../components/layout/GridLayout';
+
+const meta: Meta = {
+  title: 'Form/Enhanced Components',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `Enhanced form components with base props support and grid integration.
+
+**Key Features:**
+- T-shirt sizing for dimensions and spacing (tiny, small, medium, large, x-large)
+- Seamless grid behavior when used in GridLayout
+- Background and styling props with theme integration
+- Responsive breakpoint support (xs, sm, md, lg, xl)
+- Consistent prop resolution and inheritance
+
+**Perfect For:**
+- Building responsive forms with minimal code
+- Creating consistent layouts across your application
+- Rapid prototyping with standardized sizing
+- Complex form layouts with grid positioning`,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const BasicTextField: StoryObj = {
+  render: () => (
+    <Box>
+      <h3>TextField with T-shirt Sizing</h3>
+      <TextField
+        label="Small Width"
+        width="small"
+        margin="medium"
+        padding="small"
+      />
+      <br />
+      <TextField
+        label="Large Width"
+        width="large"
+        margin="medium"
+        padding="large"
+        background="primary.light"
+      />
+    </Box>
+  ),
+};
+
+export const BasicButton: StoryObj = {
+  render: () => (
+    <Box>
+      <h3>Button with T-shirt Sizing</h3>
+      <Button
+        variant="contained"
+        width="small"
+        margin="medium"
+      >
+        Small Width
+      </Button>
+      <br />
+      <Button
+        variant="contained"
+        width="large"
+        margin="medium"
+        padding="large"
+      >
+        Large Width
+      </Button>
+    </Box>
+  ),
+};
+
+export const InColumnLayout: StoryObj = {
+  render: () => (
+    <Box>
+      <h3>Components in GridLayout</h3>
+      <GridLayout spacing="medium">
+        <TextField
+          label="Half Width"
+          span={6}
+          fullWidth
+        />
+        <TextField
+          label="Half Width"
+          span={6}
+          fullWidth
+        />
+        <TextField
+          label="Full Width"
+          span={12}
+          fullWidth
+        />
+        <Button
+          variant="contained"
+          span={4}
+        >
+          One Third
+        </Button>
+        <Button
+          variant="outlined"
+          span={4}
+        >
+          One Third
+        </Button>
+        <Button
+          variant="text"
+          span={4}
+        >
+          One Third
+        </Button>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+export const ResponsiveGrid: StoryObj = {
+  render: () => (
+    <Box>
+      <h3>Responsive Grid Behavior</h3>
+      <GridLayout spacing="medium">
+        <TextField
+          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
+          xs={12}
+          sm={6}
+          md={3}
+          fullWidth
+        />
+        <TextField
+          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
+          xs={12}
+          sm={6}
+          md={3}
+          fullWidth
+        />
+        <TextField
+          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
+          xs={12}
+          sm={6}
+          md={3}
+          fullWidth
+        />
+        <TextField
+          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
+          xs={12}
+          sm={6}
+          md={3}
+          fullWidth
+        />
+      </GridLayout>
+    </Box>
+  ),
+};
+
+export const WithStyling: StoryObj = {
+  render: () => (
+    <Box>
+      <h3>Advanced Styling</h3>
+      <GridLayout spacing="large">
+        <TextField
+          label="With Background"
+          span={6}
+          fullWidth
+          background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
+          padding="medium"
+          sx={{ '& .MuiInputBase-root': { color: 'white' } }}
+        />
+        <TextField
+          label="With Custom Height"
+          span={6}
+          fullWidth
+          height={80}
+          padding="medium"
+        />
+        <Button
+          variant="contained"
+          span={12}
+          height="small"
+          padding="large"
+          background="linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)"
+        >
+          Gradient Button with Height
+        </Button>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+export const LoginFormExample: StoryObj = {
+  render: () => (
+    <Box sx={{ maxWidth: 400, mx: 'auto', p: 3 }}>
+      <h3>Login Form with New Components</h3>
+      <GridLayout spacing="medium">
+        <TextField
+          label="Email"
+          type="email"
+          span={12}
+          fullWidth
+          required
+        />
+        <TextField
+          label="Password"
+          type="password"
+          span={12}
+          fullWidth
+          required
+        />
+        <Button
+          variant="contained"
+          span={12}
+          size="large"
+          padding="medium"
+        >
+          Sign In
+        </Button>
+        <Button
+          variant="text"
+          span={6}
+          size="small"
+        >
+          Forgot Password?
+        </Button>
+        <Button
+          variant="text"
+          span={6}
+          size="small"
+        >
+          Sign Up
+        </Button>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+// === T-SHIRT SIZING TESTS ===
+
+export const TSizingDimensions: StoryObj = {
+  name: 'T-Shirt Sizing - Dimensions',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Width Sizing</Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
+        <TextField label="Tiny Width" width="tiny" />
+        <TextField label="Small Width" width="small" />
+        <TextField label="Medium Width" width="medium" />
+        <TextField label="Large Width" width="large" />
+        <TextField label="X-Large Width" width="x-large" />
+        <TextField label="Auto Width" width="auto" />
+        <TextField label="Custom 300px" width="300px" />
+        <TextField label="Custom 50%" width="50%" />
+      </Box>
+
+      <Typography variant="h6" gutterBottom>Height Sizing (Buttons)</Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+        <Button height="tiny">Tiny</Button>
+        <Button height="small">Small</Button>
+        <Button height="medium">Medium</Button>
+        <Button height="large">Large</Button>
+        <Button height="x-large">X-Large</Button>
+        <Button height="60px">60px</Button>
+      </Box>
+    </Box>
+  ),
+};
+
+export const TSizingSpacing: StoryObj = {
+  name: 'T-Shirt Sizing - Spacing',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Padding Variations</Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 4 }}>
+        <TextField label="No Padding" padding="none" background="#f0f0f0" />
+        <TextField label="Tiny Padding" padding="tiny" background="#f0f0f0" />
+        <TextField label="Small Padding" padding="small" background="#f0f0f0" />
+        <TextField label="Medium Padding" padding="medium" background="#f0f0f0" />
+        <TextField label="Large Padding" padding="large" background="#f0f0f0" />
+        <TextField label="X-Large Padding" padding="x-large" background="#f0f0f0" />
+        <TextField label="Custom 20px" padding="20px" background="#f0f0f0" />
+      </Box>
+
+      <Typography variant="h6" gutterBottom>Margin Variations</Typography>
+      <Box sx={{ border: '1px dashed #ccc', p: 1 }}>
+        <TextField label="No Margin" margin="none" background="#e3f2fd" />
+        <TextField label="Tiny Margin" margin="tiny" background="#e8f5e8" />
+        <TextField label="Small Margin" margin="small" background="#fff3e0" />
+        <TextField label="Medium Margin" margin="medium" background="#fce4ec" />
+        <TextField label="Large Margin" margin="large" background="#f3e5f5" />
+        <TextField label="X-Large Margin" margin="x-large" background="#e0f2f1" />
+      </Box>
+    </Box>
+  ),
+};
+
+// === GRID BEHAVIOR TESTS ===
+
+export const GridSpanTests: StoryObj = {
+  name: 'Grid Behavior - Span',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Span Property (Equal Distribution)</Typography>
+      <GridLayout spacing="small">
+        <TextField label="Span 12 (Full)" span={12} fullWidth background="#ffebee" />
+        <TextField label="Span 6" span={6} fullWidth background="#e8f5e8" />
+        <TextField label="Span 6" span={6} fullWidth background="#e8f5e8" />
+        <TextField label="Span 4" span={4} fullWidth background="#e3f2fd" />
+        <TextField label="Span 4" span={4} fullWidth background="#e3f2fd" />
+        <TextField label="Span 4" span={4} fullWidth background="#e3f2fd" />
+        <Button span={3} variant="outlined">Span 3</Button>
+        <Button span={3} variant="outlined">Span 3</Button>
+        <Button span={3} variant="outlined">Span 3</Button>
+        <Button span={3} variant="outlined">Span 3</Button>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+export const GridResponsiveTests: StoryObj = {
+  name: 'Grid Behavior - Responsive',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Responsive Breakpoints</Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+        Resize browser to see responsive behavior: xs=mobile, sm=tablet, md=desktop
+      </Typography>
+      <GridLayout spacing="medium">
+        <TextField
+          label="xs:12, sm:6, md:4"
+          xs={12} sm={6} md={4}
+          fullWidth
+          background="#ffebee"
+        />
+        <TextField
+          label="xs:12, sm:6, md:4"
+          xs={12} sm={6} md={4}
+          fullWidth
+          background="#e8f5e8"
+        />
+        <TextField
+          label="xs:12, sm:6, md:4"
+          xs={12} sm={6} md={4}
+          fullWidth
+          background="#e3f2fd"
+        />
+        <Button
+          xs={12} sm={12} md={6}
+          variant="contained"
+          fullWidth
+        >
+          xs:12, sm:12, md:6
+        </Button>
+        <Button
+          xs={12} sm={12} md={6}
+          variant="outlined"
+          fullWidth
+        >
+          xs:12, sm:12, md:6
+        </Button>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+// === BACKGROUND TESTS ===
+
+export const BackgroundTests: StoryObj = {
+  name: 'Background Variations',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Background Colors & Gradients</Typography>
+      <GridLayout spacing="medium">
+        <TextField
+          label="Primary Background"
+          span={6}
+          fullWidth
+          background="primary.light"
+          padding="medium"
+        />
+        <TextField
+          label="Secondary Background"
+          span={6}
+          fullWidth
+          background="secondary.light"
+          padding="medium"
+        />
+        <TextField
+          label="Custom Color"
+          span={4}
+          fullWidth
+          background="#4caf50"
+          padding="medium"
+        />
+        <TextField
+          label="RGB Color"
+          span={4}
+          fullWidth
+          background="rgb(255, 152, 0)"
+          padding="medium"
+        />
+        <TextField
+          label="Hex Color"
+          span={4}
+          fullWidth
+          background="#9c27b0"
+          padding="medium"
+        />
+        <TextField
+          label="Linear Gradient"
+          span={12}
+          fullWidth
+          background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
+          padding="large"
+          sx={{ '& .MuiInputBase-root': { color: 'white' } }}
+        />
+        <Button
+          span={6}
+          variant="contained"
+          background="linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)"
+          padding="medium"
+        >
+          Gradient Button
+        </Button>
+        <Button
+          span={6}
+          variant="outlined"
+          background="radial-gradient(circle, #ff6b6b, #ee5a24)"
+          padding="medium"
+        >
+          Radial Gradient
+        </Button>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+// === COLUMN LAYOUT TESTS ===
+
+export const ColumnLayoutTests: StoryObj = {
+  name: 'GridLayout Features',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Auto GridCell Distribution</Typography>
+      <Box sx={{ mb: 4 }}>
+        <Typography variant="subtitle2" gutterBottom>columns=2</Typography>
+        <GridLayout columns={2} spacing="small">
+          <TextField label="Auto GridCell 1" fullWidth />
+          <TextField label="Auto GridCell 2" fullWidth />
+          <Button variant="outlined" fullWidth>Auto Button 1</Button>
+          <Button variant="contained" fullWidth>Auto Button 2</Button>
+        </GridLayout>
+      </Box>
+
+      <Box sx={{ mb: 4 }}>
+        <Typography variant="subtitle2" gutterBottom>columns=3</Typography>
+        <GridLayout columns={3} spacing="medium">
+          <TextField label="Third 1" fullWidth />
+          <TextField label="Third 2" fullWidth />
+          <TextField label="Third 3" fullWidth />
+          <Button variant="outlined">Button 1</Button>
+          <Button variant="contained">Button 2</Button>
+          <Button variant="text">Button 3</Button>
+        </GridLayout>
+      </Box>
+
+      <Typography variant="h6" gutterBottom>Equal Height Columns</Typography>
+      <GridLayout columns={3} spacing="medium" equalHeight>
+        <Paper sx={{ p: 2, background: '#ffebee' }}>
+          <Typography>Short Content</Typography>
+        </Paper>
+        <Paper sx={{ p: 2, background: '#e8f5e8' }}>
+          <Typography>Medium length content that spans multiple lines to show height equalization working properly.</Typography>
+        </Paper>
+        <Paper sx={{ p: 2, background: '#e3f2fd' }}>
+          <Typography>Very long content that demonstrates the equal height feature by having much more text than the other columns, forcing all columns to match this height.</Typography>
+        </Paper>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+// === MIXED COMPONENT TESTS ===
+
+export const MixedComponents: StoryObj = {
+  name: 'Mixed Component Integration',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>QwickApp + Regular Components</Typography>
+      <GridLayout spacing="medium">
+        <TextField
+          label="QwickApp TextField"
+          span={6}
+          fullWidth
+          background="#f5f5f5"
+          padding="medium"
+        />
+        <GridCell span={6} background="#e1f5fe" padding="medium">
+          <Typography variant="body2">Regular GridCell with base props</Typography>
+          <Box sx={{ mt: 1 }}>
+            <TextField label="Nested TextField" size="small" fullWidth />
+          </Box>
+        </GridCell>
+        <Button
+          span={4}
+          variant="contained"
+          color="primary"
+          padding="small"
+        >
+          QwickApp Button
+        </Button>
+        <GridCell span={4} padding="medium">
+          <Button variant="outlined" fullWidth>Regular MUI Button</Button>
+        </GridCell>
+        <GridCell span={4} background="linear-gradient(45deg, #673ab7, #9c27b0)" padding="medium">
+          <Typography sx={{ color: 'white', textAlign: 'center' }}>
+            Custom Content
+          </Typography>
+        </GridCell>
+      </GridLayout>
+    </Box>
+  ),
+};
+
+// === ERROR & EDGE CASES ===
+
+export const EdgeCases: StoryObj = {
+  name: 'Edge Cases & Error Handling',
+  render: () => (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>Invalid Values (Check Console)</Typography>
+      <Box sx={{ mb: 4 }}>
+        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+          These should show warnings in console but still render:
+        </Typography>
+        <GridLayout spacing="medium">
+          <TextField
+            label="Invalid width"
+            width="invalid-value"
+            span={6}
+            fullWidth
+            background="#ffe0e0"
+          />
+          <TextField
+            label="Invalid spacing"
+            padding="not-a-size"
+            span={6}
+            fullWidth
+            background="#ffe0e0"
+          />
+        </GridLayout>
+      </Box>
+
+      <Typography variant="h6" gutterBottom>Extreme Values</Typography>
+      <GridLayout spacing="x-large">
+        <TextField
+          label="Zero dimensions"
+          width={0}
+          height={0}
+          span={4}
+          background="#f0f0f0"
+        />
+        <TextField
+          label="Large padding"
+          padding="50px"
+          span={4}
+          background="#f0f0f0"
+        />
+        <Button
+          span={4}
+          width="1000px"
+          height="100px"
+          variant="outlined"
+        >
+          Oversized Button
+        </Button>
+      </GridLayout>
+    </Box>
+  ),
+};