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,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100
|
||||
|
||||
@ -1,23 +1,22 @@
|
||||
module.exports = {
|
||||
// NOTE! added support for Vite builder
|
||||
core: {
|
||||
builder: "storybook-builder-vite"
|
||||
},
|
||||
stories: [
|
||||
"../src/**/*.stories.mdx",
|
||||
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-svelte-csf"
|
||||
],
|
||||
svelteOptions: {
|
||||
preprocess: require('svelte-preprocess')({
|
||||
typescript: true,
|
||||
postcss: true,
|
||||
sourceMap: true
|
||||
})
|
||||
}
|
||||
// NOTE! added support for Vite builder
|
||||
webpackFinal: async (config) => {
|
||||
const svelteLoader = config.module.rules.find(
|
||||
(r) => r.loader && r.loader.includes('svelte-loader')
|
||||
);
|
||||
svelteLoader.options.preprocess = require('svelte-preprocess')();
|
||||
return config;
|
||||
},
|
||||
core: {
|
||||
builder: 'storybook-builder-vite'
|
||||
},
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
|
||||
svelteOptions: {
|
||||
preprocess: require('svelte-preprocess')({
|
||||
typescript: true,
|
||||
postcss: 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"
|
||||
}
|
||||
75965
package-lock.json
generated
75965
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
119
package.json
119
package.json
@ -1,61 +1,62 @@
|
||||
{
|
||||
"name": "sveltekit-tailwind-storybook",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build",
|
||||
"package": "svelte-kit package",
|
||||
"preview": "svelte-kit preview",
|
||||
"prepare": "svelte-kit sync",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
|
||||
"format": "prettier --write --plugin-search-dir=. .",
|
||||
"tailwind:watch": "cross-env TAILWIND_MODE=watch cross-env NODE_ENV=development postcss src/styles/tailwind.css -o static/app.css -w",
|
||||
"tailwind:build": "cross-env TAILWIND_MODE=build cross-env NODE_ENV=production postcss src/styles/tailwind.css -o static/app.css",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mdx-js/react": "^2.1.1",
|
||||
"@playwright/test": "^1.21.0",
|
||||
"@storybook/addon-actions": "^6.5.6",
|
||||
"@storybook/addon-docs": "^6.5.6",
|
||||
"@storybook/addon-essentials": "^6.5.6",
|
||||
"@storybook/addon-links": "^6.5.6",
|
||||
"@storybook/addon-svelte-csf": "^2.0.4",
|
||||
"@storybook/svelte": "^6.5.6",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"@types/cookie": "^0.4.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
||||
"@typescript-eslint/parser": "^5.10.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"concurrently": "^7.2.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"daisyui": "^2.15.2",
|
||||
"eslint": "^8.12.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-cli": "^9.1.0",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-nesting": "^10.1.7",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-svelte": "^2.5.0",
|
||||
"storybook-builder-vite": "^0.1.23",
|
||||
"svelte": "^3.46.0",
|
||||
"svelte-check": "^2.2.6",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "~4.6.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.0",
|
||||
"cookie": "^0.4.1"
|
||||
}
|
||||
"name": "sveltekit-tailwind-storybook",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build",
|
||||
"package": "svelte-kit package",
|
||||
"preview": "svelte-kit preview",
|
||||
"prepare": "svelte-kit sync",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
|
||||
"format": "prettier --write --plugin-search-dir=. .",
|
||||
"tailwind:watch": "cross-env TAILWIND_MODE=watch cross-env NODE_ENV=development postcss src/styles/tailwind.css -o static/app.css -w",
|
||||
"tailwind:build": "cross-env TAILWIND_MODE=build cross-env NODE_ENV=production postcss src/styles/tailwind.css -o static/app.css",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mdx-js/react": "^2.1.1",
|
||||
"@playwright/test": "^1.21.0",
|
||||
"@storybook/addon-actions": "^6.5.6",
|
||||
"@storybook/addon-docs": "^6.5.6",
|
||||
"@storybook/addon-essentials": "^6.5.6",
|
||||
"@storybook/addon-links": "^6.5.6",
|
||||
"@storybook/addon-svelte-csf": "^2.0.4",
|
||||
"@storybook/svelte": "^6.5.6",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"@types/cookie": "^0.4.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
||||
"@typescript-eslint/parser": "^5.10.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"concurrently": "^7.2.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"daisyui": "^2.15.2",
|
||||
"eslint": "^8.12.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-cli": "^9.1.0",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-nesting": "^10.1.7",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-svelte": "^2.5.0",
|
||||
"storybook-builder-vite": "^0.1.23",
|
||||
"svelte": "^3.46.0",
|
||||
"svelte-check": "^2.2.6",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "~4.6.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.0",
|
||||
"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>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Button from "../lib/button/Button.svelte";
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Example/Button"
|
||||
component={Button}
|
||||
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>
|
||||
<Button {...args} on:click={args.onClick} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
args={{
|
||||
primary: true,
|
||||
label: "Button",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Secondary"
|
||||
args={{
|
||||
label: "Button",
|
||||
}}
|
||||
/>
|
||||
<Story
|
||||
name="Large"
|
||||
args={{
|
||||
size: "lg",
|
||||
label: "Button",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Small"
|
||||
args={{
|
||||
size: "sm",
|
||||
label: "Button",
|
||||
}}
|
||||
/>
|
||||
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
import Button from '../lib/button/Button.svelte';
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Example/Button"
|
||||
component={Button}
|
||||
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>
|
||||
<Button {...args} on:click={args.onClick} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
args={{
|
||||
primary: true,
|
||||
label: 'Button'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Secondary"
|
||||
args={{
|
||||
label: 'Button'
|
||||
}}
|
||||
/>
|
||||
<Story
|
||||
name="Large"
|
||||
args={{
|
||||
size: 'lg',
|
||||
label: 'Button'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Small"
|
||||
args={{
|
||||
size: 'sm',
|
||||
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