1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import type { Meta, StoryObj } from '@storybook/react';
import { Code } from './code';
const meta = {
component: Code,
title: 'Molecules/Code',
} satisfies Meta<typeof Code>;
export default meta;
type Story = StoryObj<typeof meta>;
const javascriptCodeSample = `
const foo = () => {
return 'bar';
}
`;
export const CodeSample: Story = {
args: {
children: javascriptCodeSample,
language: 'javascript',
},
};
/**
* @todo Find a way to make it working: line-highlight plugin is not loaded.
*/
export const Highlighting: Story = {
args: {
children: javascriptCodeSample,
highlight: '3',
language: 'javascript',
},
};
// cSpell:ignore xinitrc
const commandLineCode = `
ls -lah
#output#drwxr-x---+ 42 armand armand 4,0K 17 april 11:15 .
#output#drwxr-xr-x 4 root root 4,0K 30 mai 2021 ..
#output#-rw-r--r-- 1 armand armand 2,0K 21 jul. 2021 .xinitrc
`;
export const CommandLine: Story = {
args: {
children: commandLineCode,
cmdOutputFilter: '#output#',
isCmd: true,
language: 'bash',
},
};
// cSpell:ignore lcov
const treeSample = `
.
├── bin
│ └── deploy.sh
├── CHANGELOG.md
├── commitlint.config.cjs
├── coverage
│ ├── clover.xml
│ ├── coverage-final.json
│ ├── lcov-report
│ └── lcov.info
├── cspell.json
├── cypress.config.js
├── docker-compose.yml
├── Dockerfile
├── jest.config.js
├── jest.setup.js
├── lang
│ ├── en.json
│ └── fr.json
├── LICENSE
├── lint-staged.config.js
├── mdx.d.ts
├── next-env.d.ts
├── next-sitemap.config.cjs
├── next.config.js
├── package.json
├── public
│ ├── apple-touch-icon.png
│ ├── armand-philippot.jpg
│ ├── favicon.ico
│ ├── icon-192.png
│ ├── icon-512.png
│ ├── icon.svg
│ ├── manifest.webmanifest
│ ├── prism
│ ├── projects
│ ├── robots.txt
│ ├── sitemap-0.xml
│ ├── sitemap.xml
│ └── vercel.svg
├── README.md
├── src
│ ├── assets
│ ├── components
│ ├── content
│ ├── i18n
│ ├── pages
│ ├── services
│ ├── styles
│ ├── types
│ └── utils
├── tests
│ ├── cypress
│ ├── jest
│ └── utils
├── tsconfig.eslint.json
├── tsconfig.json
├── tsconfig.tsbuildinfo
└── yarn.lock`;
/**
* @todo Find a way to make it working: treeview plugin is not loaded.
*/
export const TreeView: Story = {
args: {
children: treeSample,
language: 'treeview',
},
};
const diffSample = `
--- file1.js 2023-10-13 19:17:05.540644084 +0200
+++ file2.js 2023-10-13 19:17:15.310564281 +0200
@@ -1,2 +1 @@
-let foo = bar.baz([1, 2, 3]);
-foo = foo + 1;
+const foo = bar.baz([1, 2, 3]) + 1;`;
export const Diff: Story = {
args: {
children: diffSample,
isDiff: true,
language: 'diff',
},
};
|
