@rttui/skin-anocca 1.0.16 → 1.0.17

package/src/stories/ReactTanstackTableUiStory.stories.tsx

@@ -1,207 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { getCoreRowModel } from "@tanstack/react-table";
-import { AnoccaSkin } from "..";
-import { ReactTanstackTableUi } from "./ReactTanstackTableUiStoryComponent";
-import { createSourceCode } from "./createSourceCode";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: "ReactTanstackTableUi",
-  component: ReactTanstackTableUi,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
-  },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    data: { control: "select" },
-    columns: { control: "select" },
-    pinColsRelativeTo: { control: "select", options: ["cols", "table"] },
-    skin: {
-      control: "object",
-      table: { disable: true },
-    },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    width: 600,
-    height: 400,
-    skin: AnoccaSkin,
-    autoCrushColumns: false,
-    data: "big",
-    columns: "few",
-    getCoreRowModel: getCoreRowModel(),
-    pinColsRelativeTo: "cols",
-    fillAvailableSpaceAfterCrush: false,
-    scrollbarWidth: 16,
-    getRowId: (row) => row.id,
-  },
-} satisfies Meta<typeof ReactTanstackTableUi>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    enableColumnPinning: true,
-    autoCrushColumns: false,
-    fillAvailableSpaceAfterCrush: false,
-    pinColsRelativeTo: "cols",
-  },
-  parameters: {
-    docs: {
-      source: { language: "tsx", code: createSourceCode() },
-    },
-  },
-};
-
-export const AutoCrushColumns: Story = {
-  args: {
-    autoCrushColumns: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        language: "tsx",
-        code: createSourceCode({ props: "  autoCrushColumns" }),
-      },
-    },
-  },
-};
-
-export const AutoCrushColumnsExceptName: Story = {
-  args: {
-    autoCrushColumns: true,
-    enableColumnPinning: true,
-    meta: {
-      name: {
-        autoCrush: false,
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      source: {
-        language: "tsx",
-        code: createSourceCode({
-          props: "  autoCrushColumns",
-          nameMeta: "    autoCrush: false,",
-        }),
-      },
-    },
-  },
-};
-
-export const PinRelativeToCols: Story = {
-  args: {
-    autoCrushColumns: true,
-    pinColsRelativeTo: "cols",
-    enableColumnPinning: true,
-    initialState: {
-      columnPinning: {
-        right: ["city"],
-      },
-    },
-  },
-};
-
-export const PinRelativeToTable: Story = {
-  args: {
-    autoCrushColumns: true,
-    pinColsRelativeTo: "table",
-    enableColumnPinning: true,
-    initialState: {
-      columnPinning: {
-        right: ["city"],
-      },
-    },
-  },
-};
-
-export const FillAvailableSpaceAfterCrush: Story = {
-  args: {
-    autoCrushColumns: true,
-    fillAvailableSpaceAfterCrush: true,
-  },
-};
-
-export const FillAvailableSpaceAfterCrushExceptName: Story = {
-  args: {
-    autoCrushColumns: true,
-    fillAvailableSpaceAfterCrush: true,
-    meta: {
-      name: {
-        fillAvailableSpaceAfterCrush: false,
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      source: {
-        language: "tsx",
-        code: createSourceCode({
-          props: "  autoCrushColumns\n  fillAvailableSpaceAfterCrush",
-          nameMeta: "    fillAvailableSpaceAfterCrush: false,",
-        }),
-      },
-    },
-  },
-};
-
-export const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =
-  {
-    args: {
-      autoCrushColumns: true,
-      fillAvailableSpaceAfterCrush: true,
-      scrollbarWidth: 0,
-    },
-  };
-
-export const CanPinRowsRelativeToRows: Story = {
-  args: {
-    enableRowPinning: true,
-    enableColumnPinning: true,
-    data: "small",
-    pinRowsRelativeTo: "rows",
-    initialState: {
-      rowPinning: {
-        bottom: ["3"],
-      },
-    },
-  },
-};
-
-export const CanPinRowsRelativeToTable: Story = {
-  args: {
-    enableRowPinning: true,
-    enableColumnPinning: true,
-    data: "small",
-    pinRowsRelativeTo: "table",
-    initialState: {
-      rowPinning: {
-        bottom: ["3"],
-      },
-    },
-  },
-};
-
-export const SizeByLargestHeader: Story = {
-  args: {
-    autoCrushColumns: true,
-    crushMinSizeBy: "cell",
-  },
-};
-
-export const SizeByLargestHeaderWithMeta: Story = {
-  args: {
-    autoCrushColumns: true,
-    crushMinSizeBy: "header",
-    enableColumnPinning: true,
-    meta: {
-      age: {
-        crushMinSizeBy: 'cell',
-      },
-    },
-  },
-};

package/src/stories/ReactTanstackTableUiStoryComponent.tsx

@@ -1,113 +0,0 @@
-import { Box, ScopedCssBaseline, ThemeProvider, Typography } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import {
-  decorateColumnHelper,
-  ReactTanstackTableUi as TableComponent,
-} from "@rttui/core";
-import {
-  ColumnDef,
-  ColumnMeta,
-  createColumnHelper,
-  Table,
-  TableOptions,
-  useReactTable,
-} from "@tanstack/react-table";
-import { HeaderPinButtons } from "../HeaderPinButtons";
-import React from "react";
-import { RowPinButtons } from "../RowPinButtons";
-type Person = {
-  id: string;
-  name: string;
-  age: number;
-  city: string;
-} & Record<`col${number}`, string>;
-
-const smallData: Person[] = [
-  { id: "1", name: "John", age: 20, city: "New York" },
-  { id: "2", name: "Jane", age: 21, city: "Los Angeles" },
-  { id: "3", name: "Jim", age: 22, city: "Chicago" },
-];
-
-const bigData: Person[] = Array.from({ length: 1000 }, (_, i) => ({
-  id: i.toString(),
-  name: `Person ${i}`,
-  age: 20 + i,
-  city: `City ${i}`,
-  ...Object.fromEntries(
-    Array.from({ length: 100 }, (_, j) => [`col${j}`, `Value ${i}-${j}`]),
-  ),
-}));
-
-export const ReactTanstackTableUi = (
-  props: {
-    data: "big" | "small";
-    columns: "many" | "few";
-    meta?: Record<string, ColumnMeta<Person, string>>;
-  } & Omit<TableOptions<Person>, "data" | "columns"> &
-    Omit<React.ComponentProps<typeof TableComponent>, "table">,
-) => {
-  const theme = useTheme();
-  const data: Person[] = props.data === "big" ? bigData : smallData;
-
-  const columns: ColumnDef<Person>[] = React.useMemo(() => {
-    const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {
-      header: (original) => (
-        <Box sx={{ display: "flex", gap: 2 }}>
-          {original}
-          {props.enableColumnPinning && <HeaderPinButtons />}
-        </Box>
-      ),
-    });
-
-    const fewColumns = [
-      columnHelper.accessor("name", {
-        header: "Name",
-        cell: (info) => (
-          <Box sx={{ display: "flex", gap: 2, flex: 1 }}>
-            <Typography variant="body2">{info.getValue()}</Typography>
-            {props.enableRowPinning && <Box sx={{ flexGrow: 1 }} />}
-            {props.enableRowPinning && <RowPinButtons row={info.row} />}
-          </Box>
-        ),
-        meta: props.meta?.["name"],
-      }),
-      columnHelper.accessor("age", {
-        header: "Age",
-        meta: props.meta?.["age"],
-        cell: (info) => <Typography variant="body2">{info.getValue()}</Typography>,
-        size: 50,
-      }),
-      columnHelper.accessor("city", {
-        header: "City",
-        meta: props.meta?.["city"],
-        cell: (info) => <Typography variant="body2">{info.getValue()}</Typography>,
-      }),
-    ];
-
-    const manyColumns = [
-      ...fewColumns,
-      ...Array.from({ length: 100 }, (_, i) =>
-        columnHelper.accessor(`col${i}`, {
-          header: `Column ${i}`,
-          cell: (info) => <Typography variant="body2">{info.getValue()}</Typography>,
-        }),
-      ),
-    ];
-
-    return props.columns === "few" ? fewColumns : manyColumns;
-  }, [props.columns, props.enableColumnPinning, props.enableRowPinning, props.meta]);
-
-  const table = useReactTable({
-    ...props,
-    data,
-    columns,
-  });
-
-  return (
-    <ScopedCssBaseline>
-      <ThemeProvider theme={theme}>
-        <TableComponent {...props} table={table as Table<unknown>} />
-      </ThemeProvider>
-    </ScopedCssBaseline>
-  );
-};

package/src/stories/ScrollbarWidthSpecified.mdx

@@ -1,42 +0,0 @@
-import { Canvas, Meta, Story, Source, Controls } from '@storybook/blocks';
-import { Box } from '@mui/material';
- 
-import * as ColumnPinningStories from './ReactTanstackTableUiStory.stories';
- 
-<Meta of={ColumnPinningStories} />
-
-# ⚠️ No scrollbar width specified
-We get a horizontal scrollbar because we don't specify the width of the vertical scrollbar.
-```tsx
-<ReactTanstackTableUi
-  autoCrushColumns
-  fillAvailableSpaceAfterCrush
-/>
-```
-<Box sx={{
-  '*::-webkit-scrollbar': { width: '16px' },
-  '*::-webkit-scrollbar-track': { backgroundColor: 'yellow' },
-  '*::-webkit-scrollbar-thumb': { backgroundColor: 'blue' },
-}}
->
-  <Story of={ColumnPinningStories.FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth} />
-</Box>
-<br /><br />
-# ✅ Scrollbar width specified
-We specify the width of the vertical scrollbar and we correctly only see a vertical scrollbar.
-```tsx
-<ReactTanstackTableUi
-  autoCrushColumns
-  fillAvailableSpaceAfterCrush
-  scrollbarWidth={16}
-/>
-```
-<Box sx={{
-  '*::-webkit-scrollbar': { width: '16px' },
-  '*::-webkit-scrollbar-track': { backgroundColor: 'yellow' },
-  '*::-webkit-scrollbar-thumb': { backgroundColor: 'blue' },
-}}
->
-  <Story of={ColumnPinningStories.FillAvailableSpaceAfterCrushExceptName} />
-</Box>
-

package/tsconfig.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": "src",
-    "target": "ESNext",
-    "declaration": true,
-    "esModuleInterop": true,
-    "inlineSourceMap": false,
-    "lib": [
-      "esnext",
-      "dom"
-    ],
-    "listEmittedFiles": false,
-    "jsx": "react-jsx",
-    "listFiles": false,
-    "moduleResolution": "node",
-    "noFallthroughCasesInSwitch": true,
-    "pretty": true,
-    "resolveJsonModule": true,
-    "rootDir": "src",
-    "skipLibCheck": true,
-    "strict": true,
-    "traceResolution": false
-  },
-  "compileOnSave": false,
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
-  "include": [
-    "src"
-  ]
-}

package/tsconfig.types.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "outDir": "dist/types",
-    "emitDeclarationOnly": true,
-    "declarationDir": "dist/types"
-  }
-}

package/vite.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "path";
-import fs from "fs";
-let base: undefined | string;
-
-try {
-  const packageJson = fs.readFileSync(
-    path.join(__dirname, "package.json"),
-    "utf-8",
-  );
-  const viteBase = JSON.parse(packageJson).viteBase;
-  if (viteBase) {
-    base = viteBase;
-  }
-} catch (e) {
-  // ignore
-}
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-});