@wecodesolutions/shared-react-components-ts 0.3.0 → 0.4.0

package/dist/components/buttons/button/Button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ButtonProps {
+    label: string;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/components/formContainer/FormContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FormContainerProps {
+    children: React.ReactNode;
+    title: string;
+}
+export declare const FormContainer: React.FC<FormContainerProps>;
+export {};

package/dist/components/inputField/InputField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface InputFieldProps {
+    label: string;
+    type: string;
+    name: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    error?: string;
+}
+export declare const InputField: React.FC<InputFieldProps>;
+export {};

package/dist/components/validationMessage/ValidationMessage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ValidationMessageProps {
+    message: string;
+    type: 'error' | 'success' | 'info';
+}
+export declare const ValidationMessage: React.FC<ValidationMessageProps>;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "name": "@wecodesolutions/shared-react-components-ts",
   "publishConfig": {
     "access": "public"

package/src/components/buttons/button/Button.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ButtonProps {
+    label: string;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    className?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    label,
+    onClick,
+    type = 'button',
+    disabled = false,
+    className = '',
+}) => (
+    <button type={type} onClick={onClick} disabled={disabled} className={className}>
+        {label}
+    </button>
+);

package/src/components/formContainer/FormContainer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface FormContainerProps {
+    children: React.ReactNode;
+    title: string;
+}
+
+export const FormContainer: React.FC<FormContainerProps> = ({ children, title }) => (
+    <div className="form-container">
+        <h2>{title}</h2>
+        {children}
+    </div>
+);

package/src/components/inputField/InputField.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ValidationMessage } from '../validationMessage/ValidationMessage';
+
+interface InputFieldProps {
+    label: string;
+    type: string;
+    name: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    error?: string;
+}
+
+export const InputField: React.FC<InputFieldProps> = ({
+    label,
+    type,
+    name,
+    value,
+    onChange,
+    placeholder,
+    error,
+}) => (
+    <div className="input-field">
+        <label htmlFor={name}>{label}</label>
+        <input
+            id={name}
+            type={type}
+            name={name}
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+        />
+        {error && <ValidationMessage message={error} type="error" />}
+    </div>
+);

package/src/components/validationMessage/ValidationMessage.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface ValidationMessageProps {
+    message: string;
+    type: 'error' | 'success' | 'info';
+}
+
+export const ValidationMessage: React.FC<ValidationMessageProps> = ({ message, type }) => (
+    <span className={`validation-message ${type}`}>{message}</span>
+);