@react5/ui 1.0.26 → 1.0.28

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>
+  ),
+};

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

@@ -1,42 +1,42 @@
-import { ChangeEventHandler, FC, Fragment, forwardRef } from "react";
-import { formatError } from "../../utils";
-import "./ToggleButton.scss";
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-
-interface IToggleButtonProps {
-  label?: string;
-  name?: string;
-  error?: string;
-  validationError?: (name?: string) => string | undefined;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  autoFocus?: boolean;
-  className?: string;
-  readonly?: boolean;
-  checked?: boolean;
-}
-
-const b = bem("toggle-button");
-export const ToggleButton : FC<IToggleButtonProps> = forwardRef(({checked, onChange,
-  name, className, autoFocus = false, readonly = false, label, error }, ref: any) => {
-
-  return (<Fragment>
-    <label className={clsx(b(), className)}>
-      <input
-        id={name}
-        name={name}
-        className={b("input")}
-        readOnly={readonly}
-        type="checkbox"
-        checked={checked}
-        onChange={onChange}
-        ref={ref}
-        autoFocus={autoFocus}
-        autoComplete="on"
-      />
-      <span className={b("slider")}></span>
-    </label>
-    <span className={b("label")}>{label}</span>
-    {error && <div>{formatError(error, label)}</div>}
-  </Fragment>)
+import { ChangeEventHandler, FC, Fragment, forwardRef } from "react";
+import { formatError } from "../../utils";
+import "./ToggleButton.scss";
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+
+interface IToggleButtonProps {
+  label?: string;
+  name?: string;
+  error?: string;
+  validationError?: (name?: string) => string | undefined;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  autoFocus?: boolean;
+  className?: string;
+  readonly?: boolean;
+  checked?: boolean;
+}
+
+const b = bem("toggle-button");
+export const ToggleButton : FC<IToggleButtonProps> = forwardRef(({checked, onChange,
+  name, className, autoFocus = false, readonly = false, label, error }, ref: any) => {
+
+  return (<Fragment>
+    <label className={clsx(b(), className)}>
+      <input
+        id={name}
+        name={name}
+        className={b("input")}
+        readOnly={readonly}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        ref={ref}
+        autoFocus={autoFocus}
+        autoComplete="on"
+      />
+      <span className={b("slider")}></span>
+    </label>
+    <span className={b("label")}>{label}</span>
+    {error && <div>{formatError(error, label)}</div>}
+  </Fragment>)
 });

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

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

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

@@ -1,17 +1,17 @@
-.r5ui-toolbar {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5em;
-
-  &--right {
-    justify-content: flex-end;
-    margin-left: auto;
-  }
-  &--center {
-    justify-content: center;
-    margin: 0 auto;
-  }
-  &--vertical {
-    flex-direction: column;
-  }
+.r5ui-toolbar {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+
+  &--right {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+  &--center {
+    justify-content: center;
+    margin: 0 auto;
+  }
+  &--vertical {
+    flex-direction: column;
+  }
 }

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

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

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { Toolbar } from './Toolbar';
-
-describe('Toolbar Component', () => {
-  test('renders the button with the correct label', () => {
-    render(<Toolbar >test</Toolbar>);
-    const div = screen.getByText('test');
-    expect(div).toBeInTheDocument();
-  });
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Toolbar } from './Toolbar';
+
+describe('Toolbar Component', () => {
+  test('renders the button with the correct label', () => {
+    render(<Toolbar >test</Toolbar>);
+    const div = screen.getByText('test');
+    expect(div).toBeInTheDocument();
+  });
 });

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

@@ -1,21 +1,21 @@
-import { ReactNode } from 'react';
-import './Toolbar.scss'
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-
-interface ToolbarProps {
-  disabled?: boolean;
-  className?: string;
-  children: ReactNode;
-  align?: 'left' | 'right' | 'center';
-  orientation?: 'horizontal' | 'vertical';
-}
-const b = bem("toolbar");
-export const Toolbar = ({children, className, align = 'left', orientation = 'horizontal'}: ToolbarProps) => {
-  return (
-    <div className={clsx(b(), b('', align), b('', orientation), className)}>
-      {children}
-    </div>
-  )
-}
+import { ReactNode } from 'react';
+import './Toolbar.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+
+interface ToolbarProps {
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+  align?: 'left' | 'right' | 'center';
+  orientation?: 'horizontal' | 'vertical';
+}
+const b = bem("toolbar");
+export const Toolbar = ({children, className, align = 'left', orientation = 'horizontal'}: ToolbarProps) => {
+  return (
+    <div className={clsx(b(), b('', align), b('', orientation), className)}>
+      {children}
+    </div>
+  )
+}
 export default Toolbar

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

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

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

@@ -1,52 +1,52 @@
-.r5ui-typography {
-  color: $page_text_color;
-  font-family: $title_font;
-  &__p {
-    font-family: $primary_font;
-    margin-bottom: 1em;
-    margin-top: .5em;
-    text-align: justify;
-  }
-  &__div {
-    font-family: $primary_font;
-    margin: 0;
-    display: inline-block;
-    text-align: justify;
-  }
-  &__h1 {
-    font-size: 2.5em;
-    font-weight: 500;
-    margin-bottom: .5em;
-    margin-top: .5em;
-    text-align: center;
-  }
-  @media (max-width: 800px) {
-    &__h1 {
-      font-size: 1.5em;
-    }
-  }
-  &__h2 {
-    font-size: 2em;
-    font-weight: 500;
-    margin-bottom: .5em;
-    margin-top: .5em;
-  }
-  &__h3 {
-    font-size: 1.5em;
-    font-weight: 500;
-    margin-bottom: .5em;
-    margin-top: .5em;
-    text-align: center;
-  }
-  &__li {
-  }
-  &__left {
-    text-align: left;
-  }
-  &__center {
-    text-align: center;
-  }
-  &__right {
-    text-align: right;
-  }
+.r5ui-typography {
+  color: $page_text_color;
+  font-family: $title_font;
+  &__p {
+    font-family: $primary_font;
+    margin-bottom: 1em;
+    margin-top: .5em;
+    text-align: justify;
+  }
+  &__div {
+    font-family: $primary_font;
+    margin: 0;
+    display: inline-block;
+    text-align: justify;
+  }
+  &__h1 {
+    font-size: 2.5em;
+    font-weight: 500;
+    margin-bottom: .5em;
+    margin-top: .5em;
+    text-align: center;
+  }
+  @media (max-width: 800px) {
+    &__h1 {
+      font-size: 1.5em;
+    }
+  }
+  &__h2 {
+    font-size: 2em;
+    font-weight: 500;
+    margin-bottom: .5em;
+    margin-top: .5em;
+  }
+  &__h3 {
+    font-size: 1.5em;
+    font-weight: 500;
+    margin-bottom: .5em;
+    margin-top: .5em;
+    text-align: center;
+  }
+  &__li {
+  }
+  &__left {
+    text-align: left;
+  }
+  &__center {
+    text-align: center;
+  }
+  &__right {
+    text-align: right;
+  }
 }

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

@@ -1,18 +1,18 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from './Typography';
-
-const meta: Meta<typeof Typography> = {
-  title: 'Example/Typography',
-  component: Typography,
-} as Meta;
-export default meta;
-
-type Story = StoryObj<typeof Typography>;
-
-export const HeadParagraph: Story = {
-  render: () => <Typography variant="h1">test</Typography>,
-};
-
-export const TextParagraph: Story = {
-  render: () => <Typography>test text</Typography>,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Example/Typography',
+  component: Typography,
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof Typography>;
+
+export const HeadParagraph: Story = {
+  render: () => <Typography variant="h1">test</Typography>,
+};
+
+export const TextParagraph: Story = {
+  render: () => <Typography>test text</Typography>,
+};