Feat UI (#83)

* feat: init list

* feat: add scroller

* feat: group

* feat: masonry

* feat: scroller

* feat: add ui/scroller & ui/list

* feat: clear

* feat: init

* feat: add config

* feat: build group

* feat: ui version

.github/workflows/release.yml

@@ -29,11 +29,11 @@ jobs:
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
-        with: 
+        with:
           path: .turbo
           key: ${{ runner.os }}-turbo-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-turbo-      
+            ${{ runner.os }}-turbo-
 
       - name: Setup PNPM
         uses: pnpm/action-setup@v3
@@ -54,10 +54,12 @@ jobs:
         # https://dev.to/jmcdo29/automating-your-package-deployment-in-an-nx-monorepo-with-changeset-4em8
       - name: Modify Workspace File
         run: sed "s/packages\//dist\/packages\//g" pnpm-workspace.yaml > pnpm-new.yaml && mv pnpm-new.yaml pnpm-workspace.yaml
+      - name: Modify ui workspace
+        run: sed "s/ui\//dist\/ui\//g" pnpm-workspace.yaml > pnpm-new.yaml && mv pnpm-new.yaml pnpm-workspace.yaml
 
         # https://github.com/jmcdo29/ogma/blob/main/.github/workflows/release.yml#L45
       - name: Update workspace deps
-        run: pnpm i --frozen-lockfile=false        
+        run: pnpm i --frozen-lockfile=false
 
       - name: Create Release Pull Request or Publish
         id: changesets

package.json

@@ -51,7 +51,6 @@
     "@react-native-community/cli-platform-android": "~13.6.6",
     "@react-native/babel-preset": "^0.74.83",
     "@react-native/metro-config": "^0.74.83",
-    "@storybook/addon-essentials": "^8.2.8",
     "@storybook/addon-interactions": "^8.2.8",
     "@storybook/core-server": "^8.2.8",
     "@storybook/jest": "^0.2.3",
@@ -112,6 +111,7 @@
   "homepage": "https://github.com/red-armor/infinite-list#readme",
   "dependencies": {
     "@babel/runtime": "^7.25.7",
+    "@storybook/addon-essentials": "^8.4.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.74.1"

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
   - packages/**
+  - ui/**

tsconfig.json

@@ -16,9 +16,12 @@
     "noStrictGenericChecks": false,
     "resolveJsonModule": true,
     "allowJs": true,
-    // "paths": {
-    //   "@infinite-list/react-native": ["packages/react-native/src/index.ts"]
-    // }
+    "paths": {
+      "@infinite-list/group": ["ui/group/src/index.ts"],
+      "@infinite-list/list": ["ui/list/src/index.ts"],
+      "@infinite-list/scroller/react-native": ["ui/scroller/src/react-native"],
+      "@infinite-list/scroller/web": ["ui/scroller/src/web"]
+    }
   },
   "ts-node": {
     "compilerOptions": {

ui/group/.babelrc.js

@@ -0,0 +1,23 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@nx/react/babel',
+        {
+          runtime: 'automatic',
+          // useBuiltIns: 'usage',
+        },
+      ],
+    ],
+    plugins: [],
+    env: {
+      test: {
+        presets: [
+          ['module:@react-native/babel-preset', { useTransformReactJSX: true }],
+        ],
+      },
+    },
+  };
+};

ui/group/README.md

@@ -0,0 +1,7 @@
+# group
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test group` to execute the unit tests via [Jest](https://jestjs.io).

ui/group/eslint.config.js

@@ -0,0 +1,23 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        { ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'] },
+      ],
+    },
+    languageOptions: { parser: require('jsonc-eslint-parser') },
+  },
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+  { ignores: ['public', '.cache', 'node_modules'] },
+];

ui/group/jest.config.ts

@@ -0,0 +1,22 @@
+module.exports = {
+  displayName: 'group',
+  preset: 'react-native',
+  resolver: '@nx/jest/plugins/resolver',
+  moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  moduleNameMapper: {
+    '\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
+  },
+  transform: {
+    '^.+.(js|ts|tsx)$': [
+      'babel-jest',
+      {
+        configFile: __dirname + '/.babelrc.js',
+      },
+    ],
+    '^.+.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
+      'react-native/jest/assetFileTransformer.js'
+    ),
+  },
+  coverageDirectory: '../../coverage/ui/group',
+};

ui/group/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@infinite-list/group",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "0.74.1"
+  },
+  "exports": {
+    "./react": {
+      "types": "./react.esm.d.ts",
+      "default": "./react.esm.js"
+    },
+    "./react-native": {
+      "types": "./react-native.esm.d.ts",
+      "import": "./react-native.esm.js"
+    }
+  },
+  "dependencies": {
+    "@infinite-list/data-model": "workspace:*",
+    "@infinite-list/scroller": "workspace:*",
+    "@x-oasis/noop": "^0.1.14",
+    "@x-oasis/shallow-equal": "^0.1.14"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

ui/group/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "group",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "ui/group/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": { }
+}

ui/group/rollup.config.js

@@ -0,0 +1,43 @@
+const { withNx } = require('@nx/rollup/with-nx');
+
+module.exports = withNx(
+  {
+    // main: './src/index.ts',
+    // may cause
+    additionalEntryPoints: [],
+    outputPath: '../../dist/ui/group',
+    tsConfig: './tsconfig.lib.json',
+    compiler: 'babel',
+    format: ['esm'],
+    assets: [{ input: '.', output: '.', glob: '*.md' }],
+  },
+  {
+    input: ['./src/react-native', './src/react'],
+    output: {
+      entryFileNames: (chunk) => {
+        if (chunk.facadeModuleId.endsWith('src/react-native/index.ts')) {
+          return 'react-native.esm.js';
+        }
+        if (chunk.facadeModuleId.endsWith('src/react/index.ts')) {
+          return 'react.esm.js';
+        }
+
+        // if (chunk.facadeModuleId.endsWith('src/react-native')) {
+        //   return 'react-native.esm.js'
+        // }
+
+        // if (chunk.facadeModuleId.endsWith('src/web')) {
+        //   return 'web.esm.js'
+        // }
+        // if (chunk.facadeModuleId.includes('/module')) {
+        //     const dir = path.dirname(chunk.facadeModuleId);
+        //     return 'module/' + path.basename(dir) + '.js';
+        // }
+      },
+    },
+
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    // e.g.
+    // output: { sourcemap: true },
+  }
+);

ui/group/src/react-native/GroupList.tsx

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren, useContext, useRef, FC } from 'react';
+
+import { DefaultItemT, GroupListProps } from '../types';
+import context from './context';
+import useMountList from './hooks/useMountList';
+
+const GroupList = <ItemT extends DefaultItemT>(
+  props: PropsWithChildren<GroupListProps<ItemT>>
+) => {
+  useMountList(props);
+  return null;
+};
+
+const MemoedGroupList = React.memo<PropsWithChildren<GroupListProps<any>>>(
+  GroupList,
+  (prev, cur) => {
+    // @ts-ignore
+    if (cur.changed) return true;
+
+    const keys = Object.keys(prev);
+
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      // @ts-ignore
+      if (prev[key] !== cur[key]) {
+        return false;
+      }
+    }
+    return true;
+  }
+);
+
+const GroupListWrapper = <ItemT extends DefaultItemT>(
+  props: PropsWithChildren<GroupListProps<ItemT>>
+) => {
+  const contextValues = useContext(context);
+  const contextValuesRef = useRef(contextValues);
+
+  if (
+    contextValuesRef.current.inspectingTimes !== contextValues.inspectingTimes
+  ) {
+    contextValuesRef.current.heartBeat({
+      inspectingTime: contextValues.inspectingTime,
+      // @ts-ignore
+      listKey: props.id,
+    });
+    contextValuesRef.current = contextValues;
+  }
+  return <MemoedGroupList {...props} />;
+};
+
+export default GroupListWrapper;

ui/group/src/react-native/GroupListItem.tsx

@@ -0,0 +1,48 @@
+import React, { useContext, useRef } from 'react';
+import context from './context';
+import useMountItem from './hooks/useMountItem';
+
+// @ts-ignore
+const GroupListItem = (props) => {
+  useMountItem(props);
+  return null;
+};
+
+const MemoedGroupListItem = React.memo(GroupListItem, (prev, cur) => {
+  if (cur.changed) return true;
+
+  const keys = Object.keys(prev);
+
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    if (prev[key] !== cur[key]) {
+      return false;
+    }
+  }
+  return true;
+});
+
+// @ts-ignore
+const GroupListItemWrapper = (props) => {
+  const contextValues = useContext(context);
+  const contextValuesRef = useRef(contextValues);
+
+  // let changed = false;
+
+  // console.log('heart beating ', contextValuesRef.current.inspectingTimes !== contextValues.inspectingTimes, props.itemKey)
+
+  if (
+    contextValuesRef.current.inspectingTimes !== contextValues.inspectingTimes
+  ) {
+    contextValuesRef.current.heartBeat({
+      inspectingTime: contextValues.inspectingTime,
+      listKey: props.itemKey,
+    });
+    contextValuesRef.current = contextValues;
+    // changed = true;
+  }
+
+  return <MemoedGroupListItem {...props} />;
+};
+
+export default GroupListItemWrapper;

ui/group/src/react-native/GroupListItemImpl.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+
+import ListItem from './ListItem';
+import { GroupListItemImplProps, DefaultItemT } from '../types';
+
+const GroupListItemImpl = <ItemT extends DefaultItemT>(
+  props: GroupListItemImplProps<ItemT>
+) => {
+  const {
+    item,
+    listKey,
+    dimensions,
+    itemMeta,
+    containerKey,
+    renderItem: RenderItem,
+    teleportItemProps,
+    CellRendererComponent,
+    scrollComponentUseMeasureLayout,
+    ...rest
+  } = props;
+
+  const getMetaOnViewableItemsChanged = useCallback(() => {
+    return {
+      item,
+      index: itemMeta.getIndexInfo?.()?.index,
+    };
+  }, [item]);
+
+  const teleportProps =
+    typeof teleportItemProps === 'function'
+      ? // @ts-ignore
+        teleportItemProps({ item, index: itemMeta.getIndexInfo?.()?.index })
+      : {};
+
+  return (
+    <ListItem
+      item={item}
+      listKey={listKey}
+      itemMeta={itemMeta}
+      dimensions={dimensions}
+      containerKey={containerKey}
+      CellRendererComponent={CellRendererComponent}
+      getMetaOnViewableItemsChanged={getMetaOnViewableItemsChanged}
+      scrollComponentUseMeasureLayout={scrollComponentUseMeasureLayout}
+    >
+      {React.isValidElement(RenderItem) ? (
+        RenderItem
+      ) : RenderItem ? (
+        <RenderItem
+          item={item}
+          {...teleportProps}
+          {...rest}
+          // @ts-ignore
+          itemMeta={itemMeta}
+        />
+      ) : null}
+    </ListItem>
+  );
+};
+
+export default GroupListItemImpl;