# `mix mishka.ui.export`
[🔗](https://github.com/mishka-group/mishka_chelekom/blob/v0.0.9/lib/mix/tasks/mishka.ui.export.ex#L1)

A Mix Task for generating a JSON file from a directory of components

This Mix Task helps you generate a JSON file from the files in a directory,
enabling you to use it with `mix mishka.ui.add` or share it in the community version.

Keep in mind that for each component, you must have both `.eex` and `.exs` files according to the
documentation of the [Mishka Chelekom](https://github.com/mishka-group/mishka_chelekom) library.
Otherwise, you will need to create the necessary files manually.
It’s recommended to review the Core components and follow their structure as a guide.

If you prefer to perform the process manually, simply add the relevant option to your command to
generate a template file. You can then customize it based on your specific requirements.

**Note**:

> Use `--base64` option to convert the file content to Base64 if you're using special Erlang
characters that do not retain their original form when converted back to the original file.

**Note**:

It is important to note that to place each file in its designated section and specify its type,
you must use the following naming convention:

For example, if your file is a `component`, you need to have two files:

- `component_something.exs`
- `component_something.eex`

Similarly, for other file types like `preset` and `template`, you should follow the same
naming pattern as above. For instance:

- `template_something.exs`
- `template_something.eex`

All files within the directory do not need to have the same name. However,
they must start with the section name where they are intended to be placed, such as
`component`, `preset`, or `template`. Additionally, each file must have both the
`exs` and `eex` formats.

> **Note**: Since JavaScript files do not require configuration, you only need to
place the file in the directory. For example: `something.js`

### What Should the Configuration of Each Component Look Like?
If you take a look at the example configuration below, you'll notice that the component
file name matches the key name in the list, which also matches the configuration name.
This ensures consistency and makes it easier to work with the component configuration.

**File name**: `component_accordion.eex` and `component_accordion.exs`
```elixir
[
  component_accordion: [
    name: "component_accordion",
    args: [...]
    ...
  ]
]
```

**Note:** you can name this like `preset_accordion` or `template_accordion` too.

## Example

```bash
mix mishka.ui.export --example arg
```

Export the built-in styled components as a MishkaCMS UI-kit bundle:

```bash
mix mishka.ui.export priv/components --cms --name chelekom --bundle-name chelekom --bundle-version 0.0.9
```

Export the headless Kit components as a MishkaCMS UI-kit bundle:

```bash
mix mishka.ui.export priv/headless --cms --name chelekom_headless --bundle-name chelekom_headless --bundle-version 0.0.9
```

## Options

* `--base64` or `-b` - Converts component content to Base64
* `--name` or `-n` - Defines a name for JSON file, if it is not set default is template.json
* `--org` or `-o` - It is only for structuring the file and has no effect on your export.
* `--template` or `-t` - Creates a default JSON file for manual processing steps.
* `--cms` - Exports a MishkaCMS UI-kit bundle (`mishka.ui_kit.bundle.v3`) instead of the default JSON.
* `--bundle-name` - Sets the bundle name in `--cms` output (defaults to the `--name` value).
* `--bundle-version` - Sets the bundle version in `--cms` output (defaults to `0.0.1`).

# `validate_files`

---

*Consult [api-reference.md](api-reference.md) for complete listing*