Searchbox

.eslintrc.json

@@ -27,6 +27,7 @@
     "tsconfigRootDir": "."
   },
   "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/restrict-template-expressions": "off",
     "@typescript-eslint/no-explicit-any": "off"

.github/workflows/cicd.yaml

@@ -3,7 +3,6 @@ run-name: ${{github.workflow}} (${{github.event_name}} on ${{ github.ref_name}})
 
 on:
   push:
-  pull_request:
   workflow_dispatch:
     inputs:
       update-snapshots:
@@ -75,7 +74,7 @@ jobs:
 
       - name: Upload coverage artifacts
         uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
+        if: ${{ success() }}
         with:
           path: coverage
           name: coverage
@@ -93,7 +92,7 @@ jobs:
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
+        if: ${{ success() }}
         with:
           path: dist
           name: assets
@@ -103,6 +102,7 @@ jobs:
   e2e:
     name: Run end-to-end tests
     runs-on: ubuntu-latest
+    needs: [build]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -121,6 +121,12 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: pnpm-lock.yaml
 
+      - name: Download build assets
+        uses: actions/download-artifact@v4
+        with:
+          name: assets
+          path: dist
+
       - name: Install dependencies
         run: pnpm install
 
@@ -148,7 +154,7 @@ jobs:
 
       - name: Upload e2e artifacts
         uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
+        if: ${{ success() }}
         with:
           name: playwright-report
           path: playwright-report/

plop-templates/component/{{ dashCase name }}.qa.stories.tsx.hbs → generators/component/{{ kebabCase name }}.qa.stories.tsx.hbs

@@ -4,7 +4,7 @@ import {{pascalCase name}}Meta, { Basic as BasicStory, type Story } from './{{ke
 
 const meta: Meta = {
   ...{{pascalCase name}}Meta,
-  title: '{{pascalCase name}}/QA',
+  title: '{{constantCase group}}/{{pascalCase name}}/QA',
   decorators: [
     (Story) => (
       <div className="qa-story" style=\{{ padding: '2em' }}>

plop-templates/component/{{ dashCase name }}.scss.hbs → generators/component/{{ kebabCase name }}.scss.hbs

@@ -1,3 +1,3 @@
 .lcui-{{kebabCase name}} {
   // component styles
-}
+}

plop-templates/component/{{ dashCase name }}.spec.tsx.hbs → generators/component/{{ kebabCase name }}.spec.tsx.hbs

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 
-import {{pascalCase name}} from './{{kebabCase name}}';
+import { {{pascalCase name}} } from './{{kebabCase name}}';
 
 describe('{{pascalCase name}}', () => {
   it('should render successfully', () => {

plop-templates/component/{{ dashCase name }}.stories.tsx.hbs → generators/component/{{ kebabCase name }}.stories.tsx.hbs

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import {{pascalCase name}} from './{{kebabCase name}}';
+import { {{pascalCase name}} } from './{{kebabCase name}}';
 
 const meta: Meta<typeof {{pascalCase name}}> = {
-  title: '{{kebabCase name}}',
-  component: {{kebabCase name}},
+  title: '{{constantCase group}}/{{pascalCase name}}',
+  component: {{pascalCase name}},
   tags: ['autodocs'],
   args: {
     /**

plop-templates/component/{{ dashCase name }}.test.tsx.hbs → generators/component/{{ kebabCase name }}.test.tsx.hbs

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test';
 
 test.describe('{{pascalCase name}}', () => {
   test.describe('Base', () => {
-    const storyId = '{{pascalCase name}}-qa--basic';
+    const storyId = '{{kebabCase group}}-{{pascalCase name}}-qa--basic';
 
     test('should render successfully', async ({ page }) => {
-      await page.goto(`/iframe.html?id=${storyId}`);
+      await page.goto(`/iframe.html?path=/story/${storyId}`);
 
       await expect(page.locator('.qa-story')).toHaveScreenshot();
     });

plop-templates/component/{{ dashCase name }}.tsx.hbs → generators/component/{{ kebabCase name }}.tsx.hbs

@@ -11,34 +11,30 @@ import './{{kebabCase name}}.scss';
  * ### Usage
  *
  * ```tsx
- * import { {{pascalCase name}} } from '@bloomreach/limitless-commerce-ui-kit';
+ * import { {{pascalCase name}} } from '@bloomreach/limitless-ui-react';
  *
  * export default function MyCustomComponent() {
  *   return <{{pascalCase name}}>Write an example of component usage</{{pascalCase name}}>;
  * }
  * ```
  */
-const {{pascalCase name}} = forwardRef((
+export const {{pascalCase name}} = forwardRef((
   props: {{pascalCase name}}Props,
   forwardedRef: ForwardedRef<HTMLDivElement> | null,
 ): ReactElement => {
   const {
     className,
     children,
-    ...rest // Capture any other properties to pass them to the root element, like `aria-*`, `data-*`, etc.
+    ...rest
   } = props;
 
   return (
     <div
       {...rest}
-      className={cn('lcui-{{kebabCase name}}')}
+      className={cn('lcui-{{kebabCase name}}', className)}
       ref={forwardedRef}
     >
       {children}
     </div>
   );
 });
-
-{{pascalCase name}}.displayName = '{{pascalCase name}}';
-
-export default {{pascalCase name}};

generators/component/{{ kebabCase name }}.types.ts.hbs

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+export interface {{pascalCase name}}Props extends PropsWithChildren {
+  /**
+   * Custom class name for the container of the component.
+   */
+  className?: string;
+}

generators/feature/index.ts.hbs

@@ -0,0 +1,2 @@
+export { {{pascalCase name}} } from './{{kebabCase name}}/{{kebabCase name}}';
+export type { {{pascalCase name}}Props } from './{{kebabCase name}}/{{kebabCase name}}.types';

generators/hook/{{ kebabCase name }}.hook.ts.hbs

@@ -0,0 +1,16 @@
+/**
+ * The hook description.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { {{pascalCase name}} } from '@bloomreach/limitless-ui-react';
+ *
+ * export default function MyCustomComponent() {
+ *   return <{{pascalCase name}}>Write an example of component usage</{{pascalCase name}}>;
+ * }
+ * ```
+ */
+export function use{{ kebabCase name}}() {
+
+}

generators/plopfile.js

@@ -0,0 +1,65 @@
+import { readdir } from 'node:fs/promises';
+
+export default function generate(
+  /** @type {import('plop').NodePlopAPI} */
+  plop,
+) {
+  plop.setGenerator('feature', {
+    description: 'Create a new feature folder',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Please, enter the feature name:',
+        validate: (value) => !!value,
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: './src/{{kebabCase name}}/index.ts',
+        skipIfExists: true,
+      },
+      {
+        type: 'append',
+        path: './src/index.ts',
+        template: "export * from './{{kebabCase name}}';\n",
+      },
+    ],
+  });
+
+  plop.setGenerator('component', {
+    description: 'Create a new component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Please, enter the component name:',
+        validate: (value) => !!value,
+      },
+      {
+        type: 'list',
+        name: 'group',
+        choices: async () => {
+          const files = await readdir('./src/', { withFileTypes: true });
+          return files.filter((f) => f.isDirectory()).map((f) => f.name);
+        },
+        message: 'Please, select the feature folder:',
+        validate: (value) => !!value,
+      },
+    ],
+    actions: [
+      {
+        type: 'addMany',
+        destination: './src/{{kebabCase group}}/{{kebabCase name}}',
+        base: './component/',
+        templateFiles: './component/*',
+      },
+      {
+        type: 'append',
+        path: './src/{{kebabCase group}}/index.ts',
+        templateFile: './feature/index.ts.hbs',
+      },
+    ],
+  });
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloomreach/limitless-ui-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bloomreach/limitless-ui-react.git"
@@ -26,70 +26,71 @@
     "test": "vitest --run --coverage.enabled",
     "test:watch": "vitest",
     "type-check": "tsc --noEmit",
-    "generate": "plop",
+    "generate": "plop --plopfile ./generators/plopfile.js --dest .",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "e2e": "pnpm storybook:build && playwright test",
     "e2e:report": "playwright show-report"
   },
-  "dependencies": {
+  "peerDependencies": {
+    "@bloomreach/discovery-web-sdk": "^1.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.0",
+    "@chromatic-com/storybook": "^1.6.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@faker-js/faker": "^8.4.1",
-    "@playwright/test": "1.42.1",
+    "@playwright/test": "^1.45.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-mdx-gfm": "^8.1.11",
-    "@storybook/addon-onboarding": "^8.1.11",
-    "@storybook/addon-storysource": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/cli": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
-    "@storybook/preview-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@storybook/theming": "^8.1.11",
+    "@storybook/addon-a11y": "^8.2.2",
+    "@storybook/addon-actions": "^8.2.2",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-links": "^8.2.2",
+    "@storybook/addon-mdx-gfm": "^8.2.2",
+    "@storybook/addon-onboarding": "^8.2.2",
+    "@storybook/addon-storysource": "^8.2.2",
+    "@storybook/blocks": "^8.2.2",
+    "@storybook/cli": "^8.2.2",
+    "@storybook/manager-api": "^8.2.2",
+    "@storybook/preview-api": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-vite": "^8.2.2",
+    "@storybook/test": "^8.2.2",
+    "@storybook/theming": "^8.2.2",
     "@testing-library/react": "^16.0.0",
-    "@types/node": "20",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-istanbul": "^1.6.0",
     "classnames": "^2.5.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-react-refresh": "^0.4.8",
     "eslint-plugin-storybook": "^0.8.0",
     "happy-dom": "^14.12.3",
     "husky": "^9.0.11",
     "plop": "^4.0.1",
-    "prettier": "^3.2.5",
-    "sass": "^1.77.6",
-    "semantic-release": "23.0.8",
-    "storybook": "^8.1.11",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.8",
+    "semantic-release": "^23.1.1",
+    "storybook": "^8.2.2",
     "typescript": "~5.4.5",
-    "vite": "^5.2.10",
-    "vite-plugin-dts": "^3.9.0",
-    "vitest": "^1.5.3"
+    "vite": "^5.3.3",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0"
   },
   "engines": {
     "node": ">=20",
     "pnpm": ">=9"
   },
-  "packageManager": "pnpm@9.1.2"
+  "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }