Docgen Components

A collection of components for building UIs

Local Development

npm run dev

Running Tests

npm run test

Running Storybook

npm run storybook

Local testing

Testing docgen-components

This guide provides step-by-step instructions for testing the docgen-components library in the portal-ui project using npm link and pnpm.

Steps

1. Prepare docgen-components (Component Library)

Open a terminal and navigate to your docgen-components directory:

cd /path/to/docgen-components

Build the library:

npm run build

Create a global link for the package:

npm link

2. Prepare portal-ui (Project)

Open a terminal and navigate to your portal-ui directory:

cd /path/to/portal-ui

Note: If the server is already running, you need to restart it.

Link the docgen-components package:

pnpm link /path/to/docgen-components

Note: Replace /path/to/docgen-components with the relative or absolute path to your docgen-components directory.

Example:

pnpm link /Users/alejandroortiz/Sideko/docgen-components

3. Update portal-ui's package.json

{
  "dependencies": {
    "docgen-components": "link:/path/to/docgen-components"
  }
}

Note: Replace /path/to/docgen-components with the relative or absolute path to your docgen-components directory.

4. Install dependencies in portal-ui

 pnpm install

5. Configure Tailwind CSS (if used)

Update portal-ui's tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... other content configurations
    "./node_modules/docgen-components/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of the config
};

6. Test and Verify

Open the portal-ui application in a browser and verify that the docgen-components are rendering correctly.

7.Making changes to docgen-components

When you make changes to docgen-components:

a. Build the library again:

npm run build

b. Restart the portal-ui development server to see the changes

8. Unlinking (when finished testing)

Run the following command in the terminal in the portal-ui directory:

  pnpm unlink docgen-components

Remove the link from the package.json file and replace it with the original docgen-components dependency:

{
  "dependencies": {
    "docgen-components": "current version example: 0.10.0"
  }
}

delete the pnpm-lock.yaml file to force the package to be reinstalled and then reinstall the dependencies:

rm pnpm-lock.yaml
pnpm install

In the docgen-components directory to unlink the package, run the following command in the terminal in the docgen-components directory:

npm unlink

This will remove the global link and allow you to install the package again.

Additional Tips

• Ensure that both projects use compatible versions of React and other shared dependencies.
• If you encounter any issues with hot reloading, you might need to restart the portal-ui development server after making changes to docgen-components.
• For TypeScript projects, ensure that type definitions are correctly generated and included in the docgen-components build.

Publishing a new version

Once you have made changes, you can publish a new version of the package by merging your changes into the main branch