### Clone and Develop Locally

Source: https://github.com/salesforce/design-system-react/blob/master/README.md

Commands to clone the repository, install dependencies, and start the local development server with Storybook.

```bash
git clone git@github.com:salesforce/design-system-react.git
cd design-system-react
npm install
npm start
open http://localhost:9001 http://localhost:8001
```

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

### Install Dependencies

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md

Install the necessary packages for running the demo app.

```bash
npm install
```

```bash
npm start
```

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

### Example React Component Structure

Source: https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md

Demonstrates a standard React component setup including prop types, default props, constructor logic, and method definitions. Use this as a template for new components.

```javascript
import React from 'react';
import PropTypes from 'prop-types';
import checkProps from './check-props';
import { EXTERNAL_CONSTANT } from '../../utilities/constants';
import generateId from '../../utilities/generate-id';

const propTypes = {
	/**
	 * The description of this prop (will appear in the documentation site).
	 */
	title: PropTypes.string.isRequired,
};

// These values will also be visible in the documentation site.
const defaultProps = {};

/**
 * The description of this component (will appear in the documentation site).
 */
class DemoComponent extends React.Component {
	static displayName = EXTERNAL_CONSTANT_NAME;
	static propTypes = propTypes;
	static defaultProps = defaultProps;

	constructor(props) {
		super(props);

		// useful for unique DOM IDs
		this.generatedId = this.props.id || generateId();

		// initial state
		this.state = {};

		// Not required. This function issues console warnings to developers about props and is helpful in upgrading. All breaking changes to props must have a warning for developers when they upgrade.
		checkProps(EXTERNAL_CONSTANT, this.props);
	}

	// Class property bound to instance. Class methods that are not React lifecycle methods should use "fat-arrow" syntax if `this` binding is needed.
	toggleOpen = (event, { eventDataKey }) => {
		// you can use `this` here
	};

	// Minimize use of multiple renders. More HTML-like JSX is preferred with ternary statements
	renderSubComponent = () => null;

	// Render should be last
	render() {
		return null;
	}
}

export default DemoComponent;
```

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

### Install Dependencies

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app.md

Install the required Design System packages.

```bash
cd my-react-app && npm install @salesforce-ux/design-system @salesforce/design-system-react
```

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

### Install Salesforce Lightning Packages

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md

Install the Salesforce Design System CSS and React components.

```bash
npm install --save @salesforce-ux/design-system @salesforce/design-system-react
```

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

### Bootstrap React App

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md

Create a new React application and start the development server.

```bash
npx create-react-app my-app
cd my-app
npm start
```

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

### Setup Assistant Component

Source: https://github.com/salesforce/design-system-react/blob/master/components/comments.txt

The Setup Assistant provides administrators with a centralized list of tasks for onboarding organizations, clouds, or features within the Salesforce Platform.

```jsx
<SetupAssistant>
  <SetupAssistantHeader title="Setup Assistant" />
  <SetupAssistantStep>
    <SetupAssistantStepHeader title="Step 1: Configure Settings" />
    <SetupAssistantStepBody>
      <p>Details about configuring settings.</p>
    </SetupAssistantStepBody>
  </SetupAssistantStep>
</SetupAssistant>
```

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

### Global Header Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/comments.txt

Example of how to structure the Global Header component with its children.

```jsx
<SLDSGlobalHeader>
  <SLDSGlobalHeaderSearch />
  <SLDSGlobalHeaderButton />
  <SLDSGlobalHeaderDropdown />
  <SLDSGlobalHeaderDropdown />
  <SLDSGlobalHeaderProfile />
</SLDSGlobalHeader>
```

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

### Install Babel Preset

Source: https://github.com/salesforce/design-system-react/blob/master/preset/README.md

Install the Design System React Babel preset as a development dependency using npm.

```sh
$ npm install --save-dev @salesforce/babel-preset-design-system-react
```

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

### Install Design System React

Source: https://github.com/salesforce/design-system-react/blob/master/docs/README-dist.md

Install the Design System React library and its peer dependency using npm.

```bash
$ npm install @salesforce-ux/design-system @salesforce/design-system-react
```

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

### Install ESLint and Plugin

Source: https://github.com/salesforce/design-system-react/blob/master/eslint-plugin/README.md

Commands to install ESLint and the SLDS React plugin as development dependencies.

```bash
$ npm i eslint --save-dev
```

```bash
$ npm install @salesforce/eslint-plugin-slds-react --save-dev
```

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

### Quick Setup with CommonJS

Source: https://github.com/salesforce/design-system-react/blob/master/docs/README-dist.md

Use this import syntax for CommonJS environments without transpilation. Ensure you use named imports.

```javascript
import { Button } from '@salesforce/design-system-react';

<Button label="Hello Button" />
```

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

### Icon Settings with Webpack Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/comments.txt

Demonstrates how to configure Icon Settings with individual sprite paths for Webpack.

```jsx
import actionSprite from '......';

<IconSettings actionSprite={actionSprite} ......>
```

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

### Icon Settings with Root Path Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/comments.txt

Shows how to specify the root path for icon files when not using individual sprites.

```jsx
<IconSettings iconPath="/assets/icons" ...>
```

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

### Install react-app-rewired

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md

Install `react-app-rewired` as a development dependency to modify the webpack configuration.

```bash
npm install react-app-rewired --save-dev
```

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

### App Component with IconSettings

Source: https://github.com/salesforce/design-system-react/blob/master/docs/webpack.md

Example of importing Design System React CSS and configuring IconSettings in an App component.

```javascript
import React, { Component } from 'react';

import '@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
...
...

class App extends Component {
    render() {
        return (
            <IconSettings iconPath="public/css/lds/icons">
                <YourApp />
            </IconSettings>
        );
    }
}

export default App;
```

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

### Update package.json Dependency

Source: https://github.com/salesforce/design-system-react/blob/master/docs/release.md

Example dependency entry for a custom fork release.

```json
"@salesforce/design-system-react": "git+ssh://git@github.com:interactivellama/design-system-react.git#v0.8.15-npm",
```

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

### Tabs Component Examples

Source: https://context7.com/salesforce/design-system-react/llms.txt

Demonstrates default, scoped, and controlled tabs with keyboard navigation and multiple visual variants. Ensure IconSettings is used for icon paths.

```jsx
import React from 'react';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
import Tabs from '@salesforce/design-system-react/components/tabs';
import TabsPanel from '@salesforce/design-system-react/components/tabs/panel';

class TabsExample extends React.Component {
  state = { selectedIndex: 0 };

  handleSelect = (index) => {
    this.setState({ selectedIndex: index });
  };

  render() {
    return (
      <IconSettings iconPath="/assets/icons">
        {/* Default tabs */}
        <Tabs id="tabs-default" defaultSelectedIndex={0}>
          <TabsPanel label="Item One">
            <h2 className="slds-text-heading_medium">Tab 1 Content</h2>
            <p>Content for the first tab panel.</p>
          </TabsPanel>
          <TabsPanel label="Item Two">
            <h2 className="slds-text-heading_medium">Tab 2 Content</h2>
            <p>Content for the second tab panel.</p>
          </TabsPanel>
          <TabsPanel label="Item Three">
            <h2 className="slds-text-heading_medium">Tab 3 Content</h2>
            <p>Content for the third tab panel.</p>
          </TabsPanel>
          <TabsPanel disabled label="Disabled">
            This content won't be accessible.
          </TabsPanel>
        </Tabs>

        {/* Scoped tabs variant */}
        <Tabs id="tabs-scoped" variant="scoped">
          <TabsPanel label="Tab A">Scoped Tab A Content</TabsPanel>
          <TabsPanel label="Tab B">Scoped Tab B Content</TabsPanel>
        </Tabs>

        {/* Controlled tabs */}
        <Tabs
          id="tabs-controlled"
          selectedIndex={this.state.selectedIndex}
          onSelect={this.handleSelect}
        >
          <TabsPanel label="First">First Panel</TabsPanel>
          <TabsPanel label="Second">Second Panel</TabsPanel>
        </Tabs>
      </IconSettings>
    );
  }
}

export default TabsExample;
```

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

### Input Component Examples

Source: https://context7.com/salesforce/design-system-react/llms.txt

Demonstrates various configurations of the Input component, including basic, required, error states, icons, counter variants, disabled, and read-only inputs. Ensure IconSettings is used to provide the icon path.

```jsx
import React from 'react';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
import Input from '@salesforce/design-system-react/components/input';
import InputIcon from '@salesforce/design-system-react/components/icon/input-icon';

class InputExample extends React.Component {
  state = {
    value: '',
    counterValue: 0,
  };

  handleChange = (event, { value }) => {
    this.setState({ value });
  };

  handleCounterChange = (event, { value, number }) => {
    this.setState({ counterValue: number });
  };

  render() {
    return (
      <IconSettings iconPath="/assets/icons">
        {/* Basic input */}
        <Input
          id="basic-input"
          label="Account Name"
          placeholder="Enter account name"
          value={this.state.value}
          onChange={this.handleChange}
        />

        {/* Required input with help text */}
        <Input
          id="required-input"
          label="Email Address"
          placeholder="name@example.com"
          required
          type="email"
          inlineHelpText="We'll never share your email."
        />

        {/* Input with error */}
        <Input
          id="error-input"
          label="Phone Number"
          errorText="Please enter a valid phone number"
          value="invalid"
        />

        {/* Input with icons */}
        <Input
          id="icon-input"
          label="Search"
          placeholder="Search Salesforce"
          iconLeft={
            <InputIcon
              assistiveText={{ icon: 'Search' }}
              category="utility"
              name="search"
            />
          }
          iconRight={
            <InputIcon
              assistiveText={{ icon: 'Clear' }}
              category="utility"
              name="clear"
              onClick={() => console.log('Clear clicked')}
            />
          }
        />

        {/* Counter input */}
        <Input
          id="counter-input"
          label="Quantity"
          variant="counter"
          value={this.state.counterValue}
          onChange={this.handleCounterChange}
          minValue={0}
          maxValue={100}
          step={1}
        />

        {/* Disabled input */}
        <Input
          id="disabled-input"
          label="Disabled Input"
          disabled
          value="Cannot edit"
        />

        {/* Read-only input */}
        <Input
          id="readonly-input"
          label="Read Only"
          readOnly
          value="Read only value"
        />
      </IconSettings>
    );
  }
}

export default InputExample;
```

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

### Implement a DataTable with Sorting and Selection

Source: https://context7.com/salesforce/design-system-react/llms.txt

A comprehensive example demonstrating a DataTable with custom cell rendering, row selection, and column sorting functionality.

```jsx
import React from 'react';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
import DataTable from '@salesforce/design-system-react/components/data-table';
import DataTableColumn from '@salesforce/design-system-react/components/data-table/column';
import DataTableCell from '@salesforce/design-system-react/components/data-table/cell';
import DataTableRowActions from '@salesforce/design-system-react/components/data-table/row-actions';
import Dropdown from '@salesforce/design-system-react/components/menu-dropdown';

// Custom cell with link
const CustomLinkCell = ({ children, ...props }) => (
  <DataTableCell {...props}>
    <a href="#" onClick={(e) => e.preventDefault()}>
      {children}
    </a>
  </DataTableCell>
);
CustomLinkCell.displayName = DataTableCell.displayName;

class DataTableExample extends React.Component {
  state = {
    items: [
      {
        id: '1',
        opportunityName: 'Cloudhub',
        accountName: 'Cloudhub',
        closeDate: '4/14/2015',
        stage: 'Prospecting',
        confidence: '20%',
        amount: '$25k',
        contact: 'jrogers@cloudhub.com',
      },
      {
        id: '2',
        opportunityName: 'Acme - 1,200 Widgets',
        accountName: 'Acme',
        closeDate: '1/31/2015',
        stage: 'Closed Won',
        confidence: '100%',
        amount: '$25k',
        contact: 'coyote@acme.com',
      },
      {
        id: '3',
        opportunityName: 'Salesforce - 200 Licenses',
        accountName: 'Salesforce',
        closeDate: '6/15/2015',
        stage: 'Negotiation',
        confidence: '80%',
        amount: '$100k',
        contact: 'admin@salesforce.com',
      },
    ],
    selection: [],
    sortColumn: 'opportunityName',
    sortColumnDirection: { opportunityName: 'asc' },
  };

  handleRowChange = (event, { selection }) => {
    this.setState({ selection });
  };

  handleSort = (sortColumn, { property, sortDirection }) => {
    const sortedItems = [...this.state.items].sort((a, b) => {
      if (sortDirection === 'desc') {
        return a[property] > b[property] ? -1 : 1;
      }
      return a[property] > b[property] ? 1 : -1;
    });

    this.setState({
      items: sortedItems,
      sortColumn: property,
      sortColumnDirection: { [property]: sortDirection },
    });
  };

  handleRowAction = (item, action) => {
    console.log('Row action:', action.value, 'on item:', item.id);
  };

  render() {
    return (
      <IconSettings iconPath="/assets/icons">
        <DataTable
          items={this.state.items}
          id="DataTableExample"
          fixedLayout
          selectRows="checkbox"
          selection={this.state.selection}
          onRowChange={this.handleRowChange}
          onSort={this.handleSort}
        >
          <DataTableColumn
            isSorted={this.state.sortColumn === 'opportunityName'}
            sortDirection={this.state.sortColumnDirection.opportunityName}
            sortable
            label="Opportunity Name"
            property="opportunityName"
          >
            <CustomLinkCell />
          </DataTableColumn>

          <DataTableColumn label="Account Name" property="accountName" />
          <DataTableColumn label="Close Date" property="closeDate" />
          <DataTableColumn label="Stage" property="stage" />
          <DataTableColumn label="Confidence" property="confidence" />
          <DataTableColumn label="Amount" property="amount" />

          <DataTableColumn label="Contact" property="contact">
            <CustomLinkCell />
          </DataTableColumn>

          <DataTableRowActions
            options={[
              { id: 0, label: 'Edit', value: 'edit' },
              { id: 1, label: 'Delete', value: 'delete' },
              { id: 2, label: 'Clone', value: 'clone' },
            ]}
            onAction={this.handleRowAction}
            dropdown={<Dropdown length={null} />}
          />
        </DataTable>

        <p className="slds-m-top_small">
          {this.state.selection.length} item(s) selected
        </p>
      </IconSettings>
    );
  }
}

export default DataTableExample;
```

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

### Handle ProgressIndicator step focus

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Example of defining a callback function for the onStepFocus event.

```javascript
const handleStepFocus = function(event, data) { console.log(data); };
  <ProgressIndicator onStepFocus={handleStepFocus} />
```

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

### Run Mocha Tests Interactively

Source: https://github.com/salesforce/design-system-react/blob/master/tests/README.md

Start the development server to test Mocha interactions in a browser. Browse to the specified URL to access the interactive test environment.

```bash
npm start
```

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

### Handle ProgressIndicator step click

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Example of defining a callback function for the onStepClick event.

```javascript
const handleStepClick = function(event, data) { console.log(data); };
  <ProgressIndicator onStepClick={handleStepClick} />
```

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

### MenuDropdown Component Examples

Source: https://context7.com/salesforce/design-system-react/llms.txt

Illustrates different MenuDropdown configurations including icon button triggers, custom button triggers, and dropdowns with headers. The onSelect prop is used to handle item selection.

```jsx
import React from 'react';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
import Dropdown from '@salesforce/design-system-react/components/menu-dropdown';
import DropdownTrigger from '@salesforce/design-system-react/components/menu-dropdown/button-trigger';
import Button from '@salesforce/design-system-react/components/button';

class DropdownExample extends React.Component {
  handleSelect = (selectedItem) => {
    console.log('Selected:', selectedItem.value);
  };

  render() {
    return (
      <IconSettings iconPath="/assets/icons">
        {/* Icon button dropdown */}
        <Dropdown
          assistiveText={{ icon: 'More Options' }}
          iconCategory="utility"
          iconName="down"
          iconVariant="border-filled"
          onSelect={this.handleSelect}
          options={[
            { label: 'Menu Item One', value: 'A0' },
            { label: 'Menu Item Two', value: 'B0' },
            { label: 'Menu Item Three', value: 'C0' },
            { type: 'divider' },
            { label: 'Menu Item Four', value: 'D0' },
            { label: 'Menu Item Five', value: 'E0' },
          ]}
        />

        {/* Dropdown with custom button trigger */}
        <Dropdown
          align="right"
          onSelect={this.handleSelect}
          options={[
            { label: 'Edit', value: 'edit' },
            { label: 'Delete', value: 'delete' },
            { label: 'Clone', value: 'clone' },
          ]}>
          <DropdownTrigger>
            <Button
              iconCategory="utility"
              iconName="down"
              iconPosition="right"
              label="Actions"
            />
          </DropdownTrigger>
        </Dropdown>

        {/* Dropdown with headers */}
        <Dropdown
          assistiveText={{ icon: 'Settings' }}
          iconCategory="utility"
          iconName="settings"
          iconVariant="more"
          options={[
            { type: 'header', label: 'User Settings' },
            { label: 'Profile', value: 'profile' },
            { label: 'Preferences', value: 'preferences' },
            { type: 'divider' },
            { type: 'header', label: 'Account' },
            { label: 'Logout', value: 'logout' },
          ]}
          onSelect={this.handleSelect}
        />
      </IconSettings>
    );
  }
}

export default DropdownExample;
```

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

### App Launcher Usage Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/comments.txt

Use the App Launcher to provide quick access to apps and functionality within an organization. It's typically a sub-component of the Global Navigation Bar. To prevent assistive technologies from being disabled when the Modal is open, set the app element using `settings.setAppElement('#mount');`.

```jsx
<AppLauncher>
	<AppLauncherExpandableSection>
		<AppLauncherTile />
		<AppLauncherTile />
		<AppLauncherTile />
	</AppLauncherExpandableSection>
	<AppLauncherExpandableSection>
		<AppLauncherTile />
		<AppLauncherTile />
	</AppLauncherExpandableSection>
</AppLauncher>
```

```javascript
import settings from 'design-system-react/components/settings';
settings.setAppElement('#mount');
```

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

### MenuDropdown Button Trigger Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Illustrates how to use the `Trigger` component within a `Dropdown` to create a button that triggers the dropdown menu. Any props passed to the `Button` within `Trigger` will be applied to the triggering button.

```jsx
<Dropdown>
  <Trigger>
  <Button iconCategory="utility" iconName="settings" />
  </Trigger>
</Dropdown>
```

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

### Initialize Create React App

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app.md

Create a new React application using the create-react-app CLI.

```bash
create-react-app my-react-app
```

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

### Build and Tag Library for Release

Source: https://github.com/salesforce/design-system-react/blob/master/docs/release.md

Commands to build the library and create a version tag.

```bash
npm run dist
```

```bash
cd .tmp-npm
```

```bash
git tag v0.8.15
```

```bash
git push origin v0.8.15
```

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

### BuilderHeaderMisc Custom Content

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Example of providing custom content within the BuilderHeaderMisc component.

```jsx
<BuilderHeader>
  <BuilderHeaderMisc>
    Custom content
  </BuilderHeaderMisc>
</BuilderHeader>
```

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

### BuilderHeader Component Structure

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Example of nesting sub-components within the BuilderHeader to define the header structure.

```jsx
<BuilderHeader>
  <BuilderHeaderNav />
  <BuilderHeaderToolbar />
  <BuilderHeaderMisc />
</BuilderHeader>
```

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

### FilterGroup Component Usage

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Example of nesting FilterList and Filter components within a FilterGroup with the panel variant.

```jsx
<FilterGroup
  variant="panel"
>
  <FilterList>
  <Filter
    property="Show Me"
    predicate="All Wackamoles"
  >
  {popoverContents}
  </Filter>
  </FilterList>
</FilterGroup>
```

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

### Run All Tests

Source: https://github.com/salesforce/design-system-react/blob/master/tests/README.md

Execute lint, Karma/Chromium environment, and snapshot tests. This command is the primary way to run the full test suite.

```bash
npm test
```

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

### Correct JSX Usage

Source: https://github.com/salesforce/design-system-react/blob/master/eslint-plugin/docs/rules/no-double-dash-modifier.md

Examples of JSX code that comply with the rule by using the recommended single-underscore BEM notation.

```html
<div className="slds-theme_default">
	<h3 className="slds-text-heading_label">Heading</h3>
</div>
```

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

### Local Site Update Commands

Source: https://github.com/salesforce/design-system-react/blob/master/docs/release.md

Commands to clone the site repository and sync the local library build.

```bash
git clone git@github.com:salesforce-ux/design-system-react-site.git
```

```bash
npm run local-update
```

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

### Use Babel Preset with CLI

Source: https://github.com/salesforce/design-system-react/blob/master/preset/README.md

Transpile JavaScript files using the Babel CLI and the Design System React preset.

```sh
$ babel script.js --presets @salesforce/babel-preset-design-system-react
```

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

### Update package.json Scripts

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md

Modify the `scripts` section in `package.json` to use `react-app-rewired` for starting, building, and testing the application.

```json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
}
```

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

### Run Snapshot Tests

Source: https://github.com/salesforce/design-system-react/blob/master/tests/README.md

Execute snapshot tests for all components or a specific component directory. Use this to verify UI consistency against previous snapshots.

```bash
npm run test:snapshot
```

```bash
npm run test:snapshot components/button/
```

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

### Babel Configuration

Source: https://github.com/salesforce/design-system-react/blob/master/README.md

Configure .babelrc to use the required design system preset.

```json
{
	"presets": ["@salesforce/babel-preset-design-system-react"]
}
```

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

### Incorrect JSX Usage

Source: https://github.com/salesforce/design-system-react/blob/master/eslint-plugin/docs/rules/no-double-dash-modifier.md

Examples of JSX code that trigger the no-double-dash-modifier rule due to the use of deprecated double-dash notation.

```html
<div className="slds-theme--default">
	<h3 className="slds-text-heading--label">Heading</h3>
	</div>
```

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

### Postinstall Script for Symlinking Assets

Source: https://github.com/salesforce/design-system-react/blob/master/docs/webpack.md

A Node.js script to create symlinks from node_modules to your public folder for serving static assets like fonts, icons, images, and styles.

```javascript
// Code to run post npm install

const path = require('path');
const fs = require('fs-extra');

const directories = [
    'fonts',
    'icons',
    'images',
    'styles'
];

// Create symlinks from node_modules -> /your/public/folder/

directories.forEach((folderName) => {
    const srcPath = path.resolve(__dirname, `../node_modules/@salesforce-ux/design-system/assets/${folderName}`);

    // Choose the target path based on your project
    // Serve this up using your static web server
    const targetPath = path.resolve(__dirname, `public/css/lds/${folderName}`);

    fs.ensureSymlinkSync(srcPath, targetPath);
});
```

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

### Define Tabs Component PropTypes and Structure

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Configuration object for the Tabs component, including an example of the required child structure using TabsPanel.

```javascript
propTypes = {
	id: PropTypes.string,
	children: PropTypes.oneOfType([
		PropTypes.arrayOf(PropTypes.node),
		PropTypes.node,
		PropTypes.element,
	]).isRequired,
	className: PropTypes.oneOfType([
		PropTypes.array,
		PropTypes.object,
		PropTypes.string,
	]),
	defaultSelectedIndex: PropTypes.number,
	onSelect: PropTypes.func,
	variant: PropTypes.oneOf(['default', 'scoped']),
	selectedIndex: PropTypes.number,
}
```

```jsx
<Tabs>
	<TabsPanel label="Tab 1">
		<div>
			<h2 className="slds-text-heading_medium">This is my tab 1 contents!</h2>
			<p>They show when you click the first tab.</p>
		</div>
	</TabsPanel>
	<TabsPanel label="Tab 2">
		<div>
			<h2 className="slds-text-heading_medium">This is my tab 2 contents!</h2>
			<p>They show when you click the second tab.</p>
		</div>
	</TabsPanel>
</Tabs>
```

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

### Manual Release Scripts

Source: https://github.com/salesforce/design-system-react/blob/master/docs/release.md

Scripts to automate version bumping and tagging on the upstream repository.

```bash
npm run release:patch
```

```bash
npm run release:minor
```

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

### Welcome Mat Component

Source: https://github.com/salesforce/design-system-react/blob/master/components/comments.txt

A Welcome Mat component that presents a series of unordered items, allowing users to click on them to learn about a specific topic.

```jsx
<WelcomeMat>
  <WelcomeMatItem>
    <a href="#">Item 1</a>
  </WelcomeMatItem>
  <WelcomeMatItem>
    <a href="#">Item 2</a>
  </WelcomeMatItem>
</WelcomeMat>
```

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

### WelcomeMat Component API

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Defines the properties for the WelcomeMat component, used for onboarding and informational modals.

```APIDOC
## WelcomeMat Component API

### Description
Properties for the WelcomeMat component.

### Properties
#### className (oneOfType [array, object, string]) - Optional - CSS class names to be added to the container element.
#### id (string) - Optional - HTML id for component.
#### isOpen (boolean) - Optional - Whether the modal is open.
#### labels (shape) - Optional - **Weclome Mat labels for internationalization**. This object is merged with the default props object on every render.
  * `title` (string) - Title for the Welcome Mat
  * `description` (string) - Label for the radio input
  * `unitsCompletedAfter` (string) - Label for the radio input
#### variant (oneOf [steps, info-only, splash, trailhead-connected]) - Optional - Variant of the WelcomeMat.
#### onRenderInfoActions (func) - Optional - Link to learn more button.
#### onRequestClose (func) - Optional - Callback to fire when modal is dismissed.
#### infoBadge (node) - Optional - Accepts a single WelcomeMatInfoBadge component, to be used with the trailhead variant.
#### doNotShowAgainCheckbox (node) - Optional - Do not show again checkbox for info-only variant.
```

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

### Import Dependencies for Mocha Tests

Source: https://github.com/salesforce/design-system-react/blob/master/tests/README.md

Imports necessary libraries for React component testing, including React, PropTypes, Chai, and Enzyme helpers. Ensure these dependencies are installed.

```javascript
// Import your external dependencies
import React from 'react';
import PropTypes from 'prop-types';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';

/* Enzyme Helpers that can mount and unmount React component instances to
 * the DOM and set `this.wrapper` and `this.dom` within Mocha's `this`
 * context [full source here](tests/enzyme-helpers.js). `this` can
 * only be referenced if inside `function () {}`.
 */
import { mountComponent, unmountComponent } from '../../../tests/enzyme-helpers';

// Import your internal dependencies (for example):
import Tree from '../../components/tree';

/* Set Chai to use chaiEnzyme for enzyme compatible assertions:
 * https://github.com/producthunt/chai-enzyme
 */
chai.use(chaiEnzyme());
```

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

### Truncate User Input in Controlled Component

Source: https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md

This example demonstrates how to truncate user input to a maximum of 140 characters within a controlled component's `onChange` handler.

```javascript
handleChange = (event) => {
	this.setState({ value: event.target.value.substr(0, 140) });
};

```

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

### Webpack Configuration for ES6 Modules

Source: https://github.com/salesforce/design-system-react/blob/master/docs/getting-started.md

Configure your Webpack setup to transpile Design System React components. Ensure the `babel-loader` includes the `@salesforce/design-system-react` directory within `node_modules`.

```javascript
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: {
		bundle: './public/src/index.js'
	},
	resolve: {
		extensions: [
			'',
			'.js',
			'.jsx'
		]
	},
	devtool: 'source-map',
	output: {
		path: path.join(__dirname, 'build'),
		filename: '[name].js',
		publicPath: '/'
	},
	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				loaders: ['babel'],
				include: [
					path.join(__dirname, 'public/src'),
					path.join(__dirname, 'node_modules/@salesforce/design-system-react'),
				]
			},
			{
				test: /\.css$/,
				loader: ExtractTextPlugin.extract(
					'style-loader',
					'css-loader?url=false&outputStyle=expanded&sourceMap=true&sourceMapContents=true'
				)
			},
			{
				test: /\.(svg|gif|jpe?g|png)$/,
				loader: 'url-loader?limit=10000'
			},
			{
				test: /\.(eot|woff|woff2|ttf)$/,
				loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
			}
		]
	},
	plugins: [
		new webpack.DefinePlugin({
			'process.env': { NODE_ENV: JSON.stringify('production') }
		}),
		new ExtractTextPlugin('[name].css')
	]
};
```

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

### Recommended Usage with ES6 Modules

Source: https://github.com/salesforce/design-system-react/blob/master/docs/README-dist.md

Recommended for environments with correct Babel presets. This syntax allows for ES6 module benefits like tree-shaking. Not compatible with create-react-app if node_modules are not transpiled.

```javascript
import Button from '@salesforce/design-system-react/components/button';

<Button label="Hello Button" />
```

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

### Use Functional Programming for Data Transformation

Source: https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md

Prefer functional methods like filter and map over imperative loops for data manipulation. This example demonstrates extracting kitten names from a collection.

```javascript
const getKittenNames = (cats) => cats.filter(isKitten).map(getName)
```

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

### Configure Icon Path for Public Serving

Source: https://github.com/salesforce/design-system-react/blob/master/README.md

Use IconSettings to define the base path for icons in your React render tree. Ensure the server is configured to serve these static assets.

```javascript
import IconSettings from '@salesforce/design-system-react/components/icon-settings';

ReactDOM.render(
  <IconSettings iconPath="/assets/icons">
    <MyApp />
  </IconSettings>,
  document.getElementById('app')
)

// `/assets/icons` will be prepended to `/standard-sprite/svg/symbols.svg#account` within the SVG path
<svg aria-hidden="true" class="slds-icon">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
```

```javascript
// ExpressJS example
app.use('/assets/icons', express.static('node_modules/@salesforce-ux/design-system/assets/icons/'));
```

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

### Import Components

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app.md

Use named imports to bring components into your application.

```javascript
import { Button, IconSettings } from '@salesforce/design-system-react';
```

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

### Datepicker Parser Function Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Provides a custom parser function for the Datepicker component. It's recommended to use external libraries like MomentJS for robust date parsing and internationalization. The default parser is not suitable for production.

```javascript
parser(str) {
  return new Date(str);
}
```

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

### Configure Salesforce Icon Path

Source: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md

Wrap your application's root component with `IconSettings` in `index.js` to set the correct path for Salesforce icons.

```javascript
import IconSettings from '@salesforce/design-system-react/components/icon-settings';


<IconSettings iconPath="/icons">
...
</IconSettings>
```

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

### Configure ESLint Plugin

Source: https://github.com/salesforce/design-system-react/blob/master/eslint-plugin/README.md

Add the plugin to your .eslintrc configuration file.

```json
{
	"plugins": ["@salesforce/eslint-plugin-slds-react"]
}
```

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

### Card Component with DataTable and Filter

Source: https://context7.com/salesforce/design-system-react/llms.txt

Use the Card component to group related information. This example demonstrates a card with a header, icon, actions, filter, footer, and a DataTable in its body. Ensure IconSettings is used to provide the icon path.

```jsx
import React from 'react';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
import Card from '@salesforce/design-system-react/components/card';
import CardFilter from '@salesforce/design-system-react/components/card/filter';
import Icon from '@salesforce/design-system-react/components/icon';
import Button from '@salesforce/design-system-react/components/button';
import DataTable from '@salesforce/design-system-react/components/data-table';
import DataTableColumn from '@salesforce/design-system-react/components/data-table/column';

class CardExample extends React.Component {
  state = {
    items: [
      { id: '1', name: 'Cloudhub', website: 'cloudhub.com' },
      { id: '2', name: 'Acme', website: 'acme.com' },
    ],
  };

  render() {
    return (
      <IconSettings iconPath="/assets/icons">
        {/* Basic card with DataTable */}
        <Card
          id="card-example"
          heading="Accounts"
          icon={<Icon category="standard" name="account" size="small" />}
          headerActions={
            <Button label="New" onClick={() => console.log('New clicked')} />
          }
          filter={
            <CardFilter
              placeholder="Filter Accounts"
              onChange={(event) => console.log('Filter:', event.target.value)}
            />
          }
          footer={
            <a href="#" onClick={(e) => e.preventDefault()}>
              View All
            </a>
          }
        >
          <DataTable items={this.state.items} id="card-datatable">
            <DataTableColumn label="Name" property="name" />
            <DataTableColumn label="Website" property="website" />
          </DataTable>
        </Card>

        {/* Empty state card */}
        <Card
          id="card-empty"
          heading="Contacts"
          icon={<Icon category="standard" name="contact" size="small" />}
          empty
        />
      </IconSettings>
    );
  }
}

export default CardExample;

```

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

### MenuDropdown Options Search Entity Example

Source: https://github.com/salesforce/design-system-react/blob/master/components/propTypes.txt

Defines the structure for an item object in the dropdown menu's 'optionsSearchEntity' array. Similar to 'optionsAddItem', it requires an 'id' and can include an 'icon' and a 'label'. The 'label' can be a function that receives 'inputValue' to customize the displayed text.

```javascript
{
	id: '1',
	icon: (
		<Icon
			assistiveText={{ label: 'Add in Accounts' }}
			size="x-small"
			category="utility"
			name="search"
		/>
	),
	label: (searchTerm) => {
		return `${searchTerm} in Accounts`;
	},
}
```