Lettuce Components Library NPM Package

Quick Links

• Bitbucket Repo

Files

/dist

• index.js - entrypoint for the package in the host project. The components defined in here will be what is available to the host project.
• {file}.d.ts - Typescript integration.

Configuration Files

• .babelrc - Babel config file with settings for transpiling the React code.
• package.json
  • "main": "dist/index.js" - entry point for package in production
  • "build": "tsc" - runs the Typescript compiler according to tsconfig.json settings.
  • "version": "1.0.10" - Package version. Must be updated before publishing new changes.
  • "peerDependencies" - "consists of all the packages that are exactly required in the project or to the person who is downloading and the version numbers should also be the same" - source

Compile step

We use two tools in order to compile our components:

1. Babel - JavaScript Compiler
2. tsc - TypeScript Compiler

We are taking a "Babel for transpiling, tsc for types" approach. Read more about this here.

Development

Updating / Adding Components to the Library

1. Make changes to the component in the NextJS Component Sandbox.
2. There is a 1-to-1 relationship between the folder structure in the sandbox and the library. For example, in both you will find a /cookies folder. Once you are done with your updates, replace the library cookies folder with the sandbox cookies folder.
3. Run the build process for the library.
4. Update the version in package.json.
5. Push up the changes to bitbucket.

Publishing the Package

The information in this section is under the assumption that we will be using npmjs to host the package. I am currently exploring keeping our packages on bitbucket to reduce cost. Once I have confirmed that we are no longer using npmjs, I will remove this section. 10/31/2025 - Hunter.

Log into NPM

First you'll need to log in to NPM in the terminal. This will prompt you to open a link in your default browser. The login information and 2FA code is set up in Keeper, both of which can be used in the login screen with the Keeper browser extension.

npm login

Push to NPM

Next you will need to publish it. At the moment we have to do it publicly because we do not have a paid account.

npm publish --access public

Version Error

If you run into this error:

npm error 403 403 Forbidden - PUT https://registry.npmjs.org/lettuce-component-library - You cannot publish over the previously published versions: 1.0.10.

It is because you cannot publish the same version twice. So you will have to upgrade the version in package.json (in this case to 1.0.11).

Viewing the Changes on NPM

You should now see your new changes and version on the Lettuce Components Library NPM Package Page

Install the Package

NPM Install

After running this command:

npm install lettuce-component-library

It should now show up in your package.json like this:

"lettuce-component-library": "bitbucket:leyedev/lettuce-component-library",

Tailwind Configuration

Tailwind v3

Add the package to the content array in tailwind.config.ts:

content: [
  "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  "./node_modules/lettuce-component-library/**/*.{js,ts,jsx,tsx}", // add this line
],

Tailwind v4

In globals.css, add this line:

/* Include Tailwind scanning for the component library */
@source "../../node_modules/lettuce-component-library/dist*.{js,jsx,ts,tsx}";

Required CSS Animations

Add the following CSS variables and keyframes to your globals.css file (or theme file) to support component animations:

/* Animation variables */
:root {
  --animate-green-gc: rotateGreenCard 2s 1s ease-out forwards;
  --animate-red-gc: rotateRedCard 2s 0.5s ease-out forwards;
  --animate-smartphone-in: smartPhone-in 1.5s ease-in forwards;
}

/* Keyframe animations */
@keyframes rotateGreenCard {
  0% {
    transform: rotate(0deg);
    bottom: -100%;
    left: 40%;
    z-index: -10;
  }
  50% {
    transform: rotate(-40deg);
    bottom: calc(100% + 60px);
    left: 40%;
  }
  100% {
    transform: rotate(-35deg);
    bottom: calc(100% + 25px);
    left: 40%;
    z-index: 1;
  }
}

@keyframes rotateRedCard {
  0% {
    transform: rotate(0deg);
    bottom: -100%;
    left: 70%;
    z-index: -10;
  }
  50% {
    transform: rotate(-40deg);
    bottom: calc(100% + 60px);
    left: 70%;
  }
  100% {
    transform: rotate(-10deg);
    bottom: calc(100% - 10px);
    left: 70%;
    z-index: 1;
  }
}

@keyframes smartPhone-in {
  0% {
    bottom: -100%;
    z-index: -1;
  }
  50% {
    bottom: calc(100% + 30px);
    z-index: -1;
  }
  100% {
    bottom: calc(100% - 35px);
    z-index: 1;
  }
}

Next.js Image Configuration

Add the following remote pattern to your next.config.js (or next.config.ts) to allow images from Google Cloud Storage:

import type { NextConfig } from 'next';

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "storage.googleapis.com",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

export default config;

Components

Cookies Notice

This section will have information about installing the Cookies Notice on the new sites.

You can now import the components defined in index.js in the /dist folder. For example:

<CookiesAgree color="green" font="body-font" />

Hovering over the component name should provide function and types information.

Updating The Package

There are a few things to know if you already have the package and need to update it.

Alternative: Reinstall the Package

Will have to return to this section - not sure if this will be necessary. We can try npm update lettuce-component-library but I have not had success with that yet.

npm uninstall lettuce-component-library
npm install lettuce-component-library

Verify Installation

After updating, you should see the new version in your package.json:

"lettuce-component-library": "^1.0.11"