From 448c9fec8b5bf14481940e7226fa1d2456290e83 Mon Sep 17 00:00:00 2001
From: gloriliale <77117846+gloriliale@users.noreply.github.com>
Date: Fri, 28 Oct 2022 11:01:50 -0700
Subject: [PATCH] chore: update create package template (#2737)

* chore(button-group): align props name

* chore: update plop template for new components

* chore: add internal dependencies

* chore: move box dependency

* chore(button-group): add changeset
---
 .changeset/real-ligers-protect.md               |  6 ++++++
 .../components/button-group/src/ButtonGroup.tsx |  4 ++--
 tools/plop-templates/component-index.hbs        |  7 +++++--
 tools/plop-templates/package.hbs                | 17 +++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/real-ligers-protect.md

diff --git a/.changeset/real-ligers-protect.md b/.changeset/real-ligers-protect.md
new file mode 100644
index 0000000000..8880b1ccb0
--- /dev/null
+++ b/.changeset/real-ligers-protect.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/button-group': patch
+'@twilio-paste/core': patch
+---
+
+[Button Group] update internal variable name
diff --git a/packages/paste-core/components/button-group/src/ButtonGroup.tsx b/packages/paste-core/components/button-group/src/ButtonGroup.tsx
index a239fc4c3e..8997953f0b 100644
--- a/packages/paste-core/components/button-group/src/ButtonGroup.tsx
+++ b/packages/paste-core/components/button-group/src/ButtonGroup.tsx
@@ -48,10 +48,10 @@ export interface ButtonGroupProps extends Omit<React.ComponentPropsWithRef<'div'
 }
 
 export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({element = 'BUTTON_GROUP', children, attached = false, ...rest}, ref) => {
+  ({element = 'BUTTON_GROUP', children, attached = false, ...props}, ref) => {
     return (
       <Box
-        {...safelySpreadBoxProps(rest)}
+        {...safelySpreadBoxProps(props)}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         as={attached ? AttachedStyled : UnattachedStyled}
diff --git a/tools/plop-templates/component-index.hbs b/tools/plop-templates/component-index.hbs
index 844ff6d649..aa901eeb81 100644
--- a/tools/plop-templates/component-index.hbs
+++ b/tools/plop-templates/component-index.hbs
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import type {BoxProps} from '@twilio-paste/box';
 
-export interface {{pascalCase component-name}}Props {
+export interface {{pascalCase component-name}}Props extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
   children?: React.ReactNode;
+  element?: BoxProps['element'];
 }
 
-const {{pascalCase component-name}} = React.forwardRef<HTMLDivElement, {{pascalCase component-name}}Props>((props, ref) => {
+const {{pascalCase component-name}} = React.forwardRef<HTMLDivElement, {{pascalCase component-name}}Props>(({element = "{{constantCase component-name}}", ...props}, ref) => {
   return (
     <div ref={ref}>
       {props.children}
@@ -17,6 +19,7 @@ const {{pascalCase component-name}} = React.forwardRef<HTMLDivElement, {{pascalC
 
 {{pascalCase component-name}}.propTypes = {
   children: PropTypes.node,
+  element: PropTypes.string,
 };
 
 {{export component-name}};
diff --git a/tools/plop-templates/package.hbs b/tools/plop-templates/package.hbs
index 1c9f17c431..dfc836132f 100644
--- a/tools/plop-templates/package.hbs
+++ b/tools/plop-templates/package.hbs
@@ -25,13 +25,30 @@
     "tsc": "tsc"
   },
   "peerDependencies": {
+    "@twilio-paste/animation-library": "^0.3.2",
+    "@twilio-paste/box": "^7.0.0",
+    "@twilio-paste/customization": "^5.0.0",
+    "@twilio-paste/design-tokens": "^8.0.0",
+    "@twilio-paste/style-props": "^6.0.0",
+    "@twilio-paste/styling-library": "^1.0.0",
+    "@twilio-paste/theme": "^8.0.0",
+    "@twilio-paste/types": "^3.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6 || ^17.0.2",
     "react-dom": "^16.8.6 || ^17.0.2"
   },
   "devDependencies": {
+    "@twilio-paste/animation-library": "^0.3.2",
+    "@twilio-paste/box": "^7.0.0",
+    "@twilio-paste/customization": "^5.0.0",
+    "@twilio-paste/design-tokens": "^8.0.0",
+    "@twilio-paste/style-props": "^6.0.0",
+    "@twilio-paste/styling-library": "^1.0.0",
+    "@twilio-paste/theme": "^8.0.0",
+    "@twilio-paste/types": "^3.1.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+    "typescript": "^4.6.4"
   }
 }