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
twilio-labs · Oct 28, 2022 · 448c9fe · 448c9fe
1 parent e7c34d8
commit 448c9fe
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/.changeset/real-ligers-protect.md 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
@@ -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
@@ -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
@@ -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"
   }
 }