### Setting NEXT_PUBLIC_BASE_URL for Local Development (.env)

Source: https://github.com/radzionc/guitar/blob/main/product/app/Readme.md

This snippet shows an example of setting the `NEXT_PUBLIC_BASE_URL` environment variable in the `.env.development.local` file for running the application locally. This variable specifies the base URL of the application.

```dotenv
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```

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

### Initializing and Applying Terraform Configuration (sh)

Source: https://github.com/radzionc/guitar/blob/main/product/infra/app/README.md

Provides the shell commands to initialize Terraform, configuring the remote state backend using environment variables, and then applying the infrastructure changes defined in the Terraform configuration files.

```sh
terraform init \
  -backend-config="bucket=${TF_VAR_remote_state_bucket}" \
  -backend-config="key=${TF_VAR_remote_state_key}" \
  -backend-config="region=${TF_VAR_remote_state_region}"

terraform apply
```

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

### Creating Persistent State Hook and Manager

Source: https://github.com/radzionc/guitar/blob/main/lib/ui/README.md

Set up a `persistentState` file to manage state persistence using either `LocalStorage` (in browser) or `TemporaryStorage` (server-side). This snippet demonstrates creating a storage instance and generating `usePersistentState` hook and `managePersistentState` manager functions.

```tsx
import { TemporaryStorage } from '@lib/ui/state/TemporaryStorage'
import { LocalStorage } from '@lib/ui/state/LocalStorage'
import { createPersistentStateHook } from '@lib/ui/state/createPersistentStateHook'
import { createPersistentStateManager } from '@lib/ui/state/createPersistentStateManager'

export enum PersistentStateKey {
  ThemePreference = 'themePreference',
}

const persistentStorage =
  typeof window !== 'undefined'
    ? new LocalStorage<PersistentStateKey>()
    : new TemporaryStorage<PersistentStateKey>()

export const usePersistentState =
  createPersistentStateHook<PersistentStateKey>(persistentStorage)

export const managePersistentState =
  createPersistentStateManager<PersistentStateKey>(persistentStorage)
```

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

### Configuring NextJS for Styled Components and UI Package

Source: https://github.com/radzionc/guitar/blob/main/lib/ui/README.md

Update `next.config.js` to enable the styled-components compiler option and include the `@lib/ui` package in `transpilePackages`. This ensures that Next.js correctly processes styled-components and compiles the UI package from the monorepo.

```javascript
const nextConfig = {
  // ...
  compiler: {
    styledComponents: true,
  },
  transpilePackages: ['@lib/ui'],
}
```

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

### Implementing ThemeProvider and GlobalStyle in React App

Source: https://github.com/radzionc/guitar/blob/main/lib/ui/README.md

Wrap your application with `DarkLightThemeProvider` to manage theme state, often using the `usePersistentState` hook to store user preference. Include the `GlobalStyle` component to apply base styles like font family and custom scrollbars across the application.

```tsx
import { GlobalStyle } from '@lib/ui/css/GlobalStyle'
import { Inter } from 'next/font/google'
import { PersistentStateKey, usePersistentState } from '@product/ui-demo/state/persistentState'
import { ThemePreference } from '@lib/ui/theme/ThemePreference'
import { DarkLightThemeProvider } from '@lib/ui/theme/DarkLightThemeProvider'

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '500', '600', '800'],
})

export const App = () => {
  const [theme, setTheme] = usePersistentState<ThemePreference>(
    PersistentStateKey.ThemePreference,
    'system',
  )

  return (
    <DarkLightThemeProvider value={theme} onChange={setTheme}>
      <GlobalStyle fontFamily={inter.style.fontFamily} />
      // ...
    </DarkLightThemeProvider>
  )
}
```

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

### Integrating RadzionKit Theme with Styled Components

Source: https://github.com/radzionc/guitar/blob/main/lib/ui/README.md

Add a `styled.d.ts` file to your project to extend styled-components' `DefaultTheme` interface with the `Theme` type from `@lib/ui`. This provides TypeScript type safety and autocompletion for the theme object used within styled components.

```typescript
import 'styled-components';
import { Theme } from '@lib/ui/theme/Theme';

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}
```

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

### Setting AWS and Terraform Environment Variables (sh)

Source: https://github.com/radzionc/guitar/blob/main/product/infra/app/README.md

Defines necessary environment variables for AWS authentication (access keys, region) and Terraform configuration (S3 bucket, domain, hosted zone, certificate ARN, and remote state backend details). These variables are typically set before running Terraform commands.

```sh
export AWS_SECRET_ACCESS_KEY=
export AWS_ACCESS_KEY_ID=
export AWS_REGION=

export TF_VAR_bucket_name=
export TF_VAR_domain=
export TF_VAR_hosted_zone_id=
export TF_VAR_certificate_arn=

export TF_VAR_remote_state_bucket=
export TF_VAR_remote_state_key=
export TF_VAR_remote_state_region=
```

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

### Extending StyledComponentsDocument for NextJS

Source: https://github.com/radzionc/guitar/blob/main/lib/ui/README.md

For Next.js projects, extend `StyledComponentsDocument` in `_document.tsx` to enable styled-components support within the application's server-side rendering context. This is a necessary step for the `@lib/ui` package which relies on styled-components.

```tsx
import { StyledComponentsDocument } from '@lib/next-ui/StyledComponentsDocument'

class MyDocument extends StyledComponentsDocument {
  // ...
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.