@julseb-lib/react 0.1.4 → 0.1.6

package/eslint.config.js

@@ -1,177 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<!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/plop/actions/index.ts

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

package/plop/actions/run-command.ts

@@ -1,21 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

package/plop/partials/kebab-name.ts

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

package/plop/partials/pascal-name.ts

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

package/plop/plopfile.ts

@@ -1,32 +0,0 @@
-import { NodePlopAPI } from "plop"
-import {
-	generatorGenerator,
-	previewGenerator,
-	componentGenerator,
-	subtypeGenerator,
-	generateDemo,
-	/* Prepend import - DO NOT REMOVE */
-} from "./generators"
-import { kebabName, pascalName } from "./partials"
-import chalk from "chalk"
-import figlet from "figlet"
-
-export default (plop: NodePlopAPI) => {
-	console.log(
-		chalk.blueBright(
-			figlet.textSync("JulSeb CLI", { horizontalLayout: "full" }),
-		),
-	)
-
-	// Partials
-	kebabName(plop)
-	pascalName(plop)
-
-	// Generators
-	generatorGenerator(plop) // yarn plop:g
-	previewGenerator(plop) // yarn plop:p
-	componentGenerator(plop) // yarn plop:c
-	subtypeGenerator(plop) // yarn plop:st
-	generateDemo(plop) // yarn plop:d
-	/* Prepend function - DO NOT REMOVE */
-}

package/plop/templates/__preview__/preview-props.hbs

@@ -1,34 +0,0 @@
-import { {{ pascalCase name }} } from "../../../"
-import type {  } from "../../../types"
-import type { ILib{{ pascalCase name }} } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const {{ camelCase name }}Preview: ComponentPreview<ILib{{ pascalCase name }}> = {
-    name: "{{ pascalCase name }}",
-    component: {{ pascalCase name }},
-    category: "{{ category }}",
-    import: "{{ pascalCase name }}", // import Component (ex: Skeleton)
-    additionalImports: [], // import OtherComponent (ex: SkeletonCard)
-    optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-    propsImport: "ILib{{ pascalCase name }}", // import ILibComponent (ex: ILibAccordion)
-    additionalTypeImports: [], // import ILibComponentItem (ex: ILibAccordionItem)
-    extends: ["HTML{{ pascalCase attribute }}Element"],
-    previews: [
-        { previewTitle: "Default", props: {  } },
-        { previewTitle: "Default", demo: <{{ pascalCase name }} /> },
-    ],
-	props: [
-		/*
-		Generate the documentation like this:
-		{
-			name: "<name of prop>",
-			type: '<type of prop, can be: "" | "string" | "Array<string>" | "number" | "boolean" | "string | number" | "string | Object" | "boolean | number | string | Object" | "string | number | Object" | "Object" | "boolean | Object" | "function" | "CSSProperties" | "string | JSX.Element" | "ReactNode">',
-			possibleValues: ["<possible value of prop>"],
-			defaultValue: "<default value or null>",
-			description: "<description of the prop>",
-			isRequired: <boolean telling if the prop is required or not>,
-		},
-		ignore ref, children, rest, className, element
-		*/
-	],
-}

package/plop/templates/__preview__/preview.hbs

@@ -1,25 +0,0 @@
-import { {{ pascalCase name }} } from "../../../"
-import type {  } from "../../../types"
-import type { ILib{{ pascalCase name }} } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const {{ camelCase name }}Preview: ComponentPreview<ILib{{ pascalCase name }}> = {
-    name: "{{ pascalCase name }}",
-    component: {{ pascalCase name }},
-    category: "{{ category }}",
-    imports: ["{{ pascalCase name }}"],
-    typeImports: ["ILib{{ pascalCase name }}"],
-    extends: ["HTML{{ pascalCase attribute }}Element"],
-    previews: [
-        { previewTitle: "Default", props: {  } },
-        { previewTitle: "Default", demo: <{{ pascalCase name }}Preview /> },
-    ],
-}
-
-function {{ pascalCase name }}Preview() {
-    return (
-        <{{ pascalCase name }}>
-            
-        </{{ pascalCase name }}>
-    )
-}

package/plop/templates/component/__preview__/preview.hbs

@@ -1,21 +0,0 @@
-import { {{ pascalCase name }} } from "../../../"
-import type {  } from "../../../types"
-import type { ILib{{ pascalCase name }} } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const {{ camelCase name }}Preview: ComponentPreview<ILib{{ pascalCase name }}> = {
-    name: "{{ pascalCase name }}",
-    component: {{ pascalCase name }},
-    category: "{{ category }}",
-    import: "{{ pascalCase name }}", // import Component (ex: Skeleton)
-    additionalImports: [], // import OtherComponent (ex: SkeletonCard)
-    optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-    propsImport: "ILib{{ pascalCase name }}", // import ILibComponent (ex: ILibAccordion)
-    additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
-    extends: ["HTML{{ pascalCase attribute }}Element"],
-    previews: [
-        { previewTitle: "Default", props: {  } },
-        { previewTitle: "Default", demo: <{{ pascalCase name }} /> },
-    ],
-	props: [],
-}

package/plop/templates/component/index.ts.hbs

@@ -1 +0,0 @@
-export * from "./{{ pascalCase name }}"

package/plop/templates/component/types.ts.hbs

@@ -1,5 +0,0 @@
-import type { LibComponentBase } from "../../types"
-
-export interface ILib{{ pascalCase name }} extends LibComponentBase<HTML{{ pascalCase attribute }}Element> {
-	
-}

package/plop/templates/component/{{ pascalCase name }}.tsx.hbs

@@ -1,32 +0,0 @@
-import { type FC } from "react"
-import {  } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import type { ILib{{ pascalCase name }} } from "./types"
-
-/*
-	Generate JSDoc with:
-	* <short description of the component>
-	*
-	* @component
-	*
-	* @example
-	* <an example of the component>
-	* 
-	* @extends <type the component is extending (check in ./types.ts)>
-	*
-	for each prop, generate:
-	* @prop {type} [props.<prop name>] <prop with the possible values, and default values> - <short description of the prop>
-	* 
-	* @returns <what the component returns>
-	*
-	* @see https://doc-julseb-lib-react.vercel.app/components/<name of the component>
-*/
-export const {{ pascalCase name }}: FC<ILib{{ pascalCase name }}> = ({ className, element = "{{ lowerCase tag }}", ref, {{#if children}} children,{{/if}} ...rest }) => {
-	const Element = element
-
-	return (
-		<Element ref={ref} className={clsx("", "{{ kebabCase name }}", className)} {...rest}{{#if children}}>
-			{children}
-		</Element>{{ else }} />{{/if}}
-	)
-}