refactor: add stories

Author: abelflopes

package-lock.json

@@ -6,7 +6,7 @@
 
   box-sizing: border-box;
   max-width: get-css-var(container, max-width);
-  padding: get-css-var(container, spacing-y) get-css-var(spacing-x);
+  padding: get-css-var(container, spacing-y) get-css-var(container, spacing-x);
   margin: 0 auto;
 }
 

packages/components/all/src/container/index.module.scss

@@ -11,9 +11,11 @@
 .horizontal {
   @include define-css-var(divider, width, 100%);
   @include define-css-var(divider, height, 1px);
+  min-width: get-spacing(2);
 }
 
 .vertical {
   @include define-css-var(divider, width, 1px);
   @include define-css-var(divider, height, 100%);
+  min-height: get-spacing(2);
 }

packages/components/all/src/divider/styles/index.module.scss

@@ -17,6 +17,7 @@
   "dependencies": {
     "@rck/all": "^1.0.0",
     "@rck/button": "^1.0.0",
+    "@rck/icon": "^1.0.0",
     "@rck/input": "^1.0.0",
     "@rck/theme": "^1.0.0"
   }

packages/docs/stories/package.json

@@ -5,11 +5,6 @@ import { faker } from "@faker-js/faker";
 import { sentenceCase } from "change-case";
 import { Button } from "@rck/button/src/index";
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
 const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,

packages/docs/stories/src/button.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@rck/theme";
+import { faker } from "@faker-js/faker";
+import { Card, Text } from "@rck/all/src";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    children: <Text>{faker.lorem.sentence()}</Text>,
+  },
+};

packages/docs/stories/src/card.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@rck/theme";
+import { faker } from "@faker-js/faker";
+import { Chip } from "@rck/all/src";
+
+const meta: Meta<typeof Chip> = {
+  title: "Components/Chip",
+  component: Chip,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    children: faker.lorem.words({ min: 1, max: 2 }),
+  },
+};

packages/docs/stories/src/chip.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@rck/theme";
+import { faker } from "@faker-js/faker";
+import { Collapse, Text } from "@rck/all/src";
+
+const meta: Meta<typeof Collapse> = {
+  title: "Components/Collapse",
+  component: Collapse,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapse>;
+
+export const Default: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  args: {
+    header: <Text type="h2">{faker.lorem.sentence()}</Text>,
+    children: <Text>{faker.lorem.sentence()}</Text>,
+  },
+};

packages/docs/stories/src/collapse.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@rck/theme";
+import { Divider } from "@rck/all/src";
+
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {};
+
+export const vertical: Story = {
+  args: {
+    type: "vertical",
+  },
+};

packages/docs/stories/src/divider.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@rck/theme";
+import { Icon } from "@rck/icon";
+
+const meta: Meta<typeof Icon> = {
+  title: "Components/Icon",
+  component: Icon,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  args: {
+    name: "BsBellFill",
+  },
+};