@react5/ui 1.0.26 → 1.0.28

package/packages/lib/src/components/TextArea/TextArea.tsx

@@ -1,50 +1,50 @@
-import { ChangeEventHandler, FC, forwardRef, RefObject } from "react";
-import { formatError } from "../../utils";
-import "./TextArea.scss"
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-
-interface ITextAreaProps {
-  label?: string;
-  name?: string;
-  error?: string;
-  rows?: number;
-  validationError?: (name?: string) => string | undefined;
-  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-  onBlur?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-  value?: string;
-  autoFocus?: boolean;
-  className?: string;
-  readonly?: boolean;
-  placeholder?: string;
-  noLabel?: boolean;
-  align?: "left" | "center" | "right";
-}
-
-const b = bem("text-area");
-export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(({value,
-    onChange, noLabel = false, onBlur, name, rows = 3, className, autoFocus = false,
-    readonly = false, label, error, placeholder, align = "right" }: ITextAreaProps, ref) => {
-  
-  return (<div className={clsx(b(), className)}>
-    <div className={b("wrapper")}>
-      {!noLabel && <label
-        htmlFor={name} className={clsx(b("label"), b("label", align))}>{label}:</label>}
-      <textarea
-        rows={rows}
-        id={name}
-        name={name}
-        className={b("input")}
-        readOnly={readonly}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        ref={ref}
-        autoFocus={autoFocus}
-        autoComplete="on"
-        placeholder={placeholder}
-      />
-    </div>
-    {error && <div className={b("error-container")}>{formatError(error, label)}</div>}
-  </div>)
-});
+import { ChangeEventHandler, FC, forwardRef, RefObject } from "react";
+import { formatError } from "../../utils";
+import "./TextArea.scss"
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+
+interface ITextAreaProps {
+  label?: string;
+  name?: string;
+  error?: string;
+  rows?: number;
+  validationError?: (name?: string) => string | undefined;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  onBlur?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  value?: string;
+  autoFocus?: boolean;
+  className?: string;
+  readonly?: boolean;
+  placeholder?: string;
+  noLabel?: boolean;
+  align?: "left" | "center" | "right";
+}
+
+const b = bem("text-area");
+export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(({value,
+    onChange, noLabel = false, onBlur, name, rows = 3, className, autoFocus = false,
+    readonly = false, label, error, placeholder, align = "right" }: ITextAreaProps, ref) => {
+  
+  return (<div className={clsx(b(), className)}>
+    <div className={b("wrapper")}>
+      {!noLabel && <label
+        htmlFor={name} className={clsx(b("label"), b("label", align))}>{label}:</label>}
+      <textarea
+        rows={rows}
+        id={name}
+        name={name}
+        className={b("input")}
+        readOnly={readonly}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        ref={ref}
+        autoFocus={autoFocus}
+        autoComplete="on"
+        placeholder={placeholder}
+      />
+    </div>
+    {error && <div className={b("error-container")}>{formatError(error, label)}</div>}
+  </div>)
+});

package/packages/lib/src/components/TextArea/index.tsx

@@ -1 +1 @@
-export * from "./TextArea";
+export * from "./TextArea";

package/packages/lib/src/components/TextField/TextField.scss

@@ -1,57 +1,57 @@
-.r5ui-text-field {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  //flex: 1;
-  margin: 0.5em;
-  flex-wrap: wrap;
-  gap: 16px;
-
-  &__label {
-    flex: 40%;
-    padding: 3px;
-    color: $page_text_color;
-    align-self: center;
-    margin-right: 0.5em;
-    &--left {
-      text-align: left;
-    }
-    &--center {
-      text-align: center;
-    }
-    &--right {
-      text-align: right;
-    }
-  }
-  &__input-wrapper {
-    flex: 60%;
-    text-align: left;
-  }
-  &__input {
-    border: $border_size solid $primary_border_color;
-    border-radius: $border_radius;
-    color: $control_text_color;
-    background-color: $control_bg_color;
-    &--number {
-      width: 8em;
-    }
-    &--time {
-      width: 8em;
-    }
-    &--text {
-      width: 100%;
-    }
-  }
-
-  &__wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    width: 100%;
-  }
-  &__error-container {
-    text-align: right;
-    color: $error_validation_color;
-  }
+.r5ui-text-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  //flex: 1;
+  margin: 0.5em;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  &__label {
+    flex: 40%;
+    padding: 3px;
+    color: $page_text_color;
+    align-self: center;
+    margin-right: 0.5em;
+    &--left {
+      text-align: left;
+    }
+    &--center {
+      text-align: center;
+    }
+    &--right {
+      text-align: right;
+    }
+  }
+  &__input-wrapper {
+    flex: 60%;
+    text-align: left;
+  }
+  &__input {
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    color: $control_text_color;
+    background-color: $control_bg_color;
+    &--number {
+      width: 8em;
+    }
+    &--time {
+      width: 8em;
+    }
+    &--text {
+      width: 100%;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 100%;
+  }
+  &__error-container {
+    text-align: right;
+    color: $error_validation_color;
+  }
 }

package/packages/lib/src/components/TextField/TextField.stories.tsx

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TextField } from './TextField';
-
-const meta: Meta<typeof TextField> = {
-  title: 'Example/TextField',
-  component: TextField,
-} as Meta;
-export default meta;
-
-type Story = StoryObj<typeof TextField>;
-
-export const TextButton: Story = {
-  render: () => <TextField value="test" name="tf1" />,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from './TextField';
+
+const meta: Meta<typeof TextField> = {
+  title: 'Example/TextField',
+  component: TextField,
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const TextButton: Story = {
+  render: () => <TextField value="test" name="tf1" />,
+};

package/packages/lib/src/components/TextField/TextField.tsx

@@ -1,89 +1,89 @@
-import { ChangeEventHandler, forwardRef, KeyboardEvent, ReactNode } from "react";
-import { formatError } from "../../utils";
-import "./TextField.scss"
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-
-interface ITextFieldProps {
-  label?: string;
-  name?: string;
-  error?: string;
-  validationError?: (name?: string) => string | undefined;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: ChangeEventHandler<HTMLInputElement>;
-  onEnter?: () => void;
-  value?: string | number;
-  isPassword?: boolean;
-  autoFocus?: boolean;
-  type?: "text" | "number" | "time" | "date";
-  className?: string;
-  readonly?: boolean;
-  placeholder?: string;
-  noLabel?: boolean;
-  step?: number;
-  align?: "left" | "center" | "right";
-}
-
-interface ITextFieldWrapperProps {
-  id?: string;
-  name?: string;
-  className?: string;
-  label?: string;
-  children: ReactNode;
-  align?: "left" | "center" | "right";
-}
-
-const b = bem("text-field");
-
-export const TextFieldWrapper = ({id, name, className, label, align = "right", children}: ITextFieldWrapperProps) => {
-  return (
-    <div className={clsx(b(), className)}>
-      <div className={b('wrapper')}>
-        <label
-          htmlFor={id || name}
-          className={clsx(b("label"), b("label", align))}>{label}:</label>
-        <div className={b('input-wrapper')}>
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-} 
-
-export const TextField = forwardRef<HTMLInputElement, ITextFieldProps>(({isPassword, value,
-  onChange, onEnter, noLabel = false, onBlur, type = 'text', name, className, autoFocus = false,
-  readonly = false, label, error, placeholder, step, align = "right" }: ITextFieldProps, ref) => {
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && onEnter) {
-      e.preventDefault();
-      onEnter();
-    }
-  };
-
-  return (<div className={clsx(b(), className)}>
-    <div className={b("wrapper")}>
-      {!noLabel && <label
-        htmlFor={name} className={clsx(b("label"), b("label", align))}>{label}:</label>}
-      <div className={b("input-wrapper")}>
-        <input
-            id={name}
-            name={name}
-            className={clsx(b("input"), b("input", type))}
-            readOnly={readonly}
-            type={isPassword ? "password" : type}
-            value={value}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            autoFocus={autoFocus}
-            autoComplete="on"
-            onKeyDown={handleKeyDown}
-            placeholder={placeholder}
-            step={step}
-        />
-      </div>
-    </div>
-    {error && <div className={b("error-container")}>{formatError(error, label)}</div>}
-  </div>)
-});
+import { ChangeEventHandler, forwardRef, KeyboardEvent, ReactNode } from "react";
+import { formatError } from "../../utils";
+import "./TextField.scss"
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+
+interface ITextFieldProps {
+  label?: string;
+  name?: string;
+  error?: string;
+  validationError?: (name?: string) => string | undefined;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: ChangeEventHandler<HTMLInputElement>;
+  onEnter?: () => void;
+  value?: string | number;
+  isPassword?: boolean;
+  autoFocus?: boolean;
+  type?: "text" | "number" | "time" | "date";
+  className?: string;
+  readonly?: boolean;
+  placeholder?: string;
+  noLabel?: boolean;
+  step?: number;
+  align?: "left" | "center" | "right";
+}
+
+interface ITextFieldWrapperProps {
+  id?: string;
+  name?: string;
+  className?: string;
+  label?: string;
+  children: ReactNode;
+  align?: "left" | "center" | "right";
+}
+
+const b = bem("text-field");
+
+export const TextFieldWrapper = ({id, name, className, label, align = "right", children}: ITextFieldWrapperProps) => {
+  return (
+    <div className={clsx(b(), className)}>
+      <div className={b('wrapper')}>
+        <label
+          htmlFor={id || name}
+          className={clsx(b("label"), b("label", align))}>{label}:</label>
+        <div className={b('input-wrapper')}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+} 
+
+export const TextField = forwardRef<HTMLInputElement, ITextFieldProps>(({isPassword, value,
+  onChange, onEnter, noLabel = false, onBlur, type = 'text', name, className, autoFocus = false,
+  readonly = false, label, error, placeholder, step, align = "right" }: ITextFieldProps, ref) => {
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && onEnter) {
+      e.preventDefault();
+      onEnter();
+    }
+  };
+
+  return (<div className={clsx(b(), className)}>
+    <div className={b("wrapper")}>
+      {!noLabel && <label
+        htmlFor={name} className={clsx(b("label"), b("label", align))}>{label}:</label>}
+      <div className={b("input-wrapper")}>
+        <input
+            id={name}
+            name={name}
+            className={clsx(b("input"), b("input", type))}
+            readOnly={readonly}
+            type={isPassword ? "password" : type}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            ref={ref}
+            autoFocus={autoFocus}
+            autoComplete="on"
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            step={step}
+        />
+      </div>
+    </div>
+    {error && <div className={b("error-container")}>{formatError(error, label)}</div>}
+  </div>)
+});

package/packages/lib/src/components/TextField/index.tsx

@@ -1 +1 @@
-export * from "./TextField";
+export * from "./TextField";

package/packages/lib/src/components/TitleEdit/TitleEdit.scss

@@ -1,18 +1,18 @@
-.r5ui-title-edit {
-  display: flex;
-  &__container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex: 1;
-    gap: 0.5em;
-  }
-  &__edit-field {
-    border: $border_size solid $primary_border_color;
-    border-radius: $border_radius;
-    flex: 1;
-  }
-  &__edit-field--number {
-    width: 4em;
-  }
+.r5ui-title-edit {
+  display: flex;
+  &__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    gap: 0.5em;
+  }
+  &__edit-field {
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    flex: 1;
+  }
+  &__edit-field--number {
+    width: 4em;
+  }
 }

package/packages/lib/src/components/TitleEdit/TitleEdit.tsx

@@ -1,70 +1,70 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import './TitleEdit.scss'
-import { FaCheck, FaPen, FaXmark } from "react-icons/fa6";
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-import { Typography } from '../Typography';
-import { IconButton } from '../IconButton';
-import { useSetStartupFocus, useKeysEneterEsc } from '../../hooks'
-
-interface TitleEditProps<T extends string | number> {
-  className?: string;
-  name?: string;
-  variant?: 'h1' | 'h2' | 'h3' | 'p' | 'div';
-  value: T;
-  noButton?: boolean;
-  onChange: (newValue: T) => (void);
-  postfix?: string;
-  type?: "text" | "number";
-}
-
-const b = bem("title-edit");
-export const TitleEdit = <T extends string | number, >({className, variant = 'p', noButton = false, 
-  value, type = 'text', onChange, postfix, name}: TitleEditProps<T>) => {
-  
-  const [tempValue, setTempValue] = useState(value)
-  const [isEditing, setEditing] = useState<boolean>(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  useSetStartupFocus(inputRef, isEditing);
-  const handleOk = () => {
-    onChange(tempValue)
-    setEditing(false)
-  }
-  const handleCancel = () => {
-    setTempValue(value);
-    setEditing(false)
-  }
-  useKeysEneterEsc(inputRef, handleOk, handleCancel);
-  useEffect(() => {
-    setTempValue(value);
-  }, [value])
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setTempValue(e.target.value as T)
-  }
-  const beginEditing = () => {
-    setEditing(true)
-  }
-  return (
-    <div className={clsx(b(), className)}>
-      {isEditing && <div className={b("container")}>
-        <input
-          id={name}
-          name={name}
-          type={type}
-          className={clsx(b("edit-field"), b("edit-field", type))} 
-          value={tempValue}
-          onChange={handleChange}
-          ref={inputRef}
-          />
-        <IconButton onClick={handleOk}><FaCheck/></IconButton>
-        <IconButton onClick={handleCancel}><FaXmark/></IconButton>
-      </div>
-      }
-      {!isEditing && <div className={b("container")}>
-        <Typography variant={variant} onClick={beginEditing}>{value} {postfix}</Typography>
-        {!noButton && <IconButton onClick={beginEditing}><FaPen/></IconButton>}
-        </div>}
-    </div>
-  )
-}
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import './TitleEdit.scss'
+import { FaCheck, FaPen, FaXmark } from "react-icons/fa6";
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+import { Typography } from '../Typography';
+import { IconButton } from '../IconButton';
+import { useSetStartupFocus, useKeysEneterEsc } from '../../hooks'
+
+interface TitleEditProps<T extends string | number> {
+  className?: string;
+  name?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'p' | 'div';
+  value: T;
+  noButton?: boolean;
+  onChange: (newValue: T) => (void);
+  postfix?: string;
+  type?: "text" | "number";
+}
+
+const b = bem("title-edit");
+export const TitleEdit = <T extends string | number, >({className, variant = 'p', noButton = false, 
+  value, type = 'text', onChange, postfix, name}: TitleEditProps<T>) => {
+  
+  const [tempValue, setTempValue] = useState(value)
+  const [isEditing, setEditing] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useSetStartupFocus(inputRef, isEditing);
+  const handleOk = () => {
+    onChange(tempValue)
+    setEditing(false)
+  }
+  const handleCancel = () => {
+    setTempValue(value);
+    setEditing(false)
+  }
+  useKeysEneterEsc(inputRef, handleOk, handleCancel);
+  useEffect(() => {
+    setTempValue(value);
+  }, [value])
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setTempValue(e.target.value as T)
+  }
+  const beginEditing = () => {
+    setEditing(true)
+  }
+  return (
+    <div className={clsx(b(), className)}>
+      {isEditing && <div className={b("container")}>
+        <input
+          id={name}
+          name={name}
+          type={type}
+          className={clsx(b("edit-field"), b("edit-field", type))} 
+          value={tempValue}
+          onChange={handleChange}
+          ref={inputRef}
+          />
+        <IconButton onClick={handleOk}><FaCheck/></IconButton>
+        <IconButton onClick={handleCancel}><FaXmark/></IconButton>
+      </div>
+      }
+      {!isEditing && <div className={b("container")}>
+        <Typography variant={variant} onClick={beginEditing}>{value} {postfix}</Typography>
+        {!noButton && <IconButton onClick={beginEditing}><FaPen/></IconButton>}
+        </div>}
+    </div>
+  )
+}
 export default TitleEdit