docs(primitives): 📝 update story component & reveal icon stories (#176)

src/badge/stories/BadgeBasic.component.tsx

@@ -1,14 +1,11 @@
 import * as React from "react";
 
-import {
-  Badge as RenderlesskitBadge,
-  BadgeProps as RenderlesskitBadgeProps,
-} from "../../index";
+import { Badge, BadgeProps } from "../../index";
 
-export type BadgeProps = RenderlesskitBadgeProps & {};
+export type BadgeBasicProps = BadgeProps & {};
 
-export const Badge: React.FC<BadgeProps> = props => {
-  return <RenderlesskitBadge {...props}>Beta</RenderlesskitBadge>;
+export const BadgeBasic: React.FC<BadgeBasicProps> = props => {
+  return <Badge {...props}>Beta</Badge>;
 };
 
-export default Badge;
+export default BadgeBasic;

src/badge/stories/BadgeBasic.stories.tsx

@@ -4,14 +4,14 @@ import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/BadgeBasicJsx";
 import ts from "./templates/BadgeBasicTsx";
-import { Badge } from "./BadgeBasic.component";
+import { BadgeBasic } from "./BadgeBasic.component";
 
-type Meta = ComponentMeta<typeof Badge>;
-type Story = ComponentStoryObj<typeof Badge>;
+type Meta = ComponentMeta<typeof BadgeBasic>;
+type Story = ComponentStoryObj<typeof BadgeBasic>;
 
 export default {
   title: "Primitives/Badge/Basic",
-  component: Badge,
+  component: BadgeBasic,
   parameters: {
     layout: "centered",
     options: { showPanel: true },

src/box/stories/BoxAs.component.tsx

@@ -1,28 +1,22 @@
 import * as React from "react";
 
-import {
-  Box as RenderlesskitBox,
-  BoxProps as RenderlesskitBoxProps,
-  Button,
-  ClockIcon,
-  tcm,
-} from "../../index";
+import { Box, BoxProps, Button, ClockIcon, tcm } from "../../index";
 
-export type BoxProps = RenderlesskitBoxProps & {};
+export type BoxAsProps = BoxProps & {};
 
-export const Box: React.FC<BoxProps> = props => {
+export const BoxAs: React.FC<BoxAsProps> = props => {
   const { className, ...rest } = props;
 
   return (
-    <RenderlesskitBox
+    <Box
       as={Button}
       suffix={<ClockIcon />}
       className={tcm("bg-red-500 rounded-lg", className)}
       {...rest}
     >
       Box
-    </RenderlesskitBox>
+    </Box>
   );
 };
 
-export default Box;
+export default BoxAs;

src/box/stories/BoxAs.stories.tsx

@@ -4,22 +4,22 @@ import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/BoxAsJsx";
 import ts from "./templates/BoxAsTsx";
-import { Box } from "./BoxAs.component";
+import { BoxAs } from "./BoxAs.component";
 
-type Meta = ComponentMeta<typeof Box>;
-type Story = ComponentStoryObj<typeof Box>;
+type Meta = ComponentMeta<typeof BoxAs>;
+type Story = ComponentStoryObj<typeof BoxAs>;
 
 export default {
   title: "Primitives/Box/As",
-  component: Box,
+  component: BoxAs,
   parameters: {
     layout: "centered",
     options: { showPanel: true },
     preview: createPreviewTabs({ js, ts }),
-    argTypes: createControls(undefined, {
-      ignore: ["unstable_system", "wrapElement"],
-    }),
   },
+  argTypes: createControls(undefined, {
+    ignore: ["unstable_system", "wrapElement"],
+  }),
 } as Meta;
 
 export const Default: Story = {};

src/box/stories/BoxBasic.component.tsx

@@ -1,14 +1,11 @@
 import * as React from "react";
 
-import {
-  Box as RenderlesskitBox,
-  BoxProps as RenderlesskitBoxProps,
-} from "../../index";
+import { Box, BoxProps } from "../../index";
 
-export type BoxProps = RenderlesskitBoxProps & {};
+export type BoxBasicProps = BoxProps & {};
 
-export const Box: React.FC<BoxProps> = props => {
-  return <RenderlesskitBox {...props}>Box</RenderlesskitBox>;
+export const BoxBasic: React.FC<BoxBasicProps> = props => {
+  return <Box {...props}>Box</Box>;
 };
 
-export default Box;
+export default BoxBasic;

src/box/stories/BoxBasic.stories.tsx

@@ -4,22 +4,22 @@ import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/BoxBasicJsx";
 import ts from "./templates/BoxBasicTsx";
-import { Box } from "./BoxBasic.component";
+import { BoxBasic } from "./BoxBasic.component";
 
-type Meta = ComponentMeta<typeof Box>;
-type Story = ComponentStoryObj<typeof Box>;
+type Meta = ComponentMeta<typeof BoxBasic>;
+type Story = ComponentStoryObj<typeof BoxBasic>;
 
 export default {
   title: "Primitives/Box/Basic",
-  component: Box,
+  component: BoxBasic,
   parameters: {
     layout: "centered",
     options: { showPanel: true },
     preview: createPreviewTabs({ js, ts }),
-    argTypes: createControls(undefined, {
-      ignore: ["unstable_system", "wrapElement"],
-    }),
   },
+  argTypes: createControls(undefined, {
+    ignore: ["unstable_system", "wrapElement"],
+  }),
 } as Meta;
 
 export const Default: Story = {};

src/box/stories/BoxStyled.component.tsx

@@ -1,49 +1,41 @@
 import * as React from "react";
 
-import {
-  Box as RenderlesskitBox,
-  BoxProps as RenderlesskitBoxProps,
-  tcm,
-} from "../../index";
+import { Box, BoxProps, tcm } from "../../index";
 
-export type BoxProps = RenderlesskitBoxProps & {};
+export type BoxStyledProps = BoxProps & {};
 
-export const Box: React.FC<BoxProps> = props => {
+export const BoxStyled: React.FC<BoxStyledProps> = props => {
   const { className, ...rest } = props;
 
   return (
-    <RenderlesskitBox
+    <Box
       as="figure"
       className={tcm("p-8 overflow-hidden bg-gray-100 rounded-xl", className)}
       {...rest}
     >
-      <RenderlesskitBox
+      <Box
         as="img"
         className="object-cover w-32 h-32 mx-auto rounded-full md:w-48 md:h-auto md:rounded-md"
         src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
         alt="Image of a women"
         width="384"
         height="512"
       />
-      <RenderlesskitBox className="pt-6 space-y-4 text-center md:p-8 md:text-left">
-        <RenderlesskitBox as="blockquote">
-          <RenderlesskitBox as="p" className="text-lg font-semibold">
+      <Box className="pt-6 space-y-4 text-center md:p-8 md:text-left">
+        <Box as="blockquote">
+          <Box as="p" className="text-lg font-semibold">
             “Tailwind CSS is the only framework that I've seen scale on large
             teams. It’s easy to customize, adapts to any design, and the build
             size is tiny.”
-          </RenderlesskitBox>
-        </RenderlesskitBox>
-        <RenderlesskitBox as="figcaption" className="font-medium">
-          <RenderlesskitBox className="text-cyan-600">
-            Sarah Dayan
-          </RenderlesskitBox>
-          <RenderlesskitBox className="text-gray-500">
-            Staff Engineer, Algolia
-          </RenderlesskitBox>
-        </RenderlesskitBox>
-      </RenderlesskitBox>
-    </RenderlesskitBox>
+          </Box>
+        </Box>
+        <Box as="figcaption" className="font-medium">
+          <Box className="text-cyan-600">Sarah Dayan</Box>
+          <Box className="text-gray-500">Staff Engineer, Algolia</Box>
+        </Box>
+      </Box>
+    </Box>
   );
 };
 
-export default Box;
+export default BoxStyled;

src/box/stories/BoxStyled.stories.tsx

@@ -4,22 +4,22 @@ import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/BoxStyledJsx";
 import ts from "./templates/BoxStyledTsx";
-import { Box } from "./BoxStyled.component";
+import { BoxStyled } from "./BoxStyled.component";
 
-type Meta = ComponentMeta<typeof Box>;
-type Story = ComponentStoryObj<typeof Box>;
+type Meta = ComponentMeta<typeof BoxStyled>;
+type Story = ComponentStoryObj<typeof BoxStyled>;
 
 export default {
   title: "Primitives/Box/Styled",
-  component: Box,
+  component: BoxStyled,
   parameters: {
     layout: "centered",
     options: { showPanel: true },
     preview: createPreviewTabs({ js, ts }),
-    argTypes: createControls(undefined, {
-      ignore: ["unstable_system", "wrapElement"],
-    }),
   },
+  argTypes: createControls(undefined, {
+    ignore: ["unstable_system", "wrapElement"],
+  }),
 } as Meta;
 
 export const Default: Story = {};

src/button/stories/ButtonBasic.component.tsx

@@ -1,14 +1,11 @@
 import * as React from "react";
 
-import {
-  Button as RenderlesskitButton,
-  ButtonProps as RenderlesskitButtonProps,
-} from "../../index";
+import { Button, ButtonProps } from "../../index";
 
-export type ButtonProps = RenderlesskitButtonProps & {};
+export type ButtonBasicProps = ButtonProps & {};
 
-export const Button: React.FC<ButtonProps> = props => {
-  return <RenderlesskitButton {...props}>Continue</RenderlesskitButton>;
+export const ButtonBasic: React.FC<ButtonBasicProps> = props => {
+  return <Button {...props}>Continue</Button>;
 };
 
-export default Button;
+export default ButtonBasic;

src/button/stories/ButtonBasic.stories.tsx

@@ -11,14 +11,14 @@ import {
 
 import js from "./templates/ButtonBasicJsx";
 import ts from "./templates/ButtonBasicTsx";
-import { Button } from "./ButtonBasic.component";
+import { ButtonBasic } from "./ButtonBasic.component";
 
-type Meta = ComponentMeta<typeof Button>;
-type Story = ComponentStoryObj<typeof Button>;
+type Meta = ComponentMeta<typeof ButtonBasic>;
+type Story = ComponentStoryObj<typeof ButtonBasic>;
 
 export default {
   title: "Primitives/Button/Basic",
-  component: Button,
+  component: ButtonBasic,
   argTypes: createControls("button", {
     ignore: [
       "unstable_system",

src/checkbox/stories/CheckboxBasic.component.tsx

@@ -1,14 +1,11 @@
 import * as React from "react";
 
-import {
-  Checkbox as RenderlesskitCheckbox,
-  CheckboxProps as RenderlesskitCheckboxProps,
-} from "../../index";
+import { Checkbox, CheckboxProps } from "../../index";
 
-export type CheckboxProps = RenderlesskitCheckboxProps & {};
+export type CheckboxBasicProps = CheckboxProps & {};
 
-export const Checkbox: React.FC<CheckboxProps> = props => {
-  return <RenderlesskitCheckbox {...props} />;
+export const CheckboxBasic: React.FC<CheckboxBasicProps> = props => {
+  return <Checkbox {...props} />;
 };
 
-export default Checkbox;
+export default CheckboxBasic;

src/checkbox/stories/CheckboxBasic.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 import { createControls, createPreviewTabs } from "../../../.storybook/utils";
@@ -8,14 +8,14 @@ import { CheckboxOwnProps } from "../index";
 
 import js from "./templates/CheckboxBasicJsx";
 import ts from "./templates/CheckboxBasicTsx";
-import { Checkbox } from "./CheckboxBasic.component";
+import { CheckboxBasic } from "./CheckboxBasic.component";
 
-type Meta = ComponentMeta<typeof Checkbox>;
-type Story = ComponentStoryObj<typeof Checkbox>;
+type Meta = ComponentMeta<typeof CheckboxBasic>;
+type Story = ComponentStoryObj<typeof CheckboxBasic>;
 
 export default {
   title: "Forms/Checkbox/Basic",
-  component: Checkbox,
+  component: CheckboxBasic,
   argTypes: {
     label: { control: { type: "text" } },
     description: { control: { type: "text" } },

src/checkbox/stories/CheckboxGroup.component.tsx → src/checkbox/stories/CheckboxGroupBasic.component.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 
 import {
   Checkbox,
-  CheckboxGroup as RenderlesskitCheckboxGroup,
-  CheckboxGroupProps as RenderlesskitCheckboxGroupProps,
+  CheckboxGroup,
+  CheckboxGroupProps,
   CheckboxProps,
 } from "../../index";
 
-export type CheckboxGroupProps = RenderlesskitCheckboxGroupProps & {};
+export type CheckboxGroupBasicProps = CheckboxGroupProps & {};
 
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = props => {
+export const CheckboxGroupBasic: React.FC<CheckboxGroupBasicProps> = props => {
   const [state, setState] = React.useState<NonNullable<CheckboxProps["state"]>>(
     [],
   );
@@ -21,7 +21,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = props => {
       <div className="text-xl font-bold" id="label">
         Pick fruits to eat
       </div>
-      <RenderlesskitCheckboxGroup aria-labelledby="label" {...props}>
+      <CheckboxGroup aria-labelledby="label" {...props}>
         <Checkbox
           state={state}
           onStateChange={setState}
@@ -52,7 +52,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = props => {
           value="cherry"
           label="Cherry"
         />
-      </RenderlesskitCheckboxGroup>
+      </CheckboxGroup>
       {state.length > 0 ? (
         <div>
           <div className="font-semibold">Picked fruits:</div>
@@ -69,7 +69,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = props => {
   );
 };
 
-export default CheckboxGroup;
+export default CheckboxGroupBasic;
 
 function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);