Feat UI masonry (#85)

* feat: init ui masonry

* feat: add masonry source

tsconfig.json

@@ -19,6 +19,7 @@
     "paths": {
       "@infinite-list/group": ["ui/group/src/index.ts"],
       "@infinite-list/list": ["ui/list/src/index.ts"],
+      "@infinite-list/masonry": ["ui/masonry/src/index.ts"],
       "@infinite-list/scroller/react-native": ["ui/scroller/src/react-native"],
       "@infinite-list/scroller/web": ["ui/scroller/src/web"]
     }

ui/masonry/.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/masonry/README.md

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

ui/masonry/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/masonry/jest.config.ts

@@ -0,0 +1,22 @@
+module.exports = {
+  displayName: 'masonry',
+  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/masonry',
+};

ui/masonry/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@infinite-list/masonry",
+  "version": "0.0.1",
+  "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:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

ui/masonry/project.json

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

ui/masonry/rollup.config.js

@@ -0,0 +1,42 @@
+const { withNx } = require('@nx/rollup/with-nx');
+
+module.exports = withNx(
+  {
+    // main: './src/index.ts',
+    additionalEntryPoints: [],
+    outputPath: '../../dist/ui/masonry',
+    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/masonry/src/react-native/ColumnStateRender.tsx

@@ -0,0 +1,38 @@
+import { Fragment } from 'react';
+
+import { GenericItemT, RecycleStateResult } from '@infinite-list/data-model';
+import { ColumnStateRendererProps } from './types';
+
+import RecycleItem from './RecycleItem';
+import SpaceItem from './SpaceItem';
+
+const ColumnStateRenderer = <ItemT extends GenericItemT>(
+  props: ColumnStateRendererProps<ItemT>
+) => {
+  const { state, columnIndex, columnDimensions, ...rest } = props;
+  const current = state[0] as RecycleStateResult<ItemT>;
+  return (
+    <Fragment>
+      {current.spaceState.map((data) => (
+        <SpaceItem
+          {...rest}
+          data={data}
+          key={data.key}
+          columnIndex={columnIndex}
+          columnDimension={columnDimensions[columnIndex]}
+        />
+      ))}
+      {current.recycleState.map((data) => (
+        <RecycleItem
+          {...rest}
+          data={data}
+          key={data.key}
+          columnIndex={columnIndex}
+          columnDimension={columnDimensions[columnIndex]}
+        />
+      ))}
+    </Fragment>
+  );
+};
+
+export default ColumnStateRenderer;