open-index/open-npm huggingface dataset:
npm package: @gsa-tts/forms-design
Description: This package encapsulates all the design components used in Forms Platform frontend applications.
Latest version: 0.1.2

# @gsa-tts/forms-design

This package encapsulates all the design components used in Forms Platform frontend applications.

This includes:

- USWDS themed stylesheet
- React component library
- Storybook stories

See relevant ADRs:

- [documents/adr/0007-initial-css-strategy](../../documents/adr/0007-initial-css-strategy.md)
- [documents/adr/0009-design-assets-workflow.md](../../documents/adr/0009-design-assets-workflow.md)

This package as a special watch task. If your dev server is running already (`pnpm dev`), you can open a separate terminal and run `pnpm test:watch` and any changes to the *.{ts,tsx} files in this package will run the test suite. If you'd like to run from the project root directory, you would run `pnpm --filter @gsa-tts/forms-design test:watch`.
npm package: @gsa-tts/forms-infra-aws-cdk
Description: This package implements an AWS CDK project, including a build process to compile a Cloudformation template.
Latest version: 0.1.12

# forms-infra-aws-cdk

This package implements an AWS CDK project, including a build process to compile a Cloudformation template.

## Commands

### Build

Before creating or updating a stack, you must first build the stack.

```bash
pnpm build
```

### Create stack

```bash
#forms-apply-stack -r <region> -e <environment-identifier>
cd node_modules/@gsa-tts/forms-infra-aws-cdk
pnpm cdk deploy \
  --ci FormsPlatformStack \
  --parameters "tagOrDigest=${TAG_OR_DIGEST}" \
  --parameters "environment=${ENVIRONMENT}" \
  --parameters "repositoryName=${REPO_NAME}"
```

### Deploy

To deploy a new image, you must publish to ECR.
npm package: @gsa-tts/forms-infra-cdktf
Description: 10x Forms Platform Terraform CDK
Latest version: 0.1.12

# @gsa-tts/forms-infra

Infrastructure-as-code (IaC) for the project, implemented with [Terraform CDK](https://github.com/hashicorp/terraform-cdk).

## Deployment steps

To prepare for deployment, first build the project:

```bash
pnpm build
```

To perform a deployment, ensure the current environment is configured with credentials for AWS and Cloud.gov (see below for details). Then, you may deploy with:

```bash
pnpm deploy
```

## Cloud services

### AWS

The Terraform state is maintained in an AWS S3 bucket. Also, some experimental integrations have at times been deployed to AWS. In order to apply the Terraform, you must have appropriate AWS credentials in your current environment.

### Cloud.gov

The project team intends to default to deploying infrastructure to Cloud.gov. The

Interacting with cloud.gov requires login via the Cloudfoundry CLI:

```bash
cf login -a api.fr.cloud.gov --sso
```

cloud.gov operations may be bootstrapped with `./scripts/cloud.sh`.

```bash
./scripts/cloud.sh -h
```

To initialize a deployment space and create a service account for deployments:

```bash
./scripts/cloud.sh setup -o <organization-name> -s <space-name>
```

To view the credentials:

```bash
./scripts/cloud.sh show -o <organization-name> -s <space-name>
```

To export the deploy user's credentials to your environment:

```bash
source ./scripts/cloud.sh export -o <organization-name> -s <space-name>
```

Once the credentials are exported to the environment, you may utilize them via the Terraform CDK project.
npm package: @gsa-tts/graymatter-eslint
Description: ## Package Responsibilities
Latest version: 0.0.2

# @gsa-tts/graymatter-eslint

## Package Responsibilities

The GrayMatter ESLint Configuration package (`@gsa-tts/graymatter-eslint`) provides shared ESLint configurations. It ensures consistent code quality and style across all applications and packages.

### Primary Responsibilities:

- Define and maintain shared ESLint configurations
- Enforce consistent code style and quality standards
- Integrate with other tools like Prettier and TypeScript
- Provide specialized configurations for different frameworks (Svelte, Astro)
- Reduce duplication of linting configuration

### Package Boundaries:

- **SHOULD** contain ESLint configuration files and rules
- **SHOULD** integrate with TypeScript for type-aware linting
- **SHOULD** be framework-aware (support Svelte, Astro, etc.)
- **SHOULD NOT** contain application code or business logic
- **SHOULD NOT** depend on application packages
- **SHOULD NOT** include project-specific overrides (these belong in the consuming projects)

## Usage

### Installing

```bash
pnpm add -D @gsa-tts/graymatter-eslint
```

### Basic Configuration

Create an `eslint.config.mjs` file in your project:

```javascript
import { config } from '@gsa-tts/graymatter-eslint';

export default config;
```

### With Project-Specific Overrides

```javascript
import { config as baseConfig } from '@gsa-tts/graymatter-eslint';

export default [
  ...baseConfig,
  {
    // Project-specific overrides
  }
];
```

## Features

- TypeScript integration
- Svelte support
- Prettier integration
- Accessibility rules
- Best practices enforcement
- Consistent code style
npm package: @gsa-tts/graymatter-style-tokens
Description: ## Package Responsibilities
Latest version: 0.3.17

# @gsa-tts/graymatter-style-tokens

## Package Responsibilities

The GrayMatter Style Tokens package (`@gsa-tts/graymatter-style-tokens`) is responsible for defining and managing foundational design tokens. These are named entities that store visual design attributes such as colors, typography, spacing, and more.

### Primary Responsibilities:

- Define and maintain design tokens (colors, typography, spacing, etc.)
- Generate platform-specific token formats
- Provide a single source of truth for design values
- Ensure design consistency across applications
- Bridge the gap between design tools (like Figma) and code

### Package Boundaries:

- **SHOULD** contain design token definitions
- **SHOULD** contain token transformation and build logic
- **SHOULD** export tokens in various formats (CSS, JS, JSON)
- **SHOULD NOT** contain UI components or application logic
- **SHOULD NOT** contain styling implementation (CSS/SCSS)
- **SHOULD NOT** depend on UI components or application packages

## Token Categories

The style tokens package includes the following categories of tokens:

- **Colors**: Brand colors, UI colors, semantic colors
- **Typography**: Font families, font sizes, font weights, line heights
- **Spacing**: Margin and padding values
- **Breakpoints**: Screen size breakpoints for responsive design
- **Borders**: Border widths, radii, and styles
- **Shadows**: Box shadows for different elevation levels
- **Z-indices**: Z-index values for layering elements

## Development

### Adding or Modifying Tokens

1. Edit the token source files in the `src` directory
2. Run `pnpm build` to generate the token files
3. Commit the changes

### Building

```bash
pnpm build
```

This will:
1. Compile the TypeScript configuration
2. Run Style Dictionary to transform the tokens
3. Generate the output files in various formats
npm package: @gsaes/ui
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.9

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
    tsconfigRootDir: __dirname,
  },
}
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list