Skip to content

Commit 9a8cb04

Browse files
amir78729amir78729
authored
Merge pull request #11 from amir78729/fix/issues
fix: resolve some issues
2 parents 936f8ce + 21c618f commit 9a8cb04

7 files changed

+263
-104
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "cemnama",
33
"description": "a Custom Element Manifest Viewer component developed in web components",
44
"author": "Amirhossein Alibakhshi",
5-
"version": "0.0.0-alpha-3",
5+
"version": "0.0.0-alpha-4",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/amir78729/custom-element-manifest-viewer.git"

‎public/custom-elements-config.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"tap-avatar": {
3+
"propertyDefaultValues": {
4+
"image": "https://picsum.photos/200",
5+
"label": "a beautiful avatar"
6+
},
7+
"slotKnobs": {
8+
}
9+
},
10+
"tap-row": {
11+
"slotKnobs": {
12+
"leading": {
13+
"checkbox": "<tap-checkbox slot=\"leading\"></tap-checkbox>",
14+
"radio": "<tap-radio slot=\"leading\"></tap-radio>",
15+
"avatar": "<tap-avatar slot=\"leading\" size=\"small\" image=\"https://picsum.photos/100\"></tap-avatar>"
16+
},
17+
"trailing": {
18+
"button": "<tap-button slot=\"trailing\">پرداخت</tap-button>",
19+
"badge": "<tap-badge slot=\"trailing\" value=\"1\" variant=\"error\" type=\"numeral\"></tap-badge>",
20+
"icon": "<tap-icon-default color=\"black\" slot=\"trailing\"></tap-icon-default>",
21+
"price": "<p color=\"black\" slot=\"trailing\">۱۵۷٬۰۰۰ تومان</p>"
22+
},
23+
"content": {
24+
"address": "<p color=\"black\" slot=\"content\">انتخاب آدرس</p>",
25+
"simple text": "<p color=\"black\" slot=\"content\">متن ساده</p>"
26+
}
27+
}
28+
},
29+
"tap-button": {
30+
"slotKnobs": {
31+
"default": {
32+
"text": "Click"
33+
}
34+
}
35+
},
36+
"tap-pinwheel": {
37+
"propertyDefaultValues": {
38+
"items": ["1", "2", "3"]
39+
},
40+
"slotKnobs": {
41+
"default": {
42+
"text": "Click"
43+
}
44+
}
45+
}
46+
}

‎src/custom-element-manifest-viewer/constants.ts

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
export const themes = [
2+
'andromeeda',
3+
'aurora-x',
4+
'ayu-dark',
5+
'catppuccin-frappe',
6+
'catppuccin-latte',
7+
'catppuccin-macchiato',
8+
'catppuccin-mocha',
9+
'dark-plus',
10+
'dracula',
11+
'dracula-soft',
12+
'github-dark',
13+
'github-dark-default',
14+
'github-dark-dimmed',
15+
'github-light',
16+
'github-light-default',
17+
'houston',
18+
'laserwave',
19+
'light-plus',
20+
'material-theme',
21+
'material-theme-darker',
22+
'material-theme-lighter',
23+
'material-theme-ocean',
24+
'material-theme-palenight',
25+
'min-dark',
26+
'min-light',
27+
'monokai',
28+
'night-owl',
29+
'nord',
30+
'one-dark-pro',
31+
'one-light',
32+
'poimandres',
33+
'red',
34+
'rose-pine',
35+
'rose-pine-dawn',
36+
'rose-pine-moon',
37+
'slack-dark',
38+
'slack-ochin',
39+
'snazzy-light',
40+
'solarized-dark',
41+
'solarized-light',
42+
'synthwave-84',
43+
'tokyo-night',
44+
'vesper',
45+
'vitesse-black',
46+
'vitesse-dark',
47+
'vitesse-light',
48+
];

‎src/custom-element-manifest-viewer/custom-element-manifest-viewer.stories.ts

+39-56
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { html, TemplateResult } from 'lit';
2-
import './index.js';
3-
import { Meta } from '@storybook/web-components';
1+
import { html, TemplateResult } from "lit";
2+
import "./index.js";
3+
import { Meta } from "@storybook/web-components";
44

55
import "@tapsioss/web-components/dist/avatar";
66
import "@tapsioss/web-components/dist/badge";
@@ -30,18 +30,21 @@ import "@tapsioss/web-components/dist/toast";
3030
import "@tapsioss/web-components/dist/tooltip";
3131
import "@tapsioss/web-components/dist/button";
3232
import "@tapsioss/web-components/dist/styles/theme.css";
33+
import { themes } from "./constants";
34+
import type { Theme } from "./types";
3335

34-
const isDev = process.env.NODE_ENV === 'development';
36+
const isDev = process.env.NODE_ENV === "development";
3537

36-
const manifestSource = isDev ? '../sample-custom-elements.json' : '../custom-element-manifest-viewer/sample-custom-elements.json'
38+
const manifestSource = isDev ? "../sample-custom-elements.json" : "../custom-element-manifest-viewer/sample-custom-elements.json";
39+
const configSource = isDev ? "../custom-elements-config.json" : "../custom-element-manifest-viewer/custom-elements-config.json";
3740

3841
export default {
39-
title: 'custom-element-manifest-viewer',
40-
component: 'custom-element-manifest-viewer',
42+
title: "custom-element-manifest-viewer",
43+
component: "custom-element-manifest-viewer",
4144
argTypes: {
42-
'tagName': {
43-
description: 'target tag name',
44-
control: { type: 'select' },
45+
"tagName": {
46+
description: "target tag name",
47+
control: { type: "select" },
4548
options: [
4649
"tap-avatar",
4750
"tap-badge",
@@ -75,10 +78,15 @@ export default {
7578
"tap-textarea",
7679
"tap-toast",
7780
"tap-tooltip",
78-
"tap-button",
81+
"tap-button"
7982
]
8083
},
81-
},
84+
"theme": {
85+
description: "code preview theme",
86+
control: { type: "select" },
87+
options: themes
88+
}
89+
}
8290
} as Meta;
8391

8492
interface Story<T> {
@@ -89,57 +97,31 @@ interface Story<T> {
8997
}
9098

9199
interface ArgTypes {
92-
src: string;
100+
manifest: string;
93101
tagName: string;
102+
theme: Theme;
94103
}
95104

96-
const Template: Story<ArgTypes> = ({ tagName}) => html`
97-
<custom-element-manifest-viewer tag-name=${tagName} src=${manifestSource}>
105+
const Template: Story<ArgTypes> = ({ tagName, theme }) => html`
106+
<custom-element-manifest-viewer config=${configSource} tag-name=${tagName} .theme=${theme} manifest=${manifestSource}>
98107
</custom-element-manifest-viewer>
99108
`;
100109

101110
export const Default = Template.bind({});
102111

103112
Default.args = {
104-
tagName: 'tap-avatar'
113+
tagName: "tap-avatar"
105114
};
106115

107116
// ---
108117

109-
const Slots: Story<ArgTypes> = ({ tagName}) => html`
110-
<custom-element-manifest-viewer tag-name='tap-row' src=${manifestSource}>
111-
<template datatype="slot" title="checkbox">
112-
<tap-checkbox slot="leading"></tap-checkbox>
113-
</template>
114-
<template datatype="slot" title="radio">
115-
<tap-radio slot="leading"></tap-radio>
116-
</template>
117-
<template datatype="slot" title="avatar">
118-
<tap-avatar slot="leading" size="small" image="https://picsum.photos/100"></tap-avatar>
119-
</template>
120-
<template datatype="slot" title="button">
121-
<tap-button slot="trailing">پرداخت</tap-button>
122-
</template>
123-
<template datatype="slot" title="badge">
124-
<tap-badge slot="trailing" value="1" variant="error" type="numeral"></tap-badge>
125-
</template>
126-
<template datatype="slot" title="icon">
127-
<tap-icon-default color="black" slot="trailing"></tap-icon-default>
128-
</template>
129-
<template datatype="slot" title="price">
130-
<p color="black" slot="trailing">۱۵۷٬۰۰۰ تومان</p>
131-
</template>
132-
<template datatype="slot" title="address">
133-
<p color="black" slot="content">انتخاب آدرس</p>
134-
</template>
135-
<template datatype="slot" title="text">
136-
<p color="black" slot="content">متن ساده</p>
137-
</template>
118+
const Slots: Story<ArgTypes> = ({ tagName, theme }) => html`
119+
<custom-element-manifest-viewer config=${configSource} tag-name='tap-row' .theme=${theme} manifest=${manifestSource}>
138120
</custom-element-manifest-viewer>
139-
121+
140122
<hr>
141-
142-
<custom-element-manifest-viewer tag-name='tap-button' src=${manifestSource}>
123+
124+
<custom-element-manifest-viewer config=${configSource} tag-name='tap-button' manifest=${manifestSource}>
143125
<template datatype="slot" title="default">
144126
Click!
145127
</template>
@@ -149,13 +131,13 @@ const Slots: Story<ArgTypes> = ({ tagName}) => html`
149131
export const CustomSlots = Slots.bind({});
150132

151133
CustomSlots.args = {
152-
tagName: 'tap-avatar'
134+
tagName: "tap-avatar"
153135
};
154136

155137
// ---
156138

157-
const DefaultTemplate: Story<ArgTypes> = ({ tagName}) => html`
158-
<custom-element-manifest-viewer tag-name='tap-avatar' src=${manifestSource}>
139+
const DefaultTemplate: Story<ArgTypes> = ({ tagName, theme }) => html`
140+
<custom-element-manifest-viewer config=${configSource} tag-name='tap-avatar' .theme=${theme} manifest=${manifestSource}>
159141
<template datatype="prop-default-value" title="image">
160142
https://picsum.photos/200
161143
</template>
@@ -165,12 +147,12 @@ const DefaultTemplate: Story<ArgTypes> = ({ tagName}) => html`
165147
export const DefaultValue = DefaultTemplate.bind({});
166148

167149
DefaultValue.args = {
168-
tagName: 'tap-avatar'
150+
tagName: "tap-avatar"
169151
};
170152

171153
// ---
172154

173-
const Theme: Story<ArgTypes> = ({ tagName}) => html`
155+
const Theme: Story<ArgTypes> = ({ tagName, theme }) => html`
174156
<style>
175157
custom-element-manifest-viewer::part(container) {
176158
display: flex;
@@ -203,7 +185,7 @@ const Theme: Story<ArgTypes> = ({ tagName}) => html`
203185
204186
custom-element-manifest-viewer::part(component-preview) {
205187
background-color: #fff;
206-
background-image: linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee);
188+
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
207189
background-size: 20px 20px;
208190
background-position: 0 0, 10px 10px;
209191
color: black;
@@ -240,12 +222,13 @@ const Theme: Story<ArgTypes> = ({ tagName}) => html`
240222
border-radius: 0 0 8px 8px;
241223
}
242224
</style>
243-
<custom-element-manifest-viewer tag-name=${tagName} src=${manifestSource}>
225+
<custom-element-manifest-viewer config=${configSource} tag-name=${tagName} .theme=${theme} manifest=${manifestSource}>
244226
</custom-element-manifest-viewer>
245227
`;
246228

247229
export const UsingTheme = Theme.bind({});
248230

249231
UsingTheme.args = {
250-
tagName: 'tap-avatar'
232+
tagName: "tap-avatar",
233+
theme: 'github-dark'
251234
};

0 commit comments

Comments
 (0)