Chore/fix codepen

docs/examples/ex/StatusBarEx.tsx

@@ -1,6 +1,38 @@
-import { extraComponents } from 'buckaroo';
+import React, { useState } from 'react';
+import { BuckarooState, extraComponents, BuckarooOptions, DFMeta } from 'buckaroo';
 
-export default extraComponents.StatusBarEx;
-// export default function Simple() {
-//     return <DFViewer df={staticData.tableDf} activeCol={activeCol} setActiveCol={setActiveCol} />;
-// }
+export default function StatusBarEx() {
+  const dfm: DFMeta = {
+    columns: 5,
+    rows_shown: 20,
+    filtered_rows: 300_000,
+    total_rows: 8_777_444,
+  };
+
+  const [bState, setBState] = useState<BuckarooState>({
+    auto_clean: 'conservative',
+    sampled: false,
+    df_display: 'main',
+    post_processing: 'asdf',
+    show_commands: false,
+    search_string: '',
+  });
+
+  const bOptions: BuckarooOptions = {
+    auto_clean: ['aggressive', 'conservative'],
+    post_processing: ['', 'asdf'],
+    sampled: ['random'],
+    show_commands: ['on'],
+    df_display: ['main'],
+  };
+
+  return (
+    <extraComponents.StatusBar
+      dfMeta={dfm}
+      buckarooState={bState}
+      setBuckarooState={setBState}
+      buckarooOptions={bOptions}
+    />
+    );
+//    return <h1>paddy</h1>
+}

full_build.sh

@@ -9,3 +9,5 @@ twine check dist/*
 #python -m twine upload --repository testpypi dist/*
 #python -m twine upload --repository pypi dist/*
 #npm publish
+
+#npm publish --tag next  # to publish a test branch

js/components/StatusBar.tsx

@@ -1,5 +1,5 @@
 // https://plnkr.co/edit/QTNwBb2VEn81lf4t?open=index.tsx
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import _ from 'lodash';
 import { AgGridReact } from 'ag-grid-react'; // the AG Grid React Component
 import { ColDef, GridOptions } from 'ag-grid-community';
@@ -178,7 +178,6 @@ export function StatusBar({
 
   const gridRef = useRef<AgGridReact<unknown>>(null);
   const defaultColDef = {
-    //    type: 'left-aligned',
     cellStyle: { textAlign: 'left' },
   };
   return (
@@ -196,37 +195,3 @@ export function StatusBar({
     </div>
   );
 }
-export function StatusBarEx() {
-  const dfm: DFMeta = {
-    columns: 5,
-    rows_shown: 20,
-    filtered_rows: 300_000,
-    total_rows: 8_777_444,
-  };
-
-  const [bState, setBState] = useState<BuckarooState>({
-    auto_clean: 'conservative',
-    sampled: false,
-    df_display: 'main',
-    post_processing: 'asdf',
-    show_commands: false,
-    search_string: '',
-  });
-
-  const bOptions: BuckarooOptions = {
-    auto_clean: ['aggressive', 'conservative'],
-    post_processing: ['', 'asdf'],
-    sampled: ['random'],
-    show_commands: ['on'],
-    df_display: ['main'],
-  };
-
-  return (
-    <StatusBar
-      dfMeta={dfm}
-      buckarooState={bState}
-      setBuckarooState={setBState}
-      buckarooOptions={bOptions}
-    />
-  );
-}

js/dcefwidget.ts

@@ -19,7 +19,7 @@ import { MODULE_NAME, MODULE_VERSION } from './version';
 
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
-import '../js/style/dcf-npm.css';
+import './style/dcf-npm.css';
 import { DFViewer } from './components/DFViewerParts/DFViewer';
 
 export class DCEFWidgetModel extends DOMWidgetModel {

js/index.ts

@@ -1,4 +1,4 @@
-// Copyright (c) Bloomberg
+// Copyright (c) Paddy Mullen
 // Distributed under the terms of the Modified BSD License.
 
 import { ColumnsEditor, ColumnsEditorEx } from './components/ColumnsEditor';
@@ -8,10 +8,10 @@
 import { DependentTabs } from './components/DependentTabs';
 import { OperationViewer } from './components/Operations';
 //import { DFData, DFViewerConfig } from './components/DFViewerParts/DFWhole';
-import { StatusBarEx } from './components/StatusBar';
+import { StatusBar } from './components/StatusBar';
+//import { StatusBarEx } from './components/StatusBar';
 
-// In case of classic Jupyter Notebook and embed, we provide the PhosphorJS CSS
 
 export * from './version';
 export * from './dcefwidget';
 export * as bakedData from './baked_data/staticData';
@@ -24,13 +24,7 @@
   ColumnsEditorEx,
   DFViewer,
   DFViewerEx,
-  StatusBarEx,
+  StatusBar,
   HistogramCell,
 };
 
-/*
-export const typing = { 
-    DFData, 
-    DFViewerConfig
- };
-*/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buckaroo",
-  "version": "0.7.4",
+  "version": "0.7.5-test12",
   "description": "Fast Datagrid widget for the Jupyter Notebook and JupyterLab",
   "keywords": [
     "jupyter",
@@ -10,9 +10,11 @@
   ],
   "files": [
     "lib/**/*.js",
+    "lib/**/*.css",
     "lib/**/*.js.map",
     "lib/**/*.ts",
     "dist/*.js",
+    "dist/*.css",
     "dist/*.js.map",
     "dist/*.png",
     "style/**/*.*"
@@ -35,11 +37,12 @@
   "scripts": {
     "build": "yarn run build:lib && yarn run build:labextension",
     "build:dev": "yarn run build:lib &&  yarn run build:labextension:dev",
-    "build:labextension": "jupyter labextension build .",
+    "build:labextension": "cp -r js/style lib/ && jupyter labextension build .",
     "build:labextension:dev": "which jupyter && jupyter labextension build --development True .",
     "build:lib": "tsc",
     "build:examples": "webpack --mode=production --config docs/webpack.typescript.localdev.ts --env production",
     "build:all": "yarn run build:labextension",
+    "bundle": "yarn webpack --config ./webpack.config.js",
     "clean": "rimraf dist && yarn run clean:lib && yarn run clean:labextension",
     "clean:lib": "rimraf lib",
     "clean:labextension": "rimraf buckaroo/labextension",
@@ -65,8 +68,8 @@
     "lodash": "^4.17.21",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-smooth": "^2.0.3",
-    "recharts": "^2.7.3"
+    "recharts": "^2.7.3",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.3",
@@ -99,6 +102,7 @@
     "jest": "^28",
     "lint-staged": "^10.2.11",
     "markdown-loader": "^7.0.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.3",
     "postcss": "^8.4.14",
@@ -126,16 +130,16 @@
     "typescript": "^4.4.3",
     "url-loader": "^4.1.0",
     "webpack": "^5",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^4.0.0"
+    "webpack-cli": "^5",
+    "webpack-dev-server": "^5"
   },
   "jupyterlab": {
     "extension": "lib/plugin",
     "webpackConfig": "webpack.lab.config.js",
     "outputDir": "./buckaroo/labextension",
     "sharedPackages": {
       "@jupyter-widgets/base": {
-        "bundled": false,
+        "bundled": true,
         "singleton": true
       },
       "@lumino/algorithm": {

pyproject.toml

@@ -35,7 +35,7 @@ dependencies = [
     "graphlib_backport>=1.0.0",
     "packaging>=18"
 ]
-version = "0.7.4"
+version = "0.7.5"
 
 [project.license]
 file = "LICENSE.txt"

webpack.config.js

@@ -18,6 +18,8 @@ const performance = {
   maxAssetSize: 100_000_000,
 };
 
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const devMode = process.env.NODE_ENV !== 'production';
 // Custom webpack rules
 const rules = [
   { test: /\.tsx?$/, loader: 'ts-loader' },
@@ -51,12 +53,13 @@ const rules = [
 
 
 // Packages that shouldn't be bundled but loaded at runtime
-const externals = ['@jupyter-widgets/base'];
+//const externals = ['@jupyter-widgets/base'];
+const externals = [];
 
 const resolve = {
   // Add '.ts' and '.tsx' as resolvable extensions.
   extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx'],
-  plugins: [new TsconfigPathsPlugin()],
+    plugins: [new TsconfigPathsPlugin()],
   fallback: { crypto: false },
 };
 
@@ -76,7 +79,6 @@ module.exports = [
     output: {
       filename: 'index.js',
       path: path.resolve(__dirname, 'dist'),
-      libraryTarget: 'amd',
       library: 'buckaroo',
       publicPath: 'https://unpkg.com/buckaroo@' + version + '/dist/',
     },
@@ -86,6 +88,9 @@ module.exports = [
     },
     externals,
     resolve,
+    plugins: [
+      new MiniCssExtractPlugin()
+    ],
     devServer: {
       port: 8030,
     },