chore(Table): minor updates (#253)

- Add `storybook-addon-rtl`
- `records` can be undefined
- pagination: create a real RTL version
- Use UTF8 characters for arrows
- Fix the position of the `PageSize` select
- Fix the background of the `PageSize` select depending on the direction

packages/visualizations-react/.storybook/main.js

@@ -6,7 +6,11 @@ function getAbsolutePath(value) {
 
 export default {
     stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
-    addons: [getAbsolutePath("@storybook/addon-links"), getAbsolutePath("@storybook/addon-essentials")],
+    addons: [
+        getAbsolutePath("@storybook/addon-links"),
+        getAbsolutePath("@storybook/addon-essentials"),
+        "storybook-addon-rtl"
+    ],
     // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
     typescript: {
         check: true, // type-check stories during Storybook build
@@ -22,5 +26,3 @@ export default {
         }
     }
 };
-
-

packages/visualizations-react/package.json

@@ -111,6 +111,7 @@
         "rollup-plugin-terser": "^7.0.2",
         "size-limit": "^8.1.0",
         "storybook": "^7.6.17",
+        "storybook-addon-rtl": "^1.0.0",
         "tslib": "^2.1.0",
         "typescript": "4.6"
     },

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

@@ -27,44 +27,47 @@ const fetchingData: Async<TableData> = {
 
 const Template: ComponentStory<typeof Table> = args => <Table {...args} />;
 
-export const Playground = Template.bind({});
-Playground.args = {
-    data,
-    options,
-};
-
 const CustomStyleTemplate: ComponentStory<typeof Table> = args => (
     <div className="table-story--custom-style">
         <Table {...args} />
     </div>
 );
-export const CustomStyle = CustomStyleTemplate.bind({});
-CustomStyle.args = {
-    data,
-    options: {
-        ...options,
-        pagination: {
-            current: 1,
-            totalRecords: value.length,
-            recordsPerPage: 5,
-            onPageChange: () => {},
-            pageSizeSelect: {
-                options: [
-                    { label: '5 per page', value: 5 },
-                    { label: '10 per page', value: 10 },
-                ],
-                onChange: () => {},
-            },
-        },
-    },
-};
 
 const ScrollTemplate: ComponentStory<typeof Table> = args => (
     <div style={{ maxWidth: '800px' }}>
         <Table {...args} />
     </div>
 );
 
+const optionsWithPagination = {
+    ...options,
+    pagination: {
+        current: 1,
+        totalRecords: value.length,
+        recordsPerPage: 5,
+        onPageChange: () => {},
+        pageSizeSelect: {
+            options: [
+                { label: '5 per page', value: 5 },
+                { label: '10 per page', value: 10 },
+            ],
+            onChange: () => {},
+        },
+    },
+};
+
+export const Playground = Template.bind({});
+Playground.args = {
+    data,
+    options,
+};
+
+export const CustomStyle = CustomStyleTemplate.bind({});
+CustomStyle.args = {
+    data,
+    options: optionsWithPagination,
+};
+
 export const Scroll = ScrollTemplate.bind({});
 Scroll.args = {
     data,
@@ -94,3 +97,10 @@ emptyState.args = {
     data: { value: [], loading: false },
     options: { ...options, emptyStateLabel: 'Neniuj registroj trovitaj...' },
 };
+
+export const RtlDirection = Template.bind({});
+RtlDirection.parameters = { direction: 'rtl' };
+RtlDirection.args = {
+    data,
+    options: optionsWithPagination,
+};

packages/visualizations-react/stories/Table/custom-style.css

@@ -1,20 +1,29 @@
 .table-story--custom-style .table-wrapper {
     border-color: #fcd4cf;
 }
+
 .table-story--custom-style thead {
     border-bottom-color: #f94346;
     border-bottom-width: 2px;
     background-color: #fd635d;
     color:#ffffff;
 }
 
+.table-story--custom-style tbody {
+    background-color: whitesmoke;
+}
+
 .table-story--custom-style tbody tr {
     border-bottom-color: #fcd4cf;
 }
 .table-story--custom-style tbody tr:hover {
     background-color: #f9aea4;
 }
 
+.table-story--custom-style .pagination {
+    background-color: seashell;
+}
+
 .table-story--custom-style .pagination .arrow-button,
 .table-story--custom-style .pagination .page-button {
     color:  #f94346;

packages/visualizations/src/components/Pagination/Button.svelte

@@ -1,33 +1,29 @@
 <script lang="ts">
-    /* I don't know why Component type doesn't work. It works with TS when compiled, or with
-    npm run watch, but doesn't pass linting… */
-    // import type { ComponentType } from 'svelte';
-    import type DoubleLeft from './DoubleLeft.svelte';
-    import type SingleLeft from './SingleLeft.svelte';
-    import type DoubleRight from './DoubleRight.svelte';
-    import type SingleRight from './SingleRight.svelte';
-
-    export let icon:
-        | typeof DoubleLeft
-        | typeof SingleLeft
-        | typeof DoubleRight
-        | typeof SingleRight;
+    const angleQuotationMark = {
+        singleLeft: '&lsaquo;',
+        singleRight: '&rsaquo;',
+        doubleLeft: '&laquo;',
+        doubleRight: '&raquo;',
+    };
+    export let pointingAngle: keyof typeof angleQuotationMark;
     export let disabled = false;
     export let label: string | undefined;
 </script>
 
 <button on:click {disabled} aria-label={label} class={$$props.class}>
-    <svelte:component this={icon} />
+    {@html angleQuotationMark[pointingAngle]}
 </button>
 
 <style lang="scss">
     button {
         height: 28px;
         width: 28px;
-        padding: var(--spacing-50);
         background: none;
         border: none;
         cursor: pointer;
+        font-size: 18px;
+        display: flex;
+        justify-content: center;
     }
 
     button:disabled {

packages/visualizations/src/components/Pagination/PageSize.svelte

@@ -30,14 +30,18 @@
         background-color: white;
         padding: var(--spacing-50);
         border: solid 1px var(--border-color);
-        border-radius: var(--border-radius-2);
+        border-radius: var(--border-radius-6);
         width: fit-content;
         /* remove all styles and re-add arrow to fix Safari appearance */
-        background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+')
+        background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+')
             no-repeat 95% 50%;
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
-        padding-right: var(--spacing-100);
+        padding-inline-end: var(--spacing-100);
+    }
+
+    :global(html[dir='rtl'] .ods-dataviz--default) select {
+        background-position: 5%;
     }
 </style>

packages/visualizations/src/components/Pagination/Pages.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
     import Button from './Button.svelte';
-    import DoubleLeft from './DoubleLeft.svelte';
-    import DoubleRight from './DoubleRight.svelte';
-    import SingleLeft from './SingleLeft.svelte';
-    import SingleRight from './SingleRight.svelte';
     import { getPages } from './utils';
     import type { Pagination } from './types';
 
@@ -19,7 +15,7 @@
     <li>
         <Button
             on:click={() => onPageChange(1)}
-            icon={DoubleLeft}
+            pointingAngle="doubleLeft"
             label={labels?.firstPage}
             disabled={current === 1}
             class="arrow-button"
@@ -28,7 +24,7 @@
     <li>
         <Button
             on:click={() => onPageChange(current - 1)}
-            icon={SingleLeft}
+            pointingAngle="singleLeft"
             label={labels?.previousPage}
             disabled={current === 1}
             class="arrow-button"
@@ -54,7 +50,7 @@
     <li>
         <Button
             on:click={() => onPageChange(current + 1)}
-            icon={SingleRight}
+            pointingAngle="singleRight"
             label={labels?.nextPage}
             disabled={current === totalPages}
             class="arrow-button"
@@ -63,7 +59,7 @@
     <li>
         <Button
             on:click={() => onPageChange(totalPages)}
-            icon={DoubleRight}
+            pointingAngle="doubleRight"
             label={labels?.lastPage}
             disabled={current === totalPages}
             class="arrow-button"
@@ -85,13 +81,9 @@
     }
 
     li {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
         height: 28px;
-        width: 28px;
+        min-width: 28px;
         text-align: center;
-        vertical-align: middle;
     }
 
     li button {

packages/visualizations/src/components/Pagination/Pagination.svelte

@@ -50,7 +50,7 @@
         grid-template-columns: repeat(3, minmax(0, 1fr));
         align-items: center;
         gap: var(--spacing-100);
-        padding: 13px 0;
+        padding: 13px;
         .numbering {
             grid-area: numbering;
         }
@@ -59,7 +59,7 @@
         }
         .page-size {
             grid-area: size;
-            margin-left: auto;
+            justify-self: end;
         }
     }
 

packages/visualizations/src/components/Table/Body.svelte

@@ -4,12 +4,12 @@
 
     export let loadingRowsNumber: number | null;
     export let columns: Column[];
-    export let records: TableData;
+    export let records: TableData | undefined;
     export let emptyStateLabel = 'No records found...';
 </script>
 
 <tbody>
-    {#if records.length === 0 && !loadingRowsNumber}
+    {#if records?.length === 0 && !loadingRowsNumber}
         <tr>
             <td colspan={columns.length}>
                 <em>{emptyStateLabel}</em>
@@ -24,7 +24,7 @@
                 {/each}
             </tr>
         {/each}
-    {:else}
+    {:else if records}
         {#each records as record}
             <tr>
                 {#each columns as column}

packages/visualizations/src/components/Table/Cell/Cell.svelte

@@ -17,7 +17,6 @@
 
 <style>
     :global(.ods-dataviz--default td) {
-        text-align: left;
         padding: var(--spacing-75);
     }