{"_id":"@ajay0641/tfs-menu","name":"@ajay0641/tfs-menu","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ajay0641/tfs-menu","version":"1.0.0","description":"The Futon Shop navigation menu drop-in for Adobe Commerce storefronts","license":"MIT","engines":{"node":"^20.0.0 || ^22.0.0"},"sideEffects":false,"_id":"@ajay0641/tfs-menu@1.0.0","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-MP4D+zNSfr5rsfxoak90TMe83UfwlSpLBy5QhtaD1GW5QO/UjkbJ82kqOrFCKeSO6P44+MKfM7fQLA/CZWH2GQ==","shasum":"7b2b86be7dd0d158a8ac02b606e102d091ebc35c","tarball":"https://registry.npmjs.org/@ajay0641/tfs-menu/-/tfs-menu-1.0.0.tgz","fileCount":37,"unpackedSize":58596,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDXE7zjXYk9c7HHQ9sEzoXm+kxWocHfCfG+pC04OW39GAiEA+EPodgsJat//faaWXDba/e4htduTsRj+sC3GehJB8Rk="}]},"_npmUser":{"name":"ajay0641","email":"ajaykumar.prajapati@brainvire.com"},"directories":{},"maintainers":[{"name":"ajay0641","email":"ajaykumar.prajapati@brainvire.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tfs-menu_1.0.0_1787558340604_0.28867603719287716"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-24T07:59:00.502Z","1.0.0":"2026-08-24T07:59:00.752Z","modified":"2026-08-24T07:59:00.998Z"},"maintainers":[{"name":"ajay0641","email":"ajaykumar.prajapati@brainvire.com"}],"description":"The Futon Shop navigation menu drop-in for Adobe Commerce storefronts","license":"MIT","readme":"![Drop-in_Template (1)](https://github.com/user-attachments/assets/dfb8c575-0a1e-4f2a-9380-f915a8ec83f5)\n\n\n## Prerequisites\n\n>- Complete steps 1-3 in the \"How to use the Adobe Commerce drop-in template\" section of [Creating drop-in components](https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating/) before proceeding.\n>- Supported Node versions are: Maintenance (v20) and Active (v22).\n\n> Need to download/update your node version? You can use [nvm](https://github.com/nvm-sh/nvm).\n---\n\nThis repository provides a template for creating custom drop-ins. Drop-ins allow you to extend and customize your storefront with reusable components and APIs. Follow the steps below to set up your development environment and start building your own drop-ins.\n\nNot sure what a dropin is? Get an overview of dropins [here](https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/introduction/).\n\n\n\n---\n\n## Table of Contents\n\n1. [Getting Started](#getting-started)\n   - [Install Dependencies](#1-install-dependencies)\n   - [Generate New Config](#2-generate-new-config)\n   - [Update Mesh/Backend Endpoint](#3-update-meshbackend-endpoint-for-development-only)\n   - [Launch Development Environment](#4-launch-development-environment)\n   - [Generate New UI Component](#5-generate-new-ui-component)\n   - [Generate New Frontend Container](#6-generate-new-frontend-container)\n   - [Generate New API Function](#7-generate-new-api-function)\n   \n\n2. [Development and Testing](#development-and-testing)\n   - [Storybook](#i-storybook)\n   - [Sandbox](#ii-sandbox)\n   - [Run Unit Tests](#iii-run-unit-tests)\n   - [Build Production Bundles](#iv-build-production-bundles)\n\n---\n\n## Getting Started\n\n### Follow these steps to set up and run your development environment for this project.\n\n\n### 1. Install Dependencies\n\nBefore you begin, make sure you have all the necessary dependencies installed. Run the following command to install all required packages:\n\n```bash\nnpm install\n```\n\n### 2. Generate New Config\n\nBefore you can start developing, you need to generate the .elsie.js config file. The Elsie CLI uses this file to generate new components, containers, and API functions to specified directories within your projects.  \nTo create a new configuration file, run the following command. Replace ```<DropInName>``` with the name of your new drop-in.\n\n```bash\nnpx elsie generate config --name <DropInName>\n```\nAfter generating the .elsie.js config, open it and take a look. Below is an annotated version describing the main properties:\n\n```js\nmodule.exports = {\n  name: 'Login', // The name of your frontend. This name can be changed at any time.\n  api: {\n    root: './src/api', // Directory where the CLI will add all your generated API functions.\n    importAliasRoot: '@/login/api',\n  },\n  components: [\n    {\n      id: 'Components',\n      root: './src/components', // Directory where the CLI will add all your generated components.\n      importAliasRoot: '@/login/components',\n      cssPrefix: 'elsie',\n      default: true,\n    },\n  ],\n  containers: {\n    root: './src/containers', // Directory where the CLI will add all your generated containers.\n    importAliasRoot: '@/login/containers',\n  },\n};\n```\n\n### 3. Update Mesh/Backend Endpoint (for development only)\n\nFor development purposes, you will need to rename your `.env.sample` file to `.env` and update the new `.env` file with the correct mesh/backend endpoint. This file is used to store environment-specific configurations.\n\n```env\nENDPOINT=\"your-endpoint\"\n```\n\n### 4. Launch development environment\nLet’s take it for a spin! Start the development server with the following command:\n\n```bash\nnpm run dev\n```\nCongrats! You just launched your frontend development environment. It's a preconfigured HTML page `(examples > html-host > index.html)` that loads your frontend components for testing during development:\n\n  <img src=\"https://github.com/user-attachments/assets/e38a7856-625e-4eae-a1b7-0863516231a8\" \n       alt=\"Frontend development environment\" />\n\nNow we're ready to start building a composable frontend. Stop the server with `ctrl + c` and let's get started.\n\n### 5. Generate new UI Component\nUI components in this codebase are primarily responsible for rendering the UI, handling presentation, and managing styling.\nTo generate a new UI component, use the following command. Replace ```<MyUIComponent>``` with the name of your component. \n\n**Make sure to use Pascal casing for the component name.**\n```bash\nnpx elsie generate component --pathname <MyUIComponent>\n```\n\nLet’s take a quick look at the files that are generated for you:\n\n```console\n~/composable-login [main] » npx elsie generate component --pathname LoginForm\n🆕 src/components/LoginForm/LoginForm.css created\n🆕 src/components/LoginForm/LoginForm.stories.tsx created\n🆕 src/components/LoginForm/LoginForm.test.tsx created\n🆕 src/components/LoginForm/LoginForm.tsx created\n🆕 src/components/LoginForm/index.ts created\n🆕 src/components/index.ts created\n~/composable-login [main] »\n```\n\nThese files were not only generated with the appropriate names, but they are completely preconfigured to work together as a unit. For example, the `LoginForm` component was automatically imported into `src/components/index.ts` to let you start referencing the component throughout your project.\n\nAnd if you run `npm run dev` again, you'll see your new component in the Storybook UI, configured with an example and best practices to help you get started with Storybook.\n\n### 6. Generate new Frontend Container\n\nContainers handle business logic, state management, API calls, and data fetching using the components. They do not contain CSS or styling logic.\nTo create a new frontend container, use this command. Replace ```<MyContainer>``` with the desired name of your frontend container. \n\n**Make sure to use Pascal casing for the container name.**\n\n```bash\nnpx elsie generate container --pathname <MyContainer>\n```\n\n### 7. Generate new API Function\nIf you need to add a new API function, run the following command. Replace ```<myApiFunction>``` with the desired name for your API function. \n\nThe API layer provides core functionalities like fetching, handling events, and GraphQL operations. This API is primarily consumed by a container.\n\n**Make sure to use Camel casing for the API name.**\n\n```bash\nnpx elsie generate api --pathname <myApiFunction>\n```\n> **Location:**  \n> Generated files will be placed in `src/components/`, `src/containers/`, and `src/api/` respectively\n\n---\n\n## Development and Testing\nThese development tools help you preview components during your development process and ensure that your code is properly tested.\n\n### I. Storybook\nStorybook is a tool used for developing and testing UI components in isolation. Once a container/component is created using one of the commands above, a `.stories.tsx` file is also created in the same directory as the component/container to preview the component/container.\n\nUse ```npm run storybook``` to spin up the Storybook environment at `http://localhost:6006/`.\n\n[Here](https://storybook.js.org/docs) is the official Storybook documentation.\n\n### II. Sandbox\nThe Sandbox is an html file with minimal application setup to deploy your dropin. It is useful for testing and integration between different peices of your project.\n\nTo render your container in the sandbox, Update the `examples/html-host/index.html` file.\nUse ```npm run serve``` to spin up the Sandbox environment at `http://127.0.0.1:3000`.\n\nNeed help figuring out how to work with the Sandbox? [Here](https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating/) is a detailed explanation.\n\n### III. Run Unit Tests\nThe commands to generate a component, container or an API, also create a `.test.tsx` file in their respective directories. These files are useful for unit testing.\n\nTo ensure your code is working as expected, you should run these unit tests to catch any issues early in the development process:\n\n```bash\nnpm run test\n````\n\nThis project is set up to use the jest testing framework. Here are some useful documentations:\n\n- [Jest Getting Started (official docs)](https://jestjs.io/docs/getting-started)\n- [Preact Testing Library Intro](https://testing-library.com/docs/preact-testing-library/intro)\n\n### IV. Build Production Bundles\nOnce you're ready to prepare your app for production, run the following command to build the production bundles:\n\n```bash\nnpm run build\n```\n","readmeFilename":"README.md","_rev":"1-5f82a5b8eb976ee346c5752ab34be2ad"}