@julseb-lib/react 0.1.5 → 0.1.7

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}}
-	)
-}

package/plop/templates/demo.hbs

@@ -1,9 +0,0 @@
-import { BasePage } from "../../components"
-
-export const {{>pascalName}}Demo = () => {
-	return (
-		<BasePage title="{{>pascalName}}">
-
-		</BasePage>
-	)
-}

package/plop/templates/generator.hbs

@@ -1,16 +0,0 @@
-import type { NodePlopAPI, ActionType } from "plop"
-import { BASE_PATH } from "../utils"
-
-export default (plop: NodePlopAPI) => {
-    const { setGenerator } = plop
-
-    setGenerator("{{>kebabName}}", {
-        description: "",
-        prompts: [],
-        actions: [],
-        // actions: data => {
-        //     const actions: Array<ActionType> = []
-        //     return actions
-        // },
-    })
-}

package/plop/templates/subtypes.hbs

@@ -1,3 +0,0 @@
-import type { ILib{{ pascalCase name }} } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN {{ constantCase name }} COMPONENTS

package/plop/utils/addClosingBrackets.ts

@@ -1,13 +0,0 @@
-import type { NodePlopAPI } from "plop"
-
-/**
- * Use as {{addClosingBrackets}}
- */
-
-export default (plop: NodePlopAPI) => {
-    const { setHelper } = plop
-
-    setHelper("addClosingBrackets", () => {
-        return `}}`
-    })
-}

package/plop/utils/addOpenBrackets.ts

@@ -1,13 +0,0 @@
-import type { NodePlopAPI } from "plop"
-
-/**
- * Use as {{addOpenBrackets}}
- */
-
-export default (plop: NodePlopAPI) => {
-    const { setHelper } = plop
-
-    setHelper("addOpenBrackets", () => {
-        return `{{`
-    })
-}

package/plop/utils/all-components.ts

@@ -1,72 +0,0 @@
-export const allComponents = [
-    "Text",
-    "Wrapper",
-    "Main",
-    "Aside",
-    "Section",
-    "Grid",
-    "Flexbox",
-    "Icon",
-    "Key",
-    "TextIcon",
-    "Highlight",
-    "Linkify",
-    "Tooltip",
-    "Hr",
-    "Skeleton",
-    "Image",
-    "Masonry",
-    "FullBleed",
-    "Video",
-    "Youtube",
-    "Badge",
-    "Avatar",
-    "Loader",
-    "Burger",
-    "Button",
-    "ButtonIcon",
-    "ButtonGroup",
-    "Tag",
-    "Truncate",
-    "Card",
-    "Input",
-    "InputImage",
-    "InputCheck",
-    "InputPhone",
-    "InputCounter",
-    "InputSlider",
-    "Select",
-    "Autocomplete",
-    "Rating",
-    "InputPin",
-    "Form",
-    "ListGroup",
-    "Breadcrumbs",
-    "Accordion",
-    "Dropdown",
-    "Toast",
-    "Alert",
-    "Modal",
-    "Pagination",
-    "Paginator",
-    "Stepper",
-    "ProgressBar",
-    "ProgressCircle",
-    "Tabs",
-    "Slideshow",
-    "Cover",
-    "Table",
-    "PageLoading",
-    "Sticky",
-    "Messaging",
-    "MarkdownEditor",
-    "MarkdownContainer",
-    "CodeContainer",
-    "Fade",
-    "BackToTop",
-    "Header",
-    "IconMenu",
-    "Footer",
-    "Helmet",
-    "SrOnly",
-]

package/plop/utils/constants.ts

@@ -1 +0,0 @@
-export const BASE_PATH = "../src"

package/plop/utils/index.ts

@@ -1,5 +0,0 @@
-export * from "./constants.js"
-export { default as surroundBrackets } from "./surround-brackets.js"
-export { default as addOpenBrackets } from "./addOpenBrackets.js"
-export { default as addClosingBrackets } from "./addClosingBrackets.js"
-export * from "./all-components.js"

package/plop/utils/surround-brackets.ts

@@ -1,12 +0,0 @@
-import type { NodePlopAPI } from "plop"
-
-/**
- * Use as {{surroundBrackets "your text"}}
- */
-export default (plop: NodePlopAPI) => {
-    const { setHelper } = plop
-
-    setHelper("surroundBrackets", text => {
-        return `{{ ${text} }}`
-    })
-}

package/public/favicon.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill: #1A2C42;}
-	.st1{fill: #FFFFFF;}
-
-	@media (prefers-color-scheme: dark) {
-      .st0 {fill: #FFF;}
-	  .st1 {fill: #1A2C42;}
-    }
-</style>
-<path class="st0" d="M59.05,64H4.95C2.22,64,0,61.78,0,59.05V4.95C0,2.22,2.22,0,4.95,0h54.1C61.78,0,64,2.22,64,4.95v54.1
-	C64,61.78,61.78,64,59.05,64z"/>
-<g>
-	<path class="st1" d="M29.9,36.9c-0.13,7.62-6.48,11.28-12.91,11.28c-1.1,0-6.34-0.53-9.39-3.44c1.06-1.06,3.18-3.17,6.3-6.39
-		c0.66,0.66,1.67,1.1,3.39,1.1c2.25,0,3.92-1.41,3.92-3.83V15.13h8.68V36.9z"/>
-	<path class="st1" d="M48.73,25.26c0-1.37-1.14-2.51-2.51-2.51c-1.36,0-2.47,1.15-2.47,2.51c0,1.37,1.11,2.47,2.47,2.47
-		c3.22,0,6.13,1.54,7.98,3.92c1.41,1.76,2.2,3.97,2.2,6.39c0,5.64-4.54,10.14-10.18,10.14s-10.18-4.45-10.18-10.27h7.71
-		c0,1.41,1.11,2.51,2.47,2.51c1.37,0,2.51-1.1,2.51-2.47c0-1.37-1.14-2.51-2.51-2.51c-5.64,0-10.13-4.49-10.13-10.13
-		s4.49-10.18,10.13-10.18S56.4,19.62,56.4,25.26H48.73z"/>
-</g>
-</svg>