From 6198627cf75129c52b991ed1fc4557f3104de1c5 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Mon, 23 Oct 2023 21:34:32 -0500 Subject: [PATCH] add locale exports to pkg.json --- apps/test-remix/app/routes/_index.tsx | 2 + apps/test-vite/.eslintrc.cjs | 18 ++ apps/test-vite/.gitignore | 24 +++ apps/test-vite/README.md | 27 +++ apps/test-vite/index.html | 13 ++ apps/test-vite/package.json | 34 ++++ apps/test-vite/public/vite.svg | 1 + apps/test-vite/src/App.tsx | 111 +++++++++++ apps/test-vite/src/assets/react.svg | 1 + apps/test-vite/src/main.tsx | 9 + apps/test-vite/src/vite-env.d.ts | 1 + apps/test-vite/tsconfig.json | 25 +++ apps/test-vite/tsconfig.node.json | 10 + apps/test-vite/vite.config.ts | 7 + .../material-react-table/build-locales.mjs | 65 ++----- packages/material-react-table/package.json | 176 +++++++++++++++++- pnpm-lock.yaml | 68 ++++++- 17 files changed, 542 insertions(+), 50 deletions(-) create mode 100644 apps/test-vite/.eslintrc.cjs create mode 100644 apps/test-vite/.gitignore create mode 100644 apps/test-vite/README.md create mode 100644 apps/test-vite/index.html create mode 100644 apps/test-vite/package.json create mode 100644 apps/test-vite/public/vite.svg create mode 100644 apps/test-vite/src/App.tsx create mode 100644 apps/test-vite/src/assets/react.svg create mode 100644 apps/test-vite/src/main.tsx create mode 100644 apps/test-vite/src/vite-env.d.ts create mode 100644 apps/test-vite/tsconfig.json create mode 100644 apps/test-vite/tsconfig.node.json create mode 100644 apps/test-vite/vite.config.ts diff --git a/apps/test-remix/app/routes/_index.tsx b/apps/test-remix/app/routes/_index.tsx index cece597d9..34d677bef 100755 --- a/apps/test-remix/app/routes/_index.tsx +++ b/apps/test-remix/app/routes/_index.tsx @@ -6,6 +6,7 @@ import { useMaterialReactTable, type MRT_ColumnDef, } from 'material-react-table'; +import { MRT_Localization_ES } from 'material-react-table/locales/es'; //example data type type Person = { @@ -110,6 +111,7 @@ export default function Index() { const table = useMaterialReactTable({ columns, data, + localization: MRT_Localization_ES, }); return ; diff --git a/apps/test-vite/.eslintrc.cjs b/apps/test-vite/.eslintrc.cjs new file mode 100644 index 000000000..d6c953795 --- /dev/null +++ b/apps/test-vite/.eslintrc.cjs @@ -0,0 +1,18 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/apps/test-vite/.gitignore b/apps/test-vite/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/apps/test-vite/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/test-vite/README.md b/apps/test-vite/README.md new file mode 100644 index 000000000..1ebe379f5 --- /dev/null +++ b/apps/test-vite/README.md @@ -0,0 +1,27 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +``` + +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/apps/test-vite/index.html b/apps/test-vite/index.html new file mode 100644 index 000000000..e4b78eae1 --- /dev/null +++ b/apps/test-vite/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/apps/test-vite/package.json b/apps/test-vite/package.json new file mode 100644 index 000000000..c70715821 --- /dev/null +++ b/apps/test-vite/package.json @@ -0,0 +1,34 @@ +{ + "name": "test-vite", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.14", + "@mui/material": "^5.14.14", + "@mui/x-date-pickers": "^6.16.2", + "material-react-table": "workspace:*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@typescript-eslint/eslint-plugin": "^6.0.0", + "@typescript-eslint/parser": "^6.0.0", + "@vitejs/plugin-react": "^4.0.3", + "eslint": "^8.45.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + "typescript": "^5.0.2", + "vite": "^4.4.5" + } +} diff --git a/apps/test-vite/public/vite.svg b/apps/test-vite/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/apps/test-vite/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/test-vite/src/App.tsx b/apps/test-vite/src/App.tsx new file mode 100644 index 000000000..a9b25ff1b --- /dev/null +++ b/apps/test-vite/src/App.tsx @@ -0,0 +1,111 @@ +import { useMemo } from 'react'; +import { + MaterialReactTable, + useMaterialReactTable, + type MRT_ColumnDef, +} from 'material-react-table'; +import { MRT_Localization_AR } from 'material-react-table/locales/ar'; + +//example data type +type Person = { + name: { + firstName: string; + lastName: string; + }; + address: string; + city: string; + state: string; +}; + +//nested data is ok, see accessorKeys in ColumnDef below +const data: Person[] = [ + { + name: { + firstName: 'John', + lastName: 'Doe', + }, + address: '261 Erdman Ford', + city: 'East Daphne', + state: 'Kentucky', + }, + { + name: { + firstName: 'Jane', + lastName: 'Doe', + }, + address: '769 Dominic Grove', + city: 'Columbus', + state: 'Ohio', + }, + { + name: { + firstName: 'Joe', + lastName: 'Doe', + }, + address: '566 Brakus Inlet', + city: 'South Linda', + state: 'West Virginia', + }, + { + name: { + firstName: 'Kevin', + lastName: 'Vandy', + }, + address: '722 Emie Stream', + city: 'Lincoln', + state: 'Nebraska', + }, + { + name: { + firstName: 'Joshua', + lastName: 'Rolluffs', + }, + address: '32188 Larkin Turnpike', + city: 'Omaha', + state: 'Nebraska', + }, +]; + +const Example = () => { + //should be memoized or stable + const columns = useMemo[]>( + () => [ + { + accessorKey: 'name.firstName', //access nested data with dot notation + header: 'First Name', + size: 150, + }, + { + accessorKey: 'name.lastName', + header: 'Last Name', + size: 150, + }, + { + accessorKey: 'address', //normal accessorKey + header: 'Address', + size: 200, + }, + { + accessorKey: 'city', + header: 'City', + size: 150, + }, + { + accessorKey: 'state', + header: 'State', + size: 150, + }, + ], + [], + ); + + const table = useMaterialReactTable({ + columns, + data, + localization: MRT_Localization_AR, + }); + + return ; +}; + +export default Example; diff --git a/apps/test-vite/src/assets/react.svg b/apps/test-vite/src/assets/react.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/apps/test-vite/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/test-vite/src/main.tsx b/apps/test-vite/src/main.tsx new file mode 100644 index 000000000..e63eef4a8 --- /dev/null +++ b/apps/test-vite/src/main.tsx @@ -0,0 +1,9 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.tsx' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/apps/test-vite/src/vite-env.d.ts b/apps/test-vite/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/apps/test-vite/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/apps/test-vite/tsconfig.json b/apps/test-vite/tsconfig.json new file mode 100644 index 000000000..a7fc6fbf2 --- /dev/null +++ b/apps/test-vite/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/apps/test-vite/tsconfig.node.json b/apps/test-vite/tsconfig.node.json new file mode 100644 index 000000000..42872c59f --- /dev/null +++ b/apps/test-vite/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/apps/test-vite/vite.config.ts b/apps/test-vite/vite.config.ts new file mode 100644 index 000000000..5a33944a9 --- /dev/null +++ b/apps/test-vite/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/packages/material-react-table/build-locales.mjs b/packages/material-react-table/build-locales.mjs index 5042d9926..63a348196 100644 --- a/packages/material-react-table/build-locales.mjs +++ b/packages/material-react-table/build-locales.mjs @@ -1,4 +1,5 @@ -/* eslint-disable perfectionist/sort-objects */ +/* eslint-disable */ +import pkg from './package.json' assert { type: 'json' }; import typescript from '@rollup/plugin-typescript'; import fs from 'fs'; import { rollup } from 'rollup'; @@ -54,20 +55,8 @@ async function build(locale) { ], }); - // await bundle.write({ - // file: `./locales/${locale}/index.js`, - // format: 'cjs', - // sourcemap: false, - // }); - - // await bundle.write({ - // file: `./locales/${locale}/index.esm.js`, - // format: 'esm', - // sourcemap: false, - // }); - await bundle.write({ - file: `./locales/${locale}.cjs`, + file: `./locales/${locale}.js`, format: 'cjs', sourcemap: false, }); @@ -85,42 +74,9 @@ export declare const MRT_Localization_${locale `; await fs.writeFile(`./locales/${locale}.d.ts`, typeFile, (err) => { - // eslint-disable-next-line if (err) console.log(err); }); - // await fs.writeFile(`./locales/${locale}/index.esm.d.ts`, typeFile, (err) => { - // // eslint-disable-next-line - // if (err) console.log(err); - // }); - - // await fs.writeFile( - // `./locales/${locale}/package.json`, - // JSON.stringify( - // { - // main: './index.cjs', - // module: './index.mjs', - // sideEffects: false, - // types: './index.d.ts', - // exports: { - // '.': { - // types: './index.d.ts', - // import: './index.esm.js', - // require: './index.js', - // }, - // './package.json': './package.json', - // }, - // }, - // null, - // 2, - // ), - // (err) => { - // // eslint-disable-next-line - // if (err) console.log(err); - // }, - // ); - - // eslint-disable-next-line console.log(`Built ${locale} locale`); } @@ -128,7 +84,20 @@ async function run() { for (const locale of supportedLocales) { await build(locale); } + pkg.exports = { + ...pkg.exports, + ...supportedLocales.reduce((acc, locale) => { + acc[`./locales/${locale}`] = { + import: `./locales/${locale}.mjs`, + default: `./locales/${locale}.js`, + types: `./locales/${locale}.d.ts`, + }; + return acc; + }, {}), + }; + await fs.writeFile('./package.json', JSON.stringify(pkg, null, 2), (err) => { + if (err) console.log(err); + }); } -// eslint-disable-next-line run().catch((error) => console.error(error)); diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json index 14f681d1d..3fe4834f8 100644 --- a/packages/material-react-table/package.json +++ b/packages/material-react-table/package.json @@ -34,7 +34,181 @@ "default": "./dist/cjs/index.js" }, "./package.json": "./package.json", - "./locales/*": "./locales/*" + "./locales/ar": { + "import": "./locales/ar.mjs", + "default": "./locales/ar.js", + "types": "./locales/ar.d.ts" + }, + "./locales/az": { + "import": "./locales/az.mjs", + "default": "./locales/az.js", + "types": "./locales/az.d.ts" + }, + "./locales/bg": { + "import": "./locales/bg.mjs", + "default": "./locales/bg.js", + "types": "./locales/bg.d.ts" + }, + "./locales/cs": { + "import": "./locales/cs.mjs", + "default": "./locales/cs.js", + "types": "./locales/cs.d.ts" + }, + "./locales/da": { + "import": "./locales/da.mjs", + "default": "./locales/da.js", + "types": "./locales/da.d.ts" + }, + "./locales/de": { + "import": "./locales/de.mjs", + "default": "./locales/de.js", + "types": "./locales/de.d.ts" + }, + "./locales/en": { + "import": "./locales/en.mjs", + "default": "./locales/en.js", + "types": "./locales/en.d.ts" + }, + "./locales/es": { + "import": "./locales/es.mjs", + "default": "./locales/es.js", + "types": "./locales/es.d.ts" + }, + "./locales/et": { + "import": "./locales/et.mjs", + "default": "./locales/et.js", + "types": "./locales/et.d.ts" + }, + "./locales/fa": { + "import": "./locales/fa.mjs", + "default": "./locales/fa.js", + "types": "./locales/fa.d.ts" + }, + "./locales/fi": { + "import": "./locales/fi.mjs", + "default": "./locales/fi.js", + "types": "./locales/fi.d.ts" + }, + "./locales/fr": { + "import": "./locales/fr.mjs", + "default": "./locales/fr.js", + "types": "./locales/fr.d.ts" + }, + "./locales/hu": { + "import": "./locales/hu.mjs", + "default": "./locales/hu.js", + "types": "./locales/hu.d.ts" + }, + "./locales/hy": { + "import": "./locales/hy.mjs", + "default": "./locales/hy.js", + "types": "./locales/hy.d.ts" + }, + "./locales/id": { + "import": "./locales/id.mjs", + "default": "./locales/id.js", + "types": "./locales/id.d.ts" + }, + "./locales/it": { + "import": "./locales/it.mjs", + "default": "./locales/it.js", + "types": "./locales/it.d.ts" + }, + "./locales/ja": { + "import": "./locales/ja.mjs", + "default": "./locales/ja.js", + "types": "./locales/ja.d.ts" + }, + "./locales/ko": { + "import": "./locales/ko.mjs", + "default": "./locales/ko.js", + "types": "./locales/ko.d.ts" + }, + "./locales/nl": { + "import": "./locales/nl.mjs", + "default": "./locales/nl.js", + "types": "./locales/nl.d.ts" + }, + "./locales/no": { + "import": "./locales/no.mjs", + "default": "./locales/no.js", + "types": "./locales/no.d.ts" + }, + "./locales/np": { + "import": "./locales/np.mjs", + "default": "./locales/np.js", + "types": "./locales/np.d.ts" + }, + "./locales/pl": { + "import": "./locales/pl.mjs", + "default": "./locales/pl.js", + "types": "./locales/pl.d.ts" + }, + "./locales/pt": { + "import": "./locales/pt.mjs", + "default": "./locales/pt.js", + "types": "./locales/pt.d.ts" + }, + "./locales/pt-BR": { + "import": "./locales/pt-BR.mjs", + "default": "./locales/pt-BR.js", + "types": "./locales/pt-BR.d.ts" + }, + "./locales/ro": { + "import": "./locales/ro.mjs", + "default": "./locales/ro.js", + "types": "./locales/ro.d.ts" + }, + "./locales/ru": { + "import": "./locales/ru.mjs", + "default": "./locales/ru.js", + "types": "./locales/ru.d.ts" + }, + "./locales/sk": { + "import": "./locales/sk.mjs", + "default": "./locales/sk.js", + "types": "./locales/sk.d.ts" + }, + "./locales/sr-Cyrl-RS": { + "import": "./locales/sr-Cyrl-RS.mjs", + "default": "./locales/sr-Cyrl-RS.js", + "types": "./locales/sr-Cyrl-RS.d.ts" + }, + "./locales/sr-Latn-RS": { + "import": "./locales/sr-Latn-RS.mjs", + "default": "./locales/sr-Latn-RS.js", + "types": "./locales/sr-Latn-RS.d.ts" + }, + "./locales/sv": { + "import": "./locales/sv.mjs", + "default": "./locales/sv.js", + "types": "./locales/sv.d.ts" + }, + "./locales/tr": { + "import": "./locales/tr.mjs", + "default": "./locales/tr.js", + "types": "./locales/tr.d.ts" + }, + "./locales/uk": { + "import": "./locales/uk.mjs", + "default": "./locales/uk.js", + "types": "./locales/uk.d.ts" + }, + "./locales/vi": { + "import": "./locales/vi.mjs", + "default": "./locales/vi.js", + "types": "./locales/vi.d.ts" + }, + "./locales/zh-Hans": { + "import": "./locales/zh-Hans.mjs", + "default": "./locales/zh-Hans.js", + "types": "./locales/zh-Hans.d.ts" + }, + "./locales/zh-Hant": { + "import": "./locales/zh-Hant.mjs", + "default": "./locales/zh-Hant.js", + "types": "./locales/zh-Hant.d.ts" + } }, "files": [ "dist", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8140b79de..93175a77c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -160,7 +160,7 @@ importers: specifier: ^3.6.8 version: 3.7.0 material-react-table: - specifier: workspace:2.0.0-beta.8 + specifier: workspace:* version: link:../../packages/material-react-table react: specifier: ^18.2.0 @@ -188,6 +188,64 @@ importers: specifier: ^5.1.6 version: 5.2.2 + apps/test-vite: + dependencies: + '@emotion/react': + specifier: ^11.11.1 + version: 11.11.1(@types/react@18.2.29)(react@18.2.0) + '@emotion/styled': + specifier: ^11.11.0 + version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.29)(react@18.2.0) + '@mui/icons-material': + specifier: ^5.14.14 + version: 5.14.14(@mui/material@5.14.14)(@types/react@18.2.29)(react@18.2.0) + '@mui/material': + specifier: ^5.14.14 + version: 5.14.14(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-date-pickers': + specifier: ^6.16.2 + version: 6.16.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@mui/material@5.14.14)(@mui/system@5.14.14)(@types/react@18.2.29)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + material-react-table: + specifier: workspace:2.0.0-beta.8 + version: link:../../packages/material-react-table + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@types/react': + specifier: ^18.2.15 + version: 18.2.29 + '@types/react-dom': + specifier: ^18.2.7 + version: 18.2.14 + '@typescript-eslint/eslint-plugin': + specifier: ^6.0.0 + version: 6.8.0(@typescript-eslint/parser@6.8.0)(eslint@8.51.0)(typescript@5.2.2) + '@typescript-eslint/parser': + specifier: ^6.0.0 + version: 6.8.0(eslint@8.51.0)(typescript@5.2.2) + '@vitejs/plugin-react': + specifier: ^4.0.3 + version: 4.1.0(vite@4.5.0) + eslint: + specifier: ^8.45.0 + version: 8.51.0 + eslint-plugin-react-hooks: + specifier: ^4.6.0 + version: 4.6.0(eslint@8.51.0) + eslint-plugin-react-refresh: + specifier: ^0.4.3 + version: 0.4.3(eslint@8.51.0) + typescript: + specifier: ^5.0.2 + version: 5.2.2 + vite: + specifier: ^4.4.5 + version: 4.5.0(@types/node@20.8.7) + packages/material-react-table: dependencies: '@tanstack/match-sorter-utils': @@ -8156,6 +8214,14 @@ packages: eslint: 8.51.0 dev: true + /eslint-plugin-react-refresh@0.4.3(eslint@8.51.0): + resolution: {integrity: sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==} + peerDependencies: + eslint: '>=7' + dependencies: + eslint: 8.51.0 + dev: true + /eslint-plugin-react@7.33.2(eslint@8.51.0): resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==} engines: {node: '>=4'}