enh: default props

examples/next-js/next.config.mjs

@@ -23,7 +23,6 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
   webpack: (config, options) => {
-
     config.resolve.fallback = {
       ...config.resolve.fallback,
       buffer: require.resolve('buffer/'),

examples/next-js/postcss.config.mjs

@@ -5,9 +5,7 @@
  */
 
 const config = {
-  plugins: [
-    "@tailwindcss/postcss"
-  ],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;

examples/next-js/src/components/NotebookComponent.tsx

@@ -14,7 +14,7 @@ import {
   CellSidebarExtension,
   CellSidebarButton,
 } from '@datalayer/jupyter-react';
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { PrimerTheme } from './PrimerTheme';
 import { useMemo } from 'react';
 
@@ -23,8 +23,10 @@ type INotebookComponentProps = {
   theme?: PrimerTheme;
 };
 
-export const NotebookComponent = (props: INotebookComponentProps) => {
-  //  const { colorMode, theme } = props;
+export const NotebookComponent = ({
+  colorMode = 'light',
+  theme,
+}: INotebookComponentProps) => {
   const { defaultKernel, serviceManager } = useJupyter({
     jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
     jupyterServerToken:
@@ -40,7 +42,7 @@ export const NotebookComponent = (props: INotebookComponentProps) => {
       {defaultKernel && serviceManager ? (
         <>
           <div style={{ fontSize: 20 }}>Jupyter Notebook in Next.js</div>
-          <JupyterReactTheme>
+          <JupyterReactTheme colormode={colorMode} theme={theme}>
             <Box
               sx={{
                 '& .jp-NotebookPanel': {
@@ -77,9 +79,4 @@ export const NotebookComponent = (props: INotebookComponentProps) => {
   );
 };
 
-NotebookComponent.defaultProps = {
-  colorMode: 'light' as 'light' | 'dark',
-  theme: undefined,
-};
-
 export default NotebookComponent;

packages/ipyreactive/.prettierrc

@@ -1,3 +1,3 @@
 {
-    "singleQuote": true
-}
+  "singleQuote": true
+}

packages/ipyscript/.prettierrc

@@ -1,3 +1,3 @@
 {
-    "singleQuote": true
-}
+  "singleQuote": true
+}

packages/lexical/package.json

@@ -136,10 +136,10 @@
     "stream": "^0.0.2",
     "stream-browserify": "^2.0.2",
     "style-loader": "^4.0.0",
-    "stylelint": "^14.3.0",
+    "stylelint": "^16.26.1",
     "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-recommended": "^6.0.0",
-    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-prettier": "^2.0.0",
     "svg-url-loader": "^7.1.1",
     "typedoc": "^0.28.2",

packages/react/package.json

@@ -46,18 +46,18 @@
     "example": "run-p -c 'start:*'",
     "install:extension": "npm run build",
     "kill": "./../../dev/sh/kill.sh || true",
-    "lint": "npm stylelint && npm prettier && npm eslint",
-    "lint:check": "npm stylelint:check && npm prettier:check && npm eslint:check",
-    "prettier": "npm prettier:base --write --list-different",
+    "lint": "npm run stylelint && npm run prettier && npm run eslint",
+    "lint:check": "npm run stylelint:check && npm run prettier:check && npm run eslint:check",
+    "prettier": "npm run prettier:base --write --list-different",
     "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
-    "prettier:check": "npm prettier:base --check",
+    "prettier:check": "npm run prettier:base --check",
     "start": "run-p -c 'start:*'",
     "start:webpack": "webpack serve",
     "start-noconfig": "cross-env NO_CONFIG=true webpack serve",
     "start-local": "run-p -c 'start-local:*'",
     "start-local:webpack": "cross-env LOCAL_JUPYTER_SERVER=true webpack serve",
     "start-local:jupyter-server": "cd ./../.. && npm run jupyter:server",
-    "stylelint": "npm stylelint:check --fix",
+    "stylelint": "npm run stylelint:check --fix",
     "stylelint:check": "stylelint --cache \"style/**/*.css\"",
     "test": "jest --coverage",
     "test:visual": "playwright test",
@@ -226,11 +226,11 @@
     "stream": "^0.0.2",
     "stream-browserify": "^2.0.2",
     "style-loader": "^2.0.0",
-    "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-standard": "^34.0.0",
+    "stylelint": "^16.26.1",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-csstree-validator": "^3.0.0",
-    "stylelint-prettier": "^4.0.0",
+    "stylelint-prettier": "^5.0.0",
     "svg-url-loader": "^7.1.1",
     "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.3",

packages/react/src/components/cell/Cell.tsx

@@ -23,7 +23,7 @@ export type ICellProps = {
   /**
    * An id that can be provided to identify unique cell
    */
-  id: string;
+  id?: string;
   /**
    * Cell source
    */
@@ -43,27 +43,27 @@ export type ICellProps = {
   /**
    * Cell type
    */
-  type: 'code' | 'markdown' | 'raw';
+  type?: 'code' | 'markdown' | 'raw';
   /**
    * Custom kernel for the cell. Falls back to the defaultKernel if not provided.
    */
   kernel?: Kernel;
 };
 
-export const Cell = (props: ICellProps) => {
-  const {
-    autoStart,
-    outputs = [],
-    showToolbar,
-    source = '',
-    startDefaultKernel = false,
-    type,
-    kernel: kernelProps,
-  } = props;
+export const Cell = ({
+  autoStart = true,
+  outputs = [],
+  showToolbar = true,
+  source = '',
+  startDefaultKernel = true,
+  type = 'code',
+  kernel: kernelProps,
+  id: providedId,
+}: ICellProps) => {
   const { defaultKernel, serverSettings } = useJupyter({
     startDefaultKernel,
   });
-  const [id] = useState(props.id || newUuid());
+  const [id] = useState(providedId || newUuid());
   const [adapter, setAdapter] = useState<CellAdapter>();
   const cellsStore = useCellsStore();
   const handleCellInitEvents = (adapter: CellAdapter) => {
@@ -170,13 +170,4 @@ export const Cell = (props: ICellProps) => {
   );
 };
 
-Cell.defaultProps = {
-  autoStart: true,
-  source: '',
-  outputs: [],
-  showToolbar: true,
-  startDefaultKernel: true,
-  type: 'code',
-} as Partial<ICellProps>;
-
 export default Cell;

packages/react/src/components/jupyterlab/JupyterLabApp.tsx

@@ -24,42 +24,50 @@ import JupyterLabAppCss from './JupyterLabAppCss';
 
 export type JupyterLabAppProps = {
   PluginType?: any;
-  devMode: boolean;
-  disabledPlugins: Array<string>;
-  headless: boolean;
-  height: string | number;
-  hostId: string;
+  devMode?: boolean;
+  disabledPlugins?: Array<string>;
+  headless?: boolean;
+  height?: string | number;
+  hostId?: string;
   mimeRendererPromises?: Array<Promise<IRenderMime.IExtensionModule>>;
-  mimeRenderers: Array<IRenderMime.IExtensionModule>;
-  nosplash: boolean;
-  onJupyterLab: (jupyterLabAppdapter: JupyterLabAppAdapter) => void;
+  mimeRenderers?: Array<IRenderMime.IExtensionModule>;
+  nosplash?: boolean;
+  onJupyterLab?: (jupyterLabAppdapter: JupyterLabAppAdapter) => void;
   onPlugin?: (plugin: any) => void;
   pluginId?: string;
   pluginPromises?: Array<Promise<JupyterLab.IPluginModule>>;
-  plugins: Array<JupyterLab.IPluginModule>;
-  position: string;
-  serverless: boolean;
-  serviceManager: ServiceManager.IManager;
-  startDefaultKernel: boolean;
-  theme: Colormode;
-  width: string | number;
+  plugins?: Array<JupyterLab.IPluginModule>;
+  position?: string;
+  serverless?: boolean;
+  serviceManager?: ServiceManager.IManager;
+  startDefaultKernel?: boolean;
+  theme?: Colormode;
+  width?: string | number;
 };
 
 const JupyterLabAppComponent = (props: JupyterLabAppProps) => {
   const {
     PluginType,
-    headless,
-    height,
-    hostId,
-    onJupyterLab,
+    devMode = false,
+    disabledPlugins = [],
+    headless = false,
+    height = '100vh',
+    hostId = 'app-example-id',
+    mimeRendererPromises,
+    mimeRenderers = [],
+    nosplash = false,
+    onJupyterLab = (_: JupyterLabAppAdapter) => {},
     onPlugin,
     pluginId,
-    position,
-    serverless,
+    pluginPromises,
+    plugins = [],
+    position = 'relative',
+    serverless = false,
     serviceManager: propsServiceManager,
-    startDefaultKernel,
-    theme,
-    width,
+    startDefaultKernel = false,
+    theme = 'light',
+    width = '100%',
+    ...restProps
   } = props;
   const { serviceManager } = useJupyter({
     serverless,
@@ -68,23 +76,39 @@ const JupyterLabAppComponent = (props: JupyterLabAppProps) => {
   });
   const defaultMimeExtensionPromises = useMemo(
     () =>
-      props.mimeRendererPromises ??
-      JupyterLabAppCorePlugins().mimeExtensionPromises,
-    []
+      mimeRendererPromises ?? JupyterLabAppCorePlugins().mimeExtensionPromises,
+    [mimeRendererPromises]
   );
   const defaultExtensionPromises = useMemo(
-    () => props.pluginPromises ?? JupyterLabAppCorePlugins().extensionPromises,
-    []
+    () => pluginPromises ?? JupyterLabAppCorePlugins().extensionPromises,
+    [pluginPromises]
   );
   const ref = useRef<HTMLDivElement>(null);
   const [_, setAdapter] = useState<JupyterLabAppAdapter>();
   useEffect(() => {
     if (ref && serviceManager) {
       const adapter = new JupyterLabAppAdapter({
-        ...props,
+        PluginType,
+        devMode,
+        disabledPlugins,
+        headless,
+        height,
+        hostId,
         mimeRendererPromises: defaultMimeExtensionPromises,
+        mimeRenderers,
+        nosplash,
+        onJupyterLab,
+        onPlugin,
+        pluginId,
         pluginPromises: defaultExtensionPromises,
+        plugins,
+        position,
+        serverless,
         serviceManager,
+        startDefaultKernel,
+        theme,
+        width,
+        ...restProps,
       });
       adapter.ready.then(() => {
         onJupyterLab(adapter!);
@@ -115,23 +139,6 @@ const JupyterLabAppComponent = (props: JupyterLabAppProps) => {
   );
 };
 
-JupyterLabAppComponent.defaultProps = {
-  devMode: false,
-  disabledPlugins: [],
-  headless: false,
-  height: '100vh',
-  hostId: 'app-example-id',
-  mimeRenderers: [],
-  onJupyterLab: (_: JupyterLabAppAdapter) => {},
-  plugins: [],
-  position: 'relative',
-  nosplash: false,
-  serverless: false,
-  startDefaultKernel: false,
-  theme: 'light',
-  width: '100%',
-} as Partial<JupyterLabAppProps>;
-
 export const JupyterLabApp = memo(JupyterLabAppComponent);
 
 export default JupyterLabApp;

packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts

@@ -54,17 +54,17 @@ export class JupyterLabAppAdapter {
 
   private async load(props: JupyterLabAppAdapterProps) {
     const {
-      disabledPlugins,
+      disabledPlugins = [],
       hostId,
-      plugins: extensions,
-      mimeRenderers: mimeExtensions,
+      plugins: extensions = [],
+      mimeRenderers: mimeExtensions = [],
       nosplash,
-      pluginPromises: extensionPromises,
-      mimeRendererPromises: mimeExtensionPromises,
+      pluginPromises: extensionPromises = [],
+      mimeRendererPromises: mimeExtensionPromises = [],
       devMode,
       serviceManager,
     } = props;
-    const mimeExtensionResolved = await Promise.all(mimeExtensionPromises!);
+    const mimeExtensionResolved = await Promise.all(mimeExtensionPromises);
     mimeExtensions.push(...mimeExtensionResolved);
     this._shell = new LabShell();
     this._jupyterLab = new JupyterLab({
@@ -81,7 +81,7 @@ export class JupyterLabAppAdapter {
         matches: [],
       },
     });
-    const extensionResolved = await Promise.all(extensionPromises!);
+    const extensionResolved = await Promise.all(extensionPromises);
     disabledPlugins.push(
       '@jupyterlab/notebook-extension:language-server',
       '@jupyterlab/notebook-extension:update-raw-mimetype',

packages/react/src/components/jupyterlab/JupyterLabAppCss.tsx

@@ -34,8 +34,7 @@ type Props = {
   theme?: Colormode;
 };
 
-export const JupyterLabAppCss = (props: Props) => {
-  const { theme } = props;
+export const JupyterLabAppCss = ({ theme = 'light' }: Props) => {
   useEffect(() => {
     switch (theme) {
       case 'light': {
@@ -51,8 +50,4 @@ export const JupyterLabAppCss = (props: Props) => {
   return <div id="dla-JupyterLabAppCss-id"></div>;
 };
 
-JupyterLabAppCss.defaultProps = {
-  theme: 'light',
-} as Partial<Props>;
-
 export default JupyterLabAppCss;