Change build package from tsc to rollup (#127)

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/env", { "modules": false }], "@babel/preset-react"]
+}

.gitignore

@@ -37,5 +37,5 @@ next-env.d.ts
 
 /dist
 /styled-system
-
 /storybook-static
+/.rollup.cache

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yorkie-ui",
-  "version": "0.5.17",
+  "version": "0.5.18",
   "description": "Yorkie UI",
   "repository": {
     "type": "git",
@@ -21,21 +21,12 @@
   "files": [
     "dist"
   ],
-  "source": "src/index.ts",
-  "main": "dist/esm/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "typings": "dist/types/index.d.ts",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.mjs"
-      }
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
     },
     "./package.json": "./package.json",
     "./style": "./dist/styles/globals.css"
@@ -44,12 +35,8 @@
     "access": "public"
   },
   "scripts": {
-    "test-alias": "tsc-alias --verbose",
-    "build": "pnpm run clean && npm run style && pnpm run copy:styled-system && pnpm run build:panda && pnpm run build:esm && pnpm run build:cjs && pnpm run test-alias",
-    "build:esm": "tsc -b tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
-    "build:cjs": "tsc -b tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json",
+    "build": "pnpm run clean && npm run style && pnpm run build:panda && npx rollup -c",
     "build:panda": "mkdir -p dist/styles && panda cssgen --outfile dist/styles/globals.css",
-    "copy:styled-system": "copyfiles ./styled-system/**/* ./styled-system/* dist/",
     "dev": "next dev",
     "clean": "rm -rf dist tsconfig.tsbuildinfo actions chains connectors query",
     "start": "next start",
@@ -58,21 +45,27 @@
     "build-storybook": "storybook build",
     "deploy-storybook": "gh-pages -d storybook-static",
     "style": "panda codegen",
-    "icon": "node generateIcons.js",
-    "sync-figma-to-tokens": "ts-node-esm -P tsconfig.json tokens/sync_figma_to_tokens.ts"
+    "icon": "node generateIcons.js"
   },
   "dependencies": {
     "@ark-ui/react": "^2.2.3",
-    "copy-to-clipboard": "^3.3.3",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "@babel/core": "^7.24.7",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.1.3",
     "@pandacss/dev": "^0.36.1",
     "@park-ui/panda-preset": "^0.36.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-docs": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
@@ -83,16 +76,18 @@
     "@storybook/addon-themes": "^8.0.0",
     "@storybook/blocks": "^8.0.0",
     "@storybook/nextjs": "^8.0.0",
-    "@storybook/react": "^8.0.0",
+    "@storybook/react": "^8.1.11",
     "@storybook/test": "^8.0.0",
     "@storybook/test-runner": "^0.17.0",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@types/mdx": "^2.0.11",
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.2.68",
     "@types/react-dom": "^18",
     "@typescript-eslint/parser": "^7.2.0",
     "classnames": "^2.5.1",
+    "copy-to-clipboard": "^3.3.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.1.0",
@@ -113,13 +108,18 @@
     "react-icons": "^5.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
+    "rollup": "^4.18.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "storybook": "^8.0.0",
     "stylelint": "^16.2.1",
     "stylelint-config-standard": "^36.0.0",
     "ts-loader": "^9.5.1",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.4.2",
     "typescript-eslint": "^7.2.0",
+    "url-loader": "^4.1.1",
     "webpack-merge": "^5.10.0"
   },
   "lint-staged": {

rollup.config.mjs

@@ -0,0 +1,49 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import tsConfigPaths from 'rollup-plugin-tsconfig-paths';
+import typescript from '@rollup/plugin-typescript';
+import babel from '@rollup/plugin-babel';
+import image from '@rollup/plugin-image';
+import preserveDirectives from 'rollup-plugin-preserve-directives';
+import svgr from '@svgr/rollup';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+const production = !process.env.ROLLUP_WATCH;
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  input: 'src/index.ts',
+  output: [
+    { dir: 'dist/cjs', format: 'cjs', sourcemap: true, exports: 'named' },
+    {
+      dir: 'dist/esm',
+      format: 'esm',
+      preserveModules: true,
+      sourcemap: true,
+      exports: 'named',
+      preserveModulesRoot: 'src',
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    tsConfigPaths(), // Ensure this comes before nodeResolve
+    nodeResolve({
+      extensions: ['.tsx', '.ts', '.jsx', '.js', '.json', '.svg'],
+      browser: true, // Adjust based on your setup
+    }),
+    babel({
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      babelHelpers: 'bundled',
+      presets: ['@babel/env', '@babel/preset-react'],
+    }),
+    typescript(),
+    image(),
+    svgr(),
+    commonjs(), // Convert CommonJS modules to ES6
+    preserveDirectives(),
+    production && terser(), // Minify in production
+  ],
+  external: ['react', 'react-dom', 'prop-types'], // Exclude these from bundle
+};

src/components/ui/aspect/AspectRatio.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AspectRatio } from '@/components/ui';
 import Image from 'next/image';
-import Yorkie from './yorkie.png';
+import Yorkie from '@/components/ui/aspect/yorkie.png';
 
 const meta = {
   title: 'LAYOUT / AspectRatio',

src/components/ui/button/Button.tsx

@@ -1,9 +1,8 @@
 import { ark } from '@ark-ui/react';
 import { ButtonVariantProps, button } from '@/styled/recipes';
-import { Icon, Link } from '@/components/ui';
-import type { LinkProps } from '@/components/ui';
-import { forwardRef } from 'react';
-import { styled, type HTMLStyledProps } from '@/styled/jsx';
+import { Icon, Link, LinkProps } from '@/components/ui';
+
+import { styled, HTMLStyledProps } from '@/styled/jsx';
 
 type ButtonIconProps = {
   icon?: any;
@@ -29,27 +28,26 @@ export type ButtonProps = HTMLStyledProps<'button'> &
 
 const StyledButton = styled(ark.button, button);
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps) => {
+export const Button = (props: ButtonProps) => {
   const { children, icon, position, size, as = 'button', href, wLink, hLink, ...rest } = props;
-  const IconButton = <Icon size={size} icon={icon} />;
 
   if (as === 'link' && href) {
     return (
       <Link href={href} width={wLink} height={hLink} decoration="ghost" {...rest}>
-        {position === 'start' && icon && IconButton}
+        {position === 'start' && icon && <Icon size={size} icon={icon} />}
         {children}
-        {position === 'end' && icon && IconButton}
+        {position === 'end' && icon && <Icon size={size} icon={icon} />}
       </Link>
     );
   }
 
   return (
     <StyledButton size={size} {...rest}>
-      {position === 'start' && icon && IconButton}
+      {position === 'start' && icon && <Icon size={size} icon={icon} />}
       {children}
-      {position === 'end' && icon && IconButton}
+      {position === 'end' && icon && <Icon size={size} icon={icon} />}
     </StyledButton>
   );
-});
+};
 
 Button.displayName = 'Button';

src/components/ui/button/index.ts

@@ -1,5 +1,3 @@
 import { Button } from './Button';
-import { ButtonProps } from './interface';
 
 export { Button };
-export type { ButtonProps };

src/components/ui/dialog/Dialog.stories.tsx

@@ -71,19 +71,19 @@ const meta = {
     },
     preventScroll: {
       control: { type: 'boolean' },
-      description: "Whether to prevent scrolling behind the dialog when it's opened.",
+      description: 'Whether to prevent scrolling behind the dialog when it\'s opened.',
     },
     restoreFocus: {
       control: { type: 'boolean' },
       description: 'Whether to restore focus to the element that had focus before the dialog was opened.',
     },
     role: {
-      description: "\nThe dialog's role. `dialog` | `alertdialog`",
+      description: '\nThe dialog\'s role. `dialog` | `alertdialog`',
       default: 'dialog',
     },
     trapFocus: {
       control: { type: 'boolean' },
-      description: "Whether to trap focus inside the dialog when it's opened.",
+      description: 'Whether to trap focus inside the dialog when it\'s opened.',
     },
     unmountOnExit: {
       control: { type: 'boolean' },

src/components/ui/input/index.ts

@@ -1,4 +1,4 @@
 import { InputProps, Input } from '@/components/ui/input/Input';
 
 export { Input };
-export { type InputProps };
+export type { InputProps };

src/components/ui/toast/Toast.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Toast } from '@/components/ui';
-import { CloseIcon } from '@/components/ui/icons';
+import { Toast, Icons } from '@/components/ui';
 import { createToaster } from '@ark-ui/react/toast';
 import { Button } from '../button/Button';
 
@@ -66,7 +65,7 @@ export const Overview = () => {
           <Toast.Description>{toast.description}</Toast.Description>
           <Toast.CloseTrigger asChild>
             <span>
-              <CloseIcon />
+              <Icons.IconClose />
             </span>
           </Toast.CloseTrigger>
         </Toast.Root>

src/index.ts

@@ -1 +1 @@
-export * from './components/ui';
+export * from '@/components/ui';