kelt-ui-kit-react 1.8.2 → 1.8.3

package/package/src/datePicker/datePicker.css

@@ -0,0 +1,77 @@
+.calendar {
+  position: relative;
+  .calendar-button {
+    width: 40px;
+    max-width: 40px;
+    min-width: 40px;
+    background-color: transparent;
+    i {
+      color: #333;
+      font-size: 1.6rem;
+    }
+  }
+  .calendar-popup {
+    position: absolute;
+    z-index: 5;
+    border-color: #cfbdbd;
+    border-style: solid;
+    border-width: 1px;
+    max-width: 300px;
+    min-width: 250px;
+    background-color: #fff;
+    font-size: 0.8rem;
+    border-radius: 4px;
+    .out-of-month {
+      opacity: 0.4;
+    }
+    .calendar-popup-close {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 0.25rem;
+      margin-top: 0.35rem;
+      cursor: pointer;
+      i {
+        line-height: 0;
+        font-size: 0.8rem;
+      }
+    }
+    .react-calendar {
+      border: 0px;
+      button {
+        background-color: #fff;
+        color: #333;
+        min-width: auto;
+        width: auto;
+        font-size: 0.8rem;
+        padding: 0.5rem;
+      }
+      .react-calendar__month-view__weekdays__weekday {
+        text-align: center;
+      }
+      .react-calendar__navigation {
+        display: flex;
+      }
+
+      .react-calendar__tile--active {
+        background-color: #007bff;
+        color: #fff;
+      }
+      .react-calendar__tile--now {
+        background-color: #f0f0f0;
+        color: #000;
+      }
+      .react-calendar__tile--active:hover {
+        background-color: #0056b3;
+        color: #fff;
+      }
+      .react-calendar__tile--now:hover {
+        background-color: #e0e0e0;
+        color: #000;
+      }
+      .react-calendar__tile--disabled {
+        background-color: #f8f9fa;
+        color: #6c757d;
+      }
+    }
+  }
+}

package/package/src/expands/Expands.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from "react";
+import { Expand } from "./expand/expand";
+import { ExpandInterface } from "./expand/expand.interface";
+import "./expands.css";
+
+type ExpandProps = {
+  items: ExpandInterface[];
+  className?: string;
+  onChange?: (item: ExpandInterface) => void;
+  currentItem?: ExpandInterface;
+  showArrow?: boolean;
+};
+
+export const Expands = (props: ExpandProps) => {
+  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
+  const onChangeExpand = useCallback(
+    (item: ExpandInterface) => {
+      if (props.onChange) {
+        props.onChange(item);
+      }
+      setCurrentExpand(item);
+    },
+    [setCurrentExpand, props.onChange]
+  );
+  useEffect(() => {
+    setCurrentExpand(props.currentItem);
+  }, [props.currentItem, setCurrentExpand, document.activeElement]);
+  return (
+    <div className={`expands ${props.className || ""}`}>
+      {props.items.map((item: ExpandInterface) => (
+        <Expand
+          key={item.id}
+          item={item}
+          showArrow={props.showArrow}
+          onChange={onChangeExpand}
+          currentExpand={currentExpand}
+        />
+      ))}
+    </div>
+  );
+};
+export type { ExpandProps };

package/package/src/expands/Expands.view.tsx

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/Button";
+import { Search } from "../search/Search";
+import { ExpandInterface } from "./expand/expand.interface";
+import { Expands } from "./Expands";
+
+export const ExpandsView = (): JSX.Element => {
+  const searchRef = useRef<{
+    clearInput: (name: string) => void;
+    resetForm: () => void;
+    focusInitialElement: () => void;
+  }>(null);
+  const [currentId, setCurrentId] = useState<number>(2);
+
+  const handleRefocus = () => {
+    searchRef.current?.focusInitialElement();
+  };
+  const mockItems: ExpandInterface[] = useMemo(
+    () => [
+      {
+        id: 1,
+        title: "Client",
+        description: "Description 1",
+        headerContent: currentId === 1 && (
+          <Search ref={searchRef} focus={true} />
+        ),
+        footer: <button>Valider</button>,
+      },
+      {
+        id: 2,
+        title: "Produits",
+        description: "Description 2",
+        headerContent: currentId === 2 && (
+          <Search ref={searchRef} focus={true} />
+        ),
+        content: (
+          <Button title={"Go to produits"} onClick={() => setCurrentId(3)} />
+        ),
+      },
+      {
+        id: 3,
+        title: "Total",
+        description: "Description 3",
+      },
+    ],
+    [currentId]
+  );
+  const [currentItem, setCurrentItem] = useState<ExpandInterface>(mockItems[0]);
+  useEffect(() => {
+    setTimeout(() => {
+      searchRef.current?.focusInitialElement();
+    }, 0);
+  }, [searchRef, currentItem]);
+  useEffect(() => {
+    const item = mockItems.find((item) => item.id === currentId);
+    if (item) {
+      setCurrentItem(item);
+    }
+  }, [currentId, setCurrentItem]);
+
+  const goToProduits = useCallback(() => {
+    setCurrentItem(mockItems[2]);
+  }, [setCurrentItem]);
+
+  const onChange = useCallback(
+    (item: ExpandInterface) => {
+      if (item.id) {
+        setCurrentId(item.id);
+      }
+    },
+    [setCurrentId]
+  );
+  return (
+    <div className="d-flex flex-column" style={{ height: "100%" }}>
+      <div className="mb-2">
+        <Button title={"Go to produits"} onClick={goToProduits} />
+
+        <Button onClick={handleRefocus} title="Re-focus" />
+      </div>
+      <div className="flex-1">
+        <Expands
+          onChange={onChange}
+          currentItem={currentItem}
+          items={mockItems}
+        />
+        ;
+      </div>
+    </div>
+  );
+};

package/package/src/expands/expand/expand.interface.tsx

@@ -0,0 +1,8 @@
+export interface ExpandInterface {
+  id?: number;
+  title: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  content?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  footer?: JSX.Element;
+}

package/package/src/expands/expand/expand.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { ExpandInterface } from "./expand.interface";
+
+export type ExpandProps = {
+  currentExpand?: ExpandInterface;
+  item: ExpandInterface;
+  className?: string;
+  showArrow?: boolean;
+  onChange: (item: ExpandInterface) => void;
+};
+export const Expand = ({
+  currentExpand,
+  item,
+  className,
+  showArrow = true,
+  onChange,
+}: ExpandProps): JSX.Element => {
+  const [active, setActive] = useState<boolean>(false);
+  useEffect(() => {
+    if (item && currentExpand) {
+      if (currentExpand.id === item.id) {
+        if (!active) {
+          setActive(true);
+        }
+      } else {
+        setActive(false);
+      }
+    } else {
+      setActive(false);
+    }
+  }, [currentExpand, setActive, item]);
+
+  const handleChange = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (onChange) {
+        onChange(item);
+      }
+    },
+    [onChange, item]
+  );
+  return (
+    <div
+      onClick={handleChange}
+      className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
+    >
+      <div className={`expand-header`}>
+        <div className="expand-header-content">
+          <div className="expand-header-content-default">
+            {active && showArrow && (
+              <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
+            )}
+            {!active && showArrow && (
+              <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
+            )}
+            <span className="flex-1 expand-header-title-left">
+              {item.title}
+            </span>
+            {item.description && (
+              <span className="expand-header-title-right">
+                {item.description}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="expand-body">
+        <div>{item.headerContent}</div>
+        {item.content}
+      </div>
+      {item.footer && <div className="expand-footer">{item.footer}</div>}
+    </div>
+  );
+};

package/package/src/expands/expands.css

@@ -0,0 +1,97 @@
+.expands {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .expand {
+    border: 1px solid #cfbdbd;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    cursor: pointer;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .expand-header-content {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .expand-header-content-default {
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+    }
+
+    .expand-header-custom {
+      .expand-header--children {
+        display: none;
+      }
+    }
+
+    &.expand--active {
+      height: 300px;
+      flex: 1;
+      min-height: 200px;
+      .expand-header {
+        background-color: #1d3758;
+        color: #fff;
+      }
+      .expand-header-custom {
+        .expand-header--children {
+          display: flex;
+        }
+
+        .expand-header--values {
+          display: none;
+        }
+      }
+
+      & .expand-body {
+        display: flex;
+      }
+    }
+
+    & .expand-header {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 15px;
+      color: #333;
+      background-color: #fff;
+      &.expand-header-custom {
+        margin-bottom: 1rem;
+      }
+
+      .expand-header-title-right {
+        font-size: 0.85rem;
+        font-weight: 600;
+      }
+
+      .expand-header-title-left {
+        margin-right: 0.5rem;
+        text-transform: uppercase;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+    & .expand-footer {
+      padding: 15px;
+    }
+    & .expand-body {
+      display: none;
+      flex: 1;
+      width: 100%;
+      padding-top: 1rem;
+      padding: 15px;
+      overflow: auto;
+      flex-direction: column;
+    }
+  }
+}

package/package/src/filAriane/FilAriane.tsx

@@ -0,0 +1,57 @@
+import { useCallback } from "react";
+import "./filAriane.css";
+import { FilArianeInterface } from "./filAriane.interface";
+type FilArianeProps = {
+  filArianes?: FilArianeInterface[];
+  currentFil?: number;
+  title?: string;
+  onClick?: (fil?: FilArianeInterface) => void;
+};
+export const FilAriane = ({
+  filArianes,
+  onClick,
+  currentFil,
+  title,
+}: FilArianeProps) => {
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>, fil?: FilArianeInterface) => {
+      if (!fil?.url) {
+        e.preventDefault();
+      }
+      if (onClick) {
+        onClick(fil);
+      }
+    },
+    [onClick]
+  );
+  return (
+    <div className="filArianes">
+      {title && (
+        <small className="filAriane font-weight-bold text-uppercase">
+          {title} <i className="filAriane-chevron bi bi-caret-right-fill"></i>
+        </small>
+      )}
+      {filArianes?.map((filAriane, index) => {
+        return (
+          <div
+            key={index}
+            className={`filAriane ${
+              filAriane.id === currentFil ? "filAriane--active" : ""
+            }`}
+          >
+            <a
+              href={filAriane.url || "#"}
+              onClick={(e) => handleClick(e, filAriane)}
+            >
+              {filAriane.title}
+            </a>
+
+            {!filAriane.isLast && (
+              <i className="filAriane-chevron bi bi-caret-right-fill"></i>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/package/src/filAriane/FilAriane.view.tsx

@@ -0,0 +1,28 @@
+import { FilAriane } from "./FilAriane";
+
+export const FilArianeView = () => {
+  const filArianes = [
+    {
+      id: 1,
+      title: "Home",
+      url: "/",
+      isCurrent: false,
+      isLast: false,
+    },
+    {
+      id: 2,
+      title: "Page",
+      url: "/page",
+      isCurrent: false,
+      isLast: false,
+    },
+    {
+      id: 3,
+      title: "Test",
+      url: "/page",
+      isCurrent: true,
+      isLast: true,
+    },
+  ];
+  return <FilAriane title={"test"} filArianes={filArianes} />;
+};

package/package/src/filAriane/filAriane.css

@@ -0,0 +1,23 @@
+.filArianes {
+  display: flex;
+  align-items: center;
+
+  .filAriane {
+    display: flex;
+    align-items: center;
+    &.filAriane--active {
+      color: #ff5555;
+    }
+    a {
+      font-size: 0.75rem;
+      padding: 0.5rem 0.25rem;
+    }
+
+    .filAriane-chevron {
+      margin-right: 0.25rem;
+      margin-left: 0.25rem;
+      font-size: 0.6rem;
+      color: #333;
+    }
+  }
+}

package/package/src/filAriane/filAriane.interface.tsx

@@ -0,0 +1,6 @@
+export interface FilArianeInterface {
+  id: number;
+  title?: string;
+  url?: string;
+  isLast: boolean;
+}