wix-style-react/src/VariableInput/docs/VariableInput.examples.js

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <VariableInput
    initialValue="{{size}} is large"
    size="large"
    variableParser={value => (value === 'size' ? 'Size' : false)}
  />
  <VariableInput
    initialValue="{{size}} is medium"
    size="medium"
    variableParser={value => (value === 'size' ? 'Size' : false)}
  />
  <VariableInput
    initialValue="{{size}} is small"
    size="small"
    variableParser={value => (value === 'size' ? 'Size' : false)}
  />
</StorybookComponents.Stack>;
`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <VariableInput
    initialValue="{{status}} is error"
    variableParser={value => (value === 'status' ? 'Status' : false)}
    status="error"
  />
  <VariableInput
    initialValue="{{status}} is warning"
    variableParser={value => (value === 'status' ? 'Status' : false)}
    status="warning"
  />
  <VariableInput
    initialValue="{{status}} is loading"
    variableParser={value => (value === 'status' ? 'Status' : false)}
    status="loading"
  />
</StorybookComponents.Stack>;
`;

export const _statusMessage = `
<VariableInput
  initialValue="{{status.error}}"
  variableParser={value => (value === 'status.error' ? 'Error' : false)}
  status="error"
  statusMessage="Variable not found"
  tooltipPlacement="top-end"
/>;
`;

export const _readOnlyAndDisabled = `
<StorybookComponents.Stack flexDirection="column">
  <VariableInput
    initialValue="{{interactions}} are read only"
    variableParser={value =>
      value === 'interactions' ? 'Interactions' : false
    }
    readOnly
  />
  <VariableInput
    initialValue="{{interactions}} are disabled"
    variableParser={value =>
      value === 'interactions' ? 'Interactions' : false
    }
    disabled
  />
</StorybookComponents.Stack>;
`;

export const _rows = `
<StorybookComponents.Stack flexDirection="column">
  <VariableInput
    rows={1}
    initialValue="Example with 1 {{rows}}"
    variableParser={value => (value === 'rows' ? 'row' : false)}
  />
  <VariableInput
    rows={5}
    initialValue="Example with 5 {{rows}}"
    variableParser={value => (value === 'rows' ? 'rows' : false)}
  />
</StorybookComponents.Stack>;
`;

export const _multiline = `
<StorybookComponents.Stack>
  <StorybookComponents.Stack width="50%">
    <VariableInput
      initialValue="Field that have {{multiline}} enabled scroll content vertically"
      multiline={true}
      variableParser={value => (value === 'multiline' ? 'multiline' : false)}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack width="50%">
    <VariableInput
      initialValue="Field that have {{multiline}} disabled scroll content horizontally"
      multiline={false}
      variableParser={value => (value === 'multiline' ? 'multiline' : false)}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _manualEmbed = `
() => {
  const bodyRef = React.useRef();
  const variables = [
    {
      key: 'event.date',
      value: 'Event date',
    },
    {
      key: 'last.name',
      value: 'Guest last name',
    },
    {
      key: 'first.name',
      value: 'Guest first name',
    },
    {
      key: 'event.location',
      value: 'Event location',
    },
    {
      key: 'event.name',
      value: 'Event name',
    },
  ];

  const insertVariable = variable =>
    bodyRef.current.insertVariable(variable.key);

  return (
    <Box gap="10px">
      <VariableInput
        placeholder="Pick variables and/ or enter strings..."
        variableParser={value => {
          const variable = variables.find(item => item.key === value);

          return variable ? variable.value : false;
        }}
        ref={bodyRef}
        rows={3}
      />
      <PopoverMenu triggerElement={<TextButton>Insert Variable</TextButton>}>
        {variables.map(variable => (
          <PopoverMenu.MenuItem
            text={variable.value}
            onClick={() => insertVariable(variable)}
          />
        ))}
      </PopoverMenu>
    </Box>
  );
};
`;

export const _automations = `
() => {
  const [selectedAction, setSelectedAction] = React.useState(1);

  return (
    <Card>
      <Card.Header
        title="Action"
        subtitle="Do this: send a message"
      ></Card.Header>
      <Card.Divider></Card.Divider>
      <Card.Content>
        <Layout>
          <Cell>
            <Layout gap="12px">
              <Cell span={4}>
                <Thumbnail
                  selected={selectedAction === 1}
                  onClick={() => setSelectedAction(1)}
                  title="Send a chat message"
                  size="small"
                />
              </Cell>
              <Cell span={4}>
                <Thumbnail
                  selected={selectedAction === 2}
                  onClick={() => setSelectedAction(2)}
                  title="Get notified by email"
                  size="small"
                />
              </Cell>
              <Cell span={4}>
                <Thumbnail
                  selected={selectedAction === 3}
                  onClick={() => setSelectedAction(3)}
                  title="Send email to contacts"
                  size="small"
                />
              </Cell>
            </Layout>
          </Cell>

          <Cell>
            <FormField label="Message" required>
              <VariableInput
                rows={5}
                initialValue="Hey {{user.name}}! Thanks for reaching out. We'll be right with you."
                variableParser={value =>
                  value === 'user.name' ? 'Name' : false
                }
              />
            </FormField>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;