Template Merge TypeScript DS

• Add UXPin Merge to the project yarn add @uxpin/merge-cli

• Add uxpin.config.js

• Add your webpack to the webpackConfig field in uxpin.config.js file:

@@ -4,12 +4,12 @@ module.exports = {
       {
         name: 'General',
         include: [
+          'src/components/Button/Button.tsx',
         ],
       },
     ],
     wrapper: 'src/components/UXPinWrapper/UXPinWrapper.tsx',
     webpackConfig: 'webpack.config.js',
   },
-  name: 'Example Design System'
+  name: 'TypeScript Design System'
 };

• Add UXPinWrapper.tsx UXPinWrapper.tsx:

• Add your Component, Button.tsx for example:

interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  label: string;
  disabled?: boolean;
  onClick?: () => void;
}

export default function Button(props: ButtonProps) {
  const { onClick, disabled, label } = props;

  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

• Make sure to add your component to the include array in uxpin.config.js

• run experimental mode: npx uxpin-merge --disable-tunneling

Please take a look at the following links for more information and examples:

• TS-Merge-Supported-Component-Syntax
• Integrating Your Own Components