(function (Prism) {
var funcPattern = /\\(?:[^a-z()[\]]|[a-z*]+)/i;
var insideEqu = {
'equation-command': {
pattern: funcPattern,
alias: 'regex',
},
};
Prism.languages.latex = {
comment: /%.*/,
// the verbatim environment prints whitespace to the document
cdata: {
pattern:
/(\\begin\{((?:lstlisting|verbatim)\*?)\})[\s\S]*?(?=\\end\{\2\})/,
lookbehind: true,
},
/*
* equations can be between $$ $$ or $ $ or \( \) or \[ \]
* (all are multiline)
*/
equation: [
{
pattern:
/\$\$(?:\\[\s\S]|[^\\$])+\$\$|\$(?:\\[\s\S]|[^\\$])+\$|\\\([\s\S]*?\\\)|\\\[[\s\S]*?\\\]/,
inside: insideEqu,
alias: 'string',
},
{
pattern:
/(\\begin\{((?:align|eqnarray|equation|gather|math|multline)\*?)\})[\s\S]*?(?=\\end\{\2\})/,
lookbehind: true,
inside: insideEqu,
alias: 'string',
},
],
/*
* arguments which are keywords or references are highlighted
* as keywords
*/
keyword: {
pattern:
/(\\(?:begin|cite|documentclass|end|label|ref|usepackage)(?:\[[^\]]+\])?\{)[^}]+(?=\})/,
lookbehind: true,
},
url: {
pattern: /(\\url\{)[^}]+(?=\})/,
lookbehind: true,
},
/*
* section or chapter headlines are highlighted as bold so that
* they stand out more
*/
headline: {
pattern:
/(\\(?:chapter|frametitle|paragraph|part|section|subparagraph|subsection|subsubparagraph|subsubsection|subsubsubparagraph)\*?(?:\[[^\]]+\])?\{)[^}]+(?=\})/,
lookbehind: true,
alias: 'class-name',
},
function: {
pattern: funcPattern,
alias: 'selector',
},
punctuation: /[[\]{}&]/,
};
Prism.languages.tex = Prism.languages.latex;
Prism.languages.context = Prism.languages.latex;
})(Prism);
'number',
required: false,
},
},
min: {
control: {
type: 'number',
},
description: 'Minimum value.',
table: {
category: 'Options',
},
type: {
name: 'number',
required: false,
},
},
name: {
control: {
type: 'text',
},
description: 'Field name.',
type: {
name: 'string',
required: true,
},
},
placeholder: {
control: {
type: 'text',
},
description: 'A placeholder value.',
table: {
category: 'Options',
},
type: {
name: 'string',
required: false,
},
},
required: {
control: {
type: 'boolean',
},
description: 'Determine if the field is required.',
table: {
category: 'Options',
defaultValue: { summary: false },
},
type: {
name: 'boolean',
required: false,
},
},
setValue: {
control: {
type: null,
},
description: 'Callback function to set field value.',
table: {
category: 'Events',
},
type: {
name: 'function',
required: true,
},
},
step: {
control: {
type: 'number',
},
description: 'Field incremental values that are valid.',
table: {
category: 'Options',
},
type: {
name: 'number',
required: false,
},
},
type: {
control: {
type: 'select',
},
description: 'Field type: input type or textarea.',
options: [
'datetime-local',
'email',
'number',
'search',
'tel',
'text',
'textarea',
'time',
'url',
],
type: {
name: 'string',
required: true,
},
},
value: {
control: {
type: null,
},
description: 'Field value.',
type: {
name: 'string',
required: true,
},
},
},
} as ComponentMeta<typeof Field>;
const Template: ComponentStory<typeof Field> = ({
value: _value,
setValue: _setValue,
...args
}) => {
const [value, setValue] = useState<string>('');
return <Field value={value} setValue={setValue} {...args} />;
};
/**
* Field Story - DateTime
*/
export const DateTime = Template.bind({});
DateTime.args = {
id: 'field-storybook',
name: 'field-storybook',
type: 'datetime-local',
};
/**
* Field Story - Email
*/
export const Email = Template.bind({});
Email.args = {
id: 'field-storybook',
name: 'field-storybook',
type: 'email',
};
/**
* Field Story - Text
*/
export const Text = Template.bind({});
Text.args = {
id: 'field-storybook',
name: 'field-storybook',
type: 'text',
};
/**
* Field Story - Number
*/
export const Number = Template.bind({});
Number.args = {
id: 'field-storybook',
name: 'field-storybook',
type: 'number',
};
/**
* Field Story - TextArea
*/
export const TextArea = Template.bind({});
TextArea.args = {
id: 'field-storybook',
name: 'field-storybook',
type: 'textarea',
};
/**
* Field Story - Time
*/
export const Time = Template.bind({});
Time.args = {
id: 'field-storybook',
name: 'field-storybook',
type: 'time',
};