Skip to content

Commit

Permalink
Make it works
Browse files Browse the repository at this point in the history
Add TS support

Signed-off-by: Florent MILLOT <[email protected]>
  • Loading branch information
flomillot committed Jan 24, 2024
1 parent bb80aff commit f784113
Show file tree
Hide file tree
Showing 10 changed files with 1,402 additions and 1,476 deletions.
5 changes: 1 addition & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
/coverage
/demo/dist
/es
/lib
/dist
/node_modules
/umd
npm-debug.log*
/.idea
*.tgz
4 changes: 2 additions & 2 deletions demo/src/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ import {
} from '../../src/index';
import translations from './demo_intl';

//import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg';
import PowsyblLogo from '../images/powsybl_logo.svg?react';
import AppPackage from '../../package.json';

import ReportViewerDialog from '../../src/components/ReportViewerDialog';
Expand Down Expand Up @@ -753,7 +753,7 @@ const AppContent = ({ language, onLanguageClick }) => {
<TopBar
appName="Demo"
appColor="#808080"
// appLogo={<PowsyblLogo />}
appLogo={<PowsyblLogo />}
onParametersClick={() => console.log('settings')}
onLogoutClick={() =>
logout(dispatch, userManager.instance)
Expand Down
2,727 changes: 1,295 additions & 1,432 deletions package-lock.json

Large diffs are not rendered by default.

28 changes: 14 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,21 @@
"npm": ">=9",
"node": ">=18"
},
"exports": "./es/index.js",
"module": "./es/index.js",
"type": "module",
"files": [
"css",
"es",
"lib",
"umd"
"dist"
],
"main": "./dist/commons-ui.js",
"module": "./dist/commons-ui.js",
"exports": "./dist/commons-ui.js",
"scripts": {
"watch": "vite watch",
"build": "vite build",
"test": "jest",
"start": "vite demo/ --open",
"start": "vite demo/ --config vite.config.ts",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@vitejs/plugin-react": "^4.2.1",
"autosuggest-highlight": "^3.2.0",
"clsx": "^1.0.4",
"jwt-decode": "^3.0.0",
Expand All @@ -32,9 +29,8 @@
"prop-types": "^15.7.2",
"react-csv-downloader": "^2.7.0",
"react-request-fullscreen": "^1.1.2",
"react-virtualized": "9.21.2",
"uuid": "^9.0.1",
"vite": "^5.0.11"
"react-virtualized": "9.22.5",
"uuid": "^9.0.1"
},
"peerDependencies": {
"@emotion/react": "^11.8.1",
Expand All @@ -61,6 +57,7 @@
"@mui/material": "^5.5.0",
"@mui/styles": "^5.5.0",
"@react-hook/window-size": "^3.1.1",
"@vitejs/plugin-react": "^4.2.1",
"babel-eslint": "^10.1.0",
"bufferutil": "^4.0.1",
"eslint": "^7.9.0",
Expand All @@ -83,8 +80,12 @@
"react-resizable": "^3.0.4",
"react-router-dom": "^6.0.0",
"type-fest": "^2.0.0",
"typescript": "^5.3.3",
"utf-8-validate": "^5.0.2",
"webpack-plugin-serve": "^1.0.1",
"vite": "^5.0.11",
"vite-plugin-dts": "^3.7.1",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-svgr": "^4.2.0",
"yup": "^1.0.0"
},
"eslintConfig": {
Expand All @@ -94,8 +95,7 @@
],
"rules": {
"prettier/prettier": "warn",
"curly": "error",
"import/no-webpack-loader-syntax": "off"
"curly": "error"
}
},
"author": "gridsuite team",
Expand Down
5 changes: 3 additions & 2 deletions src/components/TopBar/GridLogo.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ const styles = {
},
};

const GridLogo = ({ appName, appColor, onClick }) => {
const GridLogo = ({ appLogo, appName, appColor, onClick }) => {
return (
<>
<Box
sx={mergeSx(styles.logo, onClick && styles.clickable)}
onClick={onClick}
>
<BrokenImage />
{appLogo || <BrokenImage />}
</Box>
<LogoText
appName={appName}
Expand All @@ -48,6 +48,7 @@ const GridLogo = ({ appName, appColor, onClick }) => {
export default GridLogo;

GridLogo.propTypes = {
appLogo: PropTypes.element,
appName: PropTypes.string.isRequired,
appColor: PropTypes.string.isRequired,
onClick: PropTypes.func,
Expand Down
6 changes: 3 additions & 3 deletions src/components/TopBar/TopBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ const FR = 'FR';
const TopBar = ({
appName,
appColor,
// appLogo,
appLogo,
appVersion,
appLicense,
onParametersClick,
Expand Down Expand Up @@ -255,12 +255,12 @@ const TopBar = ({
() => (
<GridLogo
onClick={onLogoClick}
// appLogo={appLogo}
appLogo={appLogo}
appName={appName}
appColor={appColor}
/>
),
[onLogoClick, appName, appColor]
[onLogoClick, appLogo, appName, appColor]
);

return (
Expand Down
3 changes: 2 additions & 1 deletion src/components/TopBar/TopBar.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { IntlProvider } from 'react-intl';
import TopBar from './TopBar';
import { top_bar_en } from '../../';

import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg';
import PowsyblLogo from '../images/powsybl_logo.svg?react';

import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';
Expand Down Expand Up @@ -54,6 +54,7 @@ it('renders', () => {
<TopBar
appName="Demo"
appColor="#808080"
appLogo={PowsyblLogo}
onParametersClick={() => {}}
onLogoutClick={() => {}}
onLogoClick={() => {}}
Expand Down
16 changes: 16 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"compilerOptions": {
"module": "ESNext",
"target": "es6",
"declaration": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node"
},
"include": ["src"]
}
18 changes: 0 additions & 18 deletions vite.config.mts

This file was deleted.

66 changes: 66 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import react from '@vitejs/plugin-react';
import type { PluginOption } from 'vite';
import { defineConfig } from 'vite';
import * as path from 'path';
import { resolve } from 'path';
import eslint from 'vite-plugin-eslint';
import dts from 'vite-plugin-dts';
import * as fs from 'fs/promises';
import * as url from 'url';
import { createRequire } from 'node:module';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
plugins: [react(), eslint(), dts(), svgr(), reactVirtualized()],

build: {
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'src/index.jsx'),
name: 'Commons ui',
// the proper extensions will be added
fileName: 'commons-ui',
formats: ['es'],
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['react'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'React',
},
},
},
},
});


// Workaround for react-virtualized with vite
// https://github.com/bvaughn/react-virtualized/issues/1632#issuecomment-1483966063
function reactVirtualized(): PluginOption {
const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`
return {
name: 'flat:react-virtualized',
// Note: we cannot use the `transform` hook here
// because libraries are pre-bundled in vite directly,
// plugins aren't able to hack that step currently.
// so instead we manually edit the file in node_modules.
// all we need is to find the timing before pre-bundling.
configResolved: async () => {
const require = createRequire(import.meta.url)
const reactVirtualizedPath = require.resolve('react-virtualized')
const { pathname: reactVirtualizedFilePath } = new url.URL(reactVirtualizedPath, import.meta.url)
const file = reactVirtualizedFilePath
.replace(
path.join('dist', 'commonjs', 'index.js'),
path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js'),
)
const code = await fs.readFile(file, 'utf-8')
const modified = code.replace(WRONG_CODE, '')
await fs.writeFile(file, modified)
},
}
}

0 comments on commit f784113

Please sign in to comment.