feat!: migrate build process to use vite (#665)

package.json

@@ -2,19 +2,26 @@
   "name": "@pluralsh/design-system",
   "version": "0.1.0",
   "description": "Pluralsh Design System",
-  "main": "dist/index.js",
-  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "files": [
-    "dist/**/*",
-    "src/**/*"
+    "dist"
   ],
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build:storybook": "yarn clean && storybook build && yarn build:fix:storybook",
+    "build:storybook": "yarn build && storybook build && yarn build:fix:storybook",
     "build:fix:storybook": "perl -pi -w -e 's/%40/@/g;' storybook-static/index.html",
     "storybook:serve-static": "yarn build:storybook && http-server storybook-static",
-    "build": "npx tsc --declaration",
-    "build:watch": "npx tsc --declaration --watch",
+    "build": "rimraf dist && tsc --noEmit && vite build",
+    "build:watch": "rimraf dist && vite build --watch",
     "clean": "rimraf storybook-static dist",
     "test": "vitest --run",
     "test:watch": "vitest",
@@ -45,7 +52,6 @@
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "3.0.1",
-    "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
     "dayjs": "1.11.13",
@@ -97,6 +103,7 @@
     "@vitest/coverage-v8": "1.0.4",
     "@vitest/ui": "1.0.4",
     "babel-loader": "9.1.3",
+    "babel-plugin-styled-components": "2.1.4",
     "conventional-changelog-conventionalcommits": "6.1.0",
     "eslint": "8.55.0",
     "eslint-config-prettier": "9.1.0",
@@ -126,6 +133,7 @@
     "styled-components": "6.1.13",
     "typescript": "5.6.2",
     "vite": "5.4.8",
+    "vite-plugin-dts": "4.3.0",
     "vitest": "2.1.2"
   },
   "peerDependencies": {
@@ -148,4 +156,4 @@
       "eslint --fix --ext ts,tsx,js,jsx"
     ]
   }
-}
+}

src/components/Flex.tsx

@@ -82,7 +82,7 @@ function FlexRef(
         $gap: gap,
         $padding: padding,
       }}
-      style={{ ...otherProps }}
+      css={{ ...otherProps }}
     >
       {children}
     </FlexSC>

src/components/Modal.tsx

@@ -10,10 +10,6 @@ import {
 
 import styled, { useTheme } from 'styled-components'
 
-import { VisuallyHidden } from 'react-aria'
-
-import * as Dialog from '@radix-ui/react-dialog'
-
 import { type ColorKey, type Nullable, type SeverityExt } from '../types'
 
 import Card from './Card'
@@ -173,6 +169,7 @@ function ModalRef(
       ref={ref}
       open={open}
       onOpenChange={triggerClose}
+      title={typeof header === 'string' ? header : 'Dialog'}
       {...props}
     >
       <ModalSC
@@ -186,9 +183,6 @@ function ModalRef(
           $scrollable={scrollable}
           $hasActions={!!actions}
         >
-          <VisuallyHidden>
-            <Dialog.Title>{header}</Dialog.Title>
-          </VisuallyHidden>
           {!!header && (
             <ModalHeaderWrapSC ref={ref}>
               {HeaderIcon && (

src/components/ModalWrapper.tsx

@@ -6,6 +6,8 @@ import styled, { type CSSObject, useTheme } from 'styled-components'
 
 import { FocusScope } from '@radix-ui/react-focus-scope'
 
+import { VisuallyHidden } from 'react-aria'
+
 import WrapWithIf from './WrapWithIf'
 
 const ANIMATION_SPEED = '150ms'
@@ -18,7 +20,14 @@ export type ModalWrapperProps = {
 } & Dialog.DialogContentProps
 
 function ModalWrapperRef(
-  { open, onOpenChange, overlayStyles, children, ...props }: ModalWrapperProps,
+  {
+    open,
+    onOpenChange,
+    overlayStyles,
+    title,
+    children,
+    ...props
+  }: ModalWrapperProps,
   ref: any
 ) {
   const theme = useTheme()
@@ -49,6 +58,9 @@ function ModalWrapperRef(
               ref={ref}
               {...props}
             >
+              <VisuallyHidden>
+                <Dialog.Title>{title}</Dialog.Title>
+              </VisuallyHidden>
               {children}
             </ContentSC>
           </WrapWithIf>

src/index.ts

@@ -2,6 +2,7 @@ export { Avatar } from 'honorable'
 
 // Icons
 export * from './icons'
+export type { IconProps } from './components/icons/createIcon'
 
 // PluralLogos
 export * from './plural-logos'
@@ -17,7 +18,7 @@ export { default as Card } from './components/Card'
 export type { CalloutProps } from './components/Callout'
 export { default as Callout } from './components/Callout'
 export { default as Checkbox } from './components/Checkbox'
-export { default as Chip } from './components/Chip'
+export { default as Chip, type ChipProps } from './components/Chip'
 export { default as ChipList } from './components/ChipList'
 export { default as Code } from './components/Code'
 export { default as CodeEditor } from './components/CodeEditor'
@@ -63,7 +64,7 @@ export { default as Tab } from './components/Tab'
 export type { TabListStateProps, TabBaseProps } from './components/TabList'
 export { TabList } from './components/TabList'
 export { default as TabPanel } from './components/TabPanel'
-export { default as Table } from './components/table/Table'
+export { default as Table, type TableProps } from './components/table/Table'
 export { default as TipCarousel } from './components/TipCarousel'
 export {
   type ValidationResponse,
@@ -72,7 +73,13 @@ export {
 export type { TooltipProps } from './components/Tooltip'
 export { default as Tooltip } from './components/Tooltip'
 export { default as FormTitle } from './components/FormTitle'
-export { default as Sidebar, SIDEBAR_WIDTH } from './components/Sidebar'
+export {
+  default as Sidebar,
+  SIDEBAR_WIDTH,
+  useSidebar,
+  type SidebarLayout,
+  type SidebarVariant,
+} from './components/Sidebar'
 export { default as SidebarSection } from './components/SidebarSection'
 export { default as SidebarExpandButton } from './components/SidebarExpandButton'
 export {
@@ -176,3 +183,21 @@ export { default as GlobalStyle } from './GlobalStyle'
 // Utils
 export { default as scrollIntoContainerView } from './utils/scrollIntoContainerView'
 export * from './utils/urls'
+
+// Markdoc
+export type { MarkdocContextValue } from './markdoc/MarkdocContext'
+export {
+  useMarkdocContext,
+  MarkdocContextProvider,
+} from './markdoc/MarkdocContext'
+export { getSchema as getRuntimeSchema } from './markdoc/runtimeSchema'
+export {
+  default as collectHeadings,
+  type MarkdocHeading,
+} from './markdoc/utils/collectHeadings'
+export { getMdContent } from './markdoc/utils/getMdContent'
+export * as markdocConfig from './markdoc/config'
+export * as markdocFunctions from './markdoc/functions'
+export * as markdocNodes from './markdoc/nodes'
+export * as markdocTags from './markdoc/tags'
+export * as markdocComponents from './markdoc/components'

src/types/styled.d.ts

@@ -4,7 +4,11 @@ import 'styled-components'
 import { type styledTheme } from '../theme'
 
 // Allow css prop on html elements
-import type {} from 'styled-components/cssprop'
+declare module 'react' {
+  interface Attributes {
+    css?: CSSProp | undefined
+  }
+}
 
 type StyledTheme = typeof styledTheme
 

vite.config.ts

@@ -1,10 +1,32 @@
+import { resolve } from 'path'
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import dts from 'vite-plugin-dts'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   build: {
-    chunkSizeWarningLimit: 1000,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        'styled-components',
+        '@emotion/react',
+        '@emotion/styled',
+        'honorable',
+        'honorable-theme-default',
+        'react-transition-group',
+      ],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    },
   },
   plugins: [
     react({
@@ -14,6 +36,15 @@ export default defineConfig({
         configFile: false,
       },
     }),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      exclude: ['**/*.stories.tsx', '**/*.test.tsx'],
+      beforeWriteFile: (filePath, content) => ({
+        filePath: filePath.replace(/src/, 'dist'),
+        content,
+      }),
+    }),
   ],
   optimizeDeps: {
     esbuildOptions: {