@react5/ui 1.0.10 → 1.0.12

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

@@ -1,86 +1,86 @@
-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;
-}
-
-interface ITextFieldWrapperProps {
-  id?: string;
-  name?: string;
-  className?: string;
-  label?: string;
-  children: ReactNode;
-}
-
-const b = bem("text-field");
-
-export const TextFieldWrapper = ({id, name, className, label, children}: ITextFieldWrapperProps) => {
-  return (
-    <div className={clsx(b(), className)}>
-      <div className={b('wrapper')}>
-        <label
-          htmlFor={id || name} className={b("label")}>{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 }: 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={b("label")}>{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;
+}
+
+interface ITextFieldWrapperProps {
+  id?: string;
+  name?: string;
+  className?: string;
+  label?: string;
+  children: ReactNode;
+}
+
+const b = bem("text-field");
+
+export const TextFieldWrapper = ({id, name, className, label, children}: ITextFieldWrapperProps) => {
+  return (
+    <div className={clsx(b(), className)}>
+      <div className={b('wrapper')}>
+        <label
+          htmlFor={id || name} className={b("label")}>{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 }: 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={b("label")}>{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

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

@@ -1,33 +1,33 @@
-.r5ui-toast {
-    background: $primary_bg_color;
-    border: $border_size solid $primary_border_color;
-    border-radius: $border_radius;
-    color: $primary_text_color;
-    display: block;
-    padding: 1em;
-    width: 100%;
-  &--success {
-    background: $success_color;
-    color: $success_text_color;
-  }
-  &--warning {
-    background: $warning_color;
-    color: $warning_text_color;
-  }
-  &--error {
-    background: $error_color;
-    color: $error_text_color;
-  }
-  &__close {
-    float: right;
-    width: 1em;
-    height: 1em;
-    &, &:focus, &:hover {
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      outline: none;
-      color: $primary_text_color;
-    }
-  }
+.r5ui-toast {
+    background: $primary_bg_color;
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    color: $primary_text_color;
+    display: block;
+    padding: 1em;
+    width: 100%;
+  &--success {
+    background: $success_color;
+    color: $success_text_color;
+  }
+  &--warning {
+    background: $warning_color;
+    color: $warning_text_color;
+  }
+  &--error {
+    background: $error_color;
+    color: $error_text_color;
+  }
+  &__close {
+    float: right;
+    width: 1em;
+    height: 1em;
+    &, &:focus, &:hover {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      outline: none;
+      color: $primary_text_color;
+    }
+  }
 }

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

@@ -1,30 +1,30 @@
-import clsx from "clsx";
-import "./Toast.scss";
-import type { ReactNode } from "react";
-import { bem } from '../../utils/bem';
-
-export interface IToastProps {
-  children: ReactNode;
-  type?: "error" | "warning" | "success";
-  onClose?: Function;
-  className?: string;
-}
-
-const b = bem("toast");
-export const Toast = ({type = "success", children, onClose, className}: IToastProps) => {
-  return (
-    <div className={clsx(b(), b('', type), className)}>
-      { children }
-      <button
-        aria-label="Close"
-        className={b('close')}
-        onClick={ () => onClose && onClose() }
-        >
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  )
-}
-
-
+import clsx from "clsx";
+import "./Toast.scss";
+import type { ReactNode } from "react";
+import { bem } from '../../utils/bem';
+
+export interface IToastProps {
+  children: ReactNode;
+  type?: "error" | "warning" | "success";
+  onClose?: Function;
+  className?: string;
+}
+
+const b = bem("toast");
+export const Toast = ({type = "success", children, onClose, className}: IToastProps) => {
+  return (
+    <div className={clsx(b(), b('', type), className)}>
+      { children }
+      <button
+        aria-label="Close"
+        className={b('close')}
+        onClick={ () => onClose && onClose() }
+        >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  )
+}
+
+
 export default Toast

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

@@ -1,48 +1,48 @@
-.r5ui-toggle-button {
-  display: inline-block;
-  position: relative;
-  width: 30px;
-  height: 17px;
-  //margin: 0 .5em;
-  margin-right: 0.5em;
-
-  &__input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  &__slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: $primary_border_color;
-    transition: .4s;
-    border-radius: 17px;
-  }
-  
-  &__slider:before {
-    position: absolute;
-    content: "";
-    height: 13px;
-    width: 13px;
-    left: 2px;
-    bottom: 2px;
-    background-color: $control_bg_color;
-    //background-color: $menu_text_color;
-    transition: .4s;
-    border-radius: 50%;
-  }
-    
-  &__input:checked + &__slider {
-    background-color: $primary_bg_color;
-  }
-  
-  &__input:checked + &__slider:before {
-    transform: translateX(13px);
-  }
- 
+.r5ui-toggle-button {
+  display: inline-block;
+  position: relative;
+  width: 30px;
+  height: 17px;
+  //margin: 0 .5em;
+  margin-right: 0.5em;
+
+  &__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  &__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $primary_border_color;
+    transition: .4s;
+    border-radius: 17px;
+  }
+  
+  &__slider:before {
+    position: absolute;
+    content: "";
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background-color: $control_bg_color;
+    //background-color: $menu_text_color;
+    transition: .4s;
+    border-radius: 50%;
+  }
+    
+  &__input:checked + &__slider {
+    background-color: $primary_bg_color;
+  }
+  
+  &__input:checked + &__slider:before {
+    transform: translateX(13px);
+  }
+ 
 }

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

@@ -1,22 +1,22 @@
-import { Fragment } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToggleButton } from './ToggleButton';
-
-const meta: Meta<typeof ToggleButton> = {
-  title: 'Example/ToggleButton',
-  component: ToggleButton,
-} as Meta;
-export default meta;
-
-type Story = StoryObj<typeof ToggleButton>;
-
-export const SampleToggleButton: Story = {
-  render: () => (
-    <Fragment>
-      <ToggleButton checked={true} onChange={() => {}} label="Test" name="Checked CB" />
-      <br />
-      <br />
-      <ToggleButton checked={false} onChange={() => {}} label="Test" name="Unchecked CB" />
-    </Fragment>
-  ),
-};
+import { Fragment } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButton } from './ToggleButton';
+
+const meta: Meta<typeof ToggleButton> = {
+  title: 'Example/ToggleButton',
+  component: ToggleButton,
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof ToggleButton>;
+
+export const SampleToggleButton: Story = {
+  render: () => (
+    <Fragment>
+      <ToggleButton checked={true} onChange={() => {}} label="Test" name="Checked CB" />
+      <br />
+      <br />
+      <ToggleButton checked={false} onChange={() => {}} label="Test" name="Unchecked CB" />
+    </Fragment>
+  ),
+};