kelt-ui-kit-react 1.2.0 → 1.2.2

package/src/form/textArea/TextArea.tsx

@@ -1,53 +1,53 @@
-import { useCallback, useEffect, useState } from "react";
-import "./textArea.css";
-export type TextAreaProps = {
-  name: string;
-  value?: string;
-  disabled?: boolean;
-  width?: string;
-  className?: string;
-  onChange?: (value: string, name: string) => void;
-  placeholder?: string;
-  rows?: number;
-  cols?: number;
-};
-export const TextArea = ({
-  name,
-  value,
-  disabled,
-  width,
-  className,
-  onChange,
-  placeholder,
-  cols,
-  rows,
-}: TextAreaProps) => {
-  const [textAreaValue, setTextAreaValue] = useState(value);
-  useEffect(() => {
-    setTextAreaValue(value);
-  }, [value]);
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      setTextAreaValue(newValue);
-      if (onChange) {
-        onChange(newValue, name);
-      }
-    },
-    [onChange, name]
-  );
-  return (
-    <textarea
-      style={{ width: width }}
-      className={`form-control-textarea ${className ?? ""}`}
-      name={name}
-      disabled={disabled}
-      value={textAreaValue}
-      onChange={handleChange}
-      placeholder={placeholder}
-      cols={cols}
-      rows={rows}
-    />
-  );
-};
+import { useCallback, useEffect, useState } from "react";
+import "./textArea.css";
+export type TextAreaProps = {
+  name: string;
+  value?: string;
+  disabled?: boolean;
+  width?: string;
+  className?: string;
+  onChange?: (value: string, name: string) => void;
+  placeholder?: string;
+  rows?: number;
+  cols?: number;
+};
+export const TextArea = ({
+  name,
+  value,
+  disabled,
+  width,
+  className,
+  onChange,
+  placeholder,
+  cols,
+  rows,
+}: TextAreaProps) => {
+  const [textAreaValue, setTextAreaValue] = useState(value);
+  useEffect(() => {
+    setTextAreaValue(value);
+  }, [value]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setTextAreaValue(newValue);
+      if (onChange) {
+        onChange(newValue, name);
+      }
+    },
+    [onChange, name]
+  );
+  return (
+    <textarea
+      style={{ width: width }}
+      className={`form-control-textarea ${className ?? ""}`}
+      name={name}
+      disabled={disabled}
+      value={textAreaValue}
+      onChange={handleChange}
+      placeholder={placeholder}
+      cols={cols}
+      rows={rows}
+    />
+  );
+};

package/src/form/textArea/TextArea.view.tsx

@@ -1,34 +1,34 @@
-import { useMemo } from "react";
-import { TextArea } from "./TextArea";
-
-export const TextAreaView = () => {
-  const textAreaData = useMemo(
-    () => [
-      {
-        name: "textArea",
-        value:
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-        placeholder: "Enter text here...",
-        rows: 5,
-        cols: 50,
-      },
-    ],
-    []
-  );
-  return (
-    <div>
-      <h1>TextArea</h1>
-      {textAreaData.map((textArea, index) => (
-        <div key={index}>
-          <TextArea
-            name={textArea.name}
-            value={textArea.value}
-            placeholder={textArea.placeholder}
-            rows={textArea.rows}
-            cols={textArea.cols}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
+import { useMemo } from "react";
+import { TextArea } from "./TextArea";
+
+export const TextAreaView = () => {
+  const textAreaData = useMemo(
+    () => [
+      {
+        name: "textArea",
+        value:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        placeholder: "Enter text here...",
+        rows: 5,
+        cols: 50,
+      },
+    ],
+    []
+  );
+  return (
+    <div>
+      <h1>TextArea</h1>
+      {textAreaData.map((textArea, index) => (
+        <div key={index}>
+          <TextArea
+            name={textArea.name}
+            value={textArea.value}
+            placeholder={textArea.placeholder}
+            rows={textArea.rows}
+            cols={textArea.cols}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/form/textArea/textArea.css

@@ -1,9 +1,9 @@
-.form-control-textarea {
-  border: 1px solid #cfbdbd;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  margin: 0.25rem 0;
-  min-width: 250px;
-  resize: none;
-  font-size: 0.9rem;
-}
+.form-control-textarea {
+  border: 1px solid #cfbdbd;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin: 0.25rem 0;
+  min-width: 250px;
+  resize: none;
+  font-size: 0.9rem;
+}

package/src/grid/Grid.tsx

@@ -1,21 +1,21 @@
-import { Col } from "./col/Col";
-import { Container } from "./container/Container";
-import { GridInterface } from "./grid.interface";
-import { Row } from "./row/Row";
-type GridProps = {
-  items: GridInterface[];
-  className?: string;
-  scroll?: boolean;
-};
-
-export const Grid = ({ items, className, scroll }: GridProps) => {
-  return (
-    <Container>
-      <Row scroll={scroll} className={className}>
-        {items.map((item, id) => (
-          <Col key={id} {...item} />
-        ))}
-      </Row>
-    </Container>
-  );
-};
+import { Col } from "./col/Col";
+import { Container } from "./container/Container";
+import { GridInterface } from "./grid.interface";
+import { Row } from "./row/Row";
+type GridProps = {
+  items: GridInterface[];
+  className?: string;
+  scroll?: boolean;
+};
+
+export const Grid = ({ items, className, scroll }: GridProps) => {
+  return (
+    <Container>
+      <Row scroll={scroll} className={className}>
+        {items.map((item, id) => (
+          <Col key={id} {...item} />
+        ))}
+      </Row>
+    </Container>
+  );
+};

package/src/grid/Grid.view.tsx

@@ -1,24 +1,24 @@
-import { Grid } from "./Grid";
-import { GridInterface } from "./grid.interface";
-
-export const GridView = (): JSX.Element => {
-  const mockItems: GridInterface[] = [
-    {
-      md: 6,
-      lg: 4,
-      children: <>test</>,
-    },
-    {
-      md: 6,
-      lg: 4,
-      children: <>test 2 </>,
-    },
-    {
-      md: 6,
-      lg: 4,
-      children: <>test 3 </>,
-    },
-  ];
-
-  return <Grid items={mockItems} />;
-};
+import { Grid } from "./Grid";
+import { GridInterface } from "./grid.interface";
+
+export const GridView = (): JSX.Element => {
+  const mockItems: GridInterface[] = [
+    {
+      md: 6,
+      lg: 4,
+      children: <>test</>,
+    },
+    {
+      md: 6,
+      lg: 4,
+      children: <>test 2 </>,
+    },
+    {
+      md: 6,
+      lg: 4,
+      children: <>test 3 </>,
+    },
+  ];
+
+  return <Grid items={mockItems} />;
+};

package/src/grid/col/Col.tsx

@@ -1,15 +1,15 @@
-import { ColStyled } from "./colStyled/ColStyled";
-type ColProps = {
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  children: React.ReactNode;
-};
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, children }) => {
-  return (
-    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg}>
-      {children}
-    </ColStyled>
-  );
-};
+import { ColStyled } from "./colStyled/ColStyled";
+type ColProps = {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  children: React.ReactNode;
+};
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, children }) => {
+  return (
+    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg}>
+      {children}
+    </ColStyled>
+  );
+};

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,41 +1,41 @@
-import styled, { css } from "styled-components";
-const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
-type ColStyledProps = {
-  $xs?: number;
-  $sm?: number;
-  $md?: number;
-  $lg?: number;
-};
-export const ColStyled = styled.div<ColStyledProps>`
-  padding: 0 15px;
-  flex: 0 0 ${({ $xs }) => getColWidth($xs)};
-  max-width: ${({ $xs }) => getColWidth($xs)};
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  ${({ $sm }) =>
-    $sm &&
-    css`
-      @container (min-width: 576px) {
-        flex: 0 0 ${getColWidth($sm)};
-        max-width: ${getColWidth($sm)};
-      }
-    `}
-
-  ${({ $md }) =>
-    $md &&
-    css`
-      @container (min-width: 768px) {
-        flex: 0 0 ${getColWidth($md)};
-        max-width: ${getColWidth($md)};
-      }
-    `}
-
-  ${({ $lg }) =>
-    $lg &&
-    css`
-      @container (min-width: 992px) {
-        flex: 0 0 ${getColWidth($lg)};
-        max-width: ${getColWidth($lg)};
-      }
-    `}
-`;
+import styled, { css } from "styled-components";
+const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
+type ColStyledProps = {
+  $xs?: number;
+  $sm?: number;
+  $md?: number;
+  $lg?: number;
+};
+export const ColStyled = styled.div<ColStyledProps>`
+  padding: 0 15px;
+  flex: 0 0 ${({ $xs }) => getColWidth($xs)};
+  max-width: ${({ $xs }) => getColWidth($xs)};
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  ${({ $sm }) =>
+    $sm &&
+    css`
+      @container (min-width: 576px) {
+        flex: 0 0 ${getColWidth($sm)};
+        max-width: ${getColWidth($sm)};
+      }
+    `}
+
+  ${({ $md }) =>
+    $md &&
+    css`
+      @container (min-width: 768px) {
+        flex: 0 0 ${getColWidth($md)};
+        max-width: ${getColWidth($md)};
+      }
+    `}
+
+  ${({ $lg }) =>
+    $lg &&
+    css`
+      @container (min-width: 992px) {
+        flex: 0 0 ${getColWidth($lg)};
+        max-width: ${getColWidth($lg)};
+      }
+    `}
+`;

package/src/grid/container/Container.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import "./container.css";
-type ContainerProps = {
-  children: React.ReactNode;
-};
-export const Container: React.FC<ContainerProps> = ({ children }) => (
-  <div className="container">{children}</div>
-);
+import React from "react";
+import "./container.css";
+type ContainerProps = {
+  children: React.ReactNode;
+};
+export const Container: React.FC<ContainerProps> = ({ children }) => (
+  <div className="container">{children}</div>
+);

package/src/grid/container/container.css

@@ -1,5 +1,5 @@
-.container {
-  width: 100%;
-  margin: 0 auto;
-  padding: 0 15px;
-}
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 15px;
+}

package/src/grid/grid.interface.tsx

@@ -1,7 +1,7 @@
-export interface GridInterface {
-  sm?: number;
-  xs?: number;
-  md?: number;
-  lg?: number;
-  children: React.ReactNode;
-}
+export interface GridInterface {
+  sm?: number;
+  xs?: number;
+  md?: number;
+  lg?: number;
+  children: React.ReactNode;
+}

package/src/grid/row/Row.tsx

@@ -1,12 +1,12 @@
-import "./row.css";
-type RowProps = {
-  children: React.ReactNode;
-  className?: string;
-  scroll?: boolean;
-};
-
-export const Row: React.FC<RowProps> = ({ children, className, scroll }) => (
-  <div className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""}`}>
-    {children}
-  </div>
-);
+import "./row.css";
+type RowProps = {
+  children: React.ReactNode;
+  className?: string;
+  scroll?: boolean;
+};
+
+export const Row: React.FC<RowProps> = ({ children, className, scroll }) => (
+  <div className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""}`}>
+    {children}
+  </div>
+);

package/src/grid/row/row.css

@@ -1,18 +1,18 @@
-.grid-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -15px;
-  &.scroll {
-    overflow-x: auto;
-    flex-wrap: nowrap;
-  }
-}
-
-@container (min-width: 998px) {
-  .grid-row {
-    &.scroll {
-      overflow-x: auto;
-      flex-wrap: wrap;
-    }
-  }
-}
+.grid-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -15px;
+  &.scroll {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+}
+
+@container (min-width: 998px) {
+  .grid-row {
+    &.scroll {
+      overflow-x: auto;
+      flex-wrap: wrap;
+    }
+  }
+}

package/src/header/Header.tsx

@@ -1,51 +1,51 @@
-import { useCallback, useRef, useState } from "react";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import { OverlayPanel } from "../overlayPanel/OverlayPanel";
-import "./header.css";
-import { HeaderInterface } from "./header.interface";
-
-export const Header = ({
-  children,
-  logo,
-  onClickMenu,
-  userChildren,
-  positionFixed,
-  onClickLogo,
-}: HeaderInterface): JSX.Element => {
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-  const onClickUser = useCallback(() => {
-    setOpenOverlay(!openOverlay);
-  }, [openOverlay, setOpenOverlay]);
-  return (
-    <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
-      <div className="flex-1 d-flex align-items-center">
-        <span onClick={onClickMenu}>
-          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
-        </span>
-        <span
-          className={`header-logo ${onClickLogo && "cursor-pointer"} `}
-          onClick={onClickLogo}
-        >
-          {logo && <img src={logo} alt="logo" />}
-        </span>
-      </div>
-      <div className="d-flex align-items-center">
-        {children}
-        <div ref={refButton} onClick={onClickUser}>
-          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-person-circle"></Icon>
-        </div>
-        {openOverlay && refButton.current && (
-          <OverlayPanel
-            position="bottomRight"
-            show={openOverlay}
-            closeOverlay={setOpenOverlay}
-            referenceElement={refButton.current}
-            children={userChildren}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
+import { useCallback, useRef, useState } from "react";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import { OverlayPanel } from "../overlayPanel/OverlayPanel";
+import "./header.css";
+import { HeaderInterface } from "./header.interface";
+
+export const Header = ({
+  children,
+  logo,
+  onClickMenu,
+  userChildren,
+  positionFixed,
+  onClickLogo,
+}: HeaderInterface): JSX.Element => {
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(false);
+  const onClickUser = useCallback(() => {
+    setOpenOverlay(!openOverlay);
+  }, [openOverlay, setOpenOverlay]);
+  return (
+    <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
+      <div className="flex-1 d-flex align-items-center">
+        <span onClick={onClickMenu}>
+          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
+        </span>
+        <span
+          className={`header-logo ${onClickLogo && "cursor-pointer"} `}
+          onClick={onClickLogo}
+        >
+          {logo && <img src={logo} alt="logo" />}
+        </span>
+      </div>
+      <div className="d-flex align-items-center">
+        {children}
+        <div ref={refButton} onClick={onClickUser}>
+          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-person-circle"></Icon>
+        </div>
+        {openOverlay && refButton.current && (
+          <OverlayPanel
+            position="bottomRight"
+            show={openOverlay}
+            closeOverlay={setOpenOverlay}
+            referenceElement={refButton.current}
+            children={userChildren}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/header/Header.view.tsx

@@ -1,5 +1,5 @@
-import { Header } from "./Header";
-
-export const HeaderView = (): JSX.Element => {
-  return <Header />;
-};
+import { Header } from "./Header";
+
+export const HeaderView = (): JSX.Element => {
+  return <Header />;
+};