kiosk-ui-lib v0.1.2

How to create a new component

Step 1: Add new components

• Add a new component in the folder /src
• Add the command lines in the /src/index.ts
  • export { default as COMPONENT_NAME } from './COMPONENT_LINK'
  • export type { COMPONENT_TYPE } from './COMPONENT_LINK'
• Note: In each component created, we have to use this command on the top import "./styles/global.css"

Step 2: Build components

• Run the command: npm run prepublish

Step 3: Publish package

• Edit the version in package.json (The new version has to be different to the previous one)
• Run the command npm publish

How to avoid overwrite the Tailwind Tailwind configuration while importing the package into another project

Note 1: Don't import Tailwind CSS directly in package

• Using

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  instead of:

    @import 'tailwindcss/base';
    @import 'tailwindcss/components';
    @import 'tailwindcss/utilities';

Note 2: Avoid bundling Tailwind in the consumer’s project

• Import the below setup in package.json:

  "peerDependencies": {
    "next": "^15.1.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^3.4.1"
  }

Note 3: Don't include tailwind.config.js in the package

• Create a file .npmignore in the root project
• Add tailwind.config.js into to .npmignore

How to resolve the issue "Invalid Hook Error" while importing package into another project

Note 1: Add the bellow setup into package.json

  "publishConfig": {
    "access": "public"
  }

Note 2: Update the tsconfig.json

  {
    "compilerOptions": {
      "target": "ESNext",
      "lib": ["dom", "esnext"],
      "module": "ESNext",
      "moduleResolution": "Node",
      "jsx": "react-jsx",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "baseUrl": ".",
      "paths": {
      "@/*": ["src/*"]
      },
      "outDir": "./dist",
      "declaration": true,
      "declarationMap": true,
      "sourceMap": true
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules",
      "dist"
    ]
  }