feat: 🔥 csf v3 & add antialiased globally

navin-moorthy · navin-moorthy · commit bd7a773c846f · 2021-07-08T13:29:32.000+05:30
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,5 +1,7 @@
 module.exports = {
-  core: { builder: "storybook-builder-vite" },
+  features: {
+    previewCsfV3: true,
+  },
   async viteFinal(config, { configType }) {
     // customize the Vite config here
     return config;
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -16,6 +16,7 @@ export const parameters = {
 export const decorators = [
   (Story, context) => {
     document.body.classList.add("font-sans");
+    document.body.classList.add("antialiased");
 
     return (
       <RenderlesskitProvider theme={theme}>
diff --git a/package.json b/package.json
@@ -96,11 +96,11 @@
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
     "@release-it/conventional-changelog": "^3.0.1",
-    "@storybook/addon-a11y": "6.3.2",
-    "@storybook/addon-actions": "6.3.2",
-    "@storybook/addon-essentials": "6.3.2",
+    "@storybook/addon-a11y": "6.4.0-alpha.12",
+    "@storybook/addon-actions": "6.4.0-alpha.12",
+    "@storybook/addon-essentials": "6.4.0-alpha.12",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "6.3.2",
+    "@storybook/react": "6.4.0-alpha.12",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
diff --git a/src/newButton/Button.tsx b/src/newButton/Button.tsx
@@ -11,13 +11,13 @@ export type ButtonProps = Omit<ReakitButtonProps, "prefix"> & {
   /**
    * How large should the button be?
    *
-   * @default "md"
+   * @default sm
    */
   size?: keyof Renderlesskit.GetThemeValue<"newButton", "size">;
   /**
-   * How the button should be styled?
+   * How the button should look?
    *
-   * @default "primary"
+   * @default solid
    */
   variant?: keyof Renderlesskit.GetThemeValue<"newButton", "variant">;
 };
@@ -33,7 +33,11 @@ export const Button = forwardRefWithAs<
 
   const baseStyles = cx(base, _size[size], _variant[variant]);
 
-  return <ReakitButton className={baseStyles}>{children}</ReakitButton>;
+  return (
+    <ReakitButton className={baseStyles} ref={ref}>
+      {children}
+    </ReakitButton>
+  );
 });
 
 Button.displayName = "Button";
diff --git a/src/newButton/stories/Button.stories.tsx b/src/newButton/stories/Button.stories.tsx
@@ -1,25 +1,40 @@
 import * as React from "react";
 import { Meta } from "@storybook/react";
-import { storyTemplate } from "../../../.storybook/storybookUtils";
-import { Button, ButtonProps } from "../index";
+import { Button } from "../index";
+import { createControls } from "../../../.storybook/storybookUtils";
 
 export default {
   title: "Primitives/NewButton",
   component: Button,
+  argTypes: createControls("newButton", {
+    unions: ["size", "variant"],
+    ignore: [
+      "unstable_system",
+      "unstable_clickOnEnter",
+      "unstable_clickOnSpace",
+      "wrapElement",
+    ],
+  }),
 } as Meta;
 
-const base = storyTemplate<ButtonProps>(Button, {
-  children: "Button",
-  size: "sm",
-  variant: "solid",
-});
+export const Small = {
+  args: { children: "Button", size: "sm", variant: "solid" },
+};
+console.log("%c Small", "color: #0088cc", Small);
+
+export const Medium = {
+  args: { ...Small.args, size: "md" },
+};
 
-export const Small = base({});
-export const Medium = base({ size: "md" });
-export const Large = base({ size: "lg" });
-export const ExtraLarge = base({ size: "xl" });
+export const Large = {
+  args: { ...Small.args, size: "lg" },
+};
+
+export const ExtraLarge = {
+  args: { ...Small.args, size: "xl" },
+};
 
-export const Primary = base({});
+export const Solid = { ...Small };
 
 export const Playground = () => {
   return <Button type="button">Button</Button>;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = preset({
     path.resolve(__dirname, "./src/theme/defaultTheme/**/*"),
     path.resolve(__dirname, "./src/**/stories/*.stories.@(ts|tsx)"),
     path.resolve(__dirname, "./renderlesskit.config.ts"),
+    path.resolve(__dirname, "./.storybook/**/*"),
   ],
 
   theme: {
diff --git a/yarn.lock b/yarn.lock
