Codeblock

Atomic Type: molecules

Version: Version: Version: 1.0.25

Use Case

installation

npm install @pap-it/codeblock

to use in html

<script type="module" defer>
  import "@pap-it/codeblock/wc"
</script>

<pap-codeblock></pap-codeblock>

to use in react

import { Codeblock } from "@pap-it/codeblock/react";

function Component() {
  return (
    <Codeblock /> 
  )
}

Development

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.

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.