feat(root): plop component template improved

packages/components/code/src/use-code.ts

@@ -6,15 +6,13 @@ import {useDOMRef} from "@nextui-org/dom-utils";
 import {ReactRef} from "@nextui-org/shared-utils";
 import {useMemo} from "react";
 
-interface Props extends HTMLNextUIProps<"code">, CodeVariantProps {
+export interface UseCodeProps extends HTMLNextUIProps<"code">, CodeVariantProps {
   /**
    * Ref to the DOM node.
    */
   ref?: ReactRef<HTMLElement | null>;
 }
 
-export type UseCodeProps = Props;
-
 export function useCode(originalProps: UseCodeProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, code.variantKeys);
 

plop/component/package.json.hbs

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/dom-utils": "workspace:*"
   },

plop/component/src/index.ts.hbs

@@ -1,3 +1,5 @@
+import { {{capitalize componentName}} } from "./{{componentName}}";
+
 // export types
 export type { {{capitalize componentName}}Props } from "./{{componentName}}";
 
@@ -5,4 +7,4 @@ export type { {{capitalize componentName}}Props } from "./{{componentName}}";
 export { use{{capitalize componentName}} } from "./use-{{componentName}}";
 
 // export component
-export { default as {{capitalize componentName}} } from './{{componentName}}';
+export { {{capitalize componentName}} };

plop/component/src/use-{{componentName}}.ts.hbs

@@ -1,11 +1,38 @@
-import {HTMLNextUIProps} from "@nextui-org/system";
+import type { {{capitalize componentName}}VariantProps } from "@nextui-org/theme";
 
-export interface Use{{capitalize componentName}}Props extends HTMLNextUIProps<"div"> {}
+import {HTMLNextUIProps,mapPropsVariants} from "@nextui-org/system";
+import { {{componentName}} } from "@nextui-org/theme";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {ReactRef} from "@nextui-org/shared-utils";
+import {useMemo} from "react";
 
-export function use{{capitalize componentName}}(props: Use{{capitalize componentName}}Props) {
-  const {...otherProps} = props;
+export interface Use{{capitalize componentName}}Props extends 
+HTMLNextUIProps<"div", {{capitalize componentName}}VariantProps> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+}
 
-  return {...otherProps};
+export function use{{capitalize componentName}}(originalProps: Use{{capitalize componentName}}Props) {
+  const [props, variantProps] = mapPropsVariants(originalProps, {{componentName}}.variantKeys);
+
+  const {ref, as, className, ...otherProps} = props;
+
+  const Component = as || "div";
+
+  const domRef = useDOMRef(ref);
+
+  const styles = useMemo(
+  () =>
+    {{componentName}}({
+      ...variantProps,
+      className,
+    }),
+  [variantProps, className],
+);
+
+  return {Component, as, styles, domRef, ...otherProps};
 }
 
 export type Use{{capitalize componentName}}Return = ReturnType<typeof use{{capitalize componentName}}>;

plop/component/src/{{componentName}}.styles.ts.hbs

@@ -1,4 +0,0 @@
-import {styled} from "@nextui-org/system";
-import {cssFocusVisible, cssHideShowIn} from "@nextui-org/shared-css";
-
-export const Styled{{capitalize componentName}} = styled("div", {});

plop/component/src/{{componentName}}.tsx.hbs

@@ -1,23 +1,17 @@
 import {forwardRef} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/dom-utils";
-import {clsx, __DEV__} from "@nextui-org/shared-utils";
+import {__DEV__} from "@nextui-org/shared-utils";
 
-import { Styled{{capitalize componentName}} } from "./{{componentName}}.styles";
 import { Use{{capitalize componentName}}Props, use{{capitalize componentName}} } from "./use-{{componentName}}";
 
-export interface {{capitalize componentName}}Props extends Use{{capitalize componentName}}Props {}
+export interface {{capitalize componentName}}Props extends Omit<Use{{capitalize componentName}}Props, "ref"> {}
 
 const {{capitalize componentName}} = forwardRef<{{capitalize componentName}}Props, "div">((props, ref) => {
-  const {className, ...otherProps} =  use{{capitalize componentName}}(props);
-
-  const domRef = useDOMRef(ref);
+  const {Component, domRef, children, styles, ...otherProps} =  use{{capitalize componentName}}({ref, ...props});
 
   return (
-    <Styled{{capitalize componentName}}
-      ref={domRef}
-      className={clsx("nextui-{{componentName}}", className)}
-      {...otherProps}
-    />
+    <Component ref={domRef} className={styles} {...otherProps}>
+      {children}
+    </Component>
   );
 });
 

plop/component/stories/{{componentName}}.stories.tsx.hbs

@@ -1,11 +1,47 @@
 import React from "react";
-import {Meta} from "@storybook/react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import { {{componentName}} } from "@nextui-org/theme";
 
-import { {{capitalize componentName}} } from "../src";
+import { {{capitalize componentName}}, {{capitalize componentName}}Props } from "../src";
 
 export default {
   title: "{{capitalize componentName}}",
   component: {{capitalize componentName}},
-} as Meta;
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+        options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
+      },
+    },
+    radius: {
+      control: {
+        type: "select",
+        options: ["none", "base", "sm", "md", "lg", "xl", "full"],
+      },
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["xs", "sm", "md", "lg", "xl"],
+      },
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as ComponentMeta<typeof {{capitalize componentName}}>;
 
-export const Default = () => <{{capitalize componentName}} />;
+const defaultProps = {
+  ...code.defaultVariants,
+};
+
+const Template: ComponentStory<typeof {{capitalize componentName}}> = (args: {{capitalize componentName}}Props) => <{{capitalize componentName}} {...args} />;
+
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+};