feat(code): migrated

packages/components/code/__tests__/code.test.tsx

@@ -17,9 +17,9 @@ describe("Code", () => {
     expect(ref.current).not.toBeNull();
   });
 
-  it("should support block mode", () => {
-    const {container} = render(<Code block />);
+  it("should support include the code", () => {
+    const wrapper = render(<Code data-testid="code-test">npm install @nextui-org/react</Code>);
 
-    expect(container.querySelector("pre")).not.toBeNull();
+    expect(wrapper.getByTestId("code-test")).toHaveTextContent("npm install @nextui-org/react");
   });
 });

packages/components/code/package.json

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

packages/components/code/src/code.styles.ts

@@ -1,8 +0,0 @@
-import {styled} from "@nextui-org/system";
-
-export const StyledCode = styled("code", {});
-
-export const StyledPre = styled("pre", {
-  width: "initial",
-  mw: "100%",
-});

packages/components/code/src/code.tsx

@@ -1,34 +1,17 @@
-import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/dom-utils";
-import {clsx, __DEV__} from "@nextui-org/shared-utils";
+import {forwardRef} from "@nextui-org/system";
+import {__DEV__} from "@nextui-org/shared-utils";
 
-import {StyledCode, StyledPre} from "./code.styles";
+import {useCode, UseCodeProps} from "./use-code";
 
-export interface CodeProps extends HTMLNextUIProps<"code"> {
-  /**
-   * Whether to show a <pre/> component as a wrapper.
-   * @default false
-   */
-  block?: boolean;
-}
+export interface CodeProps extends Omit<UseCodeProps, "ref"> {}
 
 const Code = forwardRef<CodeProps, "code">((props, ref) => {
-  const {children, block = false, className, ...otherProps} = props;
-
-  const domRef = useDOMRef(ref);
-
-  if (!block) {
-    return (
-      <StyledCode ref={domRef} className={clsx("nextui-code", className)} {...otherProps}>
-        {children}
-      </StyledCode>
-    );
-  }
+  const {Component, domRef, children, styles, ...otherProps} = useCode({ref, ...props});
 
   return (
-    <StyledPre ref={domRef} className={clsx("nextui-code", className)} {...otherProps}>
-      <StyledCode>{children}</StyledCode>
-    </StyledPre>
+    <Component ref={domRef} className={styles} {...otherProps}>
+      {children}
+    </Component>
   );
 });
 
@@ -36,6 +19,4 @@ if (__DEV__) {
   Code.displayName = "NextUI.Code";
 }
 
-Code.toString = () => ".nextui-code";
-
 export default Code;

packages/components/code/src/index.ts

@@ -1,5 +1,10 @@
+import Code from "./code";
+
 // export types
 export type {CodeProps} from "./code";
 
+// export hooks
+export {useCode} from "./use-code";
+
 // export component
-export {default as Code} from "./code";
+export {Code};

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

@@ -0,0 +1,39 @@
+import type {CodeVariantProps} from "@nextui-org/theme";
+
+import {code} from "@nextui-org/theme";
+import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {ReactRef} from "@nextui-org/shared-utils";
+import {useMemo} from "react";
+
+interface Props 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);
+
+  const {ref, as, className, ...otherProps} = props;
+
+  const Component = as || "code";
+
+  const domRef = useDOMRef(ref);
+
+  const styles = useMemo(
+    () =>
+      code({
+        ...variantProps,
+        className,
+      }),
+    [variantProps, className],
+  );
+
+  return {Component, as, styles, domRef, ...otherProps};
+}
+
+export type UseCodeReturn = ReturnType<typeof useCode>;

packages/components/code/stories/code.stories.tsx

@@ -1,13 +1,42 @@
 import React from "react";
-import {Meta} from "@storybook/react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {code} from "@nextui-org/theme";
 
-import {Code} from "../src";
+import {Code, CodeProps} from "../src";
 
 export default {
   title: "Display/Code",
   component: Code,
-} 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"],
+      },
+    },
+  },
+} as ComponentMeta<typeof Code>;
 
-export const Default = () => <Code>npm install @nextui-org/react</Code>;
+const defaultProps = {
+  children: "npm install @nextui-org/react",
+  ...code.defaultVariants,
+};
 
-export const Block = () => <Code block>npm install @nextui-org/react</Code>;
+const Template: ComponentStory<typeof Code> = (args: CodeProps) => <Code {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+};

packages/components/storybook/.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
     "../../user/stories/*.stories.@(js|jsx|ts|tsx)",
     "../../button/stories/*.stories.@(js|jsx|ts|tsx)",
     "../../spinner/stories/*.stories.@(js|jsx|ts|tsx)",
+    "../../code/stories/*.stories.@(js|jsx|ts|tsx)",
   ],
   staticDirs: ["../public"],
   addons: [

packages/core/theme/src/components/code/index.ts

@@ -0,0 +1,50 @@
+import {tv, type VariantProps} from "tailwind-variants";
+
+/**
+ * Code wrapper **Tailwind Variants** component
+ *
+ * const styles = code({...})
+ *
+ * @example
+ * <code className={styles)}>
+ *   npm install @nextui-org/react
+ * </code>
+ */
+const code = tv({
+  base: ["px-2", "py-1", "font-mono", "whitespace-pre-wrap"],
+  variants: {
+    color: {
+      neutral: "text-neutral-800 bg-neutral-100 dark:text-neutral-100 dark:bg-neutral-800",
+      primary: "bg-primary-50 dark:bg-primary-900 text-primary",
+      secondary: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
+      success: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
+      warning: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
+      danger: "bg-danger-50 dark:bg-danger-900 text-danger",
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+    },
+    radius: {
+      none: "rounded-none",
+      base: "rounded-base",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+  },
+  defaultVariants: {
+    color: "neutral",
+    size: "sm",
+    radius: "lg",
+  },
+});
+
+export type CodeVariantProps = VariantProps<typeof code>;
+
+export {code};

packages/core/theme/src/components/index.ts

@@ -6,3 +6,4 @@ export * from "./button";
 export * from "./button-group";
 export * from "./drip";
 export * from "./spinner";
+export * from "./code";

pnpm-lock.yaml

@@ -487,12 +487,14 @@ importers:
       '@nextui-org/dom-utils': workspace:*
       '@nextui-org/shared-utils': workspace:*
       '@nextui-org/system': workspace:*
+      '@nextui-org/theme': workspace:*
       clean-package: 2.1.1
       react: ^17.0.2
     dependencies:
       '@nextui-org/dom-utils': link:../../utilities/dom-utils
       '@nextui-org/shared-utils': link:../../utilities/shared-utils
       '@nextui-org/system': link:../../core/system
+      '@nextui-org/theme': link:../../core/theme
     devDependencies:
       clean-package: 2.1.1
       react: 17.0.2