Skip to content

Commit 718e8ef

Browse files
hatemhosnyhatemhosny
committed
add stories
1 parent 7e08ada commit 718e8ef

20 files changed

Lines changed: 302 additions & 66 deletions

File tree

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"scripts": {
1414
"start": "run-p copy:assets watch serve",
1515
"docs": "cd docs && npm run start",
16-
"storybook": "cd storybook && npm run storybook",
16+
"storybook": "run-p storybook:*",
1717
"serve": "run-p serve:*",
1818
"serve:app": "live-server build --watch=build/tmp/ --cors --quiet",
1919
"serve:sandbox": "live-server src/livecodes/html/sandbox/ --port=8085 --cors --quiet --no-browser",
@@ -23,9 +23,10 @@
2323
"build": "run-s build:*",
2424
"build:app": "run-s clean copy:* && node ./scripts/build.js",
2525
"build:docs": "cd docs && npm run build",
26-
"build:storybook": "npm run generate-stories && cd storybook && npm run build",
27-
"generate-stories": "node ./scripts/generate-stories.mts && cd storybook && npm run format-stories",
26+
"build:storybook": "node ./scripts/generate-stories.mts && cd storybook && npm run build",
2827
"copy:assets": "recursive-delete build/livecodes/assets && mkdirp build/livecodes/assets && recursive-copy src/livecodes/assets build/livecodes/assets",
28+
"storybook:watch": "nodemon --watch storybook/_stories -e \"*\" ./scripts/generate-stories.mts",
29+
"storybook:serve": "cd storybook/react && npm run storybook",
2930
"typedocs": "run-s typedocs:*",
3031
"typedocs:livecodes": "typedoc src/livecodes/main.ts src/livecodes/app.ts src/livecodes/embed.ts src/livecodes/_modules.ts --out build/typedocs/livecodes --exclude **/*.spec.ts --excludeExternals",
3132
"typedocs:sdk": "typedoc src/sdk/livecodes.ts --out build/typedocs/sdk --exclude **/*.spec.ts --excludeExternals",

‎scripts/generate-stories.mts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { exec } from 'child_process';
12
import fs from 'fs';
23
import path from 'path';
34
import type { StoryDef } from '../storybook/common';
@@ -62,3 +63,12 @@ for (const def of storyDefs) {
6263
fs.writeFileSync(outPath, stories);
6364
}
6465
}
66+
67+
exec('npx prettier --write storybook/**/*.stories.ts', (error, stdout, stderr) => {
68+
if (error) {
69+
console.error(`failed to format stories: ${error}`);
70+
return;
71+
}
72+
console.log(stdout);
73+
console.error(stderr);
74+
});

‎storybook/_stories/Basic.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,95 @@ console.log("🚀 LiveCodes is ready!");
221221
template: 'react',
222222
},
223223
},
224+
SimpleMode: {
225+
props: {
226+
config: {
227+
mode: 'simple',
228+
activeEditor: 'script',
229+
script: {
230+
language: 'vue',
231+
content: `<script setup lang="tsx">
232+
import { ref } from 'vue';
233+
234+
interface Props {
235+
name?: string
236+
}
237+
const props = defineProps<Props>();
238+
const count = ref(0);
239+
const align = 'center';
240+
241+
// define inline component
242+
function Greeting(props: Props) {
243+
return <h1>Hello, { props.name || 'World' }!</h1>
244+
}
245+
</script>
246+
247+
<template>
248+
<div class="container">
249+
<Greeting :name="props.name" />
250+
<img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/vue.svg" />
251+
<p>You clicked {{ count }} times.</p>
252+
<button @click="count++">Click me</button>
253+
</div>
254+
</template>
255+
256+
<style scoped>
257+
.container,
258+
.container button {
259+
text-align: v-bind("align");
260+
font: 1em sans-serif;
261+
}
262+
.logo {
263+
width: 150px;
264+
}
265+
</style>
266+
`,
267+
},
268+
},
269+
},
270+
},
271+
Theme: {
272+
props: {
273+
config: {
274+
theme: 'light',
275+
themeColor: '#F63C00',
276+
activeEditor: 'script',
277+
markup: { language: 'html', hideTitle: true },
278+
style: { language: 'css', hideTitle: true },
279+
script: {
280+
title: 'App.svelte',
281+
language: 'svelte',
282+
content: `<script>
283+
let { title = "World" } = $props();
284+
let counter = $state(0);
285+
function increment() {
286+
counter += 1;
287+
}
288+
</script>
289+
290+
<style>
291+
.container,
292+
.container button {
293+
text-align: center;
294+
font: 1em sans-serif;
295+
}
296+
.logo {
297+
width: 150px;
298+
}
299+
</style>
300+
301+
<div class="container">
302+
<h1>Hello, {title}!</h1>
303+
<img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/svelte.svg" />
304+
<p>You clicked {counter} times.</p>
305+
<button on:click={increment}>Click me</button>
306+
</div>
307+
`,
308+
},
309+
},
310+
height: '450',
311+
},
312+
},
224313
};
225314

226315
export default storyDef;

storybook/_stories/Styles.ts renamed to storybook/_stories/Styles/Styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { StoryDef } from '../common';
1+
import type { StoryDef } from '../../common';
22

33
const storyDef: StoryDef = {
44
Height: { props: { height: '85vh' }, storyName: 'height' },

‎storybook/package-lock.json‎

Lines changed: 0 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎storybook/package.json‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,6 @@
1010
"install:svelte": "cd svelte && npm ci",
1111
"install:vue": "cd vue && npm ci",
1212
"install:web-components": "cd web-components && npm ci --force",
13-
"format-stories": "run-p format-stories:*",
14-
"format-stories:preact": "prettier preact/stories --write",
15-
"format-stories:react": "prettier react/stories --write",
16-
"format-stories:solid": "prettier solid/stories --write",
17-
"format-stories:svelte": "prettier svelte/stories --write",
18-
"format-stories:vue": "prettier vue/stories --write",
19-
"format-stories:web-components": "prettier web-components/stories --write",
2013
"build": "run-p build:* && node ./scripts/copy-index.mjs",
2114
"build:preact": "cd preact && npm run build-storybook -- -o ../../build/stories/preact",
2215
"build:react": "cd react && npm run build-storybook -- -o ../../build/stories/react",
@@ -45,7 +38,6 @@
4538
},
4639
"devDependencies": {
4740
"npm-run-all": "4.1.5",
48-
"prettier": "3.8.1",
4941
"typescript": "^5.9.3"
5042
}
5143
}

‎storybook/preact/stories/Basic.stories.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,30 @@ export const Introduction = livecodesStory({
3030
});
3131
export const Default = livecodesStory({});
3232
export const ReactTemplate = livecodesStory({ template: 'react' });
33+
export const SimpleMode = livecodesStory({
34+
config: {
35+
mode: 'simple',
36+
activeEditor: 'script',
37+
script: {
38+
language: 'vue',
39+
content:
40+
'<script setup lang="tsx">\n import { ref } from \'vue\';\n\n interface Props {\n name?: string\n }\n const props = defineProps<Props>();\n const count = ref(0);\n const align = \'center\';\n\n // define inline component\n function Greeting(props: Props) {\n return <h1>Hello, { props.name || \'World\' }!</h1>\n }\n</script>\n\n<template>\n <div class="container">\n <Greeting :name="props.name" />\n <img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/vue.svg" />\n <p>You clicked {{ count }} times.</p>\n <button @click="count++">Click me</button>\n </div>\n</template>\n\n<style scoped>\n .container,\n .container button {\n text-align: v-bind("align");\n font: 1em sans-serif;\n }\n .logo {\n width: 150px;\n }\n</style>\n',
41+
},
42+
},
43+
});
44+
export const Theme = livecodesStory({
45+
config: {
46+
theme: 'light',
47+
themeColor: '#F63C00',
48+
activeEditor: 'script',
49+
markup: { language: 'html', hideTitle: true },
50+
style: { language: 'css', hideTitle: true },
51+
script: {
52+
title: 'App.svelte',
53+
language: 'svelte',
54+
content:
55+
'<script>\n let { title = "World" } = $props();\n let counter = $state(0);\n function increment() {\n counter += 1;\n }\n</script>\n\n<style>\n .container,\n .container button {\n text-align: center;\n font: 1em sans-serif;\n }\n .logo {\n width: 150px;\n }\n</style>\n\n<div class="container">\n <h1>Hello, {title}!</h1>\n <img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/svelte.svg" />\n <p>You clicked {counter} times.</p>\n <button on:click={increment}>Click me</button>\n</div>\n',
56+
},
57+
},
58+
height: '450',
59+
});

storybook/preact/stories/Styles.stories.ts renamed to storybook/preact/stories/Styles/Styles.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { defaultMeta, livecodesStory, type LiveCodes, type Meta } from '#src';
55

66
export default {
77
...defaultMeta,
8-
title: 'Styles',
8+
title: 'Styles/Styles',
99
} satisfies Meta<typeof LiveCodes>;
1010

1111
export const Height = livecodesStory({ height: '85vh' });

‎storybook/react/stories/Basic.stories.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,30 @@ export const Introduction = livecodesStory({
3030
});
3131
export const Default = livecodesStory({});
3232
export const ReactTemplate = livecodesStory({ template: 'react' });
33+
export const SimpleMode = livecodesStory({
34+
config: {
35+
mode: 'simple',
36+
activeEditor: 'script',
37+
script: {
38+
language: 'vue',
39+
content:
40+
'<script setup lang="tsx">\n import { ref } from \'vue\';\n\n interface Props {\n name?: string\n }\n const props = defineProps<Props>();\n const count = ref(0);\n const align = \'center\';\n\n // define inline component\n function Greeting(props: Props) {\n return <h1>Hello, { props.name || \'World\' }!</h1>\n }\n</script>\n\n<template>\n <div class="container">\n <Greeting :name="props.name" />\n <img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/vue.svg" />\n <p>You clicked {{ count }} times.</p>\n <button @click="count++">Click me</button>\n </div>\n</template>\n\n<style scoped>\n .container,\n .container button {\n text-align: v-bind("align");\n font: 1em sans-serif;\n }\n .logo {\n width: 150px;\n }\n</style>\n',
41+
},
42+
},
43+
});
44+
export const Theme = livecodesStory({
45+
config: {
46+
theme: 'light',
47+
themeColor: '#F63C00',
48+
activeEditor: 'script',
49+
markup: { language: 'html', hideTitle: true },
50+
style: { language: 'css', hideTitle: true },
51+
script: {
52+
title: 'App.svelte',
53+
language: 'svelte',
54+
content:
55+
'<script>\n let { title = "World" } = $props();\n let counter = $state(0);\n function increment() {\n counter += 1;\n }\n</script>\n\n<style>\n .container,\n .container button {\n text-align: center;\n font: 1em sans-serif;\n }\n .logo {\n width: 150px;\n }\n</style>\n\n<div class="container">\n <h1>Hello, {title}!</h1>\n <img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/svelte.svg" />\n <p>You clicked {counter} times.</p>\n <button on:click={increment}>Click me</button>\n</div>\n',
56+
},
57+
},
58+
height: '450',
59+
});

storybook/react/stories/Styles.stories.ts renamed to storybook/react/stories/Styles/Styles.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { defaultMeta, livecodesStory, type LiveCodes, type Meta } from '#src';
55

66
export default {
77
...defaultMeta,
8-
title: 'Styles',
8+
title: 'Styles/Styles',
99
} satisfies Meta<typeof LiveCodes>;
1010

1111
export const Height = livecodesStory({ height: '85vh' });

0 commit comments

Comments
 (0)