# YourToken UI Kit

UI copmonents powering the YourToken ecosystem.

### Some Style Advice for Writing Code here

- Prefer to use inline styling - negligible chances of store styles overriding us. if its becoming too unreadable then maybe stylesheet with all styles having a `yt` prefix or suffix appended along with `!important` for all styles, if this doesnt work then styled components

### Build the library

```bash
npm run rollup
```

### Publish the library

```bash
npm publish
```

### Run storybook locally

```bash
npm run storybook
```

### Build storybook

```bash
npm run build-storybook
```

### Working with local/testing version of UI kit

1. Commit all your changes (otherwise NPM will give this error: "Git working directory not clean.")
2. Build the version

```bash
npm run rollup
```

3. Create a prerelease:

```bash
npm version prerelease --preid=feature-name
```

4. Publish the version

```bash
npm publish --tag feature-name
```

This will create a version like: "1.0.0-feature-name.0" (you can keep running the above two commands and every time it will increase the digit at the end)

5. Update the uikit dependency in your project's `package.json` as this:

```bash
"yt-uikit": "...yt-uikit@feature-name"
```

Use the following to see list of releases with tags

```bash
npm show yt-uikit dist-tags
```

### Reference code for state management in story files

```ts
import { useArgs } from "@storybook/preview-api";

import SomeComponent from "./Index";

export default {
  component: SomeComponent,
};

export const Default = {
  render: function Component(args) {
    const [, setArgs] = useArgs();

    const onChange = (value) => {
      args.onChange(value);
      setArgs({ value: value });
    };

    return <SomeComponent {...args} onChange={onChange} />;
  },
  args: {
    value: null,
  },
};
```