open-index/open-npm huggingface dataset:
npm package: @optiaxiom/codemod
Description: Codemods for migrating Axiom Design System code
Latest version: 0.1.1

# @optiaxiom/codemod

Codemods for migrating Axiom Design System code.

## Installation

You don't need to install this package. Use `npx` to run it directly:

```bash
npx @optiaxiom/codemod <transform> <path>
```

## Available Transforms

### `flex-to-group`

Migrates from the deprecated `Flex` component to the new `Group` component.

**What it does:**

- Transforms `<Flex>` → `<Group flexDirection="column" gap="16">`
- Transforms `<Flex flexDirection="row">` → `<Group gap="16">`
- Transforms `<Flex flexDirection="column">` → `<Group flexDirection="column" gap="16">`
- Updates imports: `import { Flex }` → `import { Flex, Group }`
- Preserves all other props

**Usage:**

```bash
# Transform entire src directory
npx @optiaxiom/codemod flex-to-group src/

# Transform specific file
npx @optiaxiom/codemod flex-to-group src/components/MyComponent.tsx

# Dry run (preview changes without modifying files)
npx @optiaxiom/codemod flex-to-group src/ --dry
```

**Example transformations:**

Before:

```tsx
import { Flex } from "@optiaxiom/react";

function MyComponent() {
  return (
    <Flex>
      <div>1</div>
      <div>2</div>
    </Flex>
  );
}
```

After:

```tsx
import { Flex, Group } from "@optiaxiom/react";

function MyComponent() {
  return (
    <Group flexDirection="column" gap="16">
      <div>1</div>
      <div>2</div>
    </Group>
  );
}
```

Before:

```tsx
<Flex flexDirection="row" gap="8">
  <Button>Cancel</Button>
  <Button>Save</Button>
</Flex>
```

After:

```tsx
<Group gap="8">
  <Button>Cancel</Button>
  <Button>Save</Button>
</Group>
```

**Important: Manual verification required**

The codemod adds `flexDirection` and `gap` props at the **beginning** of the props list. This means they will be overridden if a spread comes after them. However, this may not always be the desired behavior.

```tsx
// Codemod output (props before spread - CAN be overridden by spread)
<Group flexDirection="column" gap="16" {...props}>

// If you DON'T want props to be overridable, move them after the spread manually
<Group {...props} flexDirection="column" gap="16">
```

After running the codemod, review components that accept `{...props}` spreads to ensure the prop order matches your intent:

- **Props before spread**: Can be overridden by the spread (default codemod behavior)
- **Props after spread**: Cannot be overridden, will always take precedence

## Options

- `--dry` - Dry run (preview changes without modifying files)
- `--help`, `-h` - Show help message

## Why Group?

The `Flex` component has non-standard defaults that cause confusion:

- Defaults to `flexDirection="column"` (NOT `"row"` like CSS)
- Defaults to `gap="16"` (automatic spacing)

The `Group` component uses CSS-standard defaults:

- Defaults to `flexDirection="row"` (horizontal layout, like CSS)
- No default gap (you must specify it explicitly)

See the [migration guide](https://optimizely-axiom.github.io/optiaxiom/guides/group-migration/) for more details.

## License

Apache-2.0
npm package: @optiaxiom/icons
Description: Material Symbols kit for use with the Optimizely Design System.
Latest version: 0.1.4

# Axiom Icons Library

Material Symbols kit for use with the Optimizely Design System.

## Getting Started

```sh
npm install @optiaxiom/icons
```

```tsx
import { IconDelete } from "@optiaxiom/icons";

function App() {
  return (
    <>
      <IconDelete />
      <IconDelete size="md" />
      <IconDelete filled />
    </>
  );
}
```

Check out our [Icons Guide](https://optimizely-axiom.github.io/optiaxiom/guides/icons) to learn more and explore all available icons.

## Contributing

### Adding new icons

1. Find the icon name on [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols)
2. Add the icon name to `icons.json` (use the snake_case name, e.g. `arrow_back`)
3. Run `npm run build` to fetch the SVGs and rebuild the package
4. Commit the updated `icons.json`, `src/index.ts`, and `svg/*.svg.d.ts`

### How it works

Icons are fetched directly from Google Fonts as SVGs using the following parameters:

- **Style:** Rounded
- **Weight:** 300
- **Grade:** 200
- **Optical size:** 40px

The SVG files are committed to the `svg/` directory. The `icons.json` file is the source of truth for which icons are included. At build time, a Rollup plugin converts each SVG into a React component.

See the [main repository](https://github.com/optimizely-axiom/optiaxiom) for general contribution guidelines.

## License

Apache-2.0
npm package: @optiaxiom/react
Description: A React implementation of Optimizely's Axiom Design System.
Latest version: 1.9.25

# Axiom

A React implementation of Optimizely's Axiom Design System.

## Installation

Install the package using your package manager of choice:

```sh
npm install @optiaxiom/react
```

## AI Assistant Integration

We provide an MCP server that enables AI assistants like Claude Code and Cursor to access accurate Axiom component metadata, design tokens, and usage examples:

```sh
npm install -g @optiaxiom/mcp
```

See the [MCP guide](https://optimizely-axiom.github.io/optiaxiom/guides/mcp) for setup instructions.

## Getting Started

### 1. Setup CSS Imports

Configure your bundler to handle CSS imports. For most modern bundlers (Vite, Next.js, Create React App), this works out of the box. For custom setups, see our [CSS imports guide](https://optimizely-axiom.github.io/optiaxiom/guides/css-imports).

### 2. Add the Provider

Wrap your application with `AxiomProvider`:

```jsx
import { AxiomProvider } from "@optiaxiom/react";

export function App() {
  return <AxiomProvider>{/* Your app code here */}</AxiomProvider>;
}
```

### 3. Use Components

Import and use components in your application:

```jsx
import { Box, Button, Group, Input } from "@optiaxiom/react";

export function MyComponent() {
  return (
    <Group alignItems="start" flexDirection="column" gap="16">
      <Input placeholder="Enter text..." />
      <Button appearance="primary">Submit</Button>
    </Group>
  );
}
```

## Examples

### Basic Button

```jsx
import { Button } from "@optiaxiom/react";

<Button>Click me</Button>;
```

### Form with Validation

```jsx
import { Button, Field, Group, Input } from "@optiaxiom/react";

function LoginForm() {
  return (
    <Group alignItems="start" flexDirection="column" gap="16">
      <Field label="Email">
        <Input placeholder="you@example.com" type="email" />
      </Field>
      <Field label="Password">
        <Input type="password" />
      </Field>
      <Button appearance="primary">Sign In</Button>
    </Group>
  );
}
```

### Layout with Box and Group

```jsx
import { Box, Group, Heading, Text } from "@optiaxiom/react";

function Sample() {
  return (
    <Box bg="bg.default" color="fg.default" p="16" rounded="md" shadow="sm">
      <Group flexDirection="column" gap="16">
        <Heading level="3">Sample Title</Heading>
        <Text>Sample description goes here</Text>
      </Group>
    </Box>
  );
}
```

## Documentation

For comprehensive guides, component API reference, and more examples:

- [Documentation](https://optimizely-axiom.github.io/optiaxiom/)
- [Component Library](https://optimizely-axiom.github.io/optiaxiom/components/button)
- [Styling Guide](https://optimizely-axiom.github.io/optiaxiom/guides/styling)
- [Icons Guide](https://optimizely-axiom.github.io/optiaxiom/guides/icons)

## Contributing

See the [main repository](https://github.com/optimizely-axiom/optiaxiom) for contribution guidelines.

## License

Apache-2.0