@atom-learning/components 2.43.0 → 2.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -3
- package/dist/components/data-table/DataTableContext.js +1 -1
- package/dist/components/data-table/DataTableContext.js.map +1 -1
- package/dist/components/grid/Grid.d.ts +4 -0
- package/dist/components/grid/Grid.js +1 -1
- package/dist/components/grid/Grid.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
# [2.
|
|
1
|
+
# [2.45.0](https://github.com/Atom-Learning/components/compare/v2.44.0...v2.45.0) (2023-03-15)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* make DosAndDonts a ul ([f7137d5](https://github.com/Atom-Learning/components/commit/f7137d5f75a2566588bd27fe3fd4a89cb61e4f50))
|
|
7
|
+
* typescript errors to make build:docs happy again ([eb911ef](https://github.com/Atom-Learning/components/commit/eb911ef0915f5351529174b78e28fc7a3eeff59f))
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
### Features
|
|
10
11
|
|
|
11
|
-
* add
|
|
12
|
+
* add Dos and Donts editor component ([f97df9d](https://github.com/Atom-Learning/components/commit/f97df9d6fc4f45987dae88c95f45cbf65102ca0a))
|
|
12
13
|
|
|
13
14
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
14
15
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useReactTable as
|
|
1
|
+
import{useReactTable as x,getCoreRowModel as G,getPaginationRowModel as z,getSortedRowModel as J,getFilteredRowModel as k}from"@tanstack/react-table";import*as t from"react";import B from"use-deep-compare-effect";import{AsyncDataState as n}from"./DataTable.types.js";import{getNewAsyncData as O}from"./getNewAsyncData.js";import{usePagination as U}from"./usePagination.js";import{useSortByColumn as V}from"./useSorting.js";const h=t.createContext(null),$=({columns:l,data:e=[],getAsyncData:o,defaultSort:R,initialState:s=void 0,children:E})=>{var D;const[g,u]=t.useState({results:e!=null?e:[],total:(D=e==null?void 0:e.length)!=null?D:0}),{isPaginated:i,applyPagination:C,paginationState:a,setPaginationState:M}=U(s==null?void 0:s.pagination),[P,d]=t.useState(n.NONE),[c,F]=t.useState(""),{setIsSortable:T,isSortable:S,sorting:r,setSorting:I}=V(R),m=t.useCallback(async b=>{if(o)try{d(n.PENDING);const w=await O(o,b,a,r,c);u(w),d(n.FULFILLED)}catch{d(n.REJECTED)}},[o,a==null?void 0:a.pageIndex,a==null?void 0:a.pageSize,r,c]);t.useEffect(()=>{m({})},[m]),B(()=>{!e||u({results:e,total:e.length})},[e]);const p=()=>g.total,v=x({columns:l,data:g.results,pageCount:a?Math.ceil(p()/a.pageSize):-1,initialState:s,state:{sorting:r,globalFilter:c,pagination:a},manualPagination:o&&i,manualSorting:o&&i,enableSorting:P!==n.PENDING,enableGlobalFilter:!o,getCoreRowModel:G(),getPaginationRowModel:i?z():void 0,getSortedRowModel:S||r.length?J():void 0,getFilteredRowModel:k(),onPaginationChange:i?M:void 0,onSortingChange:I,onGlobalFilterChange:F,globalFilterFn:(b,w,A)=>{const y=L=>L.toLowerCase().includes(A.toLowerCase()),f=b.getValue(w);switch(typeof f){case"string":return y(f);case"boolean":case"number":return y(String(f));default:return!1}}}),N=t.useMemo(()=>({...v,data:g,setData:u,setIsSortable:T,applyPagination:C,getTotalRows:p,isSortable:S,asyncDataState:P,runAsyncData:m}),[v,C,p,S]);return t.createElement(h.Provider,{value:N},E)},j=()=>{const l=t.useContext(h);if(!l)throw new Error("useDataTable can only be called from inside a DataTableProvider");return l};export{$ as DataTableProvider,j as useDataTable};
|
|
2
2
|
//# sourceMappingURL=DataTableContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport type { PaginationState } from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n children\n}: DataTableProviderProps): JSX.Element => {\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount: paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData\n }\n }, [table, applyPagination, getTotalRows, isSortable])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","children","_a","data","setData","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","value","useDataTable","context"],"mappings":"uaA0BA,MAAMA,EACJC,EAAM,cAAoD,IAAI,EAYnDC,EAAoB,CAAC,CAChC,QAAAC,EACA,KAAMC,EAAW,CACjB,EAAA,aAAAC,EACA,YAAAC,EACA,aAAAC,EAAe,OACf,SAAAC,CACF,IAA2C,CA9C3C,IAAAC,EA+CE,KAAM,CAACC,EAAMC,CAAO,EAAIV,EAAM,SAA2B,CACvD,QAASG,GAAA,KAAAA,EAAY,
|
|
1
|
+
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport type { PaginationState } from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n children\n}: DataTableProviderProps): JSX.Element => {\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount: paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData\n }\n }, [table, applyPagination, getTotalRows, isSortable])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","children","_a","data","setData","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","row","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { CSS } from '../../stitches';
|
|
2
3
|
declare const GridContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
3
4
|
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
4
5
|
}, {
|
|
@@ -217,6 +218,9 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
|
|
|
217
218
|
declare type GridProps = React.ComponentProps<typeof GridContainer> & {
|
|
218
219
|
minItemSize?: string;
|
|
219
220
|
maxItemSize?: string;
|
|
221
|
+
} & {
|
|
222
|
+
css?: CSS;
|
|
223
|
+
as?: any;
|
|
220
224
|
};
|
|
221
225
|
export declare const Grid: React.FC<GridProps>;
|
|
222
226
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as s from"react";import{styled as p}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";const
|
|
1
|
+
import*as s from"react";import{styled as p}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";const n=p("div",{display:"grid",variants:{gap:o("space",{gap:"$key"})}}),a=({css:t,gap:i=2,minItemSize:e,maxItemSize:m="1fr",...r})=>s.createElement(n,{css:{...e&&{gridTemplateColumns:`repeat(auto-fit, minmax(${e}, ${m}))`},...t},gap:i,...r});a.displayName="Grid";export{a as Grid};
|
|
2
2
|
//# sourceMappingURL=Grid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n display: 'grid',\n variants: {\n gap: createThemeVariants('space', { gap: '$key' })\n }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n minItemSize?: string\n maxItemSize?: string\n}\n\nexport const Grid: React.FC<GridProps> = ({\n css,\n gap = 2,\n minItemSize,\n maxItemSize = '1fr',\n ...remainingProps\n}) => (\n <GridContainer\n css={{\n ...(minItemSize && {\n gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n }),\n ...(css as any)\n }}\n gap={gap}\n {...remainingProps}\n />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"sKAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,
|
|
1
|
+
{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n display: 'grid',\n variants: {\n gap: createThemeVariants('space', { gap: '$key' })\n }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n minItemSize?: string\n maxItemSize?: string\n} & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid: React.FC<GridProps> = ({\n css,\n gap = 2,\n minItemSize,\n maxItemSize = '1fr',\n ...remainingProps\n}) => (\n <GridContainer\n css={{\n ...(minItemSize && {\n gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n }),\n ...(css as any)\n }}\n gap={gap}\n {...remainingProps}\n />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"sKAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAUYC,EAA4B,CAAC,CACxC,IAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,IAAK,CACH,GAAIM,GAAe,CACjB,oBAAqB,2BAA2BA,MAAgBC,KAClE,EACA,GAAIH,CACN,EACA,IAAKC,EACJ,GAAGG,CACN,CAAA,EAGFL,EAAK,YAAc"}
|