first commit

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for parsing modern ECMAScript features
+    sourceType: "module", // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Enable JSX parsing
+    },
+  },
+  rules: {
+    "@typescript-eslint/no-unsafe-function-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+  },
+  settings: {
+    react: {
+      version: "detect", // Automatically detect the React version
+    },
+  },
+};

.github/workflows/deploy-github-pages.yaml

@@ -0,0 +1,35 @@
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  # Event for the workflow to run on
+  push:
+    branches:
+      - 'main' # Replace with the branch you want to deploy from
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v4
+
+      # Set up Node
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '16.x'
+
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/[email protected]
+        with:
+          install_command: yarn install # default: npm ci
+          build_command: yarn build-storybook # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+storybook-static

.npmignore

@@ -0,0 +1,6 @@
+src
+*.ts
+*.tsx
+!.d.ts
+.gitignore
+.git

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import '../src/index.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -0,0 +1,210 @@
+# react-fb-login-btn Component Documentation
+
+A customizable, reusable, and type-safe React component for integrating Facebook login functionality into your applications. The `react-fb-login-btn` component is built with TypeScript and Tailwind CSS, supports theming, different button shapes, left-to-right and right-to-left text directions, and handles Facebook login flow internally using the Facebook SDK.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Features](#features)
+- [Basic Usage](#basic-usage)
+- [Props](#props)
+- [Examples](#examples)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install react-fb-login-btn
+```
+
+Or using yarn:
+
+```bash
+yarn add react-fb-login-btn
+```
+
+---
+
+## Features
+
+- **TypeScript Support**: Built with TypeScript for type safety and IntelliSense support.
+- **Theming**: Supports predefined themes (`blue`, `dark`, `light`) and custom themes.
+- **Shapes**: Offers `rectangular` and `circle` button shapes.
+- **Directionality**: Handles both left-to-right (`ltr`) and right-to-left (`rtl`) text directions.
+- **Customization**: Allows custom text, styles, themes, and permissions (`scope`).
+- **Facebook SDK Integration**: Manages the Facebook login flow internally.
+- **Event Handling**: Provides `onSuccess` and `onFail` callbacks to handle login outcomes.
+- **Tailwind CSS**: Utilizes Tailwind CSS for styling.
+
+---
+
+## Basic Usage
+
+First, import the `FacebookLoginButton` component into your project:
+
+```tsx
+import React from 'react';
+import { FacebookLoginButton } from 'react-fb-login-btn';
+
+const App = () => {
+  const handleSuccess = (response: fb.StatusResponse) => {
+    console.log('Login successful:', response);
+    // Handle successful login here
+  };
+
+  const handleFailure = (error: any) => {
+    console.error('Login failed:', error);
+    // Handle login failure here
+  };
+
+  return (
+    <div>
+      <FacebookLoginButton
+        appId="YOUR_FACEBOOK_APP_ID"
+        onSuccess={handleSuccess}
+        onFail={handleFailure}
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+**Note:** Replace `"YOUR_FACEBOOK_APP_ID"` with your actual Facebook App ID obtained from the [Facebook Developers](https://developers.facebook.com/) website.
+
+---
+
+## Props
+
+The `FacebookLoginButton` component accepts the following props:
+
+| Prop          | Type                                           | Default                    | Description                                                                                                                                            |
+| ------------- | ---------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `appId`       | `string`                                       | **Required**               | Your Facebook App ID.                                                                                                                                  |
+| `shape`       | `'rectangular'` \| `'circle'`                  | `'rectangular'`            | The shape of the button.                                                                                                                               |
+| `direction`   | `'ltr'` \| `'rtl'`                             | `'ltr'`                    | The text direction of the button.                                                                                                                      |
+| `text`        | `string`                                       | `'Login with Facebook'`    | Custom text to display on the button.                                                                                                                  |
+| `style`       | `React.CSSProperties`                          | `{}`                       | Custom inline styles to apply to the button.                                                                                                           |
+| `theme`       | `'blue'` \| `'dark'` \| `'light'` \| `'custom'` | `'blue'`                   | The theme of the button. Use `'custom'` to provide custom theme colors via `customTheme`.                                                              |
+| `customTheme` | `Partial<Theme>`                               | `{}`                       | Custom theme colors used when `theme` is set to `'custom'`.                                                                                            |
+| `onSuccess`   | `(response: fb.StatusResponse) => void`        | `undefined`                | Function to call on successful login.                                                                                                                  |
+| `onFail`      | `(error: any) => void`                         | `undefined`                | Function to call on login failure.                                                                                                                     |
+| `scope`       | `string`                                       | `'public_profile,email'`   | Permissions to request during login.                                                                                                                   |
+
+#### `Theme` Type Definition
+
+The `Theme` interface defines the shape of the `customTheme` prop:
+
+```ts
+interface Theme {
+  backgroundColor: string;       // Tailwind CSS class for background color
+  textColor: string;             // Tailwind CSS class for text color
+  hoverBackgroundColor: string;  // Tailwind CSS class for hover background color
+}
+```
+
+---
+
+## Examples
+
+For detailed and interactive examples, please visit our **[Storybook documentation](#)**.
+
+---
+
+## Contributing
+
+Contributions are welcome! If you have ideas for improvements or find bugs, please feel free to contribute.
+
+### Getting Started
+
+1. **Clone the Repository**:
+
+   ```bash
+   git clone https://github.com/yourusername/react-fb-login-btn.git
+   cd react-fb-login-btn
+   ```
+
+2. **Install Dependencies**:
+
+   ```bash
+   npm install
+   ```
+
+3. **Run Storybook**:
+
+   Start Storybook to develop and test components interactively.
+
+   ```bash
+   npm run storybook
+   ```
+
+4. **Run Tests**:
+
+   Execute unit tests to ensure your changes do not break existing functionality.
+
+   ```bash
+   npm run test
+   ```
+
+5. **Run Linting**:
+
+   Ensure code quality and consistency by running the linter.
+
+   ```bash
+   npm run lint
+   ```
+
+6. **Build the Package**:
+
+   Build the package before publishing or testing in other projects.
+
+   ```bash
+   npm run build
+   ```
+
+### Guidelines
+
+- **Branching**: Create a new branch for your feature or bugfix.
+
+  ```bash
+  git checkout -b feature/your-feature-name
+  ```
+
+- **Commit Messages**: Write clear and descriptive commit messages.
+
+- **Pull Requests**: Submit a pull request with a detailed description of your changes.
+
+### Code Quality
+
+- **TypeScript**: Ensure all code is type-safe.
+- **Linting**: Follow the coding style and conventions. Run linting before committing.
+
+  ```bash
+  npm run lint
+  ```
+
+- **Testing**: Write unit tests for new features or bug fixes.
+
+### Reporting Issues
+
+If you encounter any issues or have questions, please open an issue on the [GitHub repository](https://github.com/yourusername/react-fb-login-btn/issues).
+
+---
+
+## License
+
+This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
+
+---
+
+**Note:** By providing a link to your Storybook documentation, users can explore interactive examples and see all the different configurations of your component. This approach keeps your README concise and focused while still offering users access to detailed usage examples.
+
+---
+
+**Would you like me to help update any specific parts of the README or assist with setting up the Storybook link?**