### Snackbar v7 Implementation Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates a v7 Snackbar component, adopting the new pattern of passing message and actions via the `children` object.

```tsx
<Snackbar open={true}>
	{{ 
		message: 'Snackbar',
		actions: 'Actions'
	}}
</Snackbar>
```

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

### TabController v6 Migration Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates a v6 TabController with multiple `<Tab>` widgets, showcasing how active index and tab closing were managed by the parent component.

```tsx
import { tsx, create } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';
import Set from '@dojo/framework/shim/Set';
import TabController from '@dojo/widgets/tab-controller';
import Tab from '@dojo/widgets/tab';

const factory = create();

export default factory(function Closeable() {

	const closed = icache.getOrSet('closed', new Set<string>());
	const activeIndex = icache.getOrSet('activeIndex', 2);

	return (
		<TabController
			activeIndex={activeIndex}
			onRequestTabClose={(index, key) => {
				icache.set('closed', new Set([...closed, key]));
			}}
			onRequestTabChange={(index, key) => {
				icache.set('activeIndex', index);
			}}
		>
			{!closed.has('tab0') && (
				<Tab key="tab0" closeable={true} label="Tab One">
					Hello Tab One
				</Tab>
			)}
			<Tab key="tab1" disabled={true} label="Tab Two">
				Hello Tab Two
			</Tab>
			<Tab key="tab2" label="Tab Three">
				Hello Tab Three
			</Tab>
			<Tab key="tab3" label="Tab Four">
				Hello Tab Four
			</Tab>
		</TabController>
	);
});
```

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

### List Widget v7 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the usage of the List widget in v7, utilizing `createResource` and `createMemoryTemplate` for data handling. It shows how to configure the widget with an initial value, resource data, and an onValue callback.

```tsx
const animals = [{ value: 'cat' }, { value: 'dog' }, { value: 'mouse' }, { value: 'rat' }];
const resource = createResource(createMemoryTemplate());

<List
	widgetId='listbox1'
	initialValue='cat'
	resource={{ resource: () => resource, data: animals }}
	transform={defaultTransform}
	onValue={(value: string) => {
		icache.set('value', value);
	}}
/>
```

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

### Slider v6 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the usage of the Slider component in Dojo v6, including configuration for min, max, step, and event handlers for output and change.

```tsx
<Slider
	label="How much do you like tribbles?"
	min={0}
	max={100}
	output={(value: number) => {
		if (value < 20) {
			return 'I am a Klingon';
		}
		if (value < 40) {
			return 'Tribbles only cause trouble';
		}
		if (value < 60) {
			return 'They\'re kind of cute';
		}
		if (value < 80) {
			return 'Most of my salary goes to tribble food';
		} else {
			return 'I permanently altered the ecology of a planet for my tribbles';
		}
	}}
	step={1}
	value={icache.get('tribbleValue')}
	onChange={(value) => {
		icache.set('tribbleValue', value);
	}}
	onInput={(value) => {
		icache.set('tribbleValue', value);
	}}
/>
```

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

### Slider v7 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Illustrates the Slider component in Dojo v7, featuring a slot-based approach for label and output, and using initialValue for state management.

```tsx
<Slider
	initialValue={0}
	min={0}
	max={100}
	step={1}
>
	{{ 
		label: 'How much do you like tribbles?',
		output: (value: number) => {
			if (value < 20) {
				return 'I am a Klingon';
			}

			if (value < 40) {
				return 'Tribbles only cause trouble';
			}

			if (value < 60) {
				return 'They\'re kind of cute';
			}

			if (value < 80) {
				return 'Most of my salary goes to tribble food';
			} else {
				return 'I permanently altered the ecology of a planet for my tribbles';
			}
		}
	}}
</Slider>
```

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

### AccordionPane Migration Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the migration of an AccordionPane component from Dojo Widgets v6 to v7, showcasing changes in event handling and child rendering.

```jsx
<AccordionPane
	onRequestClose={key => icache.set('keys', icache.get('keys').filter(k !== key))}
	onRequestOpen={key => icache.set('keys', [...icache.get('keys'), key])}
	openKeys={icache.get('keys')}
>
	<TitlePane
		title="Title"
		key="pane"
	>
		Content
	</TitlePane>
</AccordionPane>
```

```jsx
<Accordion>
	{(onOpen, onClose, open) => ([
		<Pane
			key="pane"
			onOpen={onOpen('pane')}
			onClose={onClose('pane')}
			open={open('pane')}
		>
		{{
			title: 'Title',
			content: 'Content'
		}}
		</Pane>
	])}
</Accordion>
```

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

### Switch v6 Migration Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Illustrates a v6 Checkbox component configured as a toggle, demonstrating the properties that have changed or been removed in the v7 Switch widget.

```tsx
<Checkbox
	checked={icache.get('checked')}
	label="On/Off"
	mode={Mode.toggle}
	onChange={this.onChange}
/>
```

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

### Snackbar v6 Implementation Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Shows a v6 Snackbar component utilizing the `messageRenderer` and `actionsRenderer` properties for custom content.

```tsx
<Snackbar
	messageRenderer={() => 'Snackbar'}
	actionsRenderer={() => 'Actions'}
	open={true}
/>
```

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

### Label Widget v6 Migration Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Illustrates the usage of the Label widget in v6, specifically demonstrating the 'invalid' property to indicate an invalid state.

```tsx
<Label invalid={true}>Invalid Label</Label>
```

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

### Dojo Widget Example Configuration

Source: https://github.com/dojo/widgets/blob/master/README.md

An example of the configuration structure for adding new widget examples. It specifies the filename, overview example, and additional examples with titles and descriptions.

```js
{
    'text-input': {
        filename: 'index',
        overview: {
            example: {
                module: BasicCheckbox,
                filename: 'Basic'
            }
        },
        examples: [
            {
                title: 'The example title',
                description: 'Optional example description',
                module: OtherCheckbox,
                filename: 'Other'
            }
        ]
    }
}
```

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

### Install and Build Dojo Widgets

Source: https://github.com/dojo/widgets/blob/master/README.md

Instructions for setting up the Dojo widgets project locally. This involves cloning the repository, installing dependencies using npm, and building the project.

```bash
git clone <repository-url>
npm install
npm run build
```

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

### Migrate TimePicker: v6 to v7 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the migration of a TimePicker component from Dojo v6 to v7. Highlights changes in property names like `start`/`end` to `min`/`max` and how options are now configured internally.

```tsx
<TimePicker
	start="12:00:00"
	end="12:00:59"
	step={1}
	onValue={(value) => icache.set('value', value)}
	label="Time: "
/>
```

```tsx
<TimePicker min="12:00:00" max="12:00:59" step={1} onValue={(value) => icache.set('value', value)>
	{{ label: 'Time: ' }}
</TimePicker>
```

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

### Install @dojo/widgets Package

Source: https://github.com/dojo/widgets/blob/master/src/examples/README.md

Installs the @dojo/widgets package using npm. This command downloads all available Dojo widgets to your project, making them available for import.

```bash
npm install @dojo/widgets
```

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

### Label Widget v7 Migration Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Shows the updated usage of the Label widget in v7, demonstrating the 'valid' property with a 'false' value to represent an invalid state, reflecting the API change from v6.

```tsx
<Label valid={false}>Invalid Label</Label>
```

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

### Migrate Tooltip: v6 to v7 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the migration of the Tooltip widget from Dojo v6 to v7. Explains the shift from separate `content` property and `DNode` children to a unified child renderer object for both trigger and content.

```tsx
<Tooltip content="This tooltip shows on click" open={icache.get('show')}>
	<button
		onclick={() => {
			icache.set('show', !icache.get('show'));
		}}
	>
		Toggle Tooltip
	</button>
</Tooltip>
```

```tsx
<Tooltip open={icache.get('show')}>
	{{
		content: 'This tooltip shows on click',
		trigger: (
			<button
				onclick={() => {
					icache.set('show', !icache.get('show'));
				}}
			>
				Toggle Tooltip
			</button>
		)
	}}
</Tooltip>
```

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

### Switch v7 Migration Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Shows the v7 Switch component, migrating from the v6 Checkbox toggle. It uses the `value` prop and `onValue` handler, with the label provided via children.

```tsx
<Switch
	value={icache.get('checked')}
	onValue={(value) => {
		icache.set('checked', true);
	}}
>
	{{ label: 'On/Off' }}
</Switch>
```

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

### TabController Example (tsx)

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the usage of the Dojo TabController widget in version 7. It shows how to define tabs with various properties like `closeable` and `disabled`, and how to render associated `TabContent` for each tab.

```tsx
import { tsx, create } from '@dojo/framework/core/vdom';
import TabController, { TabItem } from '@dojo/widgets/tab-controller';
import TabContent from '@dojo/widgets/tab-controller/TabContent';

const factory = create();

export default factory(function Closeable() {
	const tabs = [
		{ closeable: true, id: 'tab0', label: 'Tab One' },
		{ disabled: true, id: 'tab1', label: 'Tab Two' },
		{ id: 'tab2', label: 'Tab Three' },
		{ id: 'tab3', label: 'Tab Four' }
	];


	return (
		<TabController initialId="tab2" tabs={tabs}>
			{(tabs: TabItem[], isActive: (id: string) => boolean, isClosed: (id: string) => boolean) => [
				<TabContent key="tab0" active={isActive('tab0')} closed={isClosed('tab0')}>Hello Tab One</TabContent>,
				<TabContent key="tab1" active={isActive('tab1')} closed={isClosed('tab1')}>Hello Tab Two</TabContent>,
				<TabContent key="tab2" active={isActive('tab2')} closed={isClosed('tab2')}>Hello Tab Three</TabContent>,
				<TabContent key="tab3" active={isActive('tab3')} closed={isClosed('tab3')}>Hello Tab Four</TabContent>
			]}
		</TabController>
	);
});
```

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

### Install @dojo/widgets Package

Source: https://github.com/dojo/widgets/blob/master/README.md

Installs the @dojo/widgets package using npm. This command downloads all pre-built Dojo widgets into your project, making them available for import and use.

```bash
npm install @dojo/widgets
```

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

### Dojo Header (formerly Toolbar) Migration v6 to v7

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Details the renaming of the Dojo Toolbar widget to Header and outlines changes in its properties and behavior for v7. Includes migration examples comparing v6 and v7 implementations.

```APIDOC
Dojo Header (formerly Toolbar) Widget API Changes (v6 to v7):

Renamed to `Header`.

Property Changes:
- `sticky?: boolean`
  - Added: This property fixes the header to the top of a view.
- `children: HeaderChildren`
  - Changed: This property no longer accepts `DNode` actions. It now accepts a child renderer object, used to set leading, trailing, title, and actions.
- `align?: Align`
  - Removed: Alignment functionality is no longer supported.
- `collapseWidth?: number`
  - Removed: Collapse functionality is no longer supported.
- `onCollapse?(collapsed: boolean): void`
  - Removed: Collapse functionality is no longer supported.
- `heading?: string`
  - Removed: The header title is now set using a child renderer.

Changes in Behavior:
- The `Header` now uses a child renderer object to determine its leading content, trailing content, title, and action items. This means an object is passed as the widget's only child with keys for `leading`, `trailing`, `title`, and `actions`, each returning elements to render.
- The `Header` no longer auto-collapses action items into a `SlidePane`. Instead, media-based middleware can be used to responsively change the `Header` out for a different widget depending on available space.

Migration Example (v6 to v7):

v6 Example:
```tsx
<Toolbar
	align={Align.right}
	collapseWidth={700}
	heading="Title"
	onCollapse={() => { console.log('collapsed'); }}
>
	<a href="#foo">Foo</a>
	<a href="#bar">Bar</a>
	<a href="#baz">Baz</a>
</Toolbar>
```

v7 Example:
```tsx
<Header>
	{{
		title: 'Title',
		actions: [
			<Link to="#foo">Foo</Link>,
			<Link to="#bar">Bar</Link>,
			<Link to="#baz">Baz</Link>
		]
	}}
</Header>
```
```

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

### Dojo Class-based Widget with Resource and Select

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates how to use the `ResourceWrapper` component within a class-based Dojo widget (`App`) to integrate a `Select` widget. This example shows setting up the registry, theme injection, and passing resource data to the `Select` component.

```tsx
import renderer, { w, v } from '@dojo/framework/core/vdom';
import { uuid } from '@dojo/framework/core/util';
import WidgetBase from '@dojo/framework/core/WidgetBase';
import watch from '@dojo/framework/core/decorators/watch';
import Select from '@dojo/widgets/select';
import theme from '@dojo/widgets/theme/dojo';
import Registry from '@dojo/framework/core/Registry'
import { registerThemeInjector } from '@dojo/framework/core/mixins/Themed';
import { createMemoryResourceTemplate } from '@dojo/framework/core/middleware/resources';
import ResourceWrapper from './ResourceWrapper';

interface Animals {
    value: string;
}

const template = createMemoryResourceTemplate<Animals>()

class App extends WidgetBase {
    @watch()
    private _selectedValue = '';

    private _id = uuid();

    private _onValue = (value: string) => {
        this._selectedValue = value;
    }

    render() {
        return (
            v('div', [
                w(ResourceWrapper, {}, [(resource) => {
                    return w(Select, {
                        resource: resource({ template,  initOptions: { id: this._id, data: [{ value: 'panda'} ] }}),
                        onValue: this._onValue
                    })
                }]),
                v('div', [this._selectedValue])
            ])
        );
    }
}

const registry = new Registry();
registerThemeInjector(theme, registry)

const r = renderer(() => w(App, {}));
r.mount({ registry });
```

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

### Dojo Checkbox v7 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates the usage of the Dojo Checkbox widget in v7. It utilizes the `icache` middleware for managing the checkbox's checked state and handling user interactions via the `onValue` callback.

```tsx
import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';
import Checkbox from '@dojo/widgets/checkbox';

const factory = create({ icache });

export default factory(function CheckboxExample({ middleware: { icache } }) {
	const checkboxStates = icache.getOrSet('checkboxStates', {});
	return [
		<Checkbox
			checked={icache.get('isChecked0')}
			onValue={(checked) => {
				icache.set('isChecked0', checked);
			}}
		>
			v7 Checkbox Example
		</Checkbox>,
		// other checkboxes...
	];
});
```

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

### Dojo Dialog Widget API Changes and Migration v6 to v7

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Details property modifications, removed properties, and behavioral changes for the Dojo Dialog widget when migrating from v6 to v7. It also provides side-by-side code examples illustrating the migration process.

```APIDOC
Dojo Dialog Widget API Changes (v6 to v7):

Property Changes:
- `title?: DNode;`
  - Changed: Title is now specified in the child function and not passed as a property.
- `modal?: boolean;`
  - Changed: The modal property is now only valid when role="dialog".
- `underlayEnterAnimation`
  - Removed: Replaced by theming `underlayEnter` class.
- `underlayExitAnimation`
  - Removed: Replaced by theming `underlayExit` class.
- `enterAnimation`
  - Removed: Replaced by theming `enter` class.
- `exitAnimation`
  - Removed: Replaced by theming `exit` class.

Changes in Behavior:
- Dialog contents, title, and actions are now specified via a child function. Previously, the title was specified via a property and the dialog contents were passed as the children of the Dialog. Dialog actions are nodes that appear below the dialog contents, like cancel / ok buttons.

Migration Example (v6 to v7):

v6 Example:
```tsx
<Dialog
    title='Basic Dialog'
    open={this._open}
    onRequestClose={() => {
        this._open = false;
        this.meta(Focus).set('button');
        this.invalidate();
    }}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque id purus ipsum. Aenean ac purus purus.
    Nam sollicitudin varius augue, sed lacinia felis tempor in.
</Dialog>
```

v7 Example:
```tsx
<Dialog open={isOpen} onRequestClose={() => icache.set('isOpen', false)}>
	{{
		title: 'Basic Dialog',
		content: (
			<virtual>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id
				purus ipsum. Aenean ac purus purus. Nam sollicitudin varius augue, sed
				lacinia felis tempor in.
			</virtual>
		)
	}}
</Dialog>
```
```

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

### CSS for Collapsing Header

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Provides CSS styles for the responsive header component. It defines flexbox layouts for header actions and collapsed actions, as well as padding for individual action links.

```css
.headerActions {
	display: flex;
	flex-direction: row;
}

.collapsedActions {
	display: flex;
	flex-direction: column;
}

.action {
	padding: 10px;
}
```

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

### Build Dojo Widget Documentation

Source: https://github.com/dojo/widgets/blob/master/README.md

Commands to build the widget documentation. The `docs` feature flag must be enabled during the build process. Includes options for building and serving documentation in watch mode.

```bash
npm run build:docs
npm run build:docs:dev
```

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

### Responsive Toolbar with Header and SlidePane

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Demonstrates responsive toolbar behavior using the Header and SlidePane widgets. It utilizes breakpoint and icache middleware to adapt the UI based on screen size, showing a collapsed menu on smaller screens and a full header on larger ones.

```tsx
import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '@dojo/framework/core/middleware/theme';
import breakpoint from '@dojo/framework/core/middleware/breakpoint';
import icache from '@dojo/framework/core/middleware/icache';
import { Header } from '@dojo/widgets/header';
import { SlidePane } from '@dojo/widgets/slide-pane';
import { Icon } from '@dojo/widgets/icon';
import * as css from './CollapsingHeader.m.css';

const factory = create({ theme, breakpoint, icache });
export default factory(function CollapsingHeader({ middleware: { theme, breakpoint, icache } }) {

	const size = breakpoint.get('root');
	const open = icache.getOrSet('open', false);
	const collapse = size && (size.breakpoint === 'SM' || size.breakpoint === 'MD');

	const appTitle = 'My App';
	const actions = (
		<virtual>
			<a classes={css.action}>foo</a>
			<a classes={css.action}>bar</a>
			<a classes={css.action}>baz</a>
		</virtual>
	);

	return (
		<div key='root' classes={[css.root, theme.variant()]}>
			<Header>{{ 
				title: appTitle,
				actions: !collapse && <div classes={css.headerActions}>{ actions }</div>,
				leading: collapse && 
					<button onclick={() => { icache.set('open', !open) }} type='button'>
						<Icon size='large' type='barsIcon' />
					</button>
			}}</Header>
			{collapse && 
				<SlidePane title={appTitle} open={open} onRequestClose={() => { icache.set('open', false)>>
					<div classes={css.collapsedActions}>
						{ actions }
					</div>				
				</SlidePane>
			}
		</div>
	);
});
```

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

### Migrate TitlePane: v6 to v7 Example

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Illustrates the migration of the TitlePane widget from Dojo v6 to v7. Shows changes in event handlers (`onRequestClose` to `onClose`) and how title/content are now managed via a child renderer object.

```tsx
<TitlePane
	title="Title"
	onRequestClose={() => icache.set('open', false)}
	onRequestOpen={() => icache.set('open', true)}
	open={icache.get('open')}
>
	Content
</TitlePane>
```

```tsx
<TitlePane>
	{{
		title: 'Title',
		content: 'Content'
	}}
</TitlePane>
```

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

### Dojo Widget Testing with Intern

Source: https://github.com/dojo/widgets/blob/master/README.md

Details on how to run tests for Dojo widgets. Tests must be written using the Intern framework with the Object test interface and Assert assertion interface, requiring 90% branch coverage.

```bash
npm run test
```

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

### TimePicker Property Changes (v6 to v7)

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Summarizes property changes for the Dojo TimePicker widget between v6 and v7. Notable updates include renaming of `start`/`end` to `min`/`max`, renaming `isOptionDisabled` to `timeDisabled`, and replacing the `label` property with child rendering.

```APIDOC
TimePicker:
  Properties:
    format?: '24' | '12';
      - Specifies whether the time is displayed in 24-hour or 12-hour format.
    onValidate?(valid: boolean, message: string): void;
      - Callback function invoked when validation occurs on the time picker.
    initialValue?: string;
      - Sets the initial value of the time picker. The widget is internally managed by default but can be controlled via `value` and `onValue`.

  Changed Properties:
    start -> min:
      - Renamed to `min` to align with native time picker conventions.
    end -> max:
      - Renamed to `max` to align with native time picker conventions.
    isOptionDisabled -> timeDisabled:
      - Renamed to `timeDisabled`.
      - Accepts a function with a single `Date` parameter. An option is disabled if the function returns a falsey value.
    label:
      - Replaced by child rendering for label content.
```

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

### Button Property Changes

Source: https://github.com/dojo/widgets/blob/master/docs/V7-Migration-Guide.md

Details property modifications for the Button widget during the v6 to v7 migration, specifically focusing on event handler changes.

```APIDOC
Button Property Changes:

Changed Properties:
- onDown?(): void;
  - Description: Handler for events triggered by pointer down. Replaces previous down event handlers.
```