### Install Dependencies

Source: https://github.com/brainstormforce/force-ui/wiki/Installation

Installs all necessary project dependencies using npm. This is a prerequisite for running the project locally.

```bash
npm install
```

--------------------------------

### Install @bsf/force-ui using npm

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Installs the @bsf/force-ui library from a Git repository using the npm package manager. This is the recommended way to add the library as a dependency to your project.

```bash
npm install

```

```bash
npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.7.5

```

--------------------------------

### Example Prompt for Cross Promotion Template

Source: https://github.com/brainstormforce/force-ui/wiki/Creating-Templates-Using-AI:-Complete-Guide

An example demonstrating the prompt format for creating a 'Cross Promotion' template. It specifies designing a screen to promote 'Surerank' within 'Suremails', including benefits and links.

```markdown
template_title: Cross Promotion
design_prompt: Design a screen where we will promote Surerank in Suremails. Please add a description about the benefits of Surerank and add a plugin install and activate link as well.
```

--------------------------------

### Run Project Locally

Source: https://github.com/brainstormforce/force-ui/wiki/Installation

Starts the Force UI project in development mode. This command should be run in a terminal to view the application.

```bash
npm run dev
```

--------------------------------

### Add @bsf/force-ui as a package.json dependency

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Specifies the @bsf/force-ui library as a dependency in your project's `package.json` file, pointing to a specific Git branch and version.

```json
"dependencies": {
  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.7.5"
}

```

--------------------------------

### Good Example: Template Title and Path (Text)

Source: https://github.com/brainstormforce/force-ui/wiki/📘-Template-Development-Guidelines

An example of a correctly formatted title and directory path for a template, emphasizing clear and consistent grouping.

```text
Templates/Pricing/OttoKit Pricing
```

--------------------------------

### Basic Button Usage with @bsf/force-ui

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Demonstrates how to import and use the Button component from the @bsf/force-ui library in a React application.

```jsx
import { Button } from "@bsf/force-ui";

export default function Example() {
  return <Button>My Button</Button>;
}
```

--------------------------------

### Force UI Dialog Usage Example

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/dialog/readme.md

Demonstrates how to use the Force UI Dialog component in a React application. It shows examples of both uncontrolled dialogs triggered by a button and controlled dialogs managed via state. Includes setup with state management and rendering of Dialog, Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body, Dialog.Footer, and Dialog.Backdrop.

```jsx
import React, { useState } from 'react';
import { Dialog } from '@force-ai/ui';

const MyComponent = () => {
  const [openDialog, setOpenDialog] = useState(false);

  return (
			<div className="flex items-center gap-10">
				<div className="space-y-2">
					<div>Dialog with trigger button (Uncontrolled)</div>
					<Dialog
						trigger={ <Button>Open Dialog</Button> }
						exitOnClickOutside={ false }
						design="footer-divided"
					>
						<Dialog.Header>
							<div className="flex items-center justify-between">
								<Dialog.Title>Dialog Title</Dialog.Title>
								<Dialog.CloseButton />
							</div>
							<Dialog.Description>
								Lorem ipsum dolor sit amet consectetur. Aliquam
								sed scelerisque et arcu nibh a massa.
							</Dialog.Description>
						</Dialog.Header>
						<Dialog.Body>
							<h1 className="m-0">Dialog Content</h1>
						</Dialog.Body>
						<Dialog.Footer>
							{ ( { close } ) => (
								<>
									<div className="mr-auto inline-flex items-center">
										Other option
									</div>
									<Button variant="ghost">Details</Button>
									<Button onClick={ close } variant="outline">
										Cancel
									</Button>
									<Button variant="primary">Save</Button>
								</>
							) }
						</Dialog.Footer>
						<Dialog.Backdrop />
					</Dialog>
				</div>
        { /* Another Example */ }
				<div className="space-y-2">
					<div>Dialog (Controlled)</div>
					<Button
						onClick={ () => {
							setOpenDialog( true );
						} }
					>
						Open Dialog
					</Button>
					<Dialog
						open={ openDialog }
						setOpen={ setOpenDialog }
						exitOnClickOutside={ false }
						exitOnEsc={ false }
						design="footer-divided"
					>
						<Dialog.Header>
							<div className="flex items-center justify-between">
								<Dialog.Title>Dialog Title</Dialog.Title>
								<Dialog.CloseButton />
							</div>
							<Dialog.Description>
								Lorem ipsum dolor sit amet consectetur. Aliquam
								sed scelerisque et arcu nibh a massa.
							</Dialog.Description>
						</Dialog.Header>
						<Dialog.Body>
							<h1 className="m-0">Dialog Content</h1>
						</Dialog.Body>
						<Dialog.Footer>
							<div className="mr-auto inline-flex items-center">
								Other option
							</div>
							<Button variant="ghost">Details</Button>
							<Button
								onClick={ () => setOpenDialog( false ) }
								variant="outline"
							>
								Cancel
							</Button>
							<Button variant="primary">Save</Button>
						</Dialog.Footer>
						<Dialog.Backdrop />
					</Dialog>
				</div>
  );
};

```

--------------------------------

### Install Force UI via npm

Source: https://github.com/brainstormforce/force-ui/wiki/Introduction

This snippet shows how to install the Force UI library using npm. It specifies the package name and the Git repository with a specific branch, suitable for alpha or development versions.

```bash
npm install @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.4.1
```

--------------------------------

### Configure Tailwind CSS with @bsf/force-ui

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Integrates @bsf/force-ui with your Tailwind CSS setup by wrapping your `tailwind.config.js` with the `withTW()` function. This allows for custom theme configurations, including colors, font sizes, line heights, and box shadows.

```javascript
const withTW = require( '@bsf/force-ui/withTW' );

module.exports = withTW( {
	content: [ './src/**/*.{js, jsx}' ],
	theme: {
		extend: {
			colors: {
				'button-primary': '#6B21A8',
				'button-primary-hover': '#7E22CE',
				'brand-800': '#6B21A8',
				'brand-50': '#FAF5FF',
				'border-interactive': '#6B21A8',
				focus: '#9333EA',
				'focus-border': '#D8B4FE',
				'toggle-on': '#6B21A8',
				'toggle-on-border': '#C084FC',
				'toggle-on-hover': '#A855F7',
			},
			fontSize: {
				xxs: '0.6875rem', // 11px
			},
			lineHeight: {
				2.6: '0.6875rem', // 11px
			},
			boxShadow: {
				'content-wrapper':
					'0px 1px 1px 0px #0000000F, 0px 1px 2px 0px #0000001A',
			},
		},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	},
	important: '.surerank-styles',
} );

```

--------------------------------

### Force UI Drawer Usage: Controlled and Uncontrolled Examples

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/drawer/readme.md

Demonstrates how to use the Force UI Drawer component in both controlled and uncontrolled modes. Includes examples of setting up the drawer with a trigger button, managing its open/closed state, and customizing its content and behavior.

```jsx
import React, { useState } from 'react';
import { Drawer } from '@force-ai/ui';

const MyComponent = () => {
  const [openDrawer, setOpenDrawer] = useState(false);

  return (
			<div className="flex items-center gap-10">
				<div className="space-y-2">
					<div>Drawer with trigger button (Uncontrolled)</div>
					<Drawer
						trigger={ <Button>Open Drawer</Button> }
						exitOnClickOutside={ false }
						design="footer-divided"
					>
						<Drawer.Header>
							<div className="flex items-center justify-between">
								<Drawer.Title>Drawer Title</Drawer.Title>
								<Drawer.CloseButton />
							</div>
							<Drawer.Description>
								Lorem ipsum dolor sit amet consectetur. Aliquam
								sed scelerisque et arcu nibh a massa.
							</Drawer.Description>
						</Drawer.Header>
						<Drawer.Body>
							<h1 className="m-0">Drawer Content</h1>
						</Drawer.Body>
						<Drawer.Footer>
							{ ( { close } ) => (
								<>
									<div className="mr-auto inline-flex items-center">
										Other option
									</div>
									<Button variant="ghost">Details</Button>
									<Button onClick={ close } variant="outline">
										Cancel
									</Button>
									<Button variant="primary">Save</Button>
								</>
							) }
						</Drawer.Footer>
						<Drawer.Backdrop />
					</Drawer>
				</div>
        { /* Another Example */ }
				<div className="space-y-2">
					<div>Drawer (Controlled)</div>
					<Button
						onClick={ () => {
							setOpenDrawer( true );
						} }
					>
						Open Drawer
					</Button>
					<Drawer
						open={ openDrawer }
						setOpen={ setOpenDrawer }
					exitOnClickOutside={ false }
					exitOnEsc={ false }
					design="footer-divided"
				>
					<Drawer.Header>
						<div className="flex items-center justify-between">
							<Drawer.Title>Drawer Title</Drawer.Title>
							<Drawer.CloseButton />
						</div>
						<Drawer.Description>
							Lorem ipsum dolor sit amet consectetur. Aliquam
							sed scelerisque et arcu nibh a massa.
						</Drawer.Description>
					</Drawer.Header>
					<Drawer.Body>
						<h1 className="m-0">Drawer Content</h1>
					</Drawer.Body>
					<Drawer.Footer>
						<div className="mr-auto inline-flex items-center">
							Other option
						</div>
						<Button variant="ghost">Details</Button>
						<Button
							onClick={ () => setOpenDrawer( false ) }
							variant="outline"
						>
							Cancel
						</Button>
						<Button variant="primary">Save</Button>
					</Drawer.Footer>
					<Drawer.Backdrop />
				</Drawer>
				</div>
  );
};

```

--------------------------------

### Run Storybook

Source: https://github.com/brainstormforce/force-ui/wiki/Installation

Launches the Storybook environment for Force UI in a separate terminal. This allows for isolated development and testing of UI components.

```bash
npm run storybook
```

--------------------------------

### Force UI Width Utilities

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Defines fractional width utilities for responsive design, allowing elements to occupy specific portions of their parent container.

```javascript
{
  width: {
    '1/7': '14.2857143%',
    '1/8': '12.5%',
    '1/9': '11.1111111%',
    '1/10': '10%',
    '1/11': '9.0909091%',
    '1/12': '8.3333333%',
  }
}
```

--------------------------------

### Example Dialog.Description Children Prop - React

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/dialog/readme.md

Example of the content passed as children to the `Dialog.Description` component.

```React
"This is a description."
```

--------------------------------

### Configure GitHub Copilot Instructions

Source: https://github.com/brainstormforce/force-ui/wiki/Creating-Templates-Using-AI:-Complete-Guide

This snippet shows how to update VS Code settings to link an instruction file for GitHub Copilot, enhancing its code generation capabilities. Ensure the file path is correct.

```json
{
    ....
    "github.copilot.chat.codeGeneration.instructions": [
        {
            "file": "../.github/copilot-instructions.md"
        },
    ]
}
```

--------------------------------

### Install Testing Libraries with npm

Source: https://github.com/brainstormforce/force-ui/wiki/All-about-React-component-testing-with-Storybook

Installs essential libraries for Storybook testing, including addons for accessibility and interactions, the test runner, Playwright, and axe-Playwright for accessibility checks.

```bash
npm install --save-dev @storybook/addon-a11y @storybook/addon-interactions @storybook/test-runner @storybook/test playwright axe-playwright
```

--------------------------------

### Force UI Select Basic Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/select/readme.md

Demonstrates the basic implementation of the Force UI Select component. It includes setting up options, handling changes via an onChange handler, and enabling multiple selections. The example also shows how to render options within a specific portal container using `Select.Portal`.

```jsx
import Select from './Select';

const options = [
	'Red',
	'Orange',
	'Yellow',
	'Green',
	'Cyan',
	'Blue',
	'Purple',
	'Pink',
];

const App = () => (
  <div>

    <Select
        onChange={ ( value ) => console.log( value ) }
        multiple
    >
        <Select.Button label="Color" />
        { /* Portal will render options inside the `wp-content` container */ }
        <Select.Portal id="wp-content">
            <Select.Options
            >
                { options.map( ( option, index ) => (
                    <Select.Option key={ index } value={ option }>
                        { option }
                    </Select.Option>
                ) ) }
            </Select.Options>
        </Select.Portal>
    </Select>

    <Select
        onChange={ ( value ) => console.log( value ) }
        multiple
    >
        <Select.Button label="Color" />
        { /* Without Select.Portal will render options inside the parent container */ }
        <Select.Options
        >
            { options.map( ( option, index ) => (
                <Select.Option key={ index } value={ option }>
                    { option }
                </Select.Option>
            ) ) }
        </Select.Options>
    </Select>
  </div>
);

export default App;
```

--------------------------------

### Example Dialog.Title Children Prop - React

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/dialog/readme.md

Example of the content passed as children to the `Dialog.Title` component.

```React
"Dialog Title"
```

--------------------------------

### Controlled Drawer Example

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/drawer/readme.md

Demonstrates how to use the Drawer component in a controlled mode, managing its open/closed state via the 'open' and 'setOpen' props. This requires state management in the parent component.

```javascript
import React, { useState } from 'react';
import { Drawer } from 'force-ui';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Drawer</button>
      <Drawer open={isOpen} setOpen={setIsOpen}>
        <Drawer.Panel>
          <Drawer.Header>
            <Drawer.Title>Drawer Title</Drawer.Title>
          </Drawer.Header>
          <Drawer.Description>Drawer Content</Drawer.Description>
        </Drawer.Panel>
      </Drawer>
    </div>
  );
}
```

--------------------------------

### Prompt Format for AI Template Generation

Source: https://github.com/brainstormforce/force-ui/wiki/Creating-Templates-Using-AI:-Complete-Guide

Defines the format for generating design templates using AI with prompts only. It requires a template title and a detailed design prompt. Specificity in the prompt leads to better results.

```markdown
template_title: [Template Name]
design_prompt: [Clear and detailed design prompt goes here.]
```

--------------------------------

### Force UI Box Shadow Definitions

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Provides a set of predefined box shadow styles, ranging from subtle to pronounced, for adding depth and visual hierarchy to UI elements.

```javascript
{
  boxShadow: {
    'soft-shadow-sm':
      '0px 6px 32px -12px rgba(149, 160, 178, 0.12)',
    'soft-shadow': '0px 8px 32px -12px rgba(149, 160, 178, 0.16)',
    'soft-shadow-md':
      '0px 10px 32px -12px rgba(149, 160, 178, 0.2)',
    'soft-shadow-lg':
      '0px 12px 32px -12px rgba(149, 160, 178, 0.24)',
    'soft-shadow-xl':
      '0px 16px 32px -12px rgba(149, 160, 178, 0.32)',
    'soft-shadow-2xl':
      '0px 24px 64px -12px rgba(149, 160, 178, 0.32)',
    'soft-shadow-inner': '0px 1px 1px 0px rgba(0, 0, 0, 0.05)',
  }
}
```

--------------------------------

### Override @bsf/force-ui Default Tailwind Theme

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Customizes the default theme settings provided by @bsf/force-ui within your `tailwind.config.js` file. This allows you to define your own color palettes, typography, and other design tokens for components.

```jsx
theme: {
  extend: {
    colors: {
      // brand
      'brand-background-50': '#EFF6FF',
      'brand-background-hover-100': '#DBEAFE',
      'brand-200': '#BFDBFE',
      'brand-border-300': '#93C5FD',
      'brand-400': '#60A5FA',
      'brand-500': '#3B82F6',
      'brand-primary-600': '#2563EB',
      'brand-hover-700': '#1D4ED8',
      'brand-800': '#1E40AF',
      'brand-900': '#1E3A8A',
      'brand-text-950': '#172554',
      // background
      'background-primary': '#FFFFFF',
      'background-secondary': '#F3F4F6',
      'background-inverse': '#111827',
      'background-brand': '#2563EB',
      'background-important': '#DC2626',
      // field
      'field-primary-background': '#F9FAFB',
      'field-secondary-background': '#FFFFFF',
      'field-primary-hover': '#F3F4F6',
      'field-secondary-hover': '#F3F4F6',
      'field-dropzone-background': '#FFFFFF',
      'field-border': '#E5E7EB',
      'field-dropzone-background-hover': '#F9FAFB',
      'field-dropzone-color': '#2563EB',
      'field-label': '#111827',
      'field-input': '#111827',
      'field-helper': '#9CA3AF',
      'field-background-disabled': '#F9FAFB',
      'field-color-disabled': '#D1D5DB',
      'field-placeholder': '#6B7280',
      'field-border-disabled': '#F3F4F6',
      'field-color-error': '#DC2626',
      'field-border-error': '#FECACA',
      'field-background-error': '#FEF2F2',
      'field-required': '#DC2626',
      // border
      'border-interactive': '#2563EB',
      'border-subtle': '#E5E7EB',
      'border-strong': '#6B7280',
      'border-inverse': '#374151',
      'border-disabled': '#E5E7EB',
      'border-muted': '#E5E7EB',
      'border-error': '#DC2626',
      'border-transparent-subtle': '#37415114',
      'border-white': '#FFFFFF',
      // text
      'text-primary': '#111827',
      'text-secondary': '#4B5563',
      'text-tertiary': '#9CA3AF',
      'text-on-color': '#FFFFFF',
      'text-error': '#DC2626',
      'text-error-inverse': '#F87171',
      'text-inverse': '#FFFFFF',
      'text-disabled': '#D1D5DB',
      'text-on-button-disabled': '#9CA3AF',
      // link
      'link-primary': '#2563EB',
      'link-primary-hover': '#1D4ED8',
      'link-inverse': '#38BDF8',
      'link-visited': '#7C3AED',
      'link-visited-inverse': '#A78BFA',
      'link-inverse-hover': '#7DD3FC',
      // icon
      'icon-primary': '#111827',
      'icon-secondary': '#4B5563',
      'icon-on-color': '#FFFFFF',
      'icon-inverse': '#FFFFFF',
      'icon-interactive': '#2563EB',
      'icon-on-color-disabled': '#9CA3AF',
      'icon-disabled': '#D1D5DB',
      // support
      'support-error': '#DC2626',
      'support-success': '#16A34A',
      'support-warning': '#EAB308',
      'support-info': '#0284C7',
      'support-error-inverse': '#F87171',
    }
  }
}

```

--------------------------------

### Controlled Dialog Example

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/dialog/readme.md

Demonstrates how to use the Dialog component in a controlled manner, managing its open/closed state via the `open` and `setOpen` props. This approach requires explicit state management in the parent component.

```jsx
import React, { useState } from 'react';
import { Dialog } from 'force-ui';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Dialog
        open={isOpen}
        setOpen={setIsOpen}
        trigger={<button>Open Dialog</button>}
      >
        <Dialog.Panel>
          <Dialog.Header>
            <Dialog.Title>Dialog Title</Dialog.Title>
          </Dialog.Header>
          <Dialog.Description>This is the dialog content.</Dialog.Description>
          <Dialog.CloseButton />
        </Dialog.Panel>
      </Dialog>
    </div>
  );
}
```

--------------------------------

### EditorInput Default Value Example

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/editor-input/readme.md

Provides an example of the `defaultValue` prop for the EditorInput component, showcasing how to set an initial value that includes text and mentions. The value must be a JSON string.

```json
{
    "root": {
        "children": [
            {
                "children": [
                    {
                        "detail": 0,
                        "format": 0,
                        "mode": "normal",
                        "style": "",
                        "text": "Employee name: ",
                        "type": "text",
                        "version": 1
                    },
                    {
                        "type": "mention",
                        "data": {
                            "id": 3,
                            "label": "Catherine"
                        },
                        "version": 1
                    }
                ],
                "direction": "ltr",
                "format": "",
                "indent": 0,
                "type": "paragraph",
                "version": 1,
                "textFormat": 0,
                "textStyle": ""
            }
        ],
        "direction": "ltr",
        "format": "",
        "indent": 0,
        "type": "root",
        "version": 1
    }
}
```

--------------------------------

### Force UI Tabs Component Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/tabs/readme.md

Demonstrates the basic usage of the Force UI Tabs component, including importing the component and its necessary icons, and rendering a Tabs.Group with Tabs.Tab elements. This example showcases the 'rounded' variant, 'md' size, and 'horizontal' orientation.

```jsx
import Tabs from './Tabs';
import { ReactComponent as ExampleIcon } from './icons/example.svg';

const App = () => (
  <div>
    <Tabs.Group variant="rounded" size="md" orientation="horizontal">
      <Tabs.Tab slug="tab1" text="Tab 1" icon={<ExampleIcon />} />
      <Tabs.Tab slug="tab2" text="Tab 2" icon={<ExampleIcon />} />
    </Tabs.Group>
  </div>
);

export default App;
```

--------------------------------

### Prompt Format for Figma to Code Conversion

Source: https://github.com/brainstormforce/force-ui/wiki/Creating-Templates-Using-AI:-Complete-Guide

This format is used to generate code from Figma mockups. It requires a template title and a design prompt that includes a link to the Figma design. The AI will convert the selected Figma elements.

```markdown
template_title: [Template Title]
design_prompt:
Convert this Figma: [Paste Figma link here]
```

--------------------------------

### Force UI Breadcrumb Component Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/breadcrumb/readme.md

This example demonstrates the basic usage of the Force UI Breadcrumb component, including adding items, links, separators, and the current page indicator. It showcases how to structure a typical breadcrumb navigation trail.

```jsx
<Breadcrumb>
	<Breadcrumb.List>
        <Breadcrumb.Item>
            <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator type="slash" />
        <Breadcrumb.Item>
            <Breadcrumb.Link href="/category">Category</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
            <Breadcrumb.Page>Current Page</Breadcrumb.Page>
        </Breadcrumb.Item>
	</Breadcrumb.List>
</Breadcrumb>
```

--------------------------------

### DropdownMenu New Implementation (With Optional Portal, v1.7.0+)

Source: https://github.com/brainstormforce/force-ui/wiki/Backward-Compatibility-Notes-for-DropdownMenu-–-v1.7.0

This example shows the updated DropdownMenu implementation in v1.7.0 and above, utilizing DropdownMenu.ContentWrapper and optionally DropdownMenu.Portal for scenarios requiring specific DOM placement.

```tsx
<DropdownMenu {...some other props}>
  <DropdownMenu.Trigger {...some other props}>
    <Button>Dropdown</Button>
  </DropdownMenu.Trigger>
  { /* The use of Portal is optional. Use it whenever required. */ }
  <DropdownMenu.Portal {...some other props}>
   <DropdownMenu.ContentWrapper {...some other props}>
     <DropdownMenu.Content className="w-60" {...some other props}>
       <DropdownMenu.List {...some other props}>
         <DropdownMenu.Item {...some other props}>Menu Item 1</DropdownMenu.Item>
         ...more items
       </DropdownMenu.List>
     </DropdownMenu.Content>
   </DropdownMenu.ContentWrapper>
  </DropdownMenu.Portal>
</DropdownMenu>
```

--------------------------------

### Uncontrolled Drawer Example

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/drawer/readme.md

Illustrates the uncontrolled usage of the Drawer component, where the 'trigger' prop handles the opening and closing logic without explicit state management for 'open' and 'setOpen'. The component internally manages its state.

```javascript
import React from 'react';
import { Drawer } from 'force-ui';

function App() {
  return (
    <Drawer trigger={<button>Open Drawer</button>}>
      <Drawer.Panel>
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
        </Drawer.Header>
        <Drawer.Description>Drawer Content</Drawer.Description>
      </Drawer.Panel>
    </Drawer>
  );
}
```

--------------------------------

### Basic DatePicker Usage (Normal Variant)

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/datepicker/readme.md

A fundamental example of using the DatePicker component in its 'normal' variant for single date selection. It shows how to set the mode, variant, initial selected dates, and a callback function to handle date changes.

```jsx
import DatePicker from '@bsf/force-ui';

const App = () => {
  return (
    <DatePicker 
      mode="single"
      variant="normal"
      selectedDates={{ from: new Date(), to: new Date() }}
      setSelectedDates={(dates) => console.log(dates)}
    />
  );
};

export default App;
```

--------------------------------

### Clone Repository and Create Branch (Bash)

Source: https://github.com/brainstormforce/force-ui/wiki/📘-Template-Development-Guidelines

Steps to clone the repository and create a new feature branch from the 'staging' branch for template development.

```bash
git checkout staging
git checkout -b feat/template-<your-template-name> # Name of your branch
```

--------------------------------

### Force UI Z-Index Definition

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Sets a high z-index value to ensure elements are rendered on top of other content.

```javascript
{
  zIndex: {
    999999: '999999'
  }
}
```

--------------------------------

### Force UI Font Size Definitions

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Defines a 'tiny' font size, likely for small text elements or labels.

```javascript
{
  fontSize: {
    tiny: '0.625rem',
  }
}
```

--------------------------------

### Force UI Spacing Definitions

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Specifies custom spacing values, including large pixel equivalents, for consistent layout and spacing in UI components.

```javascript
{
  spacing: {
    120: '30rem', // 480px
    95: '23.75rem', // 380px
    141.5: '35.375rem', // 566px
    188: '47rem', // 752px
  }
}
```

--------------------------------

### Force UI Title Basic Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/title/readme.md

Demonstrates the basic usage of the Force UI Title component, including importing it and rendering with properties like size, title, icon, iconPosition, and description.

```jsx
import { Title } from '@bsf/force-ui';

const App = () => (
    <div>
        <Title size="xs" title={'Extra Small Title'} icon={<House />} iconPosition={'left'} description={'this is a description'} />
    </div>
);

export default App;
```

--------------------------------

### Run Accessibility Tests (Bash)

Source: https://github.com/brainstormforce/force-ui/wiki/📘-Template-Development-Guidelines

Commands to run Storybook and then execute accessibility tests from the command line to identify and resolve issues.

```bash
npm run storybook
npm run test
```

--------------------------------

### Force UI Color Palette

Source: https://github.com/brainstormforce/force-ui/blob/master/README.md

Defines a comprehensive color palette for various UI elements within the Force UI library. Includes colors for support states, buttons, focus states, miscellaneous elements, badges, alerts, tabs, tooltips, and toggles.

```javascript
{
  'support-success-inverse': '#4ADE80',
  'support-warning-inverse': '#FDE047',
  'support-info-inverse': '#38BDF8',
  // button
  'button-primary': '#2563EB',
  'button-primary-hover': '#1D4ED8',
  'button-secondary': '#1F2937',
  'button-secondary-hover': '#374151',
  'button-tertiary': '#FFFFFF',
  'button-tertiary-hover': '#F9FAFB',
  'button-danger': '#DC2626',
  'button-danger-secondary': '#DC2626',
  'button-danger-hover': '#B91C1C',
  'button-disabled': '#F3F4F6',
  'button-tertiary-border': '#E5E7EB',
  'button-tertiary-color': '#111827',
  // focus
  focus: '#2563EB',
  'focus-inset': '#FFFFFF',
  'focus-inverse': '#38BDF8',
  'focus-inverse-inset': '#111827',
  'focus-error': '#DC2626',
  'focus-border': '#BFDBFE',
  'focus-error-border': '#FECACA',
  // misc
  'misc-highlight': '#BFDBFE',
  'misc-overlay': '#11182780',
  'misc-skeleton-background': '#F3F4F6',
  'misc-skeleton-element': '#D1D5DB',
  'misc-popup-button-hover': '#1118270D',
  'misc-tab-item-hover': '#E5E7EB',
  'misc-dropdown-hover': '#F3F4F6',
  'misc-loader-base': '#1118270D',
  'misc-loader-color': '#2563EB',
  'misc-progress-background': '#E5E7EB',
  // badge
  'badge-background-gray': '#F9FAFB',
  'badge-color-gray': '#1F2937',
  'badge-hover-gray': '#F3F4F6',
  'badge-border-gray': '#E5E7EB',
  'badge-background-red': '#FEF2F2',
  'badge-color-red': '#B91C1C',
  'badge-hover-red': '#FEE2E2',
  'badge-border-red': '#FECACA',
  'badge-background-yellow': '#FEFCE8',
  'badge-color-yellow': '#A16207',
  'badge-hover-yellow': '#FEF9C3',
  'badge-border-yellow': '#FEF08A',
  'badge-hover-green': '#DCFCE7',
  'badge-border-green': '#BBF7D0',
  'badge-background-green': '#F0FDF4',
  'badge-color-green': '#15803D',
  'badge-background-sky': '#F0F9FF',
  'badge-color-sky': '#0369A1',
  'badge-hover-sky': '#E0F2FE',
  'badge-border-sky': '#BAE6FD',
  'badge-background-disabled': '#F3F4F6',
  'badge-color-disabled': '#D1D5DB',
  'badge-hover-disabled': '#F3F4F6',
  'badge-border-disabled': '#E5E7EB',
  'badge-background-important': '#DC2626',
  // alert
  'alert-background-neutral': '#FFFFFF',
  'alert-border-neutral': '#E5E7EB',
  'alert-background-danger': '#FEF2F2',
  'alert-border-danger': '#FECACA',
  'alert-background-warning': '#FEFCE8',
  'alert-border-warning': '#FEF08A',
  'alert-background-green': '#F0FDF4',
  'alert-border-green': '#BBF7D0',
  'alert-background-info': '#F0F9FF',
  'alert-border-info': '#BAE6FD',
  // tab
  'tab-background': '#F3F4F6',
  'tab-border': '#E5E7EB',
  // tooltip
  'tooltip-background-light': '#FFFFFF',
  'tooltip-background-dark': '#111827',
  // toggle
  'toggle-off': '#E5E7EB',
  'toggle-on': '#2563EB',
  'toggle-dial-background': '#FFFFFF',
  'toggle-off-hover': '#D1D5DB',
  'toggle-off-border': '#D1D5DB',
  'toggle-on-hover': '#3B82F6',
  'toggle-on-border': '#60A5FA',
  'toggle-off-disabled': '#F3F4F6'
}
```

--------------------------------

### Force UI Label Basic Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/label/readme.md

Demonstrates the basic usage of the Force UI Label component with different sizes and variants. It shows how to import the Label component and render it with text and icons.

```jsx
import { Label } from '@bsf/force-ui';

const App = () => (
    <div>
        <Label size='xs'>Vrunda <MapPinPlusInside/> Kansara </Label>
        <Label size='sm'>Label</Label>
        <Label size='sm' variant='disabled'><MapPinPlusInside/> Label</Label>
        <Label size='md' variant="help">Another Label <MapPinPlusInside/></Label>
        <Label variant="error">An error label with a <a href="#">link</a>.</Label>
    </div>
);

export default App;
```

--------------------------------

### Force UI Alert Component Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/alert/readme.md

Demonstrates how to use the Force UI Alert component with different variants, designs, themes, and actions. It shows how to import the Alert component and render it with various props to display different types of messages.

```jsx
import React from 'react';
import { Alert } from '@bsf/force-ui';

const App = () => {
    return (
        <div className="flex gap-3 items-center justify-start flex-wrap m-4 p-4">
            <Alert title={"Info alert"} content={"This is a description"} variant="error" />
            <Alert title={"Info alert"} content={"This is a description"} variant="warning" />
            <Alert title={"Info alert"} content={"This is a description"} variant="success" />
            <Alert title={"Info alert"} content={"This is a description"} design={"stack"} variant="info" action={
                            {label: 'Undo',
                            onClick: () => {},
                            type: 'button',
                        }} />
            <Alert title={"Info alert"} content={"This is a description"} variant="neutral" />
            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="error" />
            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="warning" />
            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="success" />
            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="info" />
            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="neutral" />
        </div>
    );
};

```

--------------------------------

### Toast Function Usage with Options

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/toaster/readme.md

Demonstrates how to use the `toast` function with various options, including description, theme, auto-dismiss, and an action button with a click handler.

```javascript
toast('Hello world title!', {
    description: 'Hello World description!',
    theme: 'light',
    autoDismiss: true,
    dismissAfter: 5000,
    action: {
        label: 'Undo',
        onClick: (close) => {
            console.log('Undo clicked');
            close();
        },
        type: 'button'
    }
});
```

--------------------------------

### Drawer Description with Custom Tag

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/drawer/readme.md

Shows how to render the Drawer.Description component using a different HTML tag or a custom React component via the 'as' prop.

```javascript
import React from 'react';
import { Drawer } from 'force-ui';

function App() {
  return (
    <Drawer trigger={<button>Open Drawer</button>}>
      <Drawer.Panel>
        <Drawer.Description as="div" className="custom-desc">This is a description rendered as a div.</Drawer.Description>
      </Drawer.Panel>
    </Drawer>
  );
}
```

--------------------------------

### Custom DatePicker Presets with date-fns

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/datepicker/readme.md

Demonstrates how to create custom date range presets for the DatePicker component using the date-fns library. This involves defining an array of preset objects, each with a label and a date range, and passing it to the `presets` prop. Requires installing date-fns: `npm install date-fns`.

```javascript
import { subDays } from 'date-fns';
const customPresets = [
    { label: 'Next 7 Days', range: { from: new Date(), to: subDays(new Date(), -7) } },
    { label: '30 Days', range: { from: subDays(new Date(), 30), to: new Date() } },
];

const Example = () => {
  return (
    <DatePicker 
        mode='range' 
        variant='presets' 
        presets={customPresets} 
    />
  )
}

export default Example;
```

--------------------------------

### Example Dialog.CloseButton Children Prop (Default) - React

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/dialog/readme.md

The default content rendered inside the `Dialog.CloseButton` component if no children are provided.

```React
"×"
```

--------------------------------

### Select Component Basic Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/select/readme.md

Demonstrates the basic usage of the Select component, allowing users to select a single option. It highlights the core props like `value`, `onChange`, and `placeholder` for the button.

```tsx
import React, { useState } from 'react';
import { Select } from '@brainstormforce/force-ui';

const BasicSelect = () => {
  const [selectedValue, setSelectedValue] = useState<string | undefined>(undefined);

  const options = [
    { id: '1', name: 'Option 1' },
    { id: '2', name: 'Option 2' },
    { id: '3', name: 'Option 3' },
  ];

  return (
    <Select
      value={selectedValue}
      onChange={(value) => setSelectedValue(value as string | undefined)}
      by="id"
    >
      <Select.Button placeholder="Select an option" />
      <Select.Options>
        {options.map((option) => (
          <Select.Option key={option.id} value={option.id}>
            {option.name}
          </Select.Option>
        ))}
      </Select.Options>
    </Select>
  );
};

export default BasicSelect;
```

--------------------------------

### Basic Toast Notifications

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/toaster/readme.md

Provides examples of triggering different types of toast notifications: neutral, success, error, warning, and info.

```javascript
toast('Hello World!');
ttoast.success('Operation successful!');
ttoast.error('An error occurred!');
ttoast.warning('Please be cautious.');
ttoast.info('Information message.');
```

--------------------------------

### Add Force UI as a dependency in package.json

Source: https://github.com/brainstormforce/force-ui/wiki/Introduction

This code demonstrates how to add the Force UI library as a dependency in your project's `package.json` file. It uses a Git SSH URL to point to the specific version of the library.

```json
"@bsf/force-ui": "git+ssh://git@github.com/brainstormforce/force-ui.git#1.4.1"
```

--------------------------------

### Show Dark Success Toast with Action Button

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/toaster/readme.md

Displays a dark-themed success toast with an action button. This example shows how to apply a different theme to the toast notification.

```jsx
import { Button, toast } from '@force-ui/core';

// ... inside a React component
<Button
    size="xs"
    onClick={ () => {
        toast.success( 'Success toast', {
            description: 'This is a success description',
            theme: 'dark',
            action: {
                label: 'Undo',
                onClick: ( close ) => {
                    close();
                },
                type: 'button',
            },
        } );
    } }
>
    Show Dark Success Toast with Action button
</Button>
```

--------------------------------

### Force UI Button Component Usage

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/button/readme.md

Demonstrates the basic usage of the Force UI Button component in a React application. It shows how to import the Button component and use it with different variants and sizes, including adding an icon.

```jsx
import Button from './Button';
import { ReactComponent as ExampleIcon } from './icons/example.svg';

const App = () => (
  <div>
    <Button variant="primary" size="m">
      Primary Button
    </Button>
    <Button variant="secondary" size="l" icon={<ExampleIcon />}>
      Secondary Button
    </Button>
  </div>
);

export default App;
```

--------------------------------

### DropdownMenu New Implementation (Without Portal, v1.7.0+)

Source: https://github.com/brainstormforce/force-ui/wiki/Backward-Compatibility-Notes-for-DropdownMenu-–-v1.7.0

This snippet demonstrates the new implementation of DropdownMenu starting from v1.7.0, where DropdownMenu.ContentWrapper is used and DropdownMenu.Portal is optional, particularly for modal contexts.

```tsx
<DropdownMenu {...some other props}>
  <DropdownMenu.Trigger {...some other props}>
    <Button>Dropdown</Button>
  </DropdownMenu.Trigger>
   <DropdownMenu.ContentWrapper {...some other props}>
     <DropdownMenu.Content className="w-60" {...some other props}>
       <DropdownMenu.List {...some other props}>
         <DropdownMenu.Item {...some other props}>Menu Item 1</DropdownMenu.Item>
         ...more items
       </DropdownMenu.List>
     </DropdownMenu.Content>
   </DropdownMenu.ContentWrapper>
</DropdownMenu>
```

--------------------------------

### Responsive Width Utilities

Source: https://github.com/brainstormforce/force-ui/wiki/Introduction

Defines fractional width utilities, allowing elements to be sized as fractions of their parent container, from 1/7 to 1/12.

```javascript
{
				'1/7': '14.2857143%',
				'1/8': '12.5%',
				'1/9': '11.1111111%',
				'1/10': '10%',
				'1/11': '9.0909091%',
				'1/12': '8.3333333%'
			}
```

--------------------------------

### Uncontrolled Dialog Example

Source: https://github.com/brainstormforce/force-ui/blob/master/src/components/dialog/readme.md

Illustrates the usage of the Dialog component in an uncontrolled mode. In this mode, the dialog manages its own open/closed state, triggered by a provided `trigger` element. The `open` and `setOpen` props are not required.

```jsx
import React from 'react';
import { Dialog } from 'force-ui';

function MyComponent() {
  return (
    <div>
      <Dialog trigger={<button>Open Dialog</button>}>
        <Dialog.Panel>
          <Dialog.Header>
            <Dialog.Title>Dialog Title</Dialog.Title>
          </Dialog.Header>
          <Dialog.Description>This is the dialog content.</Dialog.Description>
          <Dialog.CloseButton />
        </Dialog.Panel>
      </Dialog>
    </div>
  );
}
```