feat: adds prop to define wrapping component for react-flat-list-item

build: adds release please to github actions release

.github/workflows/release.yml

@@ -1,28 +1,45 @@
-name: Release
 on:
-  workflow_run:
-    workflows: ['Tests']
-    branches: [main]
-    types:
-      - completed
-
+   push:
+     branches:
+       - main
+name: 🆕 Release
+permissions: {}
 jobs:
   release:
-    name: Release
+    permissions:
+      contents: write # to create release commit (google-github-actions/release-please-action)
+      pull-requests: write # to create release PR (google-github-actions/release-please-action)
+
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - uses: google-github-actions/release-please-action@v3
+        id: release
         with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
+          token: ${{ secrets.GITHUB_TOKEN }}
+          release-type: node
+          package-name: "@blb-ventures/resource"
+          bump-minor-pre-major: true
+          changelog-types: "\
+            [{\"type\":\"feat\",\"section\":\"Features\",\"hidden\":false},
+            {\"type\":\"fix\",\"section\":\"Bug Fixes\",\"hidden\":false},
+            {\"type\":\"perf\",\"section\":\"Performance\",\"hidden\":false},
+            {\"type\":\"deps\",\"section\":\"Dependencies\",\"hidden\":false},
+            {\"type\":\"revert\",\"section\":\"Reverts\",\"hidden\":false},
+            {\"type\":\"docs\",\"section\":\"Documentation\",\"hidden\":false},
+            {\"type\":\"style\",\"section\":\"Styles\",\"hidden\":false},
+            {\"type\":\"refactor\",\"section\":\"Code Refactoring\",\"hidden\":false},
+            {\"type\":\"test\",\"section\":\"Tests\",\"hidden\":false},
+            {\"type\":\"build\",\"section\":\"Build System\",\"hidden\":false},
+            {\"type\":\"ci\",\"section\":\"Continuous Integration\",\"hidden\":false},
+            {\"type\":\"chore\",\"section\":\"Miscellaneous\",\"hidden\":false}]"
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 'lts/*'
-      - name: Install dependencies
-        run: npm ci
-      - name: Release
+          node-version: 18
+          cache: 'npm'
+      - run: npm install
+        if: ${{ steps.release.outputs.release_created }}``
+      - run: npm publish
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.release_created }}

.github/workflows/tests.yml

@@ -23,27 +23,9 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
+          cache: 'npm'
           node-version: 18
 
-      - name: Cache node modules
-        id: cache-npm
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
-        name: List the state of node modules
-        continue-on-error: true
-        run: npm list
-
       - name: Install Dependencies
         run: npm ci
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blb-ventures/react-flat-list",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",

src/flat-list-item.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { FC, ReactNode } from 'react';
+import { FC, FunctionComponent, ReactNode } from 'react';
 import { LinkWrapper, LinkWrapperProps } from './link-wrapper';
 
 export interface SectionOptions {
@@ -33,6 +33,9 @@ export interface FlatListItemProps {
   urlIsExternal?: boolean;
   height?: string;
   LinkComponent?: LinkWrapperProps['LinkComponent'];
+  component?:
+    | FunctionComponent<{ children?: ReactNode; className?: string; onClick?: (e: any) => void }>
+    | string;
 }
 
 export const FlatListItem: FC<FlatListItemProps> = ({
@@ -56,10 +59,12 @@ export const FlatListItem: FC<FlatListItemProps> = ({
   urlIsExternal,
   height = '56px',
   LinkComponent,
+  component,
 }) => {
   const hasAction = onClick != null || url != null;
   const hasActionIcon = actionIcon && hasAction;
   const hasRight = imageRight != null || subtitleRight != null || right != null || hasActionIcon;
+  const Component = component ?? 'li';
   const el = (
     <div className={contentClassName} style={{ height }}>
       <div
@@ -108,7 +113,7 @@ export const FlatListItem: FC<FlatListItemProps> = ({
     </div>
   );
   return (
-    <li
+    <Component
       className={`flat-list-item ${hasAction ? ' flat-list-item-with-action' : ''} ${
         className ?? ''
       }`}
@@ -117,6 +122,6 @@ export const FlatListItem: FC<FlatListItemProps> = ({
       <LinkWrapper isExternal={urlIsExternal} LinkComponent={LinkComponent} url={url}>
         {el}
       </LinkWrapper>
-    </li>
+    </Component>
   );
 };