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

npm run rollup

Publish the library

npm publish

Run storybook locally

npm run storybook

Build storybook

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

npm run rollup

3. Create a prerelease:

npm version prerelease --preid=feature-name

4. Publish the version

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:

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

Use the following to see list of releases with tags

npm show yt-uikit dist-tags

Reference code for state management in story files

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,
  },
};