Merge pull request #5 from bootwindproject/feat/autodocs

refactor: use autodocs to all components part 2

nx.json

@@ -24,7 +24,7 @@
       "inputs": ["default", "^default"]
     },
     "build-storybook": {
-      "cache": true
+      "cache": false
     }
   },
   "affected": {

packages/alert/src/stories/Alert.stories.tsx

@@ -45,7 +45,7 @@ export default {
     variant: {
       description: 'The color type of the alert',
       type: "string",
-      options: ['warning', 'danger', 'success', 'info'],
+      options: ['warning', 'error', 'success', 'info'],
       control: {
         type: 'select',
       }

packages/badges/src/stories/Badges.stories.tsx

@@ -98,7 +98,7 @@ export const AllBadges = () => (
       Primary
     </Badge>
     <Badge variant="error" withIcon={<FaRegEnvelope />}>
-      Danger
+      Error
     </Badge>
     <Badge variant="neutral" withIcon={<FaRegEnvelope />}>
       Neutral

packages/card/src/lib/card.stories.tsx

@@ -7,26 +7,33 @@ import { expect } from '@storybook/jest';
 const meta: Meta<typeof Card> = {
   component: Card,
   title: 'Components/Card',
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      type: 'string',
+      control: {
+        type: 'text'
+      }
+    },
+    children: {
+      type: 'string',
+      control: {
+        type: 'text'
+      }
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    },
+  }
 };
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<CardProps>;
 
-export const Basic = (args: CardProps) => {
-  return (
-    <>
-
-      <Title
-        title="Cards"
-        description="The Foundation Cards component in the Bootwind Design System offers a versatile way to structure and present content in a visually appealing manner. Customize card styles, sizes, and content to effectively highlight and organize information within your interface. Whether you're showcasing products, articles, or user profiles, the Foundation Cards component enhances the presentation and user engagement with your content, providing a cohesive and aesthetic design foundation for your application or website."
-      />
-
-      <div className="grid grid-cols-3">
-        <Card
-          cardTitle="Daily Visits"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, distinctio necessitatibus deserunt debitis doloremque molestias consequuntur eos, quasi nobis impedit et illo eveniet natus ipsam excepturi, cupiditate a ipsum minus.
-        </Card>
-      </div>
-    </>
-  )
+export const Basic: Story = {
+  args: {
+    title: "Basic Card",
+    children: "The Foundation Cards component in the Bootwind Design System offers a versatile way to structure and present content in a visually appealing manner. Customize card styles, sizes, and content to effectively highlight and organize information within your interface. Whether you're showcasing products, articles, or user profiles, the Foundation Cards component enhances the presentation and user engagement with your content, providing a cohesive and aesthetic design foundation for your application or website."
+  }
 }

packages/card/src/lib/card.tsx

@@ -2,24 +2,24 @@ import { ReactNode } from "react";
 
 /* eslint-disable-next-line */
 export interface CardProps {
-  cardTitle?: string | ReactNode
-  cardOptions?: string | ReactNode 
+  title?: string | ReactNode
+  options?: string | ReactNode 
   children?: string | ReactNode
   className?: string
 }
 import { cn } from '@bootwind/common'
 export function Card({
-  cardOptions,
-  cardTitle,
+  options,
+  title,
   children,
   className
 }: CardProps) {
   return (
     <div className={cn("shadow-xl rounded-[20px]", className)}>
       <div className="card-header  p-5 flex justify-between">
-        <h4 className="card-title font-normal text-slate-500 leading-normal">{ cardTitle }</h4>
+        <h4 className="card-title font-normal text-slate-500 leading-normal">{ title }</h4>
         <div className="card-options">
-          { cardOptions }
+          { options }
         </div>
       </div>
       <div className="card-body p-5 pt-0">

packages/core/src/stories/Colors.stories.tsx

@@ -44,11 +44,6 @@ export const AllColors = () => {
   return (
     <div>
 
-      <Title
-        title="Color Styles"
-        description="Color Styles in the Bootwind Design System are a cornerstone of your design's visual identity. Customize color palettes, shades, and themes to create a cohesive and appealing color scheme that aligns with your brand or project. Whether you're aiming for a vibrant and energetic look or a calm and minimalist aesthetic, Color Styles allow you to convey the right emotions and capture your audience's attention, enhancing the overall visual impact and recognition of your design."
-      />
-
       {colors.map(color => {
         return (
           <div className="flex gap-5 mb-5 px-5">

packages/forms/src/lib/input/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useId } from 'react';
 import { useState } from 'react';
 
-type InputVariant = "default" | "danger" | "warning" | "success"
+type InputVariant = "default" | "error" | "warning" | "success"
 export interface InputProps {
   id?: string
   type?: string
@@ -27,7 +27,7 @@ export const Input: React.FC<InputProps> = ({
   rightSection
 }) => {
   const variantMap: Record<InputVariant, {input: string, description: string}> = {
-    danger: {
+    error: {
       input: 'bg-red-50 focus:bg-white border-red-300 focus:border-red-400 focus:ring-red-100',
       description: 'text-red-500',
     },

packages/forms/src/stories/Checkbox.stories.tsx

@@ -1,24 +1,30 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Title from '@bootwind/title';
 import { CheckboxProps, Checkbox } from '../index';
 
 export default {
   title: 'Components/Forms/Checkbox',
   component: Checkbox,
+  tags: ['autodocs'],
   argTypes: {
     isRounded: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
   },
 } as Meta;
+type Story = StoryObj<CheckboxProps>;
 
+export const Basic: Story = {
+  args: {
+    id: 'myRandomCheckboxId',
+    isRounded: true,
+    label: 'Basic Checkbox',
+    indeterminate: false
+  }
+};
 export const Variants = (args: CheckboxProps) => (
   <>
-    <Title
-      title="Checkbox"
-      description="The Checkbox component in the Bootwind Design System allows users to make selections from a set of options or toggle a single option on or off. With customizable options for labels, sizes, types, statuses, and states, you can create versatile checkboxes that fit your design needs."
-    />
     <div className="flex flex-col space-y-4">
       <div>
         <Checkbox
@@ -34,21 +40,9 @@ export const Variants = (args: CheckboxProps) => (
   </>
 );
 
-export const IndeterminateState = (args: CheckboxProps) => (
-  <>
-    <Title
-      title="Checkbox"
-      description="The Checkbox component in the Bootwind Design System allows users to make selections from a set of options or toggle a single option on or off. With customizable options for labels, sizes, types, statuses, and states, you can create versatile checkboxes that fit your design needs."
-    />
-    <div className="flex flex-col space-y-4">
-      <div>
-        <Checkbox
-          isRounded={false}
-          id="indeterminateCheckbox"
-          label="Indeterminate Checkbox"
-          indeterminate={true}
-        />
-      </div>
-    </div>
-  </>
-);
+export const IndeterminateState: Story = {
+  args: {
+    label: 'Basic Checkbox',
+    indeterminate: true
+  }
+};