@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,28 @@
+/*=============================================== Linkify text ===============================================*/
+
+import { Fragment } from "react"
+import { uuid } from "@julseb-lib/utils"
+
+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 const 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 const setDefaultTheme = (arr: Array<FC>) => {
+    return arr.forEach(
+        component => (component.prototype = { theme: COLORS_LIGHT })
+    )
+}

package/dist/styles-BzlWff0X.cjs

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

package/dist/styles-D2xrGFT_.js

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

package/package.json

@@ -1,75 +1,79 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.63",
-    "private": false,
+    "version": "0.0.65",
     "type": "module",
+    "license": "MIT",
     "scripts": {
-        "dev": "vite",
-        "copy": "cp ./src/lib/index.css ./dist",
-        "clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg",
-        "copy-types": "cp -a ./src/lib/types ./types",
-        "build-types": "yarn copy-types && tsc --p tsconfig-types.json",
-        "move-types": "mv ./types ./dist",
-        "build": "vite build && yarn copy && yarn clean && yarn build-types && yarn move-types",
+        "dev": "vite --open",
+        "build": "vite build",
+        "lint": "./node_modules/.bin/eslint",
         "preview": "vite preview",
-        "lint": "./node_modules/.bin/eslint"
+        "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 && 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",
+        "cssgen": "cssjson src/lib/index.css --output src/data/styles.json",
+        "check-errors": "tsc --noEmit"
     },
     "dependencies": {
         "@julseb-lib/utils": "^0.0.2",
-        "classnames": "^2.3.2",
-        "fuse.js": "^6.6.2",
-        "markdown-to-jsx": "^7.2.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "classnames": "^2.5.1",
+        "fuse.js": "^7.0.0",
+        "markdown-to-jsx": "^7.6.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-helmet-async": "^2.0.5",
-        "react-inlinesvg": "^3.0.2",
-        "react-router-dom": "^6.11.1",
-        "react-syntax-highlighter": "^15.5.0",
-        "styled-components": "^5.3.10"
+        "react-inlinesvg": "^4.1.4",
+        "react-router-dom": "^6.28.0",
+        "react-syntax-highlighter": "^15.6.1",
+        "styled-components": "^6.1.13"
     },
     "devDependencies": {
-        "@babel/core": "^7.21.8",
-        "@types/node": "^20.1.2",
-        "@types/react": "^18.2.6",
-        "@types/react-dom": "^18.2.4",
-        "@types/react-helmet": "^6.1.6",
+        "@eslint/compat": "^1.2.2",
+        "@eslint/js": "^9.14.0",    
+        "@react-docgen/cli": "^2.0.4",
+        "@types/jest": "^29.5.14",
+        "@types/mocha": "^10.0.9",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "@types/react-inlinesvg": "^1.0.0",
-        "@types/react-syntax-highlighter": "^15.5.6",
-        "@types/styled-components": "^5.1.26",
-        "@vitejs/plugin-react": "^4.0.0",
-        "axios": "^1.4.0",
-        "babel-loader": "^9.1.2",
-        "eslint": "^8.40.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-config-react-app": "^7.0.1",
-        "eslint-plugin-prettier": "^4.2.1",
-        "json": "^11.0.0",
-        "prettier": "^2.8.8",
-        "prop-types": "^15.8.1",
-        "tslib": "^2.5.0",
-        "typescript": "^5.0.4",
-        "vite": "^4.3.5",
-        "vite-plugin-dts": "^2.3.0",
-        "vite-plugin-eslint": "^1.8.1"
-    },
-    "license": "MIT",
-    "peerDependencies": {
-        "react": "^16.8.0 || 17.x || 18.x",
-        "react-dom": "^16.8.0 || 17.x || 18.x",
-        "styled-components": "^5.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.3",
+        "axios": "^1.7.7",
+        "cssjson-cli": "^1.0.1",
+        "cypress": "^13.15.2",
+        "eslint": "^9.14.0",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.12.0",
+        "plop": "^4.0.1",
+        "typescript": "^5.6.3",
+        "typescript-eslint": "^8.14.0",
+        "vite": "^5.4.11",
+        "vite-plugin-checker": "^0.8.0",
+        "vite-plugin-dts": "^4.3.0"
     },
     "files": [
         "dist"
     ],
-    "main": "./dist/tsx-library-julseb.umd.js",
-    "module": "./dist/tsx-library-julseb.es.js",
+    "main": "./dist/julseb-lib-react.umd.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
-            "import": "./dist/tsx-library-julseb.es.js",
-            "require": "./dist/tsx-library-julseb.umd.js",
-            "types": "./dist/index.d.ts",
-            "default": "./dist/tsx-library-julseb.cjs.js"
+            "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",
@@ -77,10 +81,16 @@
             "default": "./dist/index.css"
         },
         "./types": {
-            "import": "./dist/types/index.d.ts",
-            "require": "./dist/types/index.d.ts",
-            "types": "./dist/types/index.d.ts",
-            "default": "./dist/types/index.d.ts"
+            "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": {