@react5/ui 1.0.26 → 1.0.28

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

@@ -1,64 +1,64 @@
-.r5ui-checkbox {
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin: .5em 1em .5em .5em;
-  //padding-left: 2em;
-  cursor: pointer;
-  user-select: none;
-
-  &__label {
-    color: $page_text_color;
-    padding-left: 10px;
-  }
-  &__input {
-    opacity: 0;
-    //visibility: hidden;
-    position: absolute;
-    color: $control_text_color;
-    background-color: $control_bg_color;
-  }
-
-  &__checkmark {
-    //position: relative;
-    //top: 0;
-    //left: 0;
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    background-color: transparent;
-    border: 1px solid $primary_border_color;
-  }
-
-  &:hover &__checkmark {
-    background-color: $primary_bg_color_highlight;
-  }
-
-  &__input:checked ~ &__checkmark {
-    background-color: $primary_bg_color;
-  }
-  &__input:focus ~ &__checkmark {
-    //background-color: $primary_bg_color;
-    border-width: 2px;
-  }
-
-  &__checkmark::after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
-
-  &__input:checked ~ &__checkmark::after {
-    display: block;
-  }
-
-  &__checkmark::after {
-    top: 4px;
-    left: 7px;
-    width: 7px;
-    height: 12px;
-    border: solid $primary_text_color;
-    border-width: 0 3px 3px 0;
-    transform: rotate(45deg);
-  }
+.r5ui-checkbox {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin: .5em 1em .5em .5em;
+  //padding-left: 2em;
+  cursor: pointer;
+  user-select: none;
+
+  &__label {
+    color: $page_text_color;
+    padding-left: 10px;
+  }
+  &__input {
+    opacity: 0;
+    //visibility: hidden;
+    position: absolute;
+    color: $control_text_color;
+    background-color: $control_bg_color;
+  }
+
+  &__checkmark {
+    //position: relative;
+    //top: 0;
+    //left: 0;
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    background-color: transparent;
+    border: 1px solid $primary_border_color;
+  }
+
+  &:hover &__checkmark {
+    background-color: $primary_bg_color_highlight;
+  }
+
+  &__input:checked ~ &__checkmark {
+    background-color: $primary_bg_color;
+  }
+  &__input:focus ~ &__checkmark {
+    //background-color: $primary_bg_color;
+    border-width: 2px;
+  }
+
+  &__checkmark::after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  &__input:checked ~ &__checkmark::after {
+    display: block;
+  }
+
+  &__checkmark::after {
+    top: 4px;
+    left: 7px;
+    width: 7px;
+    height: 12px;
+    border: solid $primary_text_color;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+  }
 }

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

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

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

@@ -1,42 +1,42 @@
-import { ChangeEventHandler, FC, Fragment, forwardRef } from "react";
-import { formatError } from "../../utils";
-import "./CheckBox.scss";
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-
-interface ICheckBoxProps {
-  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("checkbox");
-export const CheckBox : FC<ICheckBoxProps> = 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("checkmark")}></span>
-      {label && <span className={b("label")}>{label}</span>}
-    </label>
-    {error && <div>{formatError(error, label)}</div>}
-  </Fragment>)
-});
+import { ChangeEventHandler, FC, Fragment, forwardRef } from "react";
+import { formatError } from "../../utils";
+import "./CheckBox.scss";
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+
+interface ICheckBoxProps {
+  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("checkbox");
+export const CheckBox : FC<ICheckBoxProps> = 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("checkmark")}></span>
+      {label && <span className={b("label")}>{label}</span>}
+    </label>
+    {error && <div>{formatError(error, label)}</div>}
+  </Fragment>)
+});

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

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

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

@@ -1,7 +1,7 @@
-.r5ui-dialog-prompt {
-  &__body {
-    flex-direction: column;
-    z-index: 1;
-    padding-bottom: 1.5rem;
-  }
+.r5ui-dialog-prompt {
+  &__body {
+    flex-direction: column;
+    z-index: 1;
+    padding-bottom: 1.5rem;
+  }
 }

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

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

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

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

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

@@ -1,42 +1,42 @@
-import { ReactNode } from 'react';
-import './DialogPrompt.scss'
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-import { Modal } from '../Modal';
-import { FormButtons } from '../FormButtons';
-import { Button } from '../Button';
-import { Typography } from '../Typography';
-
-interface DialogPromptProps {
-  onOk?: () => void;
-  onCancel?: () => void;
-  className?: string;
-  children?: ReactNode;
-  prompt?: string;
-  confirmText?: string;
-  cancelText?: string;
-  variant?: 'small' | 'medium' | 'large';
-}
-const b = bem("dialog-prompt");
-export const DialogPrompt = ({children, variant = "small", onOk, onCancel, className, prompt, confirmText, cancelText}: DialogPromptProps) => {
-
-  return (
-    <Modal variant={variant} className={clsx(b(), className)} onClose={onCancel}>
-      <Modal.Header>
-      </Modal.Header>
-      <Modal.Body className={b("body")}>
-        {prompt && <Typography variant='h2' align='center'>{prompt}</Typography>}
-        {children}
-      </Modal.Body>
-      <Modal.Footer>
-        <FormButtons>
-          <Button type="submit" onClick={onOk}>{confirmText}</Button>
-          <Button type="button" variant='secondary' onClick={onCancel}>
-            {cancelText}
-          </Button>
-        </FormButtons>
-      </Modal.Footer>
-    </Modal>
-  )
-}
+import { ReactNode } from 'react';
+import './DialogPrompt.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+import { Modal } from '../Modal';
+import { FormButtons } from '../FormButtons';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+
+interface DialogPromptProps {
+  onOk?: () => void;
+  onCancel?: () => void;
+  className?: string;
+  children?: ReactNode;
+  prompt?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'small' | 'medium' | 'large';
+}
+const b = bem("dialog-prompt");
+export const DialogPrompt = ({children, variant = "small", onOk, onCancel, className, prompt, confirmText, cancelText}: DialogPromptProps) => {
+
+  return (
+    <Modal variant={variant} className={clsx(b(), className)} onClose={onCancel}>
+      <Modal.Header>
+      </Modal.Header>
+      <Modal.Body className={b("body")}>
+        {prompt && <Typography variant='h2' align='center'>{prompt}</Typography>}
+        {children}
+      </Modal.Body>
+      <Modal.Footer>
+        <FormButtons>
+          <Button type="submit" onClick={onOk}>{confirmText}</Button>
+          <Button type="button" variant='secondary' onClick={onCancel}>
+            {cancelText}
+          </Button>
+        </FormButtons>
+      </Modal.Footer>
+    </Modal>
+  )
+}
 export default DialogPrompt

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

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

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

@@ -1,23 +1,23 @@
-.r5ui-divider {
-  padding: .5em;
-  text-align: center;
-  margin: 20px 0;
-  position: relative;
-
-  &:before {
-    content: "";
-    display: block;
-    border-top: $border_size solid $primary_border_color;
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    z-index: 1;
-  }
-  &__label {
-    background-color: $page_bg_color;
-    color: $page_text_color;
-    padding: 0 10px;
-    position: relative;
-    z-index: 2;
-  }
+.r5ui-divider {
+  padding: .5em;
+  text-align: center;
+  margin: 20px 0;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    border-top: $border_size solid $primary_border_color;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+  }
+  &__label {
+    background-color: $page_bg_color;
+    color: $page_text_color;
+    padding: 0 10px;
+    position: relative;
+    z-index: 2;
+  }
 }

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

@@ -1,20 +1,20 @@
-import clsx from "clsx";
-import "./Divider.scss";
-import type { ReactNode } from "react";
-import { bem } from '../../utils/bem';
-
-export interface IDividerProps {
-  className?: string;
-  children: ReactNode;
-}
-
-const b = bem("divider");
-export const Divider = ({children, className}: IDividerProps) => {
-  return (<div className={clsx(b(), className)}>
-    <span className={b("label")}>
-      {children}
-    </span>
-  </div>)
-}
-
-export default Divider
+import clsx from "clsx";
+import "./Divider.scss";
+import type { ReactNode } from "react";
+import { bem } from '../../utils/bem';
+
+export interface IDividerProps {
+  className?: string;
+  children: ReactNode;
+}
+
+const b = bem("divider");
+export const Divider = ({children, className}: IDividerProps) => {
+  return (<div className={clsx(b(), className)}>
+    <span className={b("label")}>
+      {children}
+    </span>
+  </div>)
+}
+
+export default Divider

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

@@ -1,71 +1,71 @@
-.r5ui-dropdown {
-  position: relative;
-  display: inline-block;
-
-  &__button--left {
-    margin: 0;
-  }
-
-  &__indicator-primary {
-    border: solid $primary_text_color;
-  }
-  &__indicator-secondary {
-    border: solid $secondary_text_color;
-  }
-  &__indicator-link {
-    border: solid $secondary_text_color;
-  }
-  &__indicator {
-    margin-left: 1em;
-    //border: solid $primary_text_color;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 3px;
-    transform: rotate(45deg);
-    transition: transform 0.3s ease;
-
-    &--open {
-      transform: rotate(-135deg);
-    }
-    &--left {
-      transform: rotate(-45deg);
-    }
-  }
-
-  &__list {
-    position: absolute;
-    background-color: $secondary_bg_color;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-    border-radius: $border_radius;
-    list-style-type: none;
-    right: 0;
-
-    &--down {
-      top: 100%;
-    }
-
-    &--up {
-      bottom: 100%;
-    }
-
-    &--left {
-      right: 100%;
-    }
-  }
-
-  &__item {
-    color: $secondary_text_color;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $secondary_bg_color_highlight;
-    }
-  }
+.r5ui-dropdown {
+  position: relative;
+  display: inline-block;
+
+  &__button--left {
+    margin: 0;
+  }
+
+  &__indicator-primary {
+    border: solid $primary_text_color;
+  }
+  &__indicator-secondary {
+    border: solid $secondary_text_color;
+  }
+  &__indicator-link {
+    border: solid $secondary_text_color;
+  }
+  &__indicator {
+    margin-left: 1em;
+    //border: solid $primary_text_color;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+
+    &--open {
+      transform: rotate(-135deg);
+    }
+    &--left {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__list {
+    position: absolute;
+    background-color: $secondary_bg_color;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+    border-radius: $border_radius;
+    list-style-type: none;
+    right: 0;
+
+    &--down {
+      top: 100%;
+    }
+
+    &--up {
+      bottom: 100%;
+    }
+
+    &--left {
+      right: 100%;
+    }
+  }
+
+  &__item {
+    color: $secondary_text_color;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $secondary_bg_color_highlight;
+    }
+  }
 }