-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
747 additions
and
1,821 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import type { StorybookConfig } from '@storybook/web-components-vite' | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
| addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'], | ||
| framework: '@storybook/web-components-vite', | ||
| docs: {}, | ||
| } | ||
| export default config |
7 changes: 3 additions & 4 deletions
7
apps/storybook/.storybook/preview.js → apps/storybook/.storybook/preview.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,29 @@ | ||
| import type { StoryObj, Meta } from '@storybook/html' | ||
| import type { StoryObj, Meta } from '@storybook/web-components' | ||
| import type { Components } from 'ui-stencil' | ||
| import { spread } from '@open-wc/lit-helpers' | ||
| import { html } from 'lit-html' | ||
|
|
||
| const meta = { | ||
| title: 'Internal/Button', | ||
| const meta: Meta<Components.OramaButton> = { | ||
| title: 'Internal/OramaButton', | ||
| component: 'orama-button', | ||
| } satisfies Meta | ||
| argTypes: { | ||
| variant: { | ||
| control: { type: 'select' }, | ||
| options: ['primary', 'secondary'], | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj | ||
| type Story = StoryObj<Components.OramaButton> | ||
|
|
||
| const Template = (content: string) => (args) => | ||
| ` | ||
| <orama-button variant=${args.variant} class=${args.class}>${content}</orama-button> | ||
| ` | ||
| const Template = (content: string) => (args) => html`<orama-button ${spread(args)}>${content}</orama-button>` | ||
|
|
||
| export const Primary: Story = { | ||
| export const OramaButton: Story = { | ||
| render: Template('Primary button'), | ||
| args: { | ||
| variant: 'primary', | ||
| class: 'my-optional-class', | ||
| type: 'button', | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,14 @@ | ||
| import type { StoryObj, Meta } from '@storybook/web-components' | ||
| import type { Components } from 'ui-stencil' | ||
|
|
||
| const meta: Meta = { | ||
| const meta: Meta<Components.OramaChat> = { | ||
| title: 'Internal/OramaChat', | ||
| component: 'orama-chat', | ||
| } | ||
|
|
||
| export default meta | ||
| type Story = StoryObj | ||
| type Story = StoryObj<Components.OramaChat> | ||
|
|
||
| const Template = (args) => { | ||
| return ` | ||
| <div style="height: 800px; width: 360px; border: 1px solid white; display: flex; flex-direction: column;"> | ||
| <orama-chat ${{ ...args }}></orama-chat> | ||
| </div> | ||
| ` | ||
| } | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args | ||
| export const OramaChat: Story = { | ||
| render: Template, | ||
| args: {}, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,26 @@ | ||
| // Create a story for the OramaFacets web component | ||
| import { h } from '@stencil/core' | ||
| import type { StoryObj, Meta } from '@storybook/web-components' | ||
| import type { Components } from 'ui-stencil' | ||
| import { fn } from '@storybook/test' | ||
|
|
||
| const meta: Meta = { | ||
| title: 'Internal/Facets', | ||
| const meta: Meta<Components.OramaFacets> = { | ||
| title: 'Internal/OramaFacets', | ||
| component: 'orama-facets', | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj | ||
|
|
||
| const Template = (args) => { | ||
| return ` | ||
| <div> | ||
| <p>Something that uses facets</p> | ||
| <orama-facets current-facet=${args.currentFacet} facets=${JSON.stringify(args.facets)}></orama-facets> | ||
| </div> | ||
| ` | ||
| } | ||
| type Story = StoryObj<Components.OramaFacets> | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args | ||
| export const Facets: Story = { | ||
| render: Template, | ||
| export const OramaFacets: Story = { | ||
| args: { | ||
| facets: ['FacetOne', 'FacetTwo', 'FacetThree'], | ||
| currentFacet: 'Facet 2', | ||
| facets: [ | ||
| { name: 'FacetOne', count: 200 }, | ||
| { name: 'FacetTwo', count: 82 }, | ||
| { name: 'FacetThree', count: 74 }, | ||
| ], | ||
| selectedFacet: 'FacetOne', | ||
| onFacetClick: fn(), | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,42 @@ | ||
| import type { StoryObj, Meta } from "@storybook/html"; | ||
|
|
||
| const meta = { | ||
| title: "Internal/Form", | ||
| tags: ["autodocs"], | ||
| } satisfies Meta; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj; | ||
|
|
||
| const TemplateInput = (args) => ` | ||
| <orama-input name='test1' label='Small size input' size='small' placeholder="Your name" type='text'> | ||
| <orama-input name='test2' label='Medium size input' placeholder="Your surname" type='text'> | ||
| <orama-input name='test3' label='Large size input' size='large' placeholder="Your address" type='text'> | ||
| `; | ||
|
|
||
| export const InputSizes: Story = { | ||
| render: TemplateInput, | ||
| args: {}, | ||
| }; | ||
| import type { StoryObj, Meta } from '@storybook/web-components' | ||
| import { html } from 'lit-html' | ||
|
|
||
| import type { Components } from 'ui-stencil' | ||
| const meta: Meta<Components.OramaInput> = { | ||
| title: 'Internal/Form', | ||
| component: 'orama-input', | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| type: { | ||
| control: { type: 'select' }, | ||
| options: ['text', 'password', 'email', 'number', 'tel', 'url', 'search'], | ||
| }, | ||
| size: { | ||
| control: { type: 'select' }, | ||
| options: ['small', 'medium', 'large'], | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| const TemplateOnlyInput = (args) => ` | ||
| <orama-input name='test4' size='large' labelforscreenreaders="Label for screen readers only" placeholder='Your name' type="text"> | ||
| `; | ||
| export default meta | ||
| type Story = StoryObj<Components.OramaInput> | ||
|
|
||
| export const InputWithoutLabel: Story = { | ||
| render: TemplateOnlyInput, | ||
| export const Input: Story = { | ||
| args: { | ||
| // TODO: if I try to pass this arg, the string will be split into an array of attributes - not expected | ||
| // labelforscreenreaders: "Label for screen readers only" | ||
| name: 'Input', | ||
| label: 'Small size input', | ||
| placeholder: 'Your name', | ||
| size: 'small', | ||
| type: 'text', | ||
| }, | ||
| }; | ||
|
|
||
| const TemplateInputSearch = (args) => ` | ||
| <orama-input name='test4' size='large' placeholder='Search...' type="search" label-for-screen-readers="Search for something..." default-value="test"></orama-input> | ||
| `; | ||
| } | ||
|
|
||
| export const SearchInput: Story = { | ||
| render: TemplateInputSearch, | ||
| args: {}, | ||
| }; | ||
| args: { | ||
| name: 'Input', | ||
| size: 'large', | ||
| placeholder: 'Search...', | ||
| type: 'text', | ||
| labelForScreenReaders: 'Search for something...', | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,15 @@ | ||
| import type { StoryObj, Meta } from '@storybook/web-components' | ||
| import type { Components } from 'ui-stencil' | ||
|
|
||
| const meta: Meta = { | ||
| const meta: Meta<Components.OramaSearch> = { | ||
| title: 'Internal/OramaSearch', | ||
| component: 'orama-search' | ||
| component: 'orama-search', | ||
| } | ||
|
|
||
| export default meta | ||
| type Story = StoryObj | ||
| type Story = StoryObj<Components.OramaSearch> | ||
|
|
||
| const Template = (args) => { | ||
| return ` | ||
| <div style="height: 800px; width: 360px; border: 1px solid white; display: flex; flex-direction: column;"> | ||
| <orama-search ${{ ...args }}></orama-chat> | ||
| </div> | ||
| ` | ||
| } | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args | ||
| // TODO: Add controls for props | ||
| export const OramaSearch: Story = { | ||
| render: Template, | ||
| args: {} | ||
| args: {}, | ||
| } |
Oops, something went wrong.