fix(build): illustrations exports (#3739)

* fix(illustrations): export components * fix(illustrations): export components
scaleway · May 2, 2024 · f509e4a · f509e4a
1 parent d9771d1
commit f509e4a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 50 deletions.
diff --git a/.changeset/friendly-cougars-brush.md b/.changeset/friendly-cougars-brush.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/illustrations": patch
+---
+
+export of packages was wrong on components
diff --git a/packages/illustrations/package.json b/packages/illustrations/package.json
@@ -9,7 +9,6 @@
     "directory": "packages/illustrations"
   },
   "scripts": {
-    "build:rollup": "rollup -c rollup.config.mjs",
     "type:generate": "tsc --declaration -p tsconfig.build.json",
     "build": "vite build --config vite.config.ts && pnpm run type:generate",
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",
@@ -31,11 +30,18 @@
     "darwin",
     "linux"
   ],
+  "files": [
+    "dist/"
+  ],
   "sideEffects": false,
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
+    ".":{
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./products/*": {
       "types": "./dist/products/*/index.d.ts",
       "default": "./dist/products/*/index.js"
@@ -52,11 +58,11 @@
       "types": "./dist/various/index.d.ts",
       "default": "./dist/various/index.js"
     },
-    "./components/*": {
+    "./components": {
       "types": "./dist/components/index.d.ts",
       "default": "./dist/components/index.js"
     },
-    "./components": {
+    "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "default": "./dist/components/*/index.js"
     }
@@ -68,7 +74,7 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-     "@ultraviolet/themes": "workspace:*"
+    "@ultraviolet/themes": "workspace:*"
   },
   "devDependencies": {
     "@ultraviolet/ui": "workspace:*",

diff --git a/packages/illustrations/src/__stories__/List.tsx b/packages/illustrations/src/__stories__/List.tsx
@@ -3,6 +3,11 @@ import { Button, Expandable, Snippet, Stack, Text } from '@ultraviolet/ui'
 import { useReducer } from 'react'
 import * as assets from '../index'
 
+const defaultAssets = {
+  products: assets.default.products,
+  various: assets.default.various,
+}
+
 type AssetsModule = Record<string, Record<string, Record<string, string>>>
 
 const StyledSnippet = styled(Snippet)`
@@ -71,19 +76,19 @@ const SubListElement = ({
     <Expandable opened={isExpanded}>
       <Stack gap={1}>
         {Object.keys(
-          (assets.default as AssetsModule)[category][productName],
+          (defaultAssets as AssetsModule)[category][productName],
         ).map(productImg => {
-          const imgSrc = (assets.default as AssetsModule)[category][
-            productName
-          ][productImg]
+          const imgSrc = (defaultAssets as AssetsModule)[category][productName][
+            productImg
+          ]
 
           return (
             <Card direction="row" gap={2} flex={1} alignItems="center">
               {category === 'products' ? (
                 <StyledImageProduct
                   width={200}
                   src={
-                    (assets.default as AssetsModule)[category][productName][
+                    (defaultAssets as AssetsModule)[category][productName][
                       productImg
                     ]
                   }
@@ -93,7 +98,7 @@ const SubListElement = ({
                 <StyledImageVarious
                   width={200}
                   src={
-                    (assets.default as AssetsModule)[category][productName][
+                    (defaultAssets as AssetsModule)[category][productName][
                       productImg
                     ]
                   }
@@ -125,7 +130,7 @@ export const List = () => {
   const [isAllExpanded, setIsAllExpanded] = useReducer(state => !state, false)
 
   const toggleAllExpanded = () => {
-    const newExpandedCategoryStates = Object.keys(assets.default).reduce(
+    const newExpandedCategoryStates = Object.keys(defaultAssets).reduce(
       (acc, category) => ({
         ...acc,
         [category]: !isAllExpanded,
@@ -134,10 +139,10 @@ export const List = () => {
     )
     setExpandedStates(newExpandedCategoryStates)
 
-    const newExpandedProductStates = Object.keys(assets.default).reduce(
+    const newExpandedProductStates = Object.keys(defaultAssets).reduce(
       (acc, category) => ({
         ...acc,
-        ...Object.keys((assets.default as AssetsModule)[category]).reduce(
+        ...Object.keys((defaultAssets as AssetsModule)[category]).reduce(
           (localAcc, productName) => ({
             ...localAcc,
             [productName]: !isAllExpanded,
@@ -161,41 +166,45 @@ export const List = () => {
         {isAllExpanded ? 'Collapse' : 'Expand'} all
       </Button>
       <Stack gap={1}>
-        {Object.keys(assets.default).map(category => (
-          <>
-            <StyledButton
-              sentiment="neutral"
-              onClick={() => {
-                const newExpandedStates = { ...expandedStates }
-                newExpandedStates[category] = !expandedStates[category]
-                setExpandedStates(newExpandedStates)
-              }}
-              icon={expandedStates[category] ? 'arrow-up' : 'arrow-down'}
-            >
-              {category}
-            </StyledButton>
-            <Expandable opened={expandedStates[category]}>
-              <Stack gap={1}>
-                {Object.keys((assets.default as AssetsModule)[category]).map(
-                  productName => (
-                    <SubListElement
-                      productName={productName}
-                      category={category}
-                      isExpanded={expandedStates[productName]}
-                      setIsExpanded={() => {
-                        // Toggle the expanded state for a specific element
-                        const newExpandedStates = { ...expandedStates }
-                        newExpandedStates[productName] =
-                          !expandedStates[productName]
-                        setExpandedStates(newExpandedStates)
-                      }}
-                    />
-                  ),
-                )}
-              </Stack>
-            </Expandable>
-          </>
-        ))}
+        {Object.keys(assets.default).map(category => {
+          if (category === 'components') return null
+
+          return (
+            <>
+              <StyledButton
+                sentiment="neutral"
+                onClick={() => {
+                  const newExpandedStates = { ...expandedStates }
+                  newExpandedStates[category] = !expandedStates[category]
+                  setExpandedStates(newExpandedStates)
+                }}
+                icon={expandedStates[category] ? 'arrow-up' : 'arrow-down'}
+              >
+                {category}
+              </StyledButton>
+              <Expandable opened={expandedStates[category]}>
+                <Stack gap={1}>
+                  {Object.keys((defaultAssets as AssetsModule)[category]).map(
+                    productName => (
+                      <SubListElement
+                        productName={productName}
+                        category={category}
+                        isExpanded={expandedStates[productName]}
+                        setIsExpanded={() => {
+                          // Toggle the expanded state for a specific element
+                          const newExpandedStates = { ...expandedStates }
+                          newExpandedStates[productName] =
+                            !expandedStates[productName]
+                          setExpandedStates(newExpandedStates)
+                        }}
+                      />
+                    ),
+                  )}
+                </Stack>
+              </Expandable>
+            </>
+          )
+        })}
       </Stack>
     </Stack>
   )

diff --git a/packages/illustrations/src/index.ts b/packages/illustrations/src/index.ts
@@ -1,9 +1,9 @@
+import * as components from './components'
 import * as products from './products'
 import * as various from './various'
 
 export default {
   products,
   various,
+  components,
 }
-// eslint-disable-next-line no-restricted-syntax
-export * from './components'