How to use the @rmwc/base/utils/use-knob.useKnob function in @rmwc/base

To help you get started, we’ve selected a few @rmwc/base examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jamesmfriedman / rmwc / src / select / select.story.tsx View on Github external
function MutatingSelect(props: any) {
  const [value, setValue] = useKnob('text', 'value', 'Cookies');
  const [label] = useKnob('text', 'label', 'Label');
  const [enhanced] = useKnob('boolean', 'enhanced', false);
  const [disabled] = useKnob('boolean', 'disabled', false);
  const [options] = useKnob('array', 'options', [
    'Cookies',
    'Pizza',
    'Icecream'
  ]);

  return (
github jamesmfriedman / rmwc / src / dialog / dialog.story.tsx View on Github external
function SimpleDialogStory() {
  const [open, setOpen] = useKnob('boolean', 'open', true);
  const [title] = useKnob('text', 'title', 'This is a simple dialog');
  const [body] = useKnob(
    'text',
    'body',
    'You can pass the body prop, or anything you want as children.'
  );
  const [acceptLabel] = useKnob('text', 'acceptLabel', 'Accept');
  const [cancelLabel] = useKnob('text', 'cancelLabel', 'Cancel');

  return (
     {
        setOpen(false);
        action('onClose')();
      }}
      acceptLabel={acceptLabel}
      cancelLabel={cancelLabel}
    />
  );
}
github jamesmfriedman / rmwc / src / select / select.story.tsx View on Github external
function MutatingSelect(props: any) {
  const [value, setValue] = useKnob('text', 'value', 'Cookies');
  const [label] = useKnob('text', 'label', 'Label');
  const [enhanced] = useKnob('boolean', 'enhanced', false);
  const [disabled] = useKnob('boolean', 'disabled', false);
  const [options] = useKnob('array', 'options', [
    'Cookies',
    'Pizza',
    'Icecream'
  ]);

  return (
github jamesmfriedman / rmwc / src / dialog / dialog.story.tsx View on Github external
function SimpleDialogStory() {
  const [open, setOpen] = useKnob('boolean', 'open', true);
  const [title] = useKnob('text', 'title', 'This is a simple dialog');
  const [body] = useKnob(
    'text',
    'body',
    'You can pass the body prop, or anything you want as children.'
  );
  const [acceptLabel] = useKnob('text', 'acceptLabel', 'Accept');
  const [cancelLabel] = useKnob('text', 'cancelLabel', 'Cancel');

  return (
     {
        setOpen(false);
github jamesmfriedman / rmwc / src / select / select.story.tsx View on Github external
function MutatingSelect(props: any) {
  const [value, setValue] = useKnob('text', 'value', 'Cookies');
  const [label] = useKnob('text', 'label', 'Label');
  const [enhanced] = useKnob('boolean', 'enhanced', false);
  const [disabled] = useKnob('boolean', 'disabled', false);
  const [options] = useKnob('array', 'options', [
    'Cookies',
    'Pizza',
    'Icecream'
  ]);

  return (
github jamesmfriedman / rmwc / src / select / select.story.tsx View on Github external
function MutatingSelect(props: any) {
  const [value, setValue] = useKnob('text', 'value', 'Cookies');
  const [label] = useKnob('text', 'label', 'Label');
  const [enhanced] = useKnob('boolean', 'enhanced', false);
  const [disabled] = useKnob('boolean', 'disabled', false);
  const [options] = useKnob('array', 'options', [
    'Cookies',
    'Pizza',
    'Icecream'
  ]);

  return (
github jamesmfriedman / rmwc / src / dialog / dialog.story.tsx View on Github external
function SimpleDialogStory() {
  const [open, setOpen] = useKnob('boolean', 'open', true);
  const [title] = useKnob('text', 'title', 'This is a simple dialog');
  const [body] = useKnob(
    'text',
    'body',
    'You can pass the body prop, or anything you want as children.'
  );
  const [acceptLabel] = useKnob('text', 'acceptLabel', 'Accept');
  const [cancelLabel] = useKnob('text', 'cancelLabel', 'Cancel');

  return (
     {
        setOpen(false);
        action('onClose')();
      }}
      acceptLabel={acceptLabel}
      cancelLabel={cancelLabel}
    />
  );
}
github jamesmfriedman / rmwc / src / select / select.story.tsx View on Github external
function MutatingSelect(props: any) {
  const [value, setValue] = useKnob('text', 'value', 'Cookies');
  const [label] = useKnob('text', 'label', 'Label');
  const [enhanced] = useKnob('boolean', 'enhanced', false);
  const [disabled] = useKnob('boolean', 'disabled', false);
  const [options] = useKnob('array', 'options', [
    'Cookies',
    'Pizza',
    'Icecream'
  ]);

  return (
github jamesmfriedman / rmwc / src / dialog / dialog.story.tsx View on Github external
function SimpleDialogStory() {
  const [open, setOpen] = useKnob('boolean', 'open', true);
  const [title] = useKnob('text', 'title', 'This is a simple dialog');
  const [body] = useKnob(
    'text',
    'body',
    'You can pass the body prop, or anything you want as children.'
  );
  const [acceptLabel] = useKnob('text', 'acceptLabel', 'Accept');
  const [cancelLabel] = useKnob('text', 'cancelLabel', 'Cancel');

  return (
     {
        setOpen(false);
        action('onClose')();
      }}
github jamesmfriedman / rmwc / src / dialog / dialog.story.tsx View on Github external
function SimpleDialogStory() {
  const [open, setOpen] = useKnob('boolean', 'open', true);
  const [title] = useKnob('text', 'title', 'This is a simple dialog');
  const [body] = useKnob(
    'text',
    'body',
    'You can pass the body prop, or anything you want as children.'
  );
  const [acceptLabel] = useKnob('text', 'acceptLabel', 'Accept');
  const [cancelLabel] = useKnob('text', 'cancelLabel', 'Cancel');

  return (
     {
        setOpen(false);
        action('onClose')();