feat(core): add sage-icon library to core lib

chore(storybook): merge icon and core docs.json files

This is needed to have a single source to list out

the properties for the components using argsTable function

libs/core/.eslintignore

@@ -2,5 +2,4 @@ src/components.d.ts
 **/*.spec.ts
 **/*.spec.tsx
 **/*.e2e.ts
-**/*.d.ts
 **/*.stories.*

libs/core/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": ["plugin:@stencil/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": ["./tsconfig.json"]
   },

libs/core/.storybook/preview.js

@@ -1,6 +1,16 @@
 import { extractArgTypes, extractComponentDescription, setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
 
 import docsJson from '../dist/docs.json';
+import iconDocsJson from '../../icons/dist/docs.json';
+
+/*
+*
+* Merge the Icon docs.json with core docs.json file
+* This is needed to list out the Properties in the argsTable
+*
+*/
+const combinedDocsJson = [...new Set([...docsJson.components, ...iconDocsJson.components])];
+docsJson.components = combinedDocsJson
 
 if (docsJson) { setStencilDocJson(docsJson) }
 

libs/core/package.json

@@ -20,7 +20,8 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/core/core.esm.js",
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com/"
+    "registry": "https://npm.pkg.github.com/",
+    "directory": "dist"
   },
   "repository": {
     "type": "git",
@@ -49,7 +50,8 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "dependencies": {
-    "@stencil/core": "^2.18.0"
+    "@stencil/core": "^2.18.0",
+    "@sage/icons": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

libs/core/src/components/sage-icon/sage-icon.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import {html, render} from 'lit-html';
+
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+<Meta title="webcomponents/Icon" component="sage-icon" argTypes={extractArgTypes('sage-icon')} />
+
+export const Template = (args) => html`<sage-icon name=${args.name} size=${args.size}></sage-icon>`;
+
+# Sage icon
+
+<Canvas>
+  <Story name="Default" args={{name: "upload"}}>
+    {Template.bind()}
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable of="sage-icon" />

libs/core/src/global/sage-ui-global.ts

@@ -0,0 +1 @@
+import '@sage/icons';

libs/core/src/index.ts

@@ -1 +1 @@
-export * from './components';
+import '@sage/icons';

libs/core/src/interface.d.ts

@@ -0,0 +1,17 @@
+import type { Components as SageIconsComponents, JSX as SageIconsJSX } from '@sage/icons';
+
+export * from './components';
+export * from './index';
+
+
+declare module './components' {
+  export namespace Components {
+    export type SageIcon = SageIconsComponents.SageIcon;
+  }
+}
+
+declare module './components' {
+  export namespace JSX {
+    export type SageIcon = SageIconsJSX.SageIcon;
+  }
+}