Feature/sc-46253/sdk-table-pagination (#229)

* feat: add pagination components and stories

packages/visualizations-react/package.json

@@ -48,7 +48,8 @@
         "tabWidth": 4,
         "semi": true,
         "singleQuote": true,
-        "trailingComma": "es5"
+        "trailingComma": "es5",
+        "arrowParens": "avoid"
     },
     "dependencies": {
         "@opendatasoft/visualizations": "0.22.0",

packages/visualizations-react/stories/Table/Pagination.stories.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { TableProps } from '@opendatasoft/visualizations';
+import { Table } from '../../src';
+import value from './data';
+import options from './options';
+import './pagination.css';
+
+const meta: ComponentMeta<typeof Table> = {
+    title: 'Table/Pagination',
+    component: Table,
+};
+export default meta;
+
+const data: TableProps['data'] = {
+    value,
+    loading: false,
+};
+
+const sliceDataX = (numberPerPage: number) => (fullData: TableProps['data'], page: number) => {
+    const startIndex = (page - 1) * numberPerPage;
+    return fullData.value?.slice(startIndex, startIndex + numberPerPage);
+};
+
+const makeTemplate = (numberPerPage: number) => {
+    const sliceData = sliceDataX(numberPerPage);
+    const PaginatedTemplate: ComponentStory<typeof Table> = args => {
+        const { data: rawData, options: paginatedOptions } = args;
+        const { pagination } = paginatedOptions;
+        const { initial = 0 } = pagination || {};
+        const [records, setRecords] = useState(sliceData(rawData, initial || 1));
+        if (paginatedOptions.pagination && rawData.value) {
+            paginatedOptions.pagination.onChangePage = async (page: number) => {
+                await setTimeout(() => {
+                    setRecords(sliceData(rawData, page));
+                }, 300);
+            };
+        }
+
+        const paginatedData = { value: records, isLoading: false };
+        return <Table data={paginatedData} options={paginatedOptions} />;
+    };
+    return PaginatedTemplate;
+};
+
+const paginatedOptions = {
+    ...options,
+    pagination: {
+        initial: 2,
+        recordsPerPage: 3,
+        totalRecords: value.length,
+        onChangePage: () => {}, // set in template
+    },
+};
+const PaginatedTemplate = makeTemplate(3);
+export const Paginated = PaginatedTemplate.bind({});
+Paginated.args = {
+    data,
+    options: paginatedOptions,
+};
+
+const longPagesOptions = {
+    ...options,
+    pagination: {
+        initial: 1,
+        recordsPerPage: 10,
+        totalRecords: value.length,
+        onChangePage: () => {}, // set in template
+    },
+};
+const LongPaginatedTemplate = makeTemplate(10);
+export const LongPages = LongPaginatedTemplate.bind({});
+LongPages.args = {
+    data,
+    options: longPagesOptions,
+};
+
+const shortPagesOptions = {
+    ...options,
+    pagination: {
+        initial: 1,
+        recordsPerPage: 2,
+        totalRecords: value.length,
+        onChangePage: () => {}, // set in template
+    },
+};
+const ShortPaginatedTemplate = makeTemplate(2);
+export const ShortPages = ShortPaginatedTemplate.bind({});
+ShortPages.args = {
+    data,
+    options: shortPagesOptions,
+};
+
+
+const StyledPaginated: ComponentStory<typeof Table> = args => (
+    <div className="custom-pagination">
+        <PaginatedTemplate {...args} />
+    </div>
+);
+
+export const CustomStyle = StyledPaginated.bind({});
+CustomStyle.args = {
+    data,
+    options: {
+        ...paginatedOptions,
+        unstyled: true,
+    },
+};

packages/visualizations-react/stories/Table/Table.stories.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Column, TableOptions, TableData, Async } from '@opendatasoft/visualizations';
+import type { TableData, Async } from '@opendatasoft/visualizations';
 
 import './custom-style.css';
 
 import { Table } from '../../src';
 
 import value from './data';
+import options from './options';
 
 const meta: ComponentMeta<typeof Table> = {
     title: 'Table/Table',
@@ -19,74 +20,15 @@ const data: Async<TableData> = {
     loading: false,
 };
 
-const columns: Column[] = [
-    {
-        title: 'Title',
-        key: 'title',
-        dataFormat: 'short-text',
-    },
-    {
-        title: 'Price',
-        key: 'price',
-        dataFormat: 'number',
-        options: {
-            style: 'currency',
-            currency: 'EUR',
-        },
-    },
-    {
-        title: 'Content',
-        key: 'content',
-        dataFormat: 'long-text',
-    },
-    {
-        title: 'Published date',
-        key: 'datePublished',
-        dataFormat: 'date',
-        options: { dateStyle: 'full' },
-    },
-    {
-        title: 'Featured',
-        key: 'isFeatured',
-        dataFormat: 'boolean',
-    },
-    {
-        title: 'Word count',
-        key: 'wordCount',
-        dataFormat: 'number',
-    },
-    {
-        title: 'Reading time',
-        key: 'readingTime',
-        dataFormat: 'number',
-    },
-    {
-        title: 'URL',
-        key: 'url',
-        dataFormat: 'url',
-    },
-];
-
-const options: TableOptions = {
-    columns,
-    title: 'My table',
-    subtitle: 'and a subtitle...',
-    description: 'An aria description',
-    source: {
-        href: '',
-    },
-    locale: 'fr',
-};
-
-const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />;
+const Template: ComponentStory<typeof Table> = args => <Table {...args} />;
 
 export const Playground = Template.bind({});
 Playground.args = {
     data,
     options,
 };
 
-const CustomStyleTemplate: ComponentStory<typeof Table> = (args) => (
+const CustomStyleTemplate: ComponentStory<typeof Table> = args => (
     <div className="table-story--custom-style">
         <Table {...args} />
     </div>
@@ -97,7 +39,7 @@ CustomStyle.args = {
     options,
 };
 
-const ScrollTemplate: ComponentStory<typeof Table> = (args) => (
+const ScrollTemplate: ComponentStory<typeof Table> = args => (
     <div style={{ maxWidth: '800px' }}>
         <Table {...args} />
     </div>

packages/visualizations-react/stories/Table/options.ts

@@ -0,0 +1,62 @@
+import type { Column, TableOptions } from '@opendatasoft/visualizations';
+
+export const columns: Column[] = [
+    {
+        title: 'Title',
+        key: 'title',
+        dataFormat: 'short-text',
+    },
+    {
+        title: 'Price',
+        key: 'price',
+        dataFormat: 'number',
+        options: {
+            style: 'currency',
+            currency: 'EUR',
+        },
+    },
+    {
+        title: 'Content',
+        key: 'content',
+        dataFormat: 'long-text',
+    },
+    {
+        title: 'Published date',
+        key: 'datePublished',
+        dataFormat: 'date',
+        options: { dateStyle: 'full' },
+    },
+    {
+        title: 'Featured',
+        key: 'isFeatured',
+        dataFormat: 'boolean',
+    },
+    {
+        title: 'Word count',
+        key: 'wordCount',
+        dataFormat: 'number',
+    },
+    {
+        title: 'Reading time',
+        key: 'readingTime',
+        dataFormat: 'number',
+    },
+    {
+        title: 'URL',
+        key: 'url',
+        dataFormat: 'url',
+    },
+];
+
+const options: TableOptions = {
+    columns,
+    title: 'My table',
+    subtitle: 'and a subtitle...',
+    description: 'An aria description',
+    source: {
+        href: '',
+    },
+    locale: 'fr',
+};
+
+export default options;

packages/visualizations-react/stories/Table/pagination.css

@@ -0,0 +1,14 @@
+.custom-pagination .ods-visualizations-table .pagination {
+flex-direction: row-reverse;
+justify-content: flex-start;
+}
+
+.custom-pagination .ods-visualizations-table .current {
+        border-radius: 999px;
+        box-shadow: rgb(85, 91, 255) 0px 0px 0px 1px, rgb(31, 193, 27) 0px 0px 0px 2px, rgb(255, 217, 19) 0px 0px 0px 3px, rgb(255, 156, 85) 0px 0px 0px 4px, rgb(255, 85, 85) 0px 0px 0px 5px;
+        color: rgba(240, 46, 170, 0.4);
+}
+
+.custom-pagination .ods-visualizations-table .numbering {
+        color: rgba(240, 46, 170, 0.2); 
+}

packages/visualizations/.eslintrc.js

@@ -9,32 +9,38 @@ module.exports = {
         'airbnb-base',
         'airbnb-typescript/base',
         'prettier',
+        'plugin:svelte/prettier',
     ],
     parser: '@typescript-eslint/parser',
     parserOptions: {
         project: './tsconfig.json',
         extraFileExtensions: ['.svelte'],
         tsconfigRootDir: __dirname,
     },
-    plugins: ['svelte3', '@typescript-eslint', 'prettier'],
+    plugins: ['@typescript-eslint', 'prettier'],
     overrides: [
         {
             files: ['*.svelte'],
-            processor: 'svelte3/svelte3',
-            settings: {
-                'import/core-modules': ['svelte'],
+            parser: 'svelte-eslint-parser',
+            // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
+            parserOptions: {
+                parser: '@typescript-eslint/parser',
             },
             rules: {
                 // Allowed in svelte
                 'import/first': 'off',
                 'import/no-mutable-exports': 'off',
                 'import/prefer-default-export': 'off',
+                'import/no-extraneous-dependencies': [
+                    'error',
+                    {
+                        devDependencies: true, // allows importintg from 'svelte'
+                    },
+                ],
+                '@typescript-eslint/no-unused-vars': 'off', // is reinjected inside <script>, but off in template
             },
         },
     ],
-    settings: {
-        'svelte3/typescript': true,
-    },
     rules: {
         semi: ['error', 'always'],
         '@typescript-eslint/semi': ['error', 'always'],
@@ -62,21 +68,6 @@ module.exports = {
                 ],
             },
         ],
-        'object-curly-newline': [
-            'error',
-            {
-                ObjectExpression: {
-                    minProperties: 6,
-                    multiline: true,
-                    consistent: true,
-                },
-                ObjectPattern: {
-                    minProperties: 6,
-                    multiline: true,
-                    consistent: true,
-                },
-            },
-        ],
         'import/no-named-as-default': 'off',
         'class-methods-use-this': 'off', // False positives with abstract methods
     },