generated from laur/svelte-tailwind-storybook
Initial add prosemirror editor.
This commit is contained in:
parent
d663de7ea1
commit
591008bd21
@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"useTabs": true,
|
"useTabs": false,
|
||||||
|
"tabWidth": 2,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"trailingComma": "none",
|
"trailingComma": "none",
|
||||||
"printWidth": 100
|
"printWidth": 100
|
||||||
|
@ -1,17 +1,17 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
// NOTE! added support for Vite builder
|
// NOTE! added support for Vite builder
|
||||||
core: {
|
webpackFinal: async (config) => {
|
||||||
builder: "storybook-builder-vite"
|
const svelteLoader = config.module.rules.find(
|
||||||
|
(r) => r.loader && r.loader.includes('svelte-loader')
|
||||||
|
);
|
||||||
|
svelteLoader.options.preprocess = require('svelte-preprocess')();
|
||||||
|
return config;
|
||||||
},
|
},
|
||||||
stories: [
|
core: {
|
||||||
"../src/**/*.stories.mdx",
|
builder: 'storybook-builder-vite'
|
||||||
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
|
},
|
||||||
],
|
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||||||
addons: [
|
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
|
||||||
"@storybook/addon-links",
|
|
||||||
"@storybook/addon-essentials",
|
|
||||||
"@storybook/addon-svelte-csf"
|
|
||||||
],
|
|
||||||
svelteOptions: {
|
svelteOptions: {
|
||||||
preprocess: require('svelte-preprocess')({
|
preprocess: require('svelte-preprocess')({
|
||||||
typescript: true,
|
typescript: true,
|
||||||
@ -19,5 +19,4 @@ module.exports = {
|
|||||||
sourceMap: true
|
sourceMap: true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
|
5
.vscode/settings.json
vendored
Normal file
5
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"editor.formatOnPaste": true,
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
}
|
5345
package-lock.json
generated
5345
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -56,6 +56,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/fira-mono": "^4.5.0",
|
"@fontsource/fira-mono": "^4.5.0",
|
||||||
"cookie": "^0.4.1"
|
"cookie": "^0.4.1",
|
||||||
|
"prosemirror-svelte": "^0.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
1
src/default.d.ts
vendored
Normal file
1
src/default.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
declare module '@storybook/addon-svelte-csf';
|
9
src/lib/editor/components/Image.svelte
Normal file
9
src/lib/editor/components/Image.svelte
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let alt: string;
|
||||||
|
export let src: string;
|
||||||
|
export let title: string | undefined = undefined;
|
||||||
|
export let width: string | undefined = undefined;
|
||||||
|
export let height: string | undefined = undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img {src} {alt} {title} {width} {height} />
|
@ -1,53 +1,52 @@
|
|||||||
<script>
|
<script>
|
||||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||||
import Button from "../lib/button/Button.svelte";
|
import Button from '../lib/button/Button.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Meta
|
<Meta
|
||||||
title="Example/Button"
|
title="Example/Button"
|
||||||
component={Button}
|
component={Button}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
label: { control: "text" },
|
label: { control: 'text' },
|
||||||
primary: { control: "boolean" },
|
primary: { control: 'boolean' },
|
||||||
backgroundColor: { control: "color" },
|
backgroundColor: { control: 'color' },
|
||||||
size: {
|
size: {
|
||||||
control: { type: "select", options: ['xs', "sm", "md", "lg"] },
|
control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
|
||||||
},
|
},
|
||||||
onClick: { action: "onClick" },
|
onClick: { action: 'onClick' }
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Template let:args>
|
<Template let:args>
|
||||||
<Button {...args} on:click={args.onClick} />
|
<Button {...args} on:click={args.onClick} />
|
||||||
</Template>
|
</Template>
|
||||||
|
|
||||||
<Story
|
<Story
|
||||||
name="Primary"
|
name="Primary"
|
||||||
args={{
|
args={{
|
||||||
primary: true,
|
primary: true,
|
||||||
label: "Button",
|
label: 'Button'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Story
|
<Story
|
||||||
name="Secondary"
|
name="Secondary"
|
||||||
args={{
|
args={{
|
||||||
label: "Button",
|
label: 'Button'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Story
|
<Story
|
||||||
name="Large"
|
name="Large"
|
||||||
args={{
|
args={{
|
||||||
size: "lg",
|
size: 'lg',
|
||||||
label: "Button",
|
label: 'Button'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Story
|
<Story
|
||||||
name="Small"
|
name="Small"
|
||||||
args={{
|
args={{
|
||||||
size: "sm",
|
size: 'sm',
|
||||||
label: "Button",
|
label: 'Button'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
30
src/stories/Prosemirror.stories.svelte
Normal file
30
src/stories/Prosemirror.stories.svelte
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<script>
|
||||||
|
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||||
|
import ProsemirrorEditor from 'prosemirror-svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Meta
|
||||||
|
title="Example/Editor"
|
||||||
|
component={ProsemirrorEditor}
|
||||||
|
argTypes={{
|
||||||
|
label: { control: 'text' },
|
||||||
|
primary: { control: 'boolean' },
|
||||||
|
backgroundColor: { control: 'color' },
|
||||||
|
size: {
|
||||||
|
control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
|
||||||
|
},
|
||||||
|
onClick: { action: 'onClick' }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Template let:args>
|
||||||
|
<ProsemirrorEditor {...args} on:click={args.onClick} />
|
||||||
|
</Template>
|
||||||
|
|
||||||
|
<Story
|
||||||
|
name="Base Editor"
|
||||||
|
args={{
|
||||||
|
primary: true,
|
||||||
|
label: 'Editor'
|
||||||
|
}}
|
||||||
|
/>
|
Loading…
Reference in New Issue
Block a user