@react5/ui 1.0.0

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

@@ -0,0 +1,37 @@
+import React, { useState, ReactNode, useEffect, MouseEvent } from 'react';
+import clsx from 'clsx';
+import { bem } from '../../utils';
+import './Accordion.scss';
+
+const b = bem('accordion');
+
+interface AccordionProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+  isOpen?: boolean;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ title, children, className, isOpen = false }) => {
+  const [isAccOpen, setIsOpen] = useState(isOpen);
+  useEffect(() => {
+    isOpen && setIsOpen(isOpen);    
+  }, [isOpen])
+
+  const toggleAccordion = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsOpen((prev) => !prev);
+  };
+  
+  return (
+    <div className={clsx(b(), className, { [b('open')]: isAccOpen })}>
+      <button className={b('toggle-header')} onClick={toggleAccordion}>
+        <h3 className={b('title')}>{title}</h3>
+        <span className={clsx(b("indicator"), isAccOpen && b("indicator", "open"))}></span>
+      </button>
+      <div className={clsx(b('content'), isAccOpen && b('content', 'open'))}>
+        {children}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './Accordion'

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

@@ -0,0 +1,43 @@
+//@import "../../styles/colors.scss";
+.r5ui-button {
+  display: inline-block;
+  margin: .5em;
+  padding: .5em 1em;
+  border: $border_size solid $primary_border_color;
+  background-color: $primary_bg_color;
+  border-radius: $border_radius;
+  color: $primary_text_color;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  transition: color 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    color: $primary_text_color_highlight;
+  }
+
+  &__primary {
+    background-color: $primary_bg_color;
+    color: $primary_text_color;
+    border-color: $primary_border_color;
+  }
+  &__secondary {
+    background-color: $secondary_bg_color;
+    color: $secondary_text_color;
+    border-color: $secondary_border_color;
+  }
+  &__link {
+    background: none;
+    border: none;
+    padding: 0;
+    color: $link_color;
+    font: inherit;
+    cursor: pointer;
+    //text-decoration: underline;
+    &:hover {
+      color: $link_color_highlight;
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Colors from '../../stories/assets/github.svg';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const TextButton: Story = {
+  render: () => <Button>Test</Button>,
+};
+
+export const IconButton: Story = {
+  render: () => (
+    <Button>
+      <Colors />
+    </Button>
+  ),
+};

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

@@ -0,0 +1,40 @@
+import { FormEvent, ReactNode, FC, MouseEvent } from 'react';
+import { Link } from 'react-router-dom';
+import './Button.scss';
+import clsx from 'clsx';
+import { bem } from '../../utils';
+
+interface ButtonProps {
+  to?: string;
+  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'link';
+  type?: 'submit' | 'reset' | 'button';
+  children: ReactNode;
+}
+
+const b = bem('button');
+export const Button: FC<ButtonProps> = ({ className, variant = "primary", type = "button", to, onClick, disabled, children }) => {
+  const c = clsx(b(), b(variant), b(type), className);
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if(onClick) {
+      e.preventDefault();
+      onClick(e);
+    }
+  }
+  if(to) {
+    return (
+      <Link className={c} to={to}>
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <button className={c} onClick={handleClick} disabled={disabled} type={type}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1 @@
+export * from "./Button";

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

@@ -0,0 +1,4 @@
+.r5ui-buttons-group {
+  display: flex;
+  gap: 0.5em;
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import './ButtonsGroup.scss'
+import clsx from 'clsx';
+import { bem } from "../../utils";
+
+interface ButtonsGroupProps {
+  className?: string;
+  children: ReactNode;
+}
+const b = bem("buttons-group");
+export const ButtonsGroup = ({children, className}: ButtonsGroupProps) => {
+  return (
+    <div className={clsx(b(), className)}>
+      {children}
+    </div>
+  )
+}
+export default ButtonsGroup

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

@@ -0,0 +1 @@
+export * from "./ButtonsGroup";

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { ChangeEventHandler, FC, Fragment, forwardRef } from "react";
+import { bem, formatError } from "../../utils";
+import "./CheckBox.scss";
+import clsx from "clsx";
+
+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

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

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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import './DialogPrompt.scss'
+import clsx from 'clsx';
+import { bem } from "../../utils";
+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;
+}
+const b = bem("dialog-prompt");
+export const DialogPrompt = ({children, onOk, onCancel, className, prompt, confirmText, cancelText}: DialogPromptProps) => {
+
+  return (
+    <Modal variant="small" 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

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

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

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

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

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import "./Divider.scss";
+import type { ReactNode } from "react";
+import { bem } from "../../utils";
+
+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/Divider/index.tsx

@@ -0,0 +1 @@
+export * from "./Divider"

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

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

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropDown } from './DropDown';
+
+const meta: Meta<typeof DropDown> = {
+  component: DropDown,
+};
+
+export default meta;
+type Story = StoryObj<typeof DropDown>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+const items = [
+  {
+    label: 'Item 1',
+    value: 'item1',
+  },
+  {
+    label: 'Item 2',
+    value: 'item2',
+  },
+  {
+    label: 'Item 3',
+    value: 'item3',
+  },
+  {
+    label: 'Item 4',
+    value: 'item4',
+  },
+  {
+    label: 'Item 5',
+    value: 'item5',
+  },
+];
+export const Primary: Story = {
+  render: () => (
+    <div style={{ backgroundColor: '#333' }}>
+      <DropDown items={items} selectedItem={items[1]} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,62 @@
+import { useState, useRef, useEffect } from "react"
+import './DropDown.scss'
+import { Button } from "../Button";
+import { bem } from "../../utils";
+import clsx from "clsx";
+
+export interface IDropDownItem {
+  label: string
+  value: string
+}
+export interface IDropDownProps {
+  items: IDropDownItem[]
+  selectedItem?: IDropDownItem
+  className?: string
+  onChange?: (item: IDropDownItem) => void
+  direction?: "up" | "down" | "left" | "right",
+  variant?: "primary" | "secondary" | "link"
+}
+const b = bem("dropdown");
+export const DropDown = ({items, selectedItem, direction="down", variant="primary", onChange, className}: IDropDownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef: any = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleDropdown = () => setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
+  const handleChange = (item: IDropDownItem) => () => {
+    onChange && onChange(item);
+    setIsOpen(false);
+  }
+
+  const listClass = `${b("list")} ${b("list", direction)}`;
+
+  return (<div className={clsx(b(), className)} ref={dropdownRef}>
+    <Button className={b("button", direction)} variant={variant} onClick={toggleDropdown}>
+      {selectedItem?.label || ""}
+      <span className={clsx(b("indicator"), b(`indicator-${variant}`),
+        b("indicator", direction), isOpen && b("indicator", "open"))}
+      />
+    </Button>
+    {isOpen && (
+      <ul className={listClass}>
+        {
+          items.map((c, i) => (
+            <li key={i} className={b("item")} onClick={handleChange(c)}>{c.label}</li>
+          ))
+        }
+      </ul>
+    )}
+  </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from "./DropDown"

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

@@ -0,0 +1,4 @@
+.r5ui-form {
+  display: flex;
+  flex-direction: column;
+}