@pap-it/templates-box - npm Package Compare versions

Comparing version 1.0.20 to 1.0.21

package.json

		{
		"name": "@pap-it/templates-box",
		"version": "1.0.20",
		"version": "1.0.21",
		"scripts": {
		@@ -10,3 +10,3 @@ "init": "sh .scripts/init.sh",
		"watch": ".scripts/watch.sh",
		"manual-publish": "sh .scripts/publish.sh",
		"publish:manual": "sh .scripts/publish.sh",
		"preversion": "sh .scripts/preversion.sh",
		@@ -44,3 +44,3 @@ "postversion": "sh .scripts/postversion.sh",
		"dependencies": {
		"@pap-it/system-utils": "1.0.13",
		"@pap-it/system-utils": "1.0.14",
		"@pap-it/system-react": "0.0.8"
		@@ -50,3 +50,3 @@ },
		"eslint": "^8.53.0",
		"@pap-it/system-doc": "1.0.27",
		"@pap-it/system-doc": "1.0.28",
		"esbuild": "^0.17.18",
		@@ -53,0 +53,0 @@ "node-html-parser": "^6.1.5",

README.md

		@@ -5,14 +5,57 @@ # Box

		Version: Version: Version: 1.0.20
		Version: Version: 1.0.21


		## Use Case

		### installation

		```bash
		npm install @pap-it/templates-box
		```

		### to use in html

		```html
		<script type="module" defer>
		import "@pap-it/templates-box/wc"
		</script>

		<pap-box-template></pap-box-template>
		```

		### to use in react

		```jsx
		import { Box } from "@pap-it/templates-box/react";

		function Component() {
		return (
		<Box />
		)
		}
		```

		## Development

		Development servers can be started and should all exist inside `"views"` folder
		Development takes place within the `src` folder. To add a new subcomponent, use the command `npm run component:add`. This command updates the `.env` file, creates a view folder, and adds a subfolder in the `components` folder (creating it if it doesn't exist) inside `src` with all the necessary files.

		## Scripts
		Styling is managed in the `style.scss` file, which automatically generates a `style.ts` file for use in the component.

		## Viewing

		To view the component, run `npm start`. This command is equivalent to `npm run start demo` and launches the development server for the demo folder located within the `views` folder. This allows you to preview your component during development.

		## Assets

		All assets required by the component, such as icons and images for translations, should be placed in the `assets` folder. This folder will already include an `icons` and `translations` folder with an `en.json` file for English translations. Use this structure to organize translations and make them easily accessible for other projects.

		For assets used solely for display or demo purposes, create a `public` folder under the relevant directory inside the `views` folder. These assets are not included in the component package.

		## Commands

		- build: Builds the component in development mode. Use the `--prod` flag (`npm run build -- --prod`) for a production build, which includes minification.
		- watch: Watches for changes to the component files and rebuilds them automatically without starting the development server.
		- start: Starts the development server for a specific demo. The target folder within the `views` directory must contain an `index.html` file. Usage example: `npm run start --name=<folder>`.
		- analyse: Generates a comprehensive analysis file, mainly useful for React scripts and potentially for generating pages. The analysis file is only generated if it does not exist, unless the `--force` flag is used. Optional flags include `--verbose` and `--force`.
		- react: Generates the necessary React code based on the web component code, including any subcomponents. The generated code will not overwrite existing files, allowing for manual customization. Flags: `--verbose` & `--force`.

@pap-it/templates-box - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Dependency changes