Feature/storybook

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 coverage/
+storybook-static/
 .eslintcache
 .DS_Store
 dist/

.storybook/main.js

@@ -1,3 +1,8 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.{js,mdx}'],
+	stories: ['../stories/**/*.stories.{js,ts,mdx}'],
+	docs: {
+		//👇 See the table below for the list of supported options
+		autodocs: 'tag',
+		defaultName: 'Documentation',
+	},
 };

stories/cosmoz-autocomplete.stories.js

@@ -5,118 +5,188 @@ import { colors } from './data';
 export default {
 	title: 'Autocomplete',
 	component: 'cosmoz-autocomplete',
+	tags: ['autodocs'],
+	argTypes: {
+		label: { control: 'text' },
+		textProperty: { control: 'text' },
+		limit: { control: 'number' },
+		defaultIndex: { control: 'number' },
+		hideEmpty: { control: 'boolean' },
+		disabled: { control: 'boolean' },
+		placeholder: { control: 'text' },
+		showSingle: { control: 'boolean' },
+		preserveOrder: { control: 'boolean' },
+		min: { control: 'number' },
+		wrap: { control: 'boolean' },
+	},
 };
-const css = html`
-		<style>
-			@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap');
-			cosmoz-autocomplete,
-			cosmoz-listbox {
-				font-family: 'Inter', sans-serif;
-			}
-		</style>
-	`,
-	basic = () => html`
-		${css}
-		<cosmoz-autocomplete
-			.label=${'Choose color'}
-			.source=${colors}
-			.textProperty=${'text'}
-			.value=${[colors[0], colors[3]]}
-		></cosmoz-autocomplete>
-	`,
-	single = () => html`
-		${css}
-		<cosmoz-autocomplete
-			.label=${'Choose color'}
-			.source=${colors}
-			.limit=${1}
-			.textProperty=${'text'}
-			.value=${colors[2]}
-		></cosmoz-autocomplete>
-	`,
-	hideEmpty = () => html`
-		${css}
-		<cosmoz-autocomplete
-			.label=${'Choose color'}
-			.source=${colors}
-			.limit=${1}
-			.textProperty=${'text'}
-			.value=${colors[2]}
-			hide-empty
-		></cosmoz-autocomplete>
-	`,
-	defaultIndex = () => html`
-		${css}
-		<cosmoz-autocomplete
-			.label=${'Choose color'}
-			.source=${colors}
-			.limit=${1}
-			.textProperty=${'text'}
-			default-index="-1"
-		></cosmoz-autocomplete>
-		<cosmoz-autocomplete
-			.label=${'Choose color (single value)'}
-			.source=${colors.slice(0, 1)}
-			.limit=${1}
-			.textProperty=${'text'}
-			default-index="-1"
-		></cosmoz-autocomplete>
-	`,
-	disabled = () => html`
-		${css}
-		<cosmoz-autocomplete
-			disabled
-			.label=${'Choose color'}
-			.source=${colors}
-			.limit=${1}
-			.textProperty=${'text'}
-			.value=${colors[2]}
-		></cosmoz-autocomplete>
-	`,
-	placeholder = () => html`
-		${css}
-		<cosmoz-autocomplete
-			.placeholder=${'Choose color'}
-			.source=${colors}
-			.limit=${1}
-			.textProperty=${'text'}
-			.value=${colors[0]}
-		></cosmoz-autocomplete>
-	`;
 
-export { basic, single, hideEmpty, defaultIndex, disabled, placeholder };
+const CSS = html`
+	<style>
+		@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap');
+		cosmoz-autocomplete,
+		cosmoz-listbox {
+			font-family: 'Inter', sans-serif;
+		}
+	</style>
+`;
+
+const Autocomplete = ({
+	source,
+	limit,
+	textProperty,
+	min,
+	label = '',
+	value = [],
+	hideEmpty = false,
+	disabled = false,
+	placeholder = '',
+	defaultIndex = 0,
+	showSingle = false,
+	preserveOrder = false,
+	wrap = false,
+}) => html`
+	${CSS}
+	<cosmoz-autocomplete
+		.label=${label}
+		.placeholder=${placeholder}
+		.source=${source}
+		.textProperty=${textProperty}
+		.limit=${limit}
+		.value=${value}
+		.hideEmpty=${hideEmpty}
+		.defaultIndex=${defaultIndex}
+		.disabled=${disabled}
+		.showSingle=${showSingle}
+		.preserveOrder=${preserveOrder}
+		.min=${min}
+		.wrap=${wrap}
+	></cosmoz-autocomplete>
+`;
+
+export const Basic = Autocomplete.bind({});
+Basic.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	value: [colors[0], colors[3]],
+};
+
+export const Single = Autocomplete.bind({});
+Single.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	limit: 1,
+	value: [colors[2]],
+};
 
-export const overflown = () =>
-	html` ${css}
-		<cosmoz-autocomplete
-			.label=${'Choose color'}
-			.source=${colors}
-			.textProperty=${'text'}
-			.value=${[colors[0], colors[1], colors[2]]}
-			style="max-width: 170px"
-		></cosmoz-autocomplete>`;
+export const HideEmpty = Autocomplete.bind({});
+HideEmpty.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	limit: 1,
+	value: [colors[2]],
+	hideEmpty: true,
+};
 
-export const wrap = () =>
-	html` ${css}
-		<cosmoz-autocomplete
-			.label=${'Choose color'}
-			.source=${colors}
-			.textProperty=${'text'}
-			.value=${[colors[0], colors[1], colors[2]]}
-			wrap
-			style="max-width: 170px"
-		></cosmoz-autocomplete>`;
+export const DefaultIndex = Autocomplete.bind({});
+DefaultIndex.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	limit: 1,
+	defaultIndex: -1,
+};
 
-export const select = () => html`
-	${css}
+export const DefaultIndexSingleValue = Autocomplete.bind({});
+DefaultIndexSingleValue.args = {
+	label: 'Choose color (single value)',
+	source: colors.slice(0, 1),
+	textProperty: 'text',
+	limit: 1,
+	defaultIndex: -1,
+};
+
+export const Disabled = Autocomplete.bind({});
+Disabled.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	limit: 1,
+	value: colors[0],
+	disabled: true,
+};
+
+export const Placeholder = Autocomplete.bind({});
+Placeholder.args = {
+	placeholder: 'Choose color (placeholder text)',
+	source: colors,
+	limit: 1,
+	textProperty: 'text',
+	value: colors[0],
+};
+
+export const Select = Autocomplete.bind({});
+Select.args = {
+	label: 'Choose color',
+	source: colors,
+	limit: 1,
+	textProperty: 'text',
+	value: colors[2],
+	showSingle: true,
+	preserveOrder: true,
+	min: 1,
+};
+
+const AutocompleteWithInlineCSS = ({
+	source,
+	limit,
+	textProperty,
+	min,
+	label = '',
+	value = [],
+	hideEmpty = false,
+	disabled = false,
+	placeholder = '',
+	defaultIndex = 0,
+	showSingle = false,
+	preserveOrder = false,
+	wrap = false,
+}) => html`
+	${CSS}
 	<cosmoz-autocomplete
-		.label=${'Choose color'}
-		.source=${colors}
-		.limit=${1}
-		.textProperty=${'text'}
-		.value=${colors[2]}
-		show-single
-		preserve-order
-		.min=${1}
+		.label=${label}
+		.placeholder=${placeholder}
+		.source=${source}
+		.textProperty=${textProperty}
+		.limit=${limit}
+		.value=${value}
+		.hideEmpty=${hideEmpty}
+		.defaultIndex=${defaultIndex}
+		.disabled=${disabled}
+		.showSingle=${showSingle}
+		.preserveOrder=${preserveOrder}
+		.min=${min}
+		.wrap=${wrap}
+		style="max-width: 170px"
 	></cosmoz-autocomplete>
 `;
+
+export const Overflown = AutocompleteWithInlineCSS.bind({});
+Overflown.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	value: [colors[0], colors[1], colors[2]],
+};
+
+export const Wrap = AutocompleteWithInlineCSS.bind({});
+Wrap.args = {
+	label: 'Choose color',
+	source: colors,
+	textProperty: 'text',
+	value: [colors[0], colors[1], colors[2]],
+	wrap: true,
+};

stories/data.js

@@ -6,7 +6,7 @@ const colors = [
 	'White',
 	'Brown',
 	'Aqua',
-	'Nothing'
-].map(text => ({ text }));
+	'Nothing',
+].map((text) => ({ text }));
 
 export { colors };