Working Vite Version

Author: Fankhauser-Dominik

package-lock.json

@@ -1,8 +1,23 @@
 {
   "name": "jsonforms-react-spectrum-vite-test",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.21",
   "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -26,13 +41,13 @@
     "customization"
   ],
   "dependencies": {
-    "@adobe/react-spectrum": "^3.19.0",
+    "@adobe/react-spectrum": "^3.20.0",
     "@date-io/moment": "2.14.0",
-    "@internationalized/date": "^3.0.0",
+    "@internationalized/date": "^3.0.1",
     "@jsonforms/core": "^3.0.0-rc.0",
     "@jsonforms/examples": "^3.0.0-rc.0",
     "@jsonforms/react": "^3.0.0-rc.0",
-    "@spectrum-icons/workflow": "^4.0.0",
+    "@spectrum-icons/workflow": "^4.0.1",
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
@@ -49,7 +64,16 @@
     "react-spring": "^9.5.2",
     "redux": "^4.2.0",
     "tslib": "^2.4.0",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vite-plugin-css-injected-by-js": "^2.0.2"
+  },
+  "peerDependencies": {
+    "@adobe/react-spectrum": "^3.20.0",
+    "@jsonforms/core": "3.0.0-beta.5",
+    "@jsonforms/react": "3.0.0-beta.5",
+    "@spectrum-icons/workflow": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.0.2",
@@ -64,6 +88,7 @@
     "enzyme": "^3.11.0",
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4",
-    "vite": "^3.0.3"
+    "vite": "^3.0.4",
+    "vite-plugin-dts": "^1.4.1"
   }
 }

package.json

@@ -47,6 +47,7 @@ function ThemeSelection({ onChange }: { onChange: (newTheme: Theme) => void }) {
     <SpectrumThemeProvider colorScheme={theme} theme={defaultTheme}>
       <View position='absolute' bottom='size-200' left='size-200'>
         <Picker
+          aria-label='Theme selection'
           direction='top'
           label='Theme'
           defaultSelectedKey={theme}

src/example/theme.switcher.tsx

@@ -149,7 +149,7 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
                 <Heading>Example Forms</Heading>
                 <ExamplesPicker {...props} onChange={setExampleByName} />
 
-                <Tabs defaultSelectedKey='boundData'>
+                <Tabs aria-label='Example Tab' defaultSelectedKey='boundData'>
                   <TabList>
                     <Item key='boundData'>Bound data</Item>
                     <Item key='schema'>Schema</Item>

src/playground/src/App.tsx

@@ -77,8 +77,17 @@ export function ExamplesPicker(props: {
       onSelectionChange={props.onChange}
     >
       {(item) => (
-        <Section key={item?.name} items={item?.children} title={item?.name}>
-          {(item) => <Item>{item?.label}</Item>}
+        <Section
+          aria-label={`Example Section ${item?.name}`}
+          key={item?.name}
+          items={item?.children}
+          title={item?.name}
+        >
+          {(item) => (
+            <Item aria-label={`Example Picker ${item?.label}`}>
+              {item?.label}
+            </Item>
+          )}
         </Section>
       )}
     </Picker>

src/playground/src/ExamplesPicker.tsx

@@ -29,7 +29,7 @@ import * as React from 'react';
 // import { UnControlled as CodeMirror } from 'react-codemirror2';
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { ColorSchemeContext } from '../../src/util/ColorSchemeContext';
+// import { ColorSchemeContext } from '../../src/util/ColorSchemeContext';
 import { ButtonGroup, Button, StatusLight, View } from '@adobe/react-spectrum';
 
 // import 'codemirror/mode/javascript/javascript';
@@ -38,7 +38,7 @@ export function TextArea(props: {
   value: string;
   onChange: (newValue: string) => void;
 }) {
-  const colorScheme = React.useContext(ColorSchemeContext);
+  // const colorScheme = React.useContext(ColorSchemeContext);
   const [value, setValue] = React.useState(props.value);
   const err = getErr(value);
   const [key, setKey] = React.useState(Math.random()); // used to force-rerender CodeMirror when Reset button is clicked

src/playground/src/TextArea.tsx

@@ -140,7 +140,7 @@ export default function DragAndDrop({
       {springs.map(({ zIndex, shadow, y, scale }, index: number) => (
         <animated.div
           {...bind(index)}
-          key={index}
+          key={`${index}`}
           style={{
             zIndex,
             boxShadow: shadow.to(

src/src/complex/ArrayModal/SpectrumArrayModalControl/DragAndDrop.tsx

@@ -39,14 +39,16 @@ button {
 .list-array-item.enableDetailedView {
   background-color: var(--spectrum-global-color-gray-100);
 }
+.list-array-item.enableDetailedView.collapsed {
+}
 .list-array-item.enableDetailedView.expanded {
   background-color: var(--spectrum-global-color-gray-100);
-  position: fixed !important;
   top: 0;
-  right: 0;
+  left: 0;
   z-index: 9000;
-  width: 95%;
-  min-height: 100vh;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
   flex-grow: 1;
   contain: paint;
 }
@@ -56,24 +58,20 @@ button {
 }
 .animatedModalItemDiv > .refDivForPosition {
   height: 100%;
-  max-width: 100%;
 }
 
 .list-array-item.enableDetailedView.expanded > .array-item-header {
-  width: 100%;
-  padding: 15px 0;
+  position: sticky;
+  width: calc(100% + 24px);
+  margin-left: -12px;
+
+  padding: 10px 0 10px 0;
   margin-top: -12px;
-  margin-bottom: 10px;
   border-radius: 10px 10px 0 0;
-  position: absolute;
-  top: 0;
+  top: 0px;
   left: 0;
 
   background-color: var(--spectrum-global-color-gray-100);
   z-index: 1;
   border-bottom: 2px solid var(--spectrum-global-color-gray-200);
 }
-
-.json-dispatch-wrapper {
-  padding-top: 40px;
-}

src/src/complex/ArrayModal/SpectrumArrayModalItem/SpectrumArrayModalItem.css

@@ -85,7 +85,7 @@ export const SpectrumCategorizationRenderer = (
   return (
     <View isHidden={!visible}>
       <SpectrumProvider>
-        <Tabs isDisabled={enabled === undefined ? false : !enabled}>
+        <Tabs /* isDisabled={enabled === undefined ? false : !enabled} */>
           <TabList>
             {categories?.map((category: { [key: string]: any }, index) => (
               <Item key={index}>

src/src/complex/SpectrumCategorizationRenderer.tsx

@@ -91,7 +91,7 @@ export const SpectrumCategorizationStepperRenderer = (
         UNSAFE_className='categorization-stepper'
       >
         <Tabs
-          isDisabled={enabled === undefined ? false : !enabled}
+          /* isDisabled={enabled === undefined ? false : !enabled} */
           selectedKey={String(step)}
           onSelectionChange={selectStep}
         >

src/src/complex/SpectrumCategorizationStepperRenderer.tsx

@@ -142,6 +142,7 @@ const SpectrumOneOfRenderer = ({
           <>
             <Picker
               aria-label='Select'
+              aria-labelledby='Select'
               isDisabled={enabled === undefined ? false : !enabled}
               onSelectionChange={handleTabChange}
               selectedKey={String(selectedIndex)}
@@ -174,7 +175,8 @@ const SpectrumOneOfRenderer = ({
         ) : (
           <>
             <Tabs
-              isDisabled={enabled === undefined ? false : !enabled}
+              aria-label='Select'
+              // isDisabled={enabled === undefined ? false : !enabled}
               selectedKey={String(selectedIndex)}
               onSelectionChange={handleTabChange}
             >
@@ -241,7 +243,6 @@ export const SpectrumOneOfRendererTester: RankedTester = (
   schema: JsonSchema,
   context: TesterContext
 ) => {
-  console.log('asdf', uischema, schema, context);
   return isOneOfControl(uischema, schema, context) ? 5 : -1;
 };
 

src/src/complex/SpectrumOneOfRenderer.tsx

@@ -19,5 +19,6 @@
     "jsx": "react-jsx"
   },
   "include": ["src/src"],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.json

@@ -1,28 +1,48 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
+    sourcemap: true,
     lib: {
       entry: resolve(__dirname, 'src/src/index.ts'),
       name: 'JsonForms React Spectrum Renderers',
-      // the proper extensions will be added
-      fileName: 'index',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format}.js`,
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['react'],
+      external: [
+        'react',
+        'react-dom',
+        '@jsonforms/core',
+        '@jsonforms/react',
+        'moment',
+      ],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
           react: 'React',
+          'react-dom': 'ReactDOM',
         },
       },
     },
   },
-  plugins: [react()],
+  plugins: [
+    react(),
+    cssInjectedByJsPlugin(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  define: {
+    'process.platform': null,
+    'global.setImmediate': null,
+  },
 });