Merge branch 'Tap30:main' into main

Tap30 · Jun 19, 2024 · 358affd · 358affd
2 parents 305daee + 3b8da55
commit 358affd
Show file tree

Hide file tree

Showing 45 changed files with 1,260 additions and 531 deletions.
diff --git a/docs/components/[component].paths.ts b/docs/components/[component].paths.ts
@@ -27,14 +27,12 @@ export default {
 
         let content = '';
 
-
         content += `# ${getPageTitle(component.tagName)}\n`;
 
         if (component.summary) {
           content += `${component.summary}\n`;
         }
 
-
         content += getInstallSection(component.tagName)
 
         if (component.description) {
@@ -47,7 +45,7 @@ export default {
           content += '| ---- | ---- | ---- | ---- |\n';
 
           (component.members as PropertyLike[]).forEach((member) => {
-            content += `| ${member.name} | ${member.type?.text} | ${member.default} | ${member.description} |\n`;
+            content += `| \`${member.name}\` | ${member.type?.text?.split('|').map((t) => `\`${t.trim()}\``).join(' \\| ')} | \`${member.default}\` | ${member.description} |\n`;
           });
         }
 
@@ -58,7 +56,7 @@ export default {
 
           component.slots.forEach((slot) => {
             const name = !!slot.name ? slot.name : 'default';
-            content += `| ${name} | ${slot.description} |\n`;
+            content += `| \`${name}\` | ${slot.description} |\n`;
           });
         }
 
@@ -68,7 +66,7 @@ export default {
           content += '| ---- | ---- |\n';
 
           component.cssParts.forEach((cssPart) => {
-            content += `| ${cssPart.name} | ${cssPart.description} |\n`;
+            content += `| \`${cssPart.name}\` | ${cssPart.description} |\n`;
           });
         }
 
@@ -81,7 +79,7 @@ export default {
           content += '| ---- | ---- | ---- |\n';
 
           component.cssProperties.forEach((cssProperty) => {
-            content += `| ${cssProperty.name} | ${cssProperty.default || '-'} | ${cssProperty.description || '-'} |\n`;
+            content += `| \`${cssProperty.name}\` | \`${cssProperty.default || '-'}\` | ${cssProperty.description || '-'} |\n`;
           });
         }
 
@@ -90,7 +88,7 @@ export default {
           content += '| Name  | Description\n';
           content += '| ----- | ------- |\n';
           component.events.forEach((event) => {
-            content += `| ${event.name}  | ${event.description || '-'} |\n`;
+            content += `| \`${event.name}\`  | ${event.description || '-'} |\n`;
           })
         }
 
@@ -114,15 +112,15 @@ If you are using node and NPM, you can install this component using npm:
 ::: code-group
 
 \`\`\`bash [npm]
-npm install @tapsi-oss/web-components
+npm install @tapsioss/web-components
 \`\`\`
 
 \`\`\`bash [yarn]
-yarn add @tapsi-oss/web-components
+yarn add @tapsioss/web-components
 \`\`\`
 
 \`\`\`bash [pnpm]
-pnpm install @tapsi-oss/web-components
+pnpm install @tapsioss/web-components
 \`\`\`
 
 :::
@@ -136,7 +134,7 @@ import '@tapsi-oss/web-components/${name}/${name}.js';
 }
 
 const getPageTitle = (componentName: string): string => {
-  const result = componentName.replace(/^-*(.)|-+(.)/g, (s, c, d) => c ? c.toUpperCase() : ' ' + d.toUpperCase())
-  const title = result.charAt(0).toUpperCase() + result.slice(1);
+  const result = componentName?.replace(/^-*(.)|-+(.)/g, (s, c, d) => c ? c.toUpperCase() : ' ' + d.toUpperCase())
+  const title = result?.charAt(0)?.toUpperCase() + result?.slice(1);
   return `${title} Component`
 };
diff --git a/package.json b/package.json
@@ -1,8 +1,16 @@
 {
-  "name": "@tapsi/web-components",
-  "version": "0.0.0",
+  "name": "@tapsioss/web-components",
+  "version": "0.0.0-alpha-2",
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.js.map",
+    "dist/**/*.d.ts",
+    "dist/**/*.css"
+  ],
   "type": "module",
   "scripts": {
+    "publish": "pnpm build && pnpm deploy",
+    "build": "rm -rf dist && tsc && pnpm analyze && cp -r ./tokens ./dist && cp -r ./styles ./dist",
     "dev": "tsc --watch --preserveWatchOutput & wds",
     "storybook": "storybook dev -p 3001",
     "test": "wtr --watch",
@@ -18,6 +26,7 @@
     "@eslint/js": "^9.1.1",
     "@open-wc/lit-helpers": "^0.7.0",
     "@open-wc/testing": "^4.0.0",
+    "@storybook/addon-actions": "^8.1.5",
     "@storybook/addon-essentials": "^7.6.16",
     "@storybook/addon-links": "^7.6.16",
     "@storybook/blocks": "^7.6.16",
@@ -31,6 +40,7 @@
     "@web/dev-server": "^0.4.2",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.0",
+    "custom-elements-manifest": "^2.1.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.11.0",
@@ -47,8 +57,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.4",
-    "@storybook/addon-actions": "^8.1.5",
-    "custom-elements-manifest": "^2.1.0",
-    "lit": "^3.1.2"
+    "lit": "^3.1.2",
+    "tslib": "^2.4.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/avatar/index.ts b/src/avatar/index.ts
@@ -5,7 +5,6 @@ import styles from './avatar.style.js';
 /**
  * ### Example
  *
- *
  * ##### Simple
  *
  * ```html
@@ -30,36 +29,36 @@ import styles from './avatar.style.js';
  *
  * @slot - The default slot to use when image is not present.
  *
- * @prop {`string`} [`label`=`''`] - A label to use to describe the avatar to assistive devices.
- * @prop {`string`} [`image`=`''`] - The image source to use for the avatar.
- * @prop {`'eager'` \| `'lazy'`} [`loading`=`'eager'`] -  Indicates how the browser should load the image.
- * @prop {`'xSmall'` \| `'small'` \| `'medium'` \| `'large'` \| `'xLarge'`} [`size`=`'medium'`] - The size of the avatar.
+ * @prop {string} [label=''] - A label to use to describe the avatar to assistive devices.
+ * @prop {string} [image=''] - The image source to use for the avatar.
+ * @prop {'eager' | 'lazy'} [loading='eager'] -  Indicates how the browser should load the image.
+ * @prop {'xSmall' | 'small' | 'medium' | 'large' | 'xLarge'} [size='medium'] - The size of the avatar.
  *
- * @csspart `avatar` - The container that wraps the avatar component.
- * @csspart `placeholder` - The container that wraps the avatar's placeholder.
- * @csspart `image` - The avatar image. Only shown when the image is present.
+ * @csspart [avatar] - The container that wraps the avatar component.
+ * @csspart [placeholder] - The container that wraps the avatar's placeholder.
+ * @csspart [image] - The avatar image. Only shown when the image is present.
  *
- * @cssprop [`--tap-avatar-background-color`=`--tap-sys-color-surface-secondary`]
- * @cssprop [`--tap-avatar-border-color`=`--tap-sys-color-border-primary`]
- * @cssprop [`--tap-avatar-border-radius`=`--tap-sys-radius-full`]
+ * @cssprop [--tap-avatar-background-color=--tap-sys-color-surface-secondary]
+ * @cssprop [--tap-avatar-border-color=--tap-sys-color-border-primary]
+ * @cssprop [--tap-avatar-border-radius=--tap-sys-radius-full]
  *
- * @cssprop [`--tap-avatar-width-xxSmall`=`--tap-sys-spacing-8`]
- * @cssprop [`--tap-avatar-height-xxSmall`=`--tap-sys-spacing-8`]
+ * @cssprop [--tap-avatar-width-xxSmall=--tap-sys-spacing-8]
+ * @cssprop [--tap-avatar-height-xxSmall=--tap-sys-spacing-8]
  *
- * @cssprop [`--tap-avatar-width-xSmall`=`--tap-sys-spacing-9`]
- * @cssprop [`--tap-avatar-height-xSmall`=`--tap-sys-spacing-9`]
+ * @cssprop [--tap-avatar-width-xSmall=--tap-sys-spacing-9]
+ * @cssprop [--tap-avatar-height-xSmall=--tap-sys-spacing-9]
  *
- * @cssprop [`--tap-avatar-width-small`=`--tap-sys-spacing-10`]
- * @cssprop [`--tap-avatar-height-small`=`--tap-sys-spacing-10`]
+ * @cssprop [--tap-avatar-width-small=--tap-sys-spacing-10]
+ * @cssprop [--tap-avatar-height-small=--tap-sys-spacing-10]
  *
- * @cssprop [`--tap-avatar-width-medium`=`--tap-sys-spacing-11`]
- * @cssprop [`--tap-avatar-height-medium`=`--tap-sys-spacing-11`]
+ * @cssprop [--tap-avatar-width-medium=--tap-sys-spacing-11]
+ * @cssprop [--tap-avatar-height-medium=--tap-sys-spacing-11]
  *
- * @cssprop [`--tap-avatar-width-large`=`56px`]
- * @cssprop [`--tap-avatar-height-large`=`56px`]
+ * @cssprop [--tap-avatar-width-large=56px]
+ * @cssprop [--tap-avatar-height-large=56px]
  *
- * @cssprop [`--tap-avatar-width-xLarge`=`72px`]
- * @cssprop [`--tap-avatar-height-xLarge`=`72px`]
+ * @cssprop [--tap-avatar-width-xLarge=72px]
+ * @cssprop [--tap-avatar-height-xLarge=72px]
  */
 @customElement('tap-avatar')
 export class TapAvatar extends Avatar {

diff --git a/src/badge-wrapper/index.ts b/src/badge-wrapper/index.ts
@@ -20,10 +20,10 @@ import styles from './badge-wrapper.style';
  * @summary A wrapper component to position a badge relative to its content.
  *
  * @slot - The default slot for the main content.
- * @slot `badge` - The slot for the badge to be positioned.
+ * @slot badge - The slot for the badge to be positioned.
  *
- * @csspart `wrapper` - The container that wraps the main content and the badge.
- * @csspart `badge` - The container that positions the badge.
+ * @csspart [wrapper] - The container that wraps the main content and the badge.
+ * @csspart [badge] - The container that positions the badge.
  */
 @customElement('tap-badge-wrapper')
 export class TapBadgeWrapper extends BadgeWrapper {