@julseb-lib/react 0.0.0

package/dist/lib/utils/linkify-text.tsx

@@ -0,0 +1,28 @@
+/*=============================================== Linkify text ===============================================*/
+
+import { Fragment } from "react"
+import { uuid } from "ts-utils-julseb"
+
+export const URL_REGEX =
+    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm
+
+export function linkifyText(text: string, blank?: boolean) {
+    const words: Array<string> = text?.split(" ")
+
+    return words?.map((word: string) =>
+        word.match(URL_REGEX) ? (
+            <Fragment key={uuid()}>
+                <a
+                    href={word}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    className="linkify"
+                >
+                    {word}
+                </a>{" "}
+            </Fragment>
+        ) : (
+            word + " "
+        )
+    )
+}

package/dist/lib/utils/options-markdown.ts

@@ -0,0 +1,133 @@
+/*=============================================== Options markdown container ===============================================*/
+
+import type { MarkdownToJSX } from "markdown-to-jsx"
+import { Text } from "../components/Text"
+import { Table } from "../components/Table"
+import type { LibMarkdownEditorOptions } from "../types"
+
+export const optionsMarkdown: MarkdownToJSX.Options = {
+    forceBlock: true,
+    wrapper: "div",
+    overrides: {
+        h1: {
+            component: Text,
+            props: {
+                tag: "h1",
+            },
+        },
+
+        h2: {
+            component: Text,
+            props: {
+                tag: "h2",
+            },
+        },
+
+        h3: {
+            component: Text,
+            props: {
+                tag: "h3",
+            },
+        },
+
+        h4: {
+            component: Text,
+            props: {
+                tag: "h4",
+            },
+        },
+
+        h5: {
+            component: Text,
+            props: {
+                tag: "h5",
+            },
+        },
+
+        h6: {
+            component: Text,
+            props: {
+                tag: "h6",
+            },
+        },
+
+        p: {
+            component: Text,
+            props: {
+                tag: "p",
+            },
+        },
+
+        strong: {
+            component: Text,
+            props: {
+                tag: "strong",
+            },
+        },
+
+        em: {
+            component: Text,
+            props: {
+                tag: "em",
+            },
+        },
+
+        ul: {
+            component: Text,
+            props: {
+                tag: "ul",
+            },
+        },
+
+        ol: {
+            component: Text,
+            props: {
+                tag: "ol",
+            },
+        },
+
+        dl: {
+            component: Text,
+            props: {
+                tag: "dl",
+            },
+        },
+
+        small: {
+            component: Text,
+            props: {
+                tag: "small",
+            },
+        },
+
+        blockquote: {
+            component: Text,
+            props: {
+                tag: "blockquote",
+            },
+        },
+
+        table: {
+            component: Table,
+        },
+    },
+}
+
+export const markdownEditorOptions: LibMarkdownEditorOptions = {
+    bold: true,
+    italic: true,
+    strikethrough: true,
+    ul: true,
+    ol: true,
+    link: true,
+    quote: true,
+    hr: true,
+    code: true,
+    codeBlock: true,
+    comment: true,
+    image: true,
+    editorCode: true,
+    editorLive: true,
+    editorPreview: true,
+    titles: true,
+}

package/dist/lib/utils/set-default-theme.ts

@@ -0,0 +1,14 @@
+/*=============================================== Set default theme ===============================================*/
+
+import type { FC } from "react"
+import { COLORS_LIGHT } from "../Variables"
+
+/**
+ * @description Sets ThemeLight as default for projects not using ThemeProvider
+ * @param arr: Array<FC>
+ */
+export function setDefaultTheme(arr: Array<FC>) {
+    return arr.forEach(
+        component => (component.defaultProps = { theme: COLORS_LIGHT })
+    )
+}

package/dist/styles-CVN0uFDU.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("ts-utils-julseb"),s=require("./index.cjs.js");require("react");require("react-router-dom");const i=r.video`
+    display: block;
+    width: ${({$width:e})=>t.stringifyPx(e)};
+    height: ${({$height:e})=>t.stringifyPx(e)};
+    object-fit: ${({$fit:e})=>e};
+    aspect-ratio: ${({$aspectRatio:e})=>e};
+`;s.setDefaultTheme([i]);exports.default=i;

package/dist/styles-DM9qlYpR.js

@@ -0,0 +1,16 @@
+import i from "styled-components";
+import { stringifyPx as o } from "ts-utils-julseb";
+import { setDefaultTheme as e } from "./index.es.js";
+import "react";
+import "react-router-dom";
+const r = i.video`
+    display: block;
+    width: ${({ $width: t }) => o(t)};
+    height: ${({ $height: t }) => o(t)};
+    object-fit: ${({ $fit: t }) => t};
+    aspect-ratio: ${({ $aspectRatio: t }) => t};
+`;
+e([r]);
+export {
+  r as default
+};

package/package.json

@@ -0,0 +1,102 @@
+{
+    "name": "@julseb-lib/react",
+    "version": "0.0.0",
+    "type": "module",
+    "license": "MIT",
+    "scripts": {
+        "dev": "vite --open",
+        "build": "tsc && vite build",
+        "lint": "./node_modules/.bin/eslint",
+        "preview": "vite preview",
+        "copy": "cp ./src/lib/index.css ./dist",
+        "copy-lib": "cp -a ./src/lib ./dist && rm -rf ./dist/lib/components/*/__tests__ ./dist/lib/components/*/__preview__",
+        "clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg ./dist/icons-alt",
+        "build-lib": "rm -rf ./dist && mkdir ./dist && tsc && vite build && yarn copy && yarn copy-lib && yarn clean",
+        "cy": "cypress",
+        "cy:open": "cypress open",
+        "cy:ct:run": "cypress run --component --browser electron",
+        "cy:ct:open": "cypress open --component --browser electron",
+        "plop": "plop --plopfile 'plop/plopfile.js'",
+        "plop:c": "yarn run plop component",
+        "plop:p": "yarn plop preview",
+        "plop:st": "yarn plop subtype",
+        "docgen": "react-docgen -o ./src/data/docgen.json ./src/lib/components/**/*.tsx",
+        "check-errors": "tsc --noEmit"
+    },
+    "dependencies": {
+        "classnames": "^2.5.1",
+        "fuse.js": "^7.0.0",
+        "markdown-to-jsx": "^7.5.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
+        "react-inlinesvg": "^4.1.3",
+        "react-router-dom": "^6.26.1",
+        "react-syntax-highlighter": "^15.5.0",
+        "styled-components": "^6.1.12",
+        "ts-utils-julseb": "2.4.5"
+    },
+    "devDependencies": {
+        "@eslint/compat": "^1.1.1",
+        "@eslint/js": "^9.9.1",
+        "@react-docgen/cli": "^2.0.3",
+        "@types/jest": "^29.5.12",
+        "@types/mocha": "^10.0.7",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-inlinesvg": "^1.0.0",
+        "@types/react-router-dom": "^5.3.3",
+        "@types/react-syntax-highlighter": "^15.5.13",
+        "@types/styled-components": "^5.1.34",
+        "@vitejs/plugin-react": "^4.3.1",
+        "axios": "^1.7.5",
+        "cypress": "^13.13.3",
+        "eslint": "^9.9.1",
+        "eslint-plugin-react": "^7.35.0",
+        "globals": "^15.9.0",
+        "plop": "^4.0.1",
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.3.0",
+        "vite": "^5.4.2",
+        "vite-plugin-checker": "^0.7.2",
+        "vite-plugin-dts": "^4.0.3"
+    },
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/julseb-lib-react.umd.js",
+    "module": "./dist/julseb-lib-react.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.umd.js",
+            "types": "./dist/lib/index.ts",
+            "default": "./dist/index.cjs.js"
+        },
+        "./index.css": {
+            "import": "./dist/index.css",
+            "require": "./dist/index.css",
+            "default": "./dist/index.css"
+        },
+        "./types": {
+            "import": "./dist/lib/types/index.ts",
+            "require": "./dist/lib/types/index.ts",
+            "types": "./dist/lib/types/index.ts",
+            "default": "./dist/lib/types/index.ts"
+        },
+        "./component-props": {
+            "import": "./dist/lib/types/components-props.ts",
+            "require": "./dist/lib/types/components-props.ts",
+            "types": "./dist/lib/types/components-props.ts",
+            "default": "./dist/lib/types/components-props.ts"
+        }
+    },
+    "typesVersions": {
+        "*": {
+            "types": [
+                "./dist/lib/types/index.d.ts"
+            ]
+        }
+    }
+}