@aegov/design-system-react
Version:
A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.
227 lines (217 loc) • 6.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithValidation = exports.WithHelperText = exports.WithError = exports.Variants = exports.Sizes = exports.RowHeights = exports.Required = exports.Disabled = exports.Basic = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Textarea = _interopRequireDefault(require("./Textarea"));
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var _default = exports.default = {
title: 'Components/Textarea',
component: _Textarea.default,
parameters: {
layout: 'centered'
},
argTypes: {
size: {
control: 'select',
options: ['sm', 'base', 'lg']
},
variant: {
control: 'select',
options: ['primary', 'secondary']
},
disabled: {
control: 'boolean'
},
required: {
control: 'boolean'
},
rows: {
control: 'number'
}
}
}; // Basic Textarea
const Basic = exports.Basic = {
args: {
label: 'Description',
placeholder: 'Enter your description',
id: 'description',
rows: 4
}
};
// Textarea with Helper Text
const WithHelperText = exports.WithHelperText = {
args: {
label: 'Comments',
placeholder: 'Enter your comments',
helperText: 'Please provide detailed feedback to help us improve.',
id: 'comments',
rows: 4
}
};
// Textarea with Error
const WithError = exports.WithError = {
args: {
label: 'Description',
placeholder: 'Enter your description',
error: 'Description is required and must be at least 10 characters',
id: 'description-error',
rows: 4
}
};
// Textarea Sizes
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Textarea.default, {
size: "sm",
label: "Small Textarea",
placeholder: "Small size textarea",
id: "small",
rows: 4
}), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
size: "base",
label: "Base Textarea",
placeholder: "Base size textarea",
id: "base",
rows: 4
}), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
size: "lg",
label: "Large Textarea",
placeholder: "Large size textarea",
id: "large",
rows: 4
}));
// Textarea Variants
exports.Sizes = Sizes;
const Variants = () => /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Textarea.default, {
variant: "primary",
label: "Primary Textarea",
placeholder: "Primary variant",
id: "primary",
rows: 4
}), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
variant: "secondary",
label: "Secondary Textarea",
placeholder: "Secondary variant",
id: "secondary",
rows: 4
}));
// Required Textarea
exports.Variants = Variants;
const Required = exports.Required = {
args: {
label: 'Feedback',
placeholder: 'Please provide your feedback',
required: true,
id: 'required-feedback',
rows: 4
}
};
// Disabled Textarea
const Disabled = exports.Disabled = {
args: {
label: 'Disabled Textarea',
placeholder: 'This textarea is disabled',
disabled: true,
id: 'disabled',
rows: 4
}
};
// Different Row Heights
const RowHeights = () => /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Textarea.default, {
label: "Short Textarea (2 rows)",
placeholder: "Short textarea",
id: "short",
rows: 2
}), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
label: "Medium Textarea (4 rows)",
placeholder: "Medium textarea",
id: "medium",
rows: 4
}), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
label: "Tall Textarea (8 rows)",
placeholder: "Tall textarea",
id: "tall",
rows: 8
}));
// With Validation
exports.RowHeights = RowHeights;
const WithValidation = () => {
const [value, setValue] = (0, _react.useState)('');
const [error, setError] = (0, _react.useState)('');
const handleChange = e => {
const newValue = e.target.value;
setValue(newValue);
// Clear error when user starts typing
if (error) setError('');
};
const handleBlur = () => {
const validation = validateTextarea(value, {
required: true,
minLength: 10
});
if (!validation.valid) {
setError(validation.error);
} else {
setError('');
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "w-96"
}, /*#__PURE__*/_react.default.createElement(_Textarea.default, {
label: "Validated Textarea",
placeholder: "Enter at least 10 characters",
id: "validated",
rows: 4,
value: value,
onChange: handleChange,
onBlur: handleBlur,
error: error,
required: true
}), /*#__PURE__*/_react.default.createElement("div", {
className: "mt-4"
}, /*#__PURE__*/_react.default.createElement("p", {
className: "text-sm text-gray-500"
}, "This textarea validates that:"), /*#__PURE__*/_react.default.createElement("ul", {
className: "list-disc list-inside text-sm text-gray-500 ml-2"
}, /*#__PURE__*/_react.default.createElement("li", null, "The field is required"), /*#__PURE__*/_react.default.createElement("li", null, "The content is at least 10 characters long"))));
};
exports.WithValidation = WithValidation;
const validateTextarea = (value, options = {}) => {
const {
minLength,
maxLength,
required
} = options;
let schema = _zod.z.string();
if (required) {
schema = schema.min(1, 'This field is required');
} else {
schema = schema.optional();
}
if (minLength) {
schema = schema.min(minLength, `Must be at least ${minLength} characters`);
}
if (maxLength) {
schema = schema.max(maxLength, `Must be at most ${maxLength} characters`);
}
try {
schema.parse(value);
return {
valid: true
};
} catch (error) {
return {
valid: false,
error: error.errors[0]?.message || 'Invalid input'
};
}
};