@podme/podme-ui

Welcome to Podme UI Storybook

Podme UI is a comprehensive library of UI components that can be imported into other Podme projects. This Storybook serves as a single source of truth for all Podme UI components, providing an isolated environment for developing, testing, and reviewing each component's various states.

Each component in this Storybook represents a reusable piece of UI that has been decoupled from the app's business logic, data, and context. This makes it easier to develop and test hard-to-reach states. You can save these UI states as stories to revisit during development, testing, or QA.

Browse the available components now by navigating to them in the sidebar. View their code in the stories section to learn how they work.

 

Installation

To install the @podme/podme-ui package, you can use npm or yarn:

npm install @podme/podme-ui

or

yarn add @podme/podme-ui

 

Usage

To use a component from the Podme UI library, you can import it into a project like so:

import { Button, PodmeColor } from "@podme/podme-ui";

function MyApp() {
    return (
        <Button backgroundColor={PodmeColor.SoftWhite} onClick={handleClickFn}>
            Get Premium
        </Button>
    );
}

Remember to include the necessary peer dependencies in your project as well. The @podme/podme-ui package requires react, react-dom, and tailwindcss to be installed in your project.

npm install react react-dom tailwindcss

or

yarn add react react-dom tailwindcss

 

Building the Library Locally

• Run npm run build in the UI library project. This will create or update the dist folder.
• To test the new build locally without publishing a feature version, you can copy the updated dist folder from the UI library into the node_modules folder of your Next.js project.
• You could also link those two projects locally so that the podme-ui's build process updates the NextJS's podme-ui library in the node_modules automatically. It caused us some issues in the past so it's not a default approach for us atm.
• Restart your Next.js project and refresh Visual Studio Code to ensure TypeScript detects the changes.

 

Publishing a Feature Version

• Update the version in package.json by appending a specific naming convention:
  • If your feature branch started from master's version 1.0.5, update the version to something like 1.0.5-feature-[TicketNumber].0.
  • The [TicketNumber] should match the ticket number associated with the feature branch.
  • The last digit represents the iteration on the feature branch, starting from 0 and incrementing with each update.
• Run npm run build to ensure the project is built.
• To publish the feature version, use the command npm publish --tag feature-[TicketNumber]. This ensures the feature version is published with a custom tag, not the default latest tag.

 

Installing the Feature Version in Next.js

In the Next.js project, run pnpm install @podme/podme-ui@feature-[TicketNumber]. This will install the specific feature version of the Podme UI library. After installing, your project should be able to use the updated UI library from the feature branch.

 

Updating the Version for Iterations

Each time you make changes to the feature branch, increment the last digit of the version in package.json. For example, if the initial version was 1.0.5-feature-[TicketNumber].0, the next iteration would be 1.0.5-feature-[TicketNumber].1, and so on. Continue publishing updates using the same tag format.