From 304118281706eea192632d3ebf8d9c0e3bd02037 Mon Sep 17 00:00:00 2001 From: Asankhaya Sharma Date: Wed, 14 Aug 2024 13:15:42 -0700 Subject: [PATCH 1/6] Add files via upload --- style-guide.md | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 style-guide.md diff --git a/style-guide.md b/style-guide.md new file mode 100644 index 0000000000..848d324980 --- /dev/null +++ b/style-guide.md @@ -0,0 +1,95 @@ +# Style Guide + +This style guide provides guidelines for maintaining consistent, high-quality code and documentation across our project. By following these guidelines, we ensure better readability, maintainability, and collaboration among team members. + +## Table of Contents + +1. [Naming Conventions](#naming-conventions) +2. [Code Structure](#code-structure) +3. [Documentation](#documentation) +4. [Error Handling](#error-handling) +5. [Performance](#performance) +6. [Security](#security) + +## Naming Conventions + +### Use Clear and Descriptive Names + +- Choose meaningful names for variables, functions, and classes that accurately describe their purpose or functionality. +- Avoid abbreviations or cryptic names that may confuse other developers. + +### Ensure Consistency in Component Naming + +- Use correct and consistent import names for components across the project. +- Example: Use 'SignIn' instead of 'UserButton' for a sign-in component. + +## Code Structure + +### Maintain Consistent Formatting + +- Use consistent indentation and formatting throughout the codebase. +- Follow established coding style guidelines for the programming language being used. + +### Organize Imports and Components + +- Use appropriate imports from the correct packages (e.g., '@stackframe/stack'). +- Organize components into separate files or modules for better code organization and maintainability. + +## Documentation + +### Write Clear Comments + +- Provide clear and concise comments for complex code sections and functions. +- Explain the purpose and functionality of the code, not just restate what the code does. + +### Maintain Accurate Headers + +- Ensure header names and content in documentation are accurate and consistent. +- Use appropriate heading levels to create a clear hierarchy of information. + +### Create Meaningful Pull Request Descriptions + +- Write PR titles and bodies that directly address the documentation changes being made. +- Clearly explain the purpose and impact of the changes. + +### Link to Relevant Discussions + +- Include links to relevant discussions in Discord or other communication channels. +- Indicate where review and agreement on changes have taken place. + +### Ensure Accurate Code Snippets + +- Maintain up-to-date and accurate code snippets in documentation. +- Test code snippets to ensure they work as intended. + +### Include Visual Representations + +- Add visual representations (images) alongside code examples when appropriate. +- Use proper image references in Markdown format. +- Example: `![Sign-in Component](../imgs/sign-in.png)` + +## Error Handling + +### Implement Proper Error Handling + +- Implement appropriate error handling and logging mechanisms throughout the codebase. +- Catch and handle exceptions gracefully to prevent application crashes. +- Log errors with sufficient detail to aid in debugging and troubleshooting. + +## Performance + +### Optimize Critical Code Sections + +- Identify and optimize critical sections of code for better performance. +- Use profiling tools to identify bottlenecks and areas for improvement. +- Consider factors such as time complexity, memory usage, and resource utilization. + +## Security + +### Follow Secure Coding Practices + +- Adhere to best practices for secure coding to prevent common vulnerabilities. +- Implement proper input validation and sanitization. +- Use secure authentication and authorization mechanisms. +- Keep sensitive information, such as API keys and passwords, out of the codebase. +- Regularly update dependencies to address known security vulnerabilities. \ No newline at end of file From 2f11f1e0f61b5fc0d46294a5e4290744c8aa4605 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Wed, 14 Aug 2024 23:18:12 -0700 Subject: [PATCH 2/6] Patched /private/var/folders/19/08z9_xys69v3f1xfqtyn9jyw0000gn/T/tmp70na6kq6/packages/stack/src/components-page/README.md --- packages/stack/src/components-page/README.md | 167 +++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 packages/stack/src/components-page/README.md diff --git a/packages/stack/src/components-page/README.md b/packages/stack/src/components-page/README.md new file mode 100644 index 0000000000..919c6b38d0 --- /dev/null +++ b/packages/stack/src/components-page/README.md @@ -0,0 +1,167 @@ +# Stack SDK Components Documentation + +This documentation focuses on providing detailed information about the various components and functionalities available within a specific Stack SDK. The SDK is structured to support a broad range of features, including authentication, user management, application settings, and more, all aimed at enhancing application development efficiency. + +--- + +## StackProvider + +**Type**: Component + +**Description**: The `StackProvider` component is crucial as it sets up the context for the Stack application, ensuring that all child components have access to the necessary Stack context. + +**Usage**: +```jsx +import { StackProvider } from 'path_to_stack_provider'; + +function App() { + return ( + + + + ); +} +``` + +**Properties**: +- `children`: `ReactNode` - The child components that will have access to the Stack context. + +**Notes**: It's essential to wrap your application's root component with `StackProvider` to ensure that all functionalities like authentication and user state management work seamlessly. + +--- + +## StackHandler + +**Type**: Component + +**Description**: `StackHandler` is designed to handle various authentication and user management workflows based on the URL paths. + +**Usage**: +```jsx +import { StackHandler } from 'path_to_stack_handler'; + +function App() { + return ; +} +``` + +**Notes**: `StackHandler` dynamically renders components depending on the URL routes. It handles routes associated with sign-in, sign-up, account settings, etc., providing a seamless routing experience within the application. + +--- + +## StackTheme + +**Type**: Type + +**Description**: Defines the theme structure used within the Stack ecosystem. + +**Usage**: +```typescript +import { StackTheme } from 'path_to_theme_provider'; + +const theme: StackTheme = { + colors: { + primary: '#000', + secondary: '#fff' + } +}; +``` + +**Properties**: +- `colors`: `Record` - Defines the colors used across the application. + +**Notes**: Customize `StackTheme` to align with your branding requirements. + +--- + +## SignIn + +**Type**: Component + +**Description**: Renders the sign-in form providing users the ability to log into the application. + +**Usage**: +```jsx +import { SignIn } from 'path_to_sign_in'; + +function Login() { + return ; +} +``` + +**Properties**: +- `fullPage`: `boolean` (optional) - Determines whether the sign-in page should take up the full viewport. + +**Notes**: This component should be used in conjunction with the `StackHandler` to ensure proper routing and state management. + +--- + +## SignUp + +**Type**: Component + +**Description**: Facilitates user registration by rendering the sign-up form. + +**Usage**: +```jsx +import { SignUp } from 'path_to_sign_up'; + +function Register() { + return ; +} +``` + +**Properties**: +- `fullPage`: `boolean` (optional) - Specifies if the registration page should consume the full viewport. + +**Notes**: Use this component where the application's flow includes user self-registration. + +--- + +## EmailVerification + +**Type**: Component + +**Description**: Manages the email verification process, offering a UI for users who need to verify their email address post-registration. + +**Usage**: +```jsx +import { EmailVerification } from 'path_to_email_verification'; + +function VerifyEmail() { + return ; +} +``` + +**Properties**: +- `searchParams`: `Record` - Contains query parameters including the verification code. +- `fullPage`: `boolean` (optional) - Determines if the component should be displayed as a full-page. + +**Notes**: The component reads the email verification code from the URL parameters and proceeds with the verification process. + +--- + +## PasswordReset + +**Type**: Component + +**Description**: Allows users to reset their password via a user-friendly interface that requests the new password and confirms the reset using a code sent to their email. + +**Usage**: +```jsx +import { PasswordReset } from 'path_to_password_reset'; + +function ResetPassword() { + return ; +} +``` + +**Properties**: +- `searchParams`: `Record` - Contains required parameters like the reset code. +- `fullPage`: `boolean` (optional) - If true, renders the reset form in a full-page view. + +**Notes**: This component requires integration with server-side API to function correctly, handling requests for resetting passwords based on provided credentials. + +--- + +This documentation is structured to guide developers through the usage, configuration, and integration of various Stack SDK components, enabling enhanced application functionalities seamlessly integrated with the broader technology stack. \ No newline at end of file From 62f35763f07c369001d11011cc555341cd95732f Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Thu, 15 Aug 2024 07:07:48 +0000 Subject: [PATCH 3/6] Patched /tmp/tmpvp5ar1g_/packages/stack/src/components-page/README.md --- packages/stack/src/components-page/README.md | 179 ++++++++++++------- 1 file changed, 113 insertions(+), 66 deletions(-) diff --git a/packages/stack/src/components-page/README.md b/packages/stack/src/components-page/README.md index 919c6b38d0..33de22666f 100644 --- a/packages/stack/src/components-page/README.md +++ b/packages/stack/src/components-page/README.md @@ -1,6 +1,6 @@ -# Stack SDK Components Documentation +# Stack SDK Exports Documentation -This documentation focuses on providing detailed information about the various components and functionalities available within a specific Stack SDK. The SDK is structured to support a broad range of features, including authentication, user management, application settings, and more, all aimed at enhancing application development efficiency. +The Stack SDK provides a robust set of components, hooks, and utilities designed primarily for handling authentication and user management within React applications. This documentation focuses on exports that are relevant to the current SDK folder structure, principally dealing with user authentication processes, settings management, and user interface components that are utilized within the stack environment. --- @@ -8,69 +8,91 @@ This documentation focuses on providing detailed information about the various c **Type**: Component -**Description**: The `StackProvider` component is crucial as it sets up the context for the Stack application, ensuring that all child components have access to the necessary Stack context. +**Description**: This component provides a React context for Stack SDK functionality. It is responsible for wrapping the root component and managing the lifecycle and state of the SDK for child components. **Usage**: ```jsx -import { StackProvider } from 'path_to_stack_provider'; +import { StackProvider } from 'path-to-stack-sdk'; -function App() { - return ( - - - + + + +``` + +**Properties**: +- `settings`: `Object` - Configuration options for the Stack SDK. + +**Notes**: The `settings` object can include API key, project ID, and other necessary configuration details. + +--- + +## useUser + +**Type**: Hook + +**Description**: Custom React hook to access user-related data. + +**Usage**: +```jsx +import { useUser } from 'path-to-stack-sdk'; + +function UserProfile() { + const user = useUser(); + return user ? ( +
Welcome, {user.name}
+ ) : ( +
No user data available.
); } ``` -**Properties**: -- `children`: `ReactNode` - The child components that will have access to the Stack context. +**Returns**: `User | null` - Returns the current user object or null if no user is authenticated. -**Notes**: It's essential to wrap your application's root component with `StackProvider` to ensure that all functionalities like authentication and user state management work seamlessly. +**Notes**: Should be used inside components encapsulated by `StackProvider`. --- -## StackHandler +## useStackApp -**Type**: Component +**Type**: Hook -**Description**: `StackHandler` is designed to handle various authentication and user management workflows based on the URL paths. +**Description**: Hook to access Stack app specific functionalities like redirects. **Usage**: ```jsx -import { StackHandler } from 'path_to_stack_handler'; +import { useStackApp } from 'path-to-stack-sdk'; +const app = useStackApp(); -function App() { - return ; +// Usage example to redirect +function LoginRedirect() { + app.redirectToSignIn(); } ``` -**Notes**: `StackHandler` dynamically renders components depending on the URL routes. It handles routes associated with sign-in, sign-up, account settings, etc., providing a seamless routing experience within the application. +**Returns**: `Object` - Provides functionalities related to the Stack app like direct urls and action calls for redirections. --- -## StackTheme +## StackHandler -**Type**: Type +**Type**: Component -**Description**: Defines the theme structure used within the Stack ecosystem. +**Description**: A handler component for routing and handling different authentication states and pages within an app. **Usage**: -```typescript -import { StackTheme } from 'path_to_theme_provider'; - -const theme: StackTheme = { - colors: { - primary: '#000', - secondary: '#fff' - } -}; +```jsx +import { StackHandler } from 'path-to-stack-sdk'; + +function AppRouting() { + return ( + + ); +} ``` -**Properties**: -- `colors`: `Record` - Defines the colors used across the application. +**Properties**: None directly; uses URL parameters for conditional rendering logic. -**Notes**: Customize `StackTheme` to align with your branding requirements. +**Notes**: It dynamically handles routes like sign-in, sign-up, password resets based on the URL parameters. --- @@ -78,21 +100,17 @@ const theme: StackTheme = { **Type**: Component -**Description**: Renders the sign-in form providing users the ability to log into the application. +**Description**: Renders a sign-in page component. **Usage**: ```jsx -import { SignIn } from 'path_to_sign_in'; +import { SignIn } from 'path-to-stack-sdk'; -function Login() { - return ; -} + ``` **Properties**: -- `fullPage`: `boolean` (optional) - Determines whether the sign-in page should take up the full viewport. - -**Notes**: This component should be used in conjunction with the `StackHandler` to ensure proper routing and state management. +- `fullPage`: `boolean` - Optional. If true, the signin page takes up the full page. --- @@ -100,21 +118,19 @@ function Login() { **Type**: Component -**Description**: Facilitates user registration by rendering the sign-up form. +**Description**: Component for rendering a sign-up form interface. **Usage**: ```jsx -import { SignUp } from 'path_to_sign_up'; +import { SignUp } from 'path-to-stack-sdk'; -function Register() { - return ; -} + ``` **Properties**: -- `fullPage`: `boolean` (optional) - Specifies if the registration page should consume the full viewport. +- `fullPage`: `boolean` - Determines if the signup form should be rendered as a full page. -**Notes**: Use this component where the application's flow includes user self-registration. +**Notes**: Uses internal Stack SDK hooks for handling creation of new user accounts. --- @@ -122,22 +138,19 @@ function Register() { **Type**: Component -**Description**: Manages the email verification process, offering a UI for users who need to verify their email address post-registration. +**Description**: Renders an email verification component that handles verification processes. **Usage**: ```jsx -import { EmailVerification } from 'path_to_email_verification'; +import { EmailVerification } from 'path-to-stack-sdk'; -function VerifyEmail() { - return ; -} + ``` **Properties**: -- `searchParams`: `Record` - Contains query parameters including the verification code. -- `fullPage`: `boolean` (optional) - Determines if the component should be displayed as a full-page. +- `searchParams`: `Object` - Parameters that should include the verification code. -**Notes**: The component reads the email verification code from the URL parameters and proceeds with the verification process. +**Notes**: Expected to receive the verification code through search params or URL parameters. --- @@ -145,23 +158,57 @@ function VerifyEmail() { **Type**: Component -**Description**: Allows users to reset their password via a user-friendly interface that requests the new password and confirms the reset using a code sent to their email. +**Description**: Component to handle password reset functionality. **Usage**: ```jsx -import { PasswordReset } from 'path_to_password_reset'; +import { PasswordReset } from 'path-to-stack-sdk'; -function ResetPassword() { - return ; -} + ``` **Properties**: -- `searchParams`: `Record` - Contains required parameters like the reset code. -- `fullPage`: `boolean` (optional) - If true, renders the reset form in a full-page view. +- `searchParams`: `Object` - Contains the reset code necessary for processing the password reset. + +--- + +## ForgotPassword + +**Type**: Component -**Notes**: This component requires integration with server-side API to function correctly, handling requests for resetting passwords based on provided credentials. +**Description**: Provides a user interface for initiating a password reset process. + +**Usage**: +```jsx +import { ForgotPassword } from 'path-to-stack-sdk'; + + +``` + +**Properties**: +- `fullPage`: `boolean` - Renders the component in a full page layout if set to true. + +**Notes**: This component is used when a user has forgotten their password and needs to initiate a reset process. --- -This documentation is structured to guide developers through the usage, configuration, and integration of various Stack SDK components, enabling enhanced application functionalities seamlessly integrated with the broader technology stack. \ No newline at end of file +## OAuthButton + +**Type**: Component + +**Description**: Renders OAuth provider buttons for user authentication. + +**Usage**: +```jsx +import { OAuthButton } from 'path-to-stack-sdk'; + + +``` + +**Properties**: +- `provider`: `string` - Specifies the OAuth provider. + +**Notes**: Supports multiple OAuth providers including Google, Facebook, etc. + +### Notes +Additional functionalities, including various user interface elements and deeper integration aspects, are described in their specific subsections, following the higher-level overview provided here. The comprehensive nature of the Stack SDK ensures that most needs related to user management and authentication within a modern web application can be met efficiently. \ No newline at end of file From 3c636d0f2fad22b4557e80df98614dce16ebd341 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Thu, 15 Aug 2024 14:41:50 +0000 Subject: [PATCH 4/6] Patched /tmp/tmper2twxqu/packages/stack/src/components-page/README.md --- packages/stack/src/components-page/README.md | 171 ++++--------------- 1 file changed, 37 insertions(+), 134 deletions(-) diff --git a/packages/stack/src/components-page/README.md b/packages/stack/src/components-page/README.md index 33de22666f..8980b5648f 100644 --- a/packages/stack/src/components-page/README.md +++ b/packages/stack/src/components-page/README.md @@ -1,214 +1,117 @@ -# Stack SDK Exports Documentation +# Stack SDK Component Documentation -The Stack SDK provides a robust set of components, hooks, and utilities designed primarily for handling authentication and user management within React applications. This documentation focuses on exports that are relevant to the current SDK folder structure, principally dealing with user authentication processes, settings management, and user interface components that are utilized within the stack environment. +This documentation provides detailed information about each of the components and hooks exported from the Stack SDK, specifically from the components-page, hooks, and components folders. These components and hooks are designed to facilitate the development of authentication and user management features in applications using the Stack SDK. --- -## StackProvider +## AccountSettings **Type**: Component -**Description**: This component provides a React context for Stack SDK functionality. It is responsible for wrapping the root component and managing the lifecycle and state of the SDK for child components. +**Description**: This component allows users to manage their account settings, including profile details, password, email verification, and multi-factor authentication settings. **Usage**: ```jsx -import { StackProvider } from 'path-to-stack-sdk'; - - - - + ``` **Properties**: -- `settings`: `Object` - Configuration options for the Stack SDK. - -**Notes**: The `settings` object can include API key, project ID, and other necessary configuration details. - ---- - -## useUser - -**Type**: Hook - -**Description**: Custom React hook to access user-related data. - -**Usage**: -```jsx -import { useUser } from 'path-to-stack-sdk'; - -function UserProfile() { - const user = useUser(); - return user ? ( -
Welcome, {user.name}
- ) : ( -
No user data available.
- ); -} -``` - -**Returns**: `User | null` - Returns the current user object or null if no user is authenticated. - -**Notes**: Should be used inside components encapsulated by `StackProvider`. - ---- - -## useStackApp - -**Type**: Hook - -**Description**: Hook to access Stack app specific functionalities like redirects. - -**Usage**: -```jsx -import { useStackApp } from 'path-to-stack-sdk'; -const app = useStackApp(); - -// Usage example to redirect -function LoginRedirect() { - app.redirectToSignIn(); -} -``` - -**Returns**: `Object` - Provides functionalities related to the Stack app like direct urls and action calls for redirections. - ---- - -## StackHandler - -**Type**: Component - -**Description**: A handler component for routing and handling different authentication states and pages within an app. +- `fullPage`: `boolean` - Specifies whether the component should be rendered as a full-page component. -**Usage**: -```jsx -import { StackHandler } from 'path-to-stack-sdk'; - -function AppRouting() { - return ( - - ); -} -``` - -**Properties**: None directly; uses URL parameters for conditional rendering logic. - -**Notes**: It dynamically handles routes like sign-in, sign-up, password resets based on the URL parameters. +**Notes**: This component uses the `SidebarLayout` to provide a navigation panel for different settings sections. --- -## SignIn +## AuthPage **Type**: Component -**Description**: Renders a sign-in page component. +**Description**: Serves as a central authentication page allowing users to sign-in or sign-up using different methods like OAuth, magic link, or credentials. **Usage**: ```jsx -import { SignIn } from 'path-to-stack-sdk'; - - + ``` **Properties**: -- `fullPage`: `boolean` - Optional. If true, the signin page takes up the full page. +- `fullPage`: `boolean` - Determines if the layout is rendered as full-page. +- `type`: `'sign-in' | 'sign-up'` - Specifies the type of authentication action, either 'sign-in' or 'sign-up'. +- `automaticRedirect`: `boolean` - If true, automatically redirects on successful sign-in/sign-up. + +**Notes**: The component dynamically adjusts available forms and options based on configuration settings like `signUpEnabled`, `credentialEnabled`, etc. --- -## SignUp +## EmailVerification **Type**: Component -**Description**: Component for rendering a sign-up form interface. +**Description**: Handles the flow for verifying a user's email via a code sent to their email. **Usage**: ```jsx -import { SignUp } from 'path-to-stack-sdk'; - - + ``` **Properties**: -- `fullPage`: `boolean` - Determines if the signup form should be rendered as a full page. +- `searchParams`: `{ code?: string }` - Contains the verification code needed for the email verification. +- `fullPage`: `boolean` - Whether to render this in full page mode. -**Notes**: Uses internal Stack SDK hooks for handling creation of new user accounts. +**Notes**: Uses caching for the verification process to enhance performance. --- -## EmailVerification +## ForgotPassword **Type**: Component -**Description**: Renders an email verification component that handles verification processes. +**Description**: Allows users to initiate a password reset process by entering their email to receive a reset link. **Usage**: ```jsx -import { EmailVerification } from 'path-to-stack-sdk'; - - + ``` **Properties**: -- `searchParams`: `Object` - Parameters that should include the verification code. - -**Notes**: Expected to receive the verification code through search params or URL parameters. +- `fullPage`: `boolean` - Specifies if the component should occupy the whole page. --- -## PasswordReset +## MagicLinkCallback **Type**: Component -**Description**: Component to handle password reset functionality. +**Description**: Manages the callback process for a magic link authentication, handling scenarios like expired or already used links. **Usage**: ```jsx -import { PasswordReset } from 'path-to-stack-sdk'; - - + ``` **Properties**: -- `searchParams`: `Object` - Contains the reset code necessary for processing the password reset. +- `searchParams`: `{ code: string }` - Parameters received from the URL which include the magic link code. +- `fullPage`: `boolean` - Whether to render this in full page mode. --- -## ForgotPassword +## OAuthCallback **Type**: Component -**Description**: Provides a user interface for initiating a password reset process. +**Description**: A callback handler for OAuth authentication processes, managing success or error states post OAuth flow. **Usage**: ```jsx -import { ForgotPassword } from 'path-to-stack-sdk'; - - + ``` **Properties**: -- `fullPage`: `boolean` - Renders the component in a full page layout if set to true. +- `fullPage`: `boolean` - Determines if the layout needs to be rendered as full-page. -**Notes**: This component is used when a user has forgotten their password and needs to initiate a reset process. +**Notes**: Handles redirection and error display post OAuth authentication. --- -## OAuthButton - -**Type**: Component - -**Description**: Renders OAuth provider buttons for user authentication. - -**Usage**: -```jsx -import { OAuthButton } from 'path-to-stack-sdk'; - - -``` - -**Properties**: -- `provider`: `string` - Specifies the OAuth provider. - -**Notes**: Supports multiple OAuth providers including Google, Facebook, etc. +## PasswordReset -### Notes -Additional functionalities, including various user interface elements and deeper integration aspects, are described in their specific subsections, following the higher-level overview provided here. The comprehensive nature of the Stack SDK ensures that most needs related to user management and authentication within a modern web application can be met efficiently. \ No newline at end of file +**Ty \ No newline at end of file From 2aa741ef3286530bf5f4ddde2a3b46e91fa63e5a Mon Sep 17 00:00:00 2001 From: Asankhaya Sharma Date: Thu, 15 Aug 2024 08:39:27 -0700 Subject: [PATCH 5/6] Delete packages/stack/src/components-page/README.md --- packages/stack/src/components-page/README.md | 117 ------------------- 1 file changed, 117 deletions(-) delete mode 100644 packages/stack/src/components-page/README.md diff --git a/packages/stack/src/components-page/README.md b/packages/stack/src/components-page/README.md deleted file mode 100644 index 8980b5648f..0000000000 --- a/packages/stack/src/components-page/README.md +++ /dev/null @@ -1,117 +0,0 @@ -# Stack SDK Component Documentation - -This documentation provides detailed information about each of the components and hooks exported from the Stack SDK, specifically from the components-page, hooks, and components folders. These components and hooks are designed to facilitate the development of authentication and user management features in applications using the Stack SDK. - ---- - -## AccountSettings - -**Type**: Component - -**Description**: This component allows users to manage their account settings, including profile details, password, email verification, and multi-factor authentication settings. - -**Usage**: -```jsx - -``` - -**Properties**: -- `fullPage`: `boolean` - Specifies whether the component should be rendered as a full-page component. - -**Notes**: This component uses the `SidebarLayout` to provide a navigation panel for different settings sections. - ---- - -## AuthPage - -**Type**: Component - -**Description**: Serves as a central authentication page allowing users to sign-in or sign-up using different methods like OAuth, magic link, or credentials. - -**Usage**: -```jsx - -``` - -**Properties**: -- `fullPage`: `boolean` - Determines if the layout is rendered as full-page. -- `type`: `'sign-in' | 'sign-up'` - Specifies the type of authentication action, either 'sign-in' or 'sign-up'. -- `automaticRedirect`: `boolean` - If true, automatically redirects on successful sign-in/sign-up. - -**Notes**: The component dynamically adjusts available forms and options based on configuration settings like `signUpEnabled`, `credentialEnabled`, etc. - ---- - -## EmailVerification - -**Type**: Component - -**Description**: Handles the flow for verifying a user's email via a code sent to their email. - -**Usage**: -```jsx - -``` - -**Properties**: -- `searchParams`: `{ code?: string }` - Contains the verification code needed for the email verification. -- `fullPage`: `boolean` - Whether to render this in full page mode. - -**Notes**: Uses caching for the verification process to enhance performance. - ---- - -## ForgotPassword - -**Type**: Component - -**Description**: Allows users to initiate a password reset process by entering their email to receive a reset link. - -**Usage**: -```jsx - -``` - -**Properties**: -- `fullPage`: `boolean` - Specifies if the component should occupy the whole page. - ---- - -## MagicLinkCallback - -**Type**: Component - -**Description**: Manages the callback process for a magic link authentication, handling scenarios like expired or already used links. - -**Usage**: -```jsx - -``` - -**Properties**: -- `searchParams`: `{ code: string }` - Parameters received from the URL which include the magic link code. -- `fullPage`: `boolean` - Whether to render this in full page mode. - ---- - -## OAuthCallback - -**Type**: Component - -**Description**: A callback handler for OAuth authentication processes, managing success or error states post OAuth flow. - -**Usage**: -```jsx - -``` - -**Properties**: -- `fullPage`: `boolean` - Determines if the layout needs to be rendered as full-page. - -**Notes**: Handles redirection and error display post OAuth authentication. - ---- - -## PasswordReset - -**Ty \ No newline at end of file From 2c83404303e78e61b107edcb199ab963679f9dbb Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 20 Aug 2024 10:28:26 -0700 Subject: [PATCH 6/6] Patched /private/var/folders/19/08z9_xys69v3f1xfqtyn9jyw0000gn/T/tmpunwh7q_7/code-style.md --- code-style.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 code-style.md diff --git a/code-style.md b/code-style.md new file mode 100644 index 0000000000..5917d75856 --- /dev/null +++ b/code-style.md @@ -0,0 +1,46 @@ +# Code Style Guidelines + +## 1. Naming Conventions +- Use PascalCase for component names +- Use camelCase for variables and functions +- Use consistent naming conventions across the project + +## 2. Code Structure +- Use TypeScript for type safety and improved developer experience +- Use JSX syntax for React components +- Prefer functional components with hooks over class components +- Implement a modular file structure, grouping related components and exports in specific folders +- Use arrow functions for component definitions +- Organize imports at the top of files +- Use optional chaining (?.) for potentially undefined properties +- Prefer const over let for variable declarations +- Use default parameter values and optional parameters where appropriate +- Use interface or type aliases for complex object structures +- Use explicit return types for functions and components + +## 3. Documentation +- Use JSDoc-style comments for function and component documentation +- Provide detailed component descriptions, including parameter descriptions and example usage +- Use markdown formatting for documentation, including proper syntax for code blocks +- Use descriptive and concise titles for documentation sections +- Use consistent formatting for component documentation + +## 4. Error Handling +- Implement proper error handling and type checking +- Use async/await for asynchronous operations + +## 5. Performance +- Optimize component rendering using React performance optimization techniques +- Follow a modular approach by breaking down functionality into smaller, reusable components + +## 6. Security +- Use crypto.timingSafeEqual for secure string comparison +- Avoid using dangerouslySetInnerHTML to prevent XSS vulnerabilities +- Avoid using eval for security reasons +- Use hardcoded string literals when calling require to prevent potential vulnerabilities +- Use safe alternatives to manipulate DOM elements instead of innerHTML + +## 7. Best Practices +- Use proper indentation and spacing for improved readability +- Provide descriptive comments for functions and components +- Utilize TypeScript's type annotations \ No newline at end of file