@julseb-lib/react 0.1.2 → 0.1.4

package/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+indent_size = 4
+indent_style = tab
+charset = utf-8
+
+[*.ts, *.tsx]
+insert_final_newline = true

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "arrowParens": "avoid",
+    "semi": false,
+    "tabWidth": 4
+}

package/README.md

@@ -16,4 +16,4 @@ yarn add @julseb-lib/react
 
 ## Full documentation
 
-Find the full documentation here: [https://doc-julseb-lib-react.vercel.app/](https://doc-julseb-lib-react.vercel.app/).
+Find the full documentation here: [https://julseb-lib-documentation.vercel.app/](https://julseb-lib-documentation.vercel.app/).

package/eslint.config.js

@@ -0,0 +1,177 @@
+import globals from "globals"
+import pluginJs from "@eslint/js"
+import tseslint from "typescript-eslint"
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"
+import { fixupConfigRules } from "@eslint/compat"
+
+export default [
+	{ files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+	{ languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+	{ languageOptions: { globals: globals.browser } },
+	pluginJs.configs.recommended,
+	...tseslint.configs.recommended,
+	...fixupConfigRules(pluginReactConfig),
+	{
+		rules: {
+			"no-duplicate-imports": "error",
+			"react/react-in-jsx-scope": "off",
+			"react/no-unescaped-entities": "off",
+			"react/display-name": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"no-case-declarations": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"warn",
+				{
+					vars: "all",
+					args: "after-used",
+					ignoreRestSiblings: true,
+					destructuredArrayIgnorePattern: "[_]",
+				},
+			],
+			"@typescript-eslint/ban-types": "off",
+			"no-constant-binary-expression": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+			"no-useless-escape": "off",
+			"no-irregular-whitespace": "off",
+			"@typescript-eslint/consistent-type-imports": "warn",
+			"@typescript-eslint/no-unused-expressions": "warn",
+			"@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+			"@typescript-eslint/consistent-indexed-object-style": "off",
+			"@typescript-eslint/no-inferrable-types": "off",
+
+			"react/function-component-definition": [
+				"warn",
+				{
+					namedComponents: ["arrow-function"],
+				},
+			],
+			"react/jsx-key": "warn",
+			"@typescript-eslint/consistent-type-definitions": "off",
+			"@typescript-eslint/array-type": [
+				"warn",
+				{
+					default: "generic",
+					readonly: "generic",
+				},
+			],
+			"no-restricted-exports": [
+				"warn",
+				{ restrictDefaultExports: { direct: true } },
+			],
+			"react/prop-types": "off",
+			"no-empty-pattern": "warn",
+			"@typescript-eslint/no-empty-object-type": [
+				"warn",
+				{ allowInterfaces: "with-single-extends" },
+			],
+			// "prefer-arrow-callback": "warn",
+		},
+	},
+	{
+		ignores: [
+			"eslint.config.js",
+			"cypress.config.ts",
+			"plop/*",
+			"vite.config.ts",
+			"dist",
+
+			// TODO remove
+			// "src/pages",
+			// "src/data",
+			// "src/components",
+			// "src/lib/components/Accordion",
+			// "src/lib/components/Alert",
+			// "src/lib/components/Aside",
+			// "src/lib/components/Autocomplete",
+			// "src/lib/components/Avatar",
+			// "src/lib/components/BackToTop",
+			// "src/lib/components/Badge",
+			// "src/lib/components/Breadcrumbs",
+			// "src/lib/components/Burger",
+			// "src/lib/components/Button",
+			// "src/lib/components/ButtonGroup",
+			// "src/lib/components/ButtonIcon",
+			// "src/lib/components/Card",
+			// "src/lib/components/CodeContainer",
+			// "src/lib/components/ComponentsMixins",
+			// "src/lib/components/Cover",
+			// "src/lib/components/Datepicker",
+			// "src/lib/components/DragList",
+			// "src/lib/components/Drawer",
+			// "src/lib/components/Dropdown",
+			// "src/lib/components/Fade",
+			// "src/lib/components/Fallback",
+			// "src/lib/components/Fieldset",
+			// "src/lib/components/Flexbox",
+			// "src/lib/components/Footer",
+			// "src/lib/components/Form",
+			// "src/lib/components/FullBleed",
+			// "src/lib/components/Grid",
+			// "src/lib/components/Header",
+			// "src/lib/components/Helmet",
+			// "src/lib/components/Highlight",
+			// "src/lib/components/Hr",
+			// "src/lib/components/Icon",
+			// "src/lib/components/IconMenu",
+			// "src/lib/components/Image",
+			// "src/lib/components/Input",
+			// "src/lib/components/InputCheck",
+			// "src/lib/components/InputComponents",
+			// "src/lib/components/InputContainer",
+			// "src/lib/components/InputCounter",
+			// "src/lib/components/InputImage",
+			// "src/lib/components/InputPhone",
+			// "src/lib/components/InputPin",
+			// "src/lib/components/InputSlider",
+			// "src/lib/components/Key",
+			// "src/lib/components/LibIcon",
+			// "src/lib/components/Linkify",
+			// "src/lib/components/ListGroup",
+			// "src/lib/components/Loader",
+			// "src/lib/components/Main",
+			// "src/lib/components/MarkdownContainer",
+			// "src/lib/components/MarkdownEditor",
+			// "src/lib/components/Masonry",
+			// "src/lib/components/Messaging",
+			// "src/lib/components/Modal",
+			// "src/lib/components/PageLayout",
+			// "src/lib/components/PageLoading",
+			// "src/lib/components/Pagination",
+			// "src/lib/components/Paginator",
+			// "src/lib/components/ProgressBar",
+			// "src/lib/components/ProgressCircle",
+			// "src/lib/components/Rating",
+			// "src/lib/components/ResetScroll",
+			// "src/lib/components/Section",
+			// "src/lib/components/Select",
+			// "src/lib/components/Skeleton",
+			// "src/lib/components/Slideshow",
+			// "src/lib/components/SrOnly",
+			// "src/lib/components/Stepper",
+			// "src/lib/components/Sticky",
+			// "src/lib/components/Table",
+			// "src/lib/components/Tabs",
+			// "src/lib/components/Tag",
+			// "src/lib/components/Text",
+			// "src/lib/components/TextIcon",
+			// "src/lib/components/Timepicker",
+			// "src/lib/components/Toast",
+			// "src/lib/components/Tooltip",
+			// "src/lib/components/Truncate",
+			// "src/lib/components/Video",
+			// "src/lib/components/Wrapper",
+			// "src/lib/components/Youtube",
+
+			// "src/lib/components",
+			// "src/lib/context",
+			// "src/lib/hooks",
+			// "src/lib/icons",
+			// "src/lib/lib-utils",
+			// "src/lib/types",
+			// "src/lib/utils",
+		],
+	},
+	{
+		files: ["src/*"],
+	},
+]

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Julseb Lib Tailwind</title>
+	</head>
+
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/package.json

@@ -1,20 +1,22 @@
 {
 	"name": "@julseb-lib/react",
-	"version": "0.1.2",
+	"private": false,
+	"version": "0.1.4",
 	"type": "module",
-	"license": "MIT",
 	"scripts": {
 		"dev": "vite --open",
 		"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__",
+		"copy-lib": "cp -a ./src/lib ./dist && rm -rf ./dist/lib/components/*/__preview__",
 		"clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg ./dist/icons-alt",
 		"build": "vite build && yarn copy && yarn copy-lib && yarn clean",
 		"plop": "cross-env NODE_OPTIONS='--import tsx' plop --plopfile=./plop/plopfile.ts",
 		"plop:c": "yarn plop component",
 		"plop:p": "yarn plop preview",
 		"plop:st": "yarn plop subtype",
+		"plop:g": "yarn plop generator",
+		"plop:d": "yarn plop demo",
 		"cy": "cypress",
 		"cy:open": "cypress open",
 		"cy:ct:run": "cypress run --component --browser electron",
@@ -24,85 +26,57 @@
 		"check-errors": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@julseb-lib/utils": "^0.0.12",
-		"classnames": "^2.5.1",
+		"@julseb-lib/utils": "^0.0.13",
+		"@tailwindcss/forms": "^0.5.10",
+		"@tailwindcss/postcss": "^4.1.11",
+		"@tailwindcss/vite": "^4.1.11",
+		"clsx": "^2.1.1",
 		"fuse.js": "^7.1.0",
-		"markdown-to-jsx": "^7.7.6",
+		"markdown-to-jsx": "^7.7.10",
+		"postcss": "^8.5.6",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
-		"react-inlinesvg": "^4.2.0",
-		"react-router-dom": "^7.6.0",
+		"react-helmet-async": "^2.0.5",
+		"react-icons": "^5.5.0",
+		"react-router-dom": "^7.6.3",
 		"react-syntax-highlighter": "^15.6.1",
-		"styled-components": "^6.1.18"
+		"react-toastify": "^11.0.5",
+		"tailwind-merge": "^3.3.1",
+		"tailwindcss": "^4.1.11",
+		"tailwindest": "^3.2.1"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.9",
-		"@eslint/js": "^9.27.0",
+		"@eslint/compat": "^1.3.1",
+		"@eslint/js": "^9.30.0",
 		"@react-docgen/cli": "^3.0.0",
 		"@types/figlet": "^1.7.0",
-		"@types/jest": "^29.5.14",
-		"@types/mocha": "^10.0.10",
-		"@types/react": "^19.1.4",
-		"@types/react-dom": "^19.1.5",
+		"@types/node": "^24.0.8",
+		"@types/react": "^19.1.8",
+		"@types/react-dom": "^19.1.6",
 		"@types/react-router-dom": "^5.3.3",
 		"@types/react-syntax-highlighter": "^15.5.13",
-		"@types/styled-components": "^5.1.34",
-		"@vitejs/plugin-react": "^4.4.1",
-		"axios": "^1.9.0",
+		"@typescript-eslint/eslint-plugin": "^8.35.1",
+		"@typescript-eslint/parser": "^8.35.1",
+		"@vitejs/plugin-react": "^4.6.0",
 		"cross-env": "^7.0.3",
 		"cssjson-cli": "^1.0.1",
-		"cypress": "^14.3.3",
-		"eslint": "^9.27.0",
+		"dotenv": "^17.0.0",
+		"eslint": "^9.30.0",
+		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-refresh": "^0.4.20",
 		"figlet": "^1.8.1",
-		"globals": "^16.1.0",
+		"globals": "^16.3.0",
 		"plop": "^4.0.1",
-		"tsx": "^4.19.4",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.32.1",
-		"vite": "^6.3.5",
+		"prettier": "^3.6.2",
+		"prettier-plugin-tailwindcss": "^0.6.13",
+		"tsx": "^4.20.3",
+		"typescript": "~5.8.3",
+		"typescript-eslint": "^8.35.1",
+		"vite": "^7.0.0",
 		"vite-plugin-checker": "^0.9.3",
-		"vite-plugin-dts": "^4.5.4"
-	},
-	"peerDependencies": {
-		"react-router-dom": "^7.0.1"
-	},
-	"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",
-			"types": "./dist/lib/index.ts",
-			"require": "./dist/index.umd.js",
-			"default": "./dist/index.cjs.js"
-		},
-		"./index.css": {
-			"require": "./dist/index.css",
-			"import": "./dist/index.css",
-			"default": "./dist/index.css"
-		},
-		"./types": {
-			"require": "./dist/lib/types/index.ts",
-			"types": "./dist/lib/types/index.ts",
-			"import": "./dist/lib/types/index.ts",
-			"default": "./dist/lib/types/index.ts"
-		},
-		"./component-props": {
-			"require": "./dist/lib/types/components-props.ts",
-			"types": "./dist/lib/types/components-props.ts",
-			"import": "./dist/lib/types/components-props.ts",
-			"default": "./dist/lib/types/components-props.ts"
-		}
-	},
-	"typesVersions": {
-		"*": {
-			"types": [
-				"./dist/lib/types/index.d.ts"
-			]
-		}
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-eslint": "^1.8.1"
 	}
 }

package/plop/actions/index.ts

@@ -0,0 +1 @@
+export { default as runCommand } from "./run-command.js"

package/plop/actions/run-command.ts

@@ -0,0 +1,21 @@
+import type { NodePlopAPI } from "plop"
+import { exec } from "child_process"
+
+export default (plop: NodePlopAPI) => {
+    const { setActionType } = plop
+
+    setActionType(
+        "runCommand",
+        (_, config) =>
+            new Promise((resolve, reject) => {
+                exec(config.command, (error, stdout) => {
+                    if (error) {
+                        console.error(error.message)
+                        reject(error)
+                    }
+
+                    resolve(stdout)
+                })
+            })
+    )
+}

package/plop/generators/component.ts

@@ -0,0 +1,87 @@
+import { NodePlopAPI } from "plop"
+
+export default (plop: NodePlopAPI) => {
+	const { setGenerator } = plop
+
+	setGenerator("component", {
+		description: "React component",
+		prompts: [
+			{
+				type: "input",
+				name: "name",
+				message: "Enter component's name",
+			},
+			{
+				type: "list",
+				name: "category",
+				message: "Which category?",
+				choices: ["styles", "layouts", "components", "helpers"],
+				default: "components",
+			},
+			{
+				type: "input",
+				name: "tag",
+				message: "Enter HTML tag",
+				default: "div",
+			},
+			{
+				type: "input",
+				name: "attribute",
+				message: "Enter HTML attribute",
+				default: data => data.tag,
+			},
+			{
+				type: "confirm",
+				name: "children",
+				message: "Add `children` prop?",
+				default: true,
+			},
+		],
+		actions: [
+			"Creating your component",
+			{
+				type: "addMany",
+				destination: "../src/lib/components/{{ pascalCase name }}",
+				templateFiles: "./templates/component/*.hbs",
+				base: "./templates/component",
+				verbose: false,
+			},
+			"Creating previews file",
+			{
+				type: "add",
+				path: "../src/lib/components/{{ pascalCase name }}/__preview__/{{ pascalCase name }}.preview.tsx",
+				templateFile: "./templates/component/__preview__/preview.hbs",
+			},
+			"Importing and adding your component in components file",
+			{
+				type: "modify",
+				path: "../src/data/components.tsx",
+				template:
+					'import { {{ camelCase name }}Preview } from "../lib/components/{{ pascalCase name }}/__preview__/{{ pascalCase name }}.preview"\n$1',
+				pattern: /(\/\* Prepend import - DO NOT REMOVE \*\/)/g,
+			},
+			{
+				type: "modify",
+				path: "../src/data/components.tsx",
+				template: "{{ camelCase name }}Preview,\n\t$1",
+				pattern: /(\/\* Prepend array - DO NOT REMOVE \*\/)/g,
+			},
+			"Exporting your new component from the library",
+			{
+				type: "modify",
+				path: "../src/lib/index.ts",
+				template:
+					'export * from "./components/{{ pascalCase name }}"\n$1',
+				pattern: /(\/\* Prepend here - DO NOT REMOVE \*\/)/g,
+			},
+			"Exporting your component's type from the library",
+			{
+				type: "modify",
+				path: "../src/lib/types/components-props.ts",
+				template:
+					'export * from "../components/{{ pascalCase name }}/types"\n$1',
+				pattern: /(\/\* Prepend here - DO NOT REMOVE \*\/)/g,
+			},
+		],
+	})
+}

package/plop/generators/demo.ts

@@ -0,0 +1,38 @@
+import type { NodePlopAPI, ActionType } from "plop"
+import { BASE_PATH } from "../utils"
+
+export default (plop: NodePlopAPI) => {
+	const { setGenerator } = plop
+
+	setGenerator("demo", {
+		description: "Generates a demo page",
+		prompts: [
+			{ type: "input", name: "name", message: "Enter demo's name" },
+		],
+		actions: [
+			{
+				type: "add",
+				path: `${BASE_PATH}/pages/demos/{{>pascalName}}Demo.tsx`,
+				templateFile: "./templates/demo.hbs",
+			},
+			{
+				type: "modify",
+				path: `${BASE_PATH}/routes/index.tsx`,
+				template:
+					'import { {{>pascalName}}Demo } from "../pages/demos/{{>pascalName}}Demo"\n$1',
+				pattern: /(\/\* Prepend demo import - DO NOT REMOVE \*\/)/g,
+			},
+			{
+				type: "modify",
+				path: `${BASE_PATH}/routes/index.tsx`,
+				template:
+					'{ path: "/{{>kebabName}}/demo", element: <{{>pascalName}}Demo /> },\n\t$1',
+				pattern: /(\/\* Prepend here - DO NOT REMOVE \*\/)/g,
+			},
+		],
+		// actions: data => {
+		//     const actions: Array<ActionType> = []
+		//     return actions
+		// },
+	})
+}

package/plop/generators/generator.ts

@@ -0,0 +1,49 @@
+import type { NodePlopAPI } from "plop"
+import { toPascalCase } from "@julseb-lib/utils"
+
+export default (plop: NodePlopAPI) => {
+	const { setGenerator } = plop
+
+	setGenerator("generator", {
+		description: "Generate plop generators",
+		prompts: [
+			{
+				type: "input",
+				message: "Enter the name of your new generator",
+				name: "name",
+			},
+		],
+		actions: data => {
+			const actions = [
+				{
+					type: "add",
+					path: "./generators/{{>kebabName}}.ts",
+					templateFile: "./templates/generator.hbs",
+				},
+				{
+					type: "modify",
+					path: "./generators/index.ts",
+					template: `export { default as generate{{>pascalName}} } from "./{{>kebabName}}.js"\n$1`,
+					pattern: /(\/\* Prepend export - DO NOT REMOVE \*\/)/g,
+				},
+				{
+					type: "modify",
+					path: "./plopfile.ts",
+					template: `generate{{>pascalName}},\n\t$1`,
+					pattern: /(\/\* Prepend import - DO NOT REMOVE \*\/)/g,
+				},
+				{
+					type: "modify",
+					path: "./plopfile.ts",
+					template: `generate${toPascalCase(
+						data?.name,
+					)}(plop) // yarn plop:${data?.name[0]}\n\t$1`,
+					pattern: /(\/\* Prepend function - DO NOT REMOVE \*\/)/g,
+				},
+				"Don't forget to add the scripts in package.json :)",
+			]
+
+			return actions
+		},
+	})
+}

package/plop/generators/index.ts

@@ -0,0 +1,6 @@
+export { default as generatorGenerator } from "./generator"
+export { default as previewGenerator } from "./preview"
+export { default as subtypeGenerator } from "./subtype"
+export { default as componentGenerator } from "./component"
+export { default as generateDemo } from "./demo.js"
+/* Prepend export - DO NOT REMOVE */

package/plop/generators/preview.ts

@@ -0,0 +1,58 @@
+import { NodePlopAPI } from "plop"
+
+export default (plop: NodePlopAPI) => {
+    const { setGenerator } = plop
+
+    setGenerator("preview", {
+        description: "Component preview",
+        prompts: [
+            {
+                type: "input",
+                name: "name",
+                message: "Enter component's name",
+            },
+            {
+                type: "list",
+                name: "category",
+                message: "Which category?",
+                choices: ["styles", "layouts", "components", "helpers"],
+                default: "components",
+            },
+            {
+                type: "input",
+                name: "attribute",
+                message: "Enter HTML attribute",
+                default: "div",
+            },
+        ],
+        actions: data => {
+            const actions = [
+                "Start creating your new files",
+                {
+                    type: "add",
+                    path: "../src/lib/components/{{ pascalCase name }}/__preview__/{{ pascalCase name }}.preview.tsx",
+                    templateFile: data?.demo
+                        ? "./templates/__preview__/preview.hbs"
+                        : "./templates/__preview__/preview-props.hbs",
+                },
+                "Importing the preview into the preview folder",
+                {
+                    type: "modify",
+                    path: "../src/data/components.tsx",
+                    template:
+                        'import { {{ camelCase name }}Preview } from "../lib/components/{{ pascalCase name }}/__preview__/{{ pascalCase name }}.preview"\n$1',
+                    pattern: /(\/\* Prepend import - DO NOT REMOVE \*\/)/g,
+                },
+                "Exporting from the component from the data folder",
+                {
+                    type: "modify",
+                    path: "../src/data/components.tsx",
+                    template: "{{ camelCase name }}Preview,\n$1",
+                    pattern: /(\/\* Prepend array - DO NOT REMOVE \*\/)/g,
+                },
+            ]
+
+            return actions
+        },
+    })
+}

package/plop/generators/subtype.ts

@@ -0,0 +1,25 @@
+import type { NodePlopAPI } from "plop"
+import { allComponents } from "../utils"
+
+export default (plop: NodePlopAPI) => {
+    const { setGenerator } = plop
+
+    setGenerator("subtype", {
+        description: "Generates a subtypes.ts file for selected component",
+        prompts: [
+            {
+                name: "name",
+                message: "Select your component",
+                type: "list",
+                choices: allComponents,
+            },
+        ],
+        actions: [
+            {
+                type: "add",
+                path: "../src/lib/components/{{ pascalCase name }}/subtypes.ts",
+                templateFile: "./templates/subtypes.hbs",
+            },
+        ],
+    })
+}

package/plop/partials/index.ts

@@ -0,0 +1,2 @@
+export { default as pascalName } from "./pascal-name"
+export { default as kebabName } from "./kebab-name"

package/plop/partials/kebab-name.ts

@@ -0,0 +1,7 @@
+import type { NodePlopAPI } from "plop"
+
+export default (plop: NodePlopAPI) => {
+    const { setPartial } = plop
+
+    setPartial("kebabName", "{{ kebabCase name }}")
+}