@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Loader/templates/LoaderThree.tsx

@@ -1,29 +1,30 @@
-/*=============================================== LoaderThree ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledLoaderThree } from "../styles"
 import type { ILibLoader } from "../types"
 
-export const LoaderThree = forwardRef<HTMLSpanElement, ILibLoader>(
-    (
-        { "data-testid": testid, as, size, color, borderWidth = 8, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledLoaderThree
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                $borderWidth={borderWidth}
-                {...rest}
-            >
-                <span />
-                <span />
-                <span />
-                <span />
-            </StyledLoaderThree>
-        )
-    }
-)
+export const LoaderThree: FC<ILibLoader> = ({
+    "data-testid": testid,
+    ref,
+    as,
+    size,
+    color,
+    borderWidth = 8,
+    ...rest
+}) => {
+    return (
+        <StyledLoaderThree
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $size={size}
+            $color={color}
+            $borderWidth={borderWidth}
+            {...rest}
+        >
+            <span />
+            <span />
+            <span />
+            <span />
+        </StyledLoaderThree>
+    )
+}

package/dist/lib/components/Loader/templates/LoaderTwo.tsx

@@ -1,24 +1,25 @@
-/*=============================================== LoaderTwo ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledLoaderTwo } from "../styles"
 import type { ILibLoader } from "../types"
 
-export const LoaderTwo = forwardRef<HTMLSpanElement, ILibLoader>(
-    (
-        { "data-testid": testid, as, size, color, borderWidth = 8, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledLoaderTwo
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                $borderWidth={borderWidth}
-                {...rest}
-            />
-        )
-    }
-)
+export const LoaderTwo: FC<ILibLoader> = ({
+    "data-testid": testid,
+    ref,
+    as,
+    size,
+    color,
+    borderWidth = 8,
+    ...rest
+}) => {
+    return (
+        <StyledLoaderTwo
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $size={size}
+            $color={color}
+            $borderWidth={borderWidth}
+            {...rest}
+        />
+    )
+}

package/dist/lib/components/Loader/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== Loader types ===============================================*/
-
 import type {
     LibAllColors,
     LibComponentBase,

package/dist/lib/components/Main/Main.tsx

@@ -1,45 +1,48 @@
-/*=============================================== Main component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledMain } from "./styles"
 import type { ILibMain } from "./types"
 
 /**
- * @description Returns a Main component
- * @link https://documentation-components-react.vercel.app/layouts/container
+ * Main component for rendering the main content area with flexible size, content size, and minimum height options.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop minHeight?: string | number
- * @prop size?: "default" | "large" | "form" | "full" | number
- * @prop contentSize?: "default" | "large" | "form" | number => only if size is set to full
+ * @param {Object} props - Main props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ *  * @param {ElementType} [props.as] - Custom element type to render as.
+ *  * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {"default" | "large" | "form" | "full" | number} [props.size] - Size of the main container.
+ * @param {"default" | "large" | "form" | number} [props.contentSize] - Content size (only if size is set to "full").
+ *  * @param {ReactNode} [props.children] - Main content.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Main component.
+ *
+ * @see https://documentation-components-react.vercel.app/layouts/container
+ * @example
+ * <Main size="large" minHeight={600}>
+ *   <h1>Welcome</h1>
+ *   <p>This is the main content area.</p>
+ * </Main>
  */
-export const Main = forwardRef<HTMLDivElement, ILibMain>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            size,
-            contentSize,
-            minHeight = "100vh",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledMain
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $contentSize={contentSize}
-                $minHeight={minHeight}
-                {...rest}
-            >
-                {children}
-            </StyledMain>
-        )
-    }
-)
+export const Main: FC<ILibMain> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    size,
+    contentSize,
+    ...rest
+}) => {
+    return (
+        <StyledMain
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $size={size}
+            $contentSize={contentSize}
+            {...rest}
+        >
+            {children}
+        </StyledMain>
+    )
+}

package/dist/lib/components/Main/index.ts

@@ -1,3 +1 @@
-/*=============================================== Main exports ===============================================*/
-
 export * from "./Main"

package/dist/lib/components/Main/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== Main styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { setDefaultTheme, Mixins, MEDIA, SPACERS, LAYOUTS } from "../../"
@@ -25,8 +23,8 @@ const StyledMain = styled.main<{
 }>`
     position: relative;
     width: 100%;
-    height: auto;
-    min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
+    height: 100%;
+    min-height: 100%;
     max-width: ${({ $size }) => getMainSize($size || "default")};
     padding: ${SPACERS.XXL} 0;
     ${Mixins.Flexbox({
@@ -51,8 +49,10 @@ const StyledMain = styled.main<{
             }
         `}
 
-    @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
+    @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
         height: unset;
+        min-height: unset;
+        padding: ${SPACERS.L} 0;
     }
 `
 

package/dist/lib/components/Main/types.ts

@@ -1,10 +1,6 @@
-/*=============================================== Main types ===============================================*/
-
 import type { LibComponentBase, LibMainSize } from "../../types"
 
-interface ILibMainBase extends LibComponentBase<HTMLDivElement> {
-    minHeight?: string | number
-}
+interface ILibMainBase extends LibComponentBase<HTMLDivElement> {}
 
 interface MainWithSize extends ILibMainBase {
     size?: Exclude<LibMainSize, "full">

package/dist/lib/components/MarkdownContainer/MarkdownContainer.tsx

@@ -1,35 +1,42 @@
-/*=============================================== MarkdownContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { optionsMarkdown } from "../../"
 import { StyledMarkdownContainer } from "./styles"
 import type { ILibMarkdownContainer } from "./types"
 
 /**
- * @description Returns a MarkdownContainer component
- * @link https://documentation-components-react.vercel.app/components/markdown-container
+ * MarkdownContainer component for rendering Markdown content with custom options and styling.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop options?: MarkdownToJSX.Options => imported from package markdown-to-jsx
+ * @param {Object} props - MarkdownContainer props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ *  * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {MarkdownToJSX.Options} [props.options] - Options for markdown-to-jsx rendering.
+ *  * @param {ReactNode} [props.children] - Markdown content to render.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered MarkdownContainer component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/markdown-container
+ * @example
+ * <MarkdownContainer>
+ *   {`# Hello World\nThis is **Markdown**!`}
+ * </MarkdownContainer>
  */
-export const MarkdownContainer = forwardRef<
-    HTMLDivElement,
-    ILibMarkdownContainer
->(
-    (
-        { "data-testid": testid, children, options = optionsMarkdown, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledMarkdownContainer
-                data-testid={testid}
-                ref={ref}
-                options={options}
-                {...rest}
-            >
-                {children}
-            </StyledMarkdownContainer>
-        )
-    }
-)
+export const MarkdownContainer: FC<ILibMarkdownContainer> = ({
+    "data-testid": testid,
+    ref,
+    children,
+    options = optionsMarkdown,
+    ...rest
+}) => {
+    return (
+        <StyledMarkdownContainer
+            data-testid={testid}
+            ref={ref}
+            options={options}
+            {...rest}
+        >
+            {children}
+        </StyledMarkdownContainer>
+    )
+}

package/dist/lib/components/MarkdownContainer/index.ts

@@ -1,3 +1 @@
-/*=============================================== MarkdownContainer exports ===============================================*/
-
 export * from "./MarkdownContainer"

package/dist/lib/components/MarkdownContainer/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== MarkdownContainer styles ===============================================*/
-
 import styled from "styled-components"
 import Markdown from "markdown-to-jsx"
 import { setDefaultTheme, Mixins } from "../../"

package/dist/lib/components/MarkdownContainer/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== MarkdownContainer types ===============================================*/
-
 import type { MarkdownToJSX } from "markdown-to-jsx"
 import type { LibComponentBase } from "../../types"