@react5/ui 1.0.10 → 1.0.12

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

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SuccessCongratulation } from './SuccessCongratulation';
-
-const meta: Meta<typeof SuccessCongratulation> = {
-  title: 'Example/SuccessCongratulation',
-  component: SuccessCongratulation,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as Meta;
-export default meta;
-
-type Story = StoryObj<typeof SuccessCongratulation>;
-
-export const TextSuccessCongratulation: Story = {
-  render: () => <SuccessCongratulation/>,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { SuccessCongratulation } from './SuccessCongratulation';
+
+const meta: Meta<typeof SuccessCongratulation> = {
+  title: 'Example/SuccessCongratulation',
+  component: SuccessCongratulation,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof SuccessCongratulation>;
+
+export const TextSuccessCongratulation: Story = {
+  render: () => <SuccessCongratulation/>,
+};

package/packages/lib/src/components/SuccessCongratulation/SuccessCongratulation.test.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SuccessCongratulation } from './SuccessCongratulation';
-
-describe('SuccessCongratulation Component', () => {
-  test('renders the button with the correct label', () => {
-    render(<SuccessCongratulation onContinue={jest.fn()} />);
-    const div = screen.getByRole('SuccessCongratulation', { name: /click me/i });
-    expect(div).toBeInTheDocument();
-  });
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SuccessCongratulation } from './SuccessCongratulation';
+
+describe('SuccessCongratulation Component', () => {
+  test('renders the button with the correct label', () => {
+    render(<SuccessCongratulation onContinue={jest.fn()} />);
+    const div = screen.getByRole('SuccessCongratulation', { name: /click me/i });
+    expect(div).toBeInTheDocument();
+  });
 });

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

@@ -1,64 +1,64 @@
-import './SuccessCongratulation.scss'
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-import { Toolbar } from '../Toolbar';
-import { IconButton } from '../IconButton';
-import { FaBookmark, FaTrophy } from 'react-icons/fa6';
-import { FormEvent, useEffect } from 'react';
-
-interface SuccessCongratulationProps {
-  message?: string;
-  onContinue?: () => void;
-  onAddToFavorites?: () => void;
-  isFavorite?: boolean;
-  className?: string;
-  continueText?: string;
-}
-const b = bem("success-congratulation");
-export const SuccessCongratulation = ({message = "Congratulations!",
-  onContinue, onAddToFavorites, isFavorite, className, continueText = "Continue"}: SuccessCongratulationProps) => {
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (["Escape", "Enter", " "].includes(event.key)) {
-        event.preventDefault();
-        onContinue?.();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown, false);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onContinue]);
-
-  const handleClick = () => {
-    onContinue?.();
-  };
-  const handleAddToFavorites = (e?: FormEvent) => {
-    e?.stopPropagation();
-    onAddToFavorites?.();
-  }
-
-  return (
-    <div
-      className={clsx(b(), className)}
-      onClick={handleClick}
-      tabIndex={0}
-      role="button"
-      //onAnimationEnd={onAnimationEnd}
-    >
-      <div className={b("icon")}>
-        <FaTrophy className={b("checkmark")}/>
-      </div>
-      <p className={b("message")}>{message}</p>
-      <Toolbar>
-        <IconButton variant='rounded' onClick={onContinue}>{continueText}</IconButton>
-        <IconButton variant='round-outlined' onClick={handleAddToFavorites}>
-          <FaBookmark className={clsx(isFavorite && b("favorite"))}/>
-        </IconButton>
-      </Toolbar>
-    </div>
-  )
-}
+import './SuccessCongratulation.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+import { Toolbar } from '../Toolbar';
+import { IconButton } from '../IconButton';
+import { FaBookmark, FaTrophy } from 'react-icons/fa6';
+import { FormEvent, useEffect } from 'react';
+
+interface SuccessCongratulationProps {
+  message?: string;
+  onContinue?: () => void;
+  onAddToFavorites?: () => void;
+  isFavorite?: boolean;
+  className?: string;
+  continueText?: string;
+}
+const b = bem("success-congratulation");
+export const SuccessCongratulation = ({message = "Congratulations!",
+  onContinue, onAddToFavorites, isFavorite, className, continueText = "Continue"}: SuccessCongratulationProps) => {
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (["Escape", "Enter", " "].includes(event.key)) {
+        event.preventDefault();
+        onContinue?.();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown, false);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onContinue]);
+
+  const handleClick = () => {
+    onContinue?.();
+  };
+  const handleAddToFavorites = (e?: FormEvent) => {
+    e?.stopPropagation();
+    onAddToFavorites?.();
+  }
+
+  return (
+    <div
+      className={clsx(b(), className)}
+      onClick={handleClick}
+      tabIndex={0}
+      role="button"
+      //onAnimationEnd={onAnimationEnd}
+    >
+      <div className={b("icon")}>
+        <FaTrophy className={b("checkmark")}/>
+      </div>
+      <p className={b("message")}>{message}</p>
+      <Toolbar>
+        <IconButton variant='rounded' onClick={onContinue}>{continueText}</IconButton>
+        <IconButton variant='round-outlined' onClick={handleAddToFavorites}>
+          <FaBookmark className={clsx(isFavorite && b("favorite"))}/>
+        </IconButton>
+      </Toolbar>
+    </div>
+  )
+}
 export default SuccessCongratulation

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

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

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

@@ -1,34 +1,34 @@
-.r5ui-text-area {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  
-  margin: 0.5em;
-
-  &__label {
-    flex: 40%;
-    padding: 3px;
-    color: $page_text_color;
-    align-self: start;
-    margin-right: 0.5em;
-    text-align: right;
-  }
-  &__input {
-    flex: 60%;
-    border: $border_size solid $primary_border_color;
-    border-radius: $border_radius;
-    color: $control_text_color;
-    background-color: $control_bg_color;
-  }
-
-  &__wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    width: 100%;
-  }
-  &__error-container {
-    text-align: right;
-    color: $error_validation_color;
-  }
+.r5ui-text-area {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  
+  margin: 0.5em;
+
+  &__label {
+    flex: 40%;
+    padding: 3px;
+    color: $page_text_color;
+    align-self: start;
+    margin-right: 0.5em;
+    text-align: right;
+  }
+  &__input {
+    flex: 60%;
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    color: $control_text_color;
+    background-color: $control_bg_color;
+  }
+
+  &__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/TextArea/TextArea.stories.tsx

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

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

@@ -1,49 +1,49 @@
-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;
-}
-
-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 }: ITextAreaProps, ref) => {
-  
-  return (<div className={clsx(b(), className)}>
-    <div className={b("wrapper")}>
-      {!noLabel && <label
-        htmlFor={name} className={b("label")}>{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;
+}
+
+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 }: ITextAreaProps, ref) => {
+  
+  return (<div className={clsx(b(), className)}>
+    <div className={b("wrapper")}>
+      {!noLabel && <label
+        htmlFor={name} className={b("label")}>{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,46 +1,49 @@
-.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;
-    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;
-    }
-  }
-
-  &__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;
+    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" />,
+};