fix: icon builder illustrations (#8406)

* fix: icon builder illustration missing types

* add magic flag :)

* fix flag

* use an svg, not the combined illustration file

* try running tsc to test the types

* update tsconfig

* specify module resolution

* try a different tact

* run tsc

* export our IllustrationProps types and Context

* revert verdaccio

Author: snowystinger

packages/@react-spectrum/s2/src/index.ts

@@ -119,7 +119,7 @@ export type {DisclosureProps, DisclosurePanelProps} from './Disclosure';
 export type {DividerProps} from './Divider';
 export type {DropZoneProps} from './DropZone';
 export type {FormProps} from './Form';
-export type {IconProps, IconContextValue} from './Icon';
+export type {IconProps, IconContextValue, IllustrationProps, IllustrationContextValue} from './Icon';
 export type {InlineAlertProps} from './InlineAlert';
 export type {ImageProps} from './Image';
 export type {ImageCoordinatorProps} from './ImageCoordinator';

scripts/icon-builder-fixture/package.json

@@ -2,7 +2,8 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "parcel": "^2.13.0",
-    "process": "^0.11.10"
+    "process": "^0.11.10",
+    "typescript": "^5.7.3"
   },
   "dependencies": {
     "@react-spectrum/s2": "latest",
@@ -11,6 +12,7 @@
     "react-dom": "^18.2.0"
   },
   "scripts": {
+    "tsc": "tsc",
     "dev": "parcel src/index.html",
     "build": "parcel build src/index.html"
   },

scripts/icon-builder-fixture/src/App.js renamed to scripts/icon-builder-fixture/src/App.tsx

@@ -17,6 +17,7 @@ import {
   Text
 } from '@react-spectrum/s2';
 import AlignRight from '@react-spectrum/icon-library-test/AlignRight';
+import ThreeD from '@react-spectrum/icon-library-test/S2_lin_3D_48';
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
         <AlignRight />
         <Text>Action Button</Text>
       </ActionButton>
+      <ThreeD />
     </main>
   );
 }

scripts/icon-builder-fixture/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    // we can explicitly declare `any`, but we don't want to infer `any`
+    "noImplicitAny": false,
+    // maybe bump to 'esNext'?
+    "target": "es2018",
+    // allows react jsx in tsx files
+    // this is set to preserve so that different packages can use different JSX runtimes
+    // depending on the React version they support. ESLint will ensure that React is imported
+    // in packages using the old JSX runtime. Parcel will compile JSX according to the React
+    // version specified in the package.json of each package.
+    "jsx": "preserve",
+    // Eventually turn off, one we have no more assumed default exports.
+    // Allow default imports from modules with no default export.
+    "allowSyntheticDefaultImports": true,
+    // allows importing of json files, needed for locales as of right now
+    "resolveJsonModule": true,
+    // Search under node_modules for non-relative imports.
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    // Process & infer types from .js files.
+    "allowJs": true,
+    // Don't emit; allow Babel to transform files.
+    "noEmit": true,
+    // Disallow features that require cross-file information for emit.
+    "isolatedModules": true,
+    // Import non-ES modules as default imports.
+    "esModuleInterop": true,
+    // if 'target' is updated, this should be updated as well
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ],
+    "skipLibCheck": false,
+    "strict": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "**/node_modules"
+  ]
+}

scripts/verdaccio-build-icon-builder.sh

@@ -37,8 +37,11 @@ mkdir -p $verdaccio_path
 echo 'test icon builder'
 cd examples/s2-webpack-5-example
 mkdir icon-test
+
 cp ../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_3D_20_N.svg icon-test/S2_Icon_3D_20_N.svg
 npx @react-spectrum/s2-icon-builder -i ./icon-test/S2_Icon_3D_20_N.svg -o ./icon-dist
+cp ../../packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_3D_48.svg icon-test/S2_lin_3D_48.svg
+npx @react-spectrum/s2-icon-builder --type illustration -i ./icon-test/S2_lin_3D_48.svg -o ./icon-dist
 echo 'concluded icon builder'
 
 echo 'testing icon builder library'
@@ -79,13 +82,16 @@ cat > icon-library-test/package.json << EOF
 EOF
 
 mkdir icon-library-test/src
+mkdir icon-library-test/src/illustrations
 touch icon-library-test/yarn.lock
 cp ../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_3D_20_N.svg icon-library-test/src/S2_Icon_3D_20_N.svg
 cp ../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_AlignRight_20_N.svg icon-library-test/src/S2_Icon_AlignRight_20_N.svg
+cp ../../packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_3D_48.svg icon-library-test/src/illustrations/S2_lin_3D_48.svg
 cd icon-library-test
 echo "Installing and building icon library"
 yarn install --no-immutable
 yarn transform-icons -i './src/*.svg' -o ./ --isLibrary
+yarn transform-icons --type illustration -i './src/illustrations/*.svg' -o ./ --isLibrary
 
 ls .
 
@@ -106,6 +112,7 @@ yarn npm publish --tag latest
 echo "Building icon builder fixture"
 cd ../../../scripts/icon-builder-fixture
 yarn install --no-immutable
+yarn tsc
 yarn build --public-url ./
 
 echo "Moving icon builder fixture to verdaccio"