@mohammadsalman/storybook-custom-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohammadsalman/storybook-custom-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A minimal React TypeScript component library with Button component and useFormInput hook",
   "main":"src/index.ts",
   "module": "src/index.ts",
@@ -17,12 +17,15 @@
     "button",
     "form-input"
   ],
-  "author": "Your Name <your.email@example.com>",
+  "author": "Mohammad Salman <mohammadsalman71993@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/MohSalman/creative-ui-react-ui-library.git"
   },
+  "runkit": {
+    "exampleFilename": "./src/index.ts"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/src/components/Card/Card.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { useTheme } from '../../theme';
+import { spacing } from '../../utils/styles';
+
+export interface CardProps {
+    variant?: 'outlined' | 'elevated' | 'flat';
+
+    heading?: string;
+    subheading?: string;
+    description?: string;
+    children?: React.ReactNode;
+    className?: string;
+    cardContentClass?: string;
+    cardHeadingClass?: string;
+    cardSubheadingClass?: string;
+    cardDescriptionClass?: string;
+    cardActionsClass?: string;
+
+    actions?: React.ReactNode;
+
+     // Styling
+  elevation?: number; // 0-24 (for elevated variant)
+  style?: React.CSSProperties;
+  
+  // Optional callbacks
+  onClick?: () => void;
+}
+
+export const Card: React.FC<CardProps> = ({
+    variant = 'outlined',
+    heading,
+    subheading,
+    description,
+    children,
+    className,
+    cardContentClass,
+    cardHeadingClass,
+    cardSubheadingClass,
+    cardDescriptionClass,
+    cardActionsClass,
+    actions,
+    elevation = 2, // 0-24 (for elevated variant)
+    style,
+    onClick,
+    ...props
+  }) => {
+    const theme = useTheme();
+
+    const getVariantStyles = (): React.CSSProperties => {   
+        switch (variant) {
+            case 'outlined':
+                return {
+                    border: `1px solid ${theme.palette.grey[300]}`,
+                }
+            case 'elevated':
+                return {
+                    boxShadow: theme.shadows[elevation],
+                }
+            case 'flat':
+                return {
+                    boxShadow: 'none',
+                }
+        default:
+            return {};
+    };  }
+
+    const baseStyles: React.CSSProperties = {
+        fontFamily: theme.typography.button.fontFamily,
+        lineHeight: theme.typography.button.lineHeight,
+        letterSpacing: theme.typography.button.letterSpacing,
+        padding: spacing(theme, 2),
+        borderRadius: `${theme.shape.borderRadius}px`,
+        // cursor: disabled ? 'not-allowed' : 'pointer',
+        outline: 'none',
+        transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        // width: fullWidth ? '100%' : 'auto',
+        // opacity: disabled ? 0.6 : 1,
+        ...getVariantStyles(),
+        // ...getSizeStyles(),
+        ...style,
+      };
+
+      const cardContentStyles: React.CSSProperties = {
+        fontSize: theme.typography.body1.fontSize,
+        fontWeight: theme.typography.body1.fontWeight,
+      };
+
+      const cardHeadingStyles: React.CSSProperties = {
+        fontSize: theme.typography.h6.fontSize,
+        fontWeight: theme.typography.h6.fontWeight,
+      };
+      const cardSubheadingStyles: React.CSSProperties = {
+        fontSize: theme.typography.body2.fontSize,
+        fontWeight: theme.typography.body2.fontWeight,
+      };
+      const cardDescriptionStyles: React.CSSProperties = {
+        fontSize: theme.typography.body1.fontSize,
+        fontWeight: theme.typography.body1.fontWeight,
+      };
+
+      const cardActionsStyles: React.CSSProperties = {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      };
+
+    return (
+        <div className={className} style={baseStyles} onClick={onClick} {...props}>
+            <div className={cardContentClass} style={cardContentStyles}>
+                <div className={cardHeadingClass} style={cardHeadingStyles}>{heading}</div>
+                <hr/>
+                <div className={cardSubheadingClass} style={cardSubheadingStyles}>{subheading}</div>
+                <div className={cardDescriptionClass} style={cardDescriptionStyles}>{description}</div>
+            </div>
+            
+            <div className={cardActionsClass} style={cardActionsStyles}>{actions}</div>
+        </div>
+    );
+};

package/src/components/Card/card.stories.tsx

@@ -0,0 +1,127 @@
+import { Meta, StoryObj } from "@storybook/react"; /* Card Stories */
+import { Card } from "./Card";
+import { Button } from "../Button";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["outlined", "elevated", "flat"],
+    },
+  },
+  args: {
+    variant: "outlined",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+  },
+  render: (args) => <Card {...args} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    variant: "outlined",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+  },
+};
+
+export const Outlined: Story = {
+    args: {
+      variant: "outlined",
+      heading: "Card Heading",
+      subheading: "Card Subheading",
+      description: "Card Description",
+      children: "Card Content",
+    },
+  };
+
+export const Elevated: Story = {
+  args: {
+    variant: "elevated",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+  },
+};
+
+export const Flat: Story = {
+  args: {
+    variant: "flat",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+  },
+};
+export const WithActions: Story = {
+  args: {
+    variant: "outlined",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+    actions: <Button>Action</Button>,
+  },
+};
+export const WithChildren: Story = {
+  args: {
+    variant: "outlined",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+  },
+};
+export const WithElevation: Story = {
+  args: {
+    variant: "elevated",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+    elevation: 2,
+  },
+};
+export const WithActionsAndChildren: Story = {
+  args: {
+    variant: "outlined",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+    actions: <Button>Action</Button>,
+  },
+};
+export const WithActionsAndChildrenAndElevation: Story = {
+  args: {
+    variant: "elevated",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+    actions: <Button>Action</Button>,
+    elevation: 2,
+  },
+};
+export const WithActionsAndChildrenAndElevationAndVariant: Story = {
+  args: {
+    variant: "elevated",
+    heading: "Card Heading",
+    subheading: "Card Subheading",
+    description: "Card Description",
+    children: "Card Content",
+    actions: <Button>Action</Button>,
+    elevation: 2,
+  },
+};

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+        export * from './Card';

package/src/index.ts

@@ -0,0 +1,11 @@
+// Export all components
+export * from './components';
+
+// Export all hooks
+export * from './hooks';
+
+// Export theme
+export * from './theme';
+
+// Export utils
+export * from './utils/styles';