kelt-ui-kit-react 1.8.3 → 1.8.4

package/package/src/datePicker/datePicker.css

@@ -1,77 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,97 +0,0 @@
-.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

@@ -1,57 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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

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