From 614188b78d8eef040244e21cff8cb9c228bdbaa4 Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 20 Mar 2024 10:01:14 +0200 Subject: [PATCH 1/4] feat: move stories to ts extension --- .gitignore | 1 + .storybook/main.js | 2 +- ...autocomplete.stories.js => cosmoz-autocomplete.stories.ts} | 0 stories/{data.js => data.ts} | 4 ++-- 4 files changed, 4 insertions(+), 3 deletions(-) rename stories/{cosmoz-autocomplete.stories.js => cosmoz-autocomplete.stories.ts} (100%) rename stories/{data.js => data.ts} (71%) diff --git a/.gitignore b/.gitignore index 34d51dfa..dd425c1e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ node_modules/ coverage/ +storybook-static/ .eslintcache .DS_Store dist/ diff --git a/.storybook/main.js b/.storybook/main.js index 6007a4df..875fd431 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,3 +1,3 @@ module.exports = { - stories: ['../stories/**/*.stories.{js,mdx}'], + stories: ['../stories/**/*.stories.{js,ts,mdx}'], }; diff --git a/stories/cosmoz-autocomplete.stories.js b/stories/cosmoz-autocomplete.stories.ts similarity index 100% rename from stories/cosmoz-autocomplete.stories.js rename to stories/cosmoz-autocomplete.stories.ts diff --git a/stories/data.js b/stories/data.ts similarity index 71% rename from stories/data.js rename to stories/data.ts index f328e6b1..62d44740 100644 --- a/stories/data.js +++ b/stories/data.ts @@ -6,7 +6,7 @@ const colors = [ 'White', 'Brown', 'Aqua', - 'Nothing' -].map(text => ({ text })); + 'Nothing', +].map((text) => ({ text })); export { colors }; From c52160efac4b616dc903b7892c78c649f50316a9 Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 20 Mar 2024 10:55:54 +0200 Subject: [PATCH 2/4] fix: switch back to js files Because the current setup doesnt allow ts files --- ...moz-autocomplete.stories.ts => cosmoz-autocomplete.stories.js} | 0 stories/{data.ts => data.js} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename stories/{cosmoz-autocomplete.stories.ts => cosmoz-autocomplete.stories.js} (100%) rename stories/{data.ts => data.js} (100%) diff --git a/stories/cosmoz-autocomplete.stories.ts b/stories/cosmoz-autocomplete.stories.js similarity index 100% rename from stories/cosmoz-autocomplete.stories.ts rename to stories/cosmoz-autocomplete.stories.js diff --git a/stories/data.ts b/stories/data.js similarity index 100% rename from stories/data.ts rename to stories/data.js From 1ab902d3a8ff81b30142a64890ac00354d18507e Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 20 Mar 2024 14:36:45 +0200 Subject: [PATCH 3/4] feat: add controls to existing stories Add stories using the Dev Server: Storybook guide --- stories/cosmoz-autocomplete.stories.js | 284 +++++++++++++++---------- 1 file changed, 177 insertions(+), 107 deletions(-) diff --git a/stories/cosmoz-autocomplete.stories.js b/stories/cosmoz-autocomplete.stories.js index 3f4688aa..29b9895a 100644 --- a/stories/cosmoz-autocomplete.stories.js +++ b/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` - - `, - basic = () => html` - ${css} - - `, - single = () => html` - ${css} - - `, - hideEmpty = () => html` - ${css} - - `, - defaultIndex = () => html` - ${css} - - - `, - disabled = () => html` - ${css} - - `, - placeholder = () => html` - ${css} - - `; -export { basic, single, hideEmpty, defaultIndex, disabled, placeholder }; +const CSS = html` + +`; + +const Autocomplete = ({ + source, + limit, + textProperty, + min, + label = '', + value = [], + hideEmpty = false, + disabled = false, + placeholder = '', + defaultIndex = 0, + showSingle = false, + preserveOrder = false, + wrap = false, +}) => html` + ${CSS} + +`; + +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} - `; +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} - `; +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} `; + +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, +}; From 5d248416b21540264ba6cff8762eae8822cfe6e9 Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Thu, 21 Mar 2024 09:12:44 +0200 Subject: [PATCH 4/4] feat: try to add docs to stories --- .storybook/main.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.storybook/main.js b/.storybook/main.js index 875fd431..40dd8ff7 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,3 +1,8 @@ module.exports = { stories: ['../stories/**/*.stories.{js,ts,mdx}'], + docs: { + //👇 See the table below for the list of supported options + autodocs: 'tag', + defaultName: 'Documentation', + }, };