feat: implement columnValueProcessor with either object or function t…

…o pass around (#198)

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/many-apricots-hope.md

@@ -0,0 +1,5 @@
+---
+'react-bs-datatable': minor
+---
+
+feat: implement columnValueProcessor with either object or function to pass around

.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - run: yarn
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        with:
+          publish: yarn release
+          commit: 'chore: version packages'
+          title: 'chore: version packages'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmignore

@@ -1,7 +1,7 @@
+.changeset/
 .devcontainer/
 .github/
 .storybook/
-.swc/
 .yarn/
 api/
 docs/
@@ -11,13 +11,12 @@ src/
 # This is the "dumping" space for all kinds of generator.
 out/
 
-*.log
-.travis.yml
 .babelrc
-tsconfig*
+*.log
+*.yml
+*.ts
 .prettierrc.json
-setupTests.ts
-jest.config.*
+tsconfig*
 typedoc.json
 
 # Markdowns.

package.json

@@ -36,6 +36,7 @@
     "@babel/preset-env": "7.3.4",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.3.3",
+    "@changesets/cli": "2.27.1",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.2.0",

src/__stories__/00-Uncontrolled.test.tsx

@@ -15,6 +15,7 @@ import { StoryColumnType } from './resources/types';
 import { CheckboxState, TableColumnType } from '../helpers/types';
 
 import TABLE_DATA from './resources/story-data.json';
+import { FilterSortPaginationWithSortValueObjStoryComponent } from './00-Uncontrolled/00-FilterSortPagination';
 
 const PAGINATION_SIZE_8_PROPS = {
   rowsPerPage: 8,
@@ -67,95 +68,131 @@ describe('Filter, sort, pagination', () => {
     });
   });
 
-  test('normal use case', () => {
-    const {
-      getByText,
-      getByRole,
-      getByLabelText,
-      queryByText,
-      getByPlaceholderText
-    } = render(<FilterSortPagination {...PAGINATION_SIZE_8_PROPS} />);
-    let firstBtnElement = getByText('First');
-    let lastBtnElement = getByText('Last');
-    let tableElement = getByRole('table');
-
-    expect(firstBtnElement).toBeDisabled();
-    expect(lastBtnElement).toBeInTheDocument();
-
-    // Test go to the last pagination.
-    fireEvent.click(lastBtnElement);
-
-    expect(firstBtnElement).not.toBeDisabled();
-    expect(lastBtnElement).toBeDisabled();
-
-    // With 8 rows per page, the last page should only have 4 rows.
-    expect(
-      tableElement.querySelector('tbody')?.querySelectorAll('tr').length
-    ).toBe(4);
-
-    // Try filtering. It should go back to the first page.
-    let filterElement = getByPlaceholderText('Enter text...');
-    fireEvent.change(filterElement, { target: { value: 'aaren' } });
-
-    let firstNumButtonElement = queryByText('1');
-    let secondNumButtonElement = queryByText('2');
-    let thirdNumButtonElement = queryByText('3');
-    firstBtnElement = getByText('First');
-    lastBtnElement = getByText('Last');
-
-    // All buttons should be disabled, and the "2" and "3" page button
-    // should not exist in the table.
-    expect(firstBtnElement).toBeDisabled();
-    expect(lastBtnElement).toBeDisabled();
-    expect(firstNumButtonElement).toBeDisabled();
-    expect(secondNumButtonElement).not.toBeInTheDocument();
-    expect(thirdNumButtonElement).not.toBeInTheDocument();
-
-    expect(
-      tableElement.querySelector('tbody')?.querySelectorAll('tr').length
-    ).toBe(1);
-
-    // Reset the filter first by clicking the "X" clear filter button.
-    let clearFilterButton = getByLabelText('Clear filter');
-    fireEvent.click(clearFilterButton);
-
-    firstNumButtonElement = queryByText('1');
-    secondNumButtonElement = queryByText('2');
-    thirdNumButtonElement = queryByText('3');
-    firstBtnElement = getByText('First');
-    lastBtnElement = getByText('Last');
-
-    expect(firstBtnElement).toBeDisabled();
-    expect(lastBtnElement).not.toBeDisabled();
-    expect(firstNumButtonElement).toBeDisabled();
-    expect(secondNumButtonElement).not.toBeDisabled();
-    expect(thirdNumButtonElement).not.toBeDisabled();
-
-    expect(
-      tableElement.querySelector('tbody')?.querySelectorAll('tr').length
-    ).toBe(8);
-
-    // Try sorting.
-    // Sort descending the first column (since it's the initial state).
-    let nameTh = getByText('Name', { selector: 'th' });
-    fireEvent.click(nameTh);
-
-    let tableRows = tableElement.querySelector('tbody')?.querySelectorAll('tr');
-    expect(tableRows).toBeDefined();
-    expect(tableRows?.[0].querySelector('td')?.textContent).toBe('Wileen');
-    expect(nameTh.getAttribute('data-sort-order')).toBe('desc');
-
-    // Try sorting the other columns.
-    let usernameTh = getByText('Username', { selector: 'th' });
-    fireEvent.click(usernameTh);
+  describe('normal use case', () => {
+    const elements = [
+      {
+        name: 'normal',
+        element: <FilterSortPagination {...PAGINATION_SIZE_8_PROPS} />
+      },
+      {
+        name: 'columnValueProcessor',
+        element: (
+          <FilterSortPaginationWithSortValueObjStoryComponent
+            {...PAGINATION_SIZE_8_PROPS}
+          />
+        )
+      }
+    ];
 
-    // The clicked header should have its sort state.
-    tableRows = tableElement.querySelector('tbody')?.querySelectorAll('tr');
-    expect(tableRows).toBeDefined();
-    expect(tableRows?.[0].querySelector('td')?.textContent).toBe('Aaren');
-    expect(usernameTh.getAttribute('data-sort-order')).toBe('asc');
-    // Meanwhile, the "Name" header should reset to its default state.
-    expect(nameTh.getAttribute('data-sort-order')).toBe(null);
+    for (const element of elements) {
+      test(element.name, () => {
+        const {
+          getByText,
+          getByRole,
+          getByLabelText,
+          queryByText,
+          getByPlaceholderText
+        } = render(<FilterSortPagination {...PAGINATION_SIZE_8_PROPS} />);
+        let firstBtnElement = getByText('First');
+        let lastBtnElement = getByText('Last');
+        let tableElement = getByRole('table');
+
+        expect(firstBtnElement).toBeDisabled();
+        expect(lastBtnElement).toBeInTheDocument();
+
+        // Test go to the last pagination.
+        fireEvent.click(lastBtnElement);
+
+        expect(firstBtnElement).not.toBeDisabled();
+        expect(lastBtnElement).toBeDisabled();
+
+        // With 8 rows per page, the last page should only have 4 rows.
+        expect(
+          tableElement.querySelector('tbody')?.querySelectorAll('tr').length
+        ).toBe(4);
+
+        // Try filtering. It should go back to the first page.
+        let filterElement = getByPlaceholderText('Enter text...');
+        fireEvent.change(filterElement, { target: { value: 'aaren' } });
+
+        let firstNumButtonElement = queryByText('1');
+        let secondNumButtonElement = queryByText('2');
+        let thirdNumButtonElement = queryByText('3');
+        firstBtnElement = getByText('First');
+        lastBtnElement = getByText('Last');
+
+        // All buttons should be disabled, and the "2" and "3" page button
+        // should not exist in the table.
+        expect(firstBtnElement).toBeDisabled();
+        expect(lastBtnElement).toBeDisabled();
+        expect(firstNumButtonElement).toBeDisabled();
+        expect(secondNumButtonElement).not.toBeInTheDocument();
+        expect(thirdNumButtonElement).not.toBeInTheDocument();
+
+        expect(
+          tableElement.querySelector('tbody')?.querySelectorAll('tr').length
+        ).toBe(1);
+
+        // Reset the filter first by clicking the "X" clear filter button.
+        let clearFilterButton = getByLabelText('Clear filter');
+        fireEvent.click(clearFilterButton);
+
+        firstNumButtonElement = queryByText('1');
+        secondNumButtonElement = queryByText('2');
+        thirdNumButtonElement = queryByText('3');
+        firstBtnElement = getByText('First');
+        lastBtnElement = getByText('Last');
+
+        expect(firstBtnElement).toBeDisabled();
+        expect(lastBtnElement).not.toBeDisabled();
+        expect(firstNumButtonElement).toBeDisabled();
+        expect(secondNumButtonElement).not.toBeDisabled();
+        expect(thirdNumButtonElement).not.toBeDisabled();
+
+        expect(
+          tableElement.querySelector('tbody')?.querySelectorAll('tr').length
+        ).toBe(8);
+
+        // Try sorting.
+        // Sort descending the first column (since it's the initial state).
+        let nameTh = getByText('Name', { selector: 'th' });
+        fireEvent.click(nameTh);
+
+        let tableRows = tableElement
+          .querySelector('tbody')
+          ?.querySelectorAll('tr');
+        expect(tableRows).toBeDefined();
+        expect(tableRows?.[0].querySelector('td')?.textContent).toBe('Wileen');
+        expect(nameTh.getAttribute('data-sort-order')).toBe('desc');
+
+        // Try sorting the other columns.
+        let usernameTh = getByText('Username', { selector: 'th' });
+        fireEvent.click(usernameTh);
+
+        // The clicked header should have its sort state.
+        tableRows = tableElement.querySelector('tbody')?.querySelectorAll('tr');
+        expect(tableRows).toBeDefined();
+        expect(tableRows?.[0].querySelector('td')?.textContent).toBe('Aaren');
+        expect(usernameTh.getAttribute('data-sort-order')).toBe('asc');
+        // Meanwhile, the "Name" header should reset to its default state.
+        expect(nameTh.getAttribute('data-sort-order')).toBe(null);
+
+        // Try sorting by the "date". Ascending sort should show "Alisha" as the first row and descending sort should show "Fred" as the first row.
+        let dateTh = getByText('Last Update', { selector: 'th' });
+        fireEvent.click(dateTh);
+
+        tableRows = tableElement.querySelector('tbody')?.querySelectorAll('tr');
+        expect(tableRows?.[0].querySelector('td')?.textContent).toBe('Alisha');
+        expect(dateTh.getAttribute('data-sort-order')).toBe('asc');
+
+        // Sort descending.
+        fireEvent.click(dateTh);
+
+        tableRows = tableElement.querySelector('tbody')?.querySelectorAll('tr');
+        expect(tableRows?.[0].querySelector('td')?.textContent).toBe('Fred');
+        expect(dateTh.getAttribute('data-sort-order')).toBe('desc');
+      });
+    }
   });
 
   describe('custom pagination range', () => {