diff --git a/.gitignore b/.gitignore index d5268d7d9..774a3335a 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,7 @@ log.txt ## Types & Maps *.d.ts +!component.d.ts *.d.ts.map *.js.map *.map diff --git a/.storybook/main.js b/.storybook/main.js index 81cda3d9a..8b0543466 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -30,7 +30,7 @@ module.exports = { modernInlineRender: false, }, framework: { - name: '@storybook/web-components-vite', + name: getAbsolutePath('@storybook/web-components-vite'), options: {}, }, docs: { @@ -38,3 +38,7 @@ module.exports = { defaultName: 'Documentation', // set to change the name of generated docs entries }, }; + +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))); +} diff --git a/LICENSE b/LICENSE deleted file mode 100644 index d1e33f7c5..000000000 --- a/LICENSE +++ /dev/null @@ -1,28 +0,0 @@ -# BSD 3-Clause License - -Copyright (c) 2019 Google LLC. All rights reserved. - -Redistribution and use in source and binary forms, with or without -modification, are permitted provided that the following conditions are met: - -1. Redistributions of source code must retain the above copyright notice, this - list of conditions and the following disclaimer. - -2. Redistributions in binary form must reproduce the above copyright notice, - this list of conditions and the following disclaimer in the documentation - and/or other materials provided with the distribution. - -3. Neither the name of the copyright holder nor the names of its - contributors may be used to endorse or promote products derived from - this software without specific prior written permission. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" -AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE -IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE -DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE -FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL -DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR -SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER -CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, -OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 000000000..9a9476d8b --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,9 @@ +# MIT License + +Copyright (c) 2024 Phase2 Technology + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/package.json b/package.json index 96fddfa3c..3a9b9b63d 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "clean:storybook": "rimraf storybook-static", "clean:css": "rimraf packages/**/*.lit.*", "clean:maps": "rimraf packages/**/*.map", - "clean:types": "rimraf packages/**/*.d.ts", + "clean:types": "rimraf 'packages/**/!(component).d.ts'", "dev": "yarn watch", "fix": "yarn format && yarn lint", "format": "npm-run-all -s format:*", @@ -85,12 +85,12 @@ "@commitlint/cli": "^17.4.0", "@commitlint/config-conventional": "^17.4.0", "@open-wc/testing": "^3.0.0-next.2", - "@storybook/addon-actions": "^7.6.16", - "@storybook/addon-docs": "^7.6.16", - "@storybook/addon-essentials": "^7.6.16", - "@storybook/addon-links": "^7.6.16", - "@storybook/web-components": "^7.6.16", - "@storybook/web-components-vite": "^7.6.16", + "@storybook/addon-actions": "^7.6.17", + "@storybook/addon-docs": "^7.6.17", + "@storybook/addon-essentials": "^7.6.17", + "@storybook/addon-links": "^7.6.17", + "@storybook/web-components": "^7.6.17", + "@storybook/web-components-vite": "^7.6.17", "@types/estree": "^0.0.47", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", @@ -119,7 +119,7 @@ "react-syntax-highlighter": "^15.5.0", "rimraf": "^3.0.2", "rsync": "^0.6.1", - "storybook": "^7.6.16", + "storybook": "^7.6.17", "svgo": "^2.8.0", "tailwindcss": "3.0.0", "ts-lit-plugin": "^1.2.1", diff --git a/packages/components/outline-core-accordion/src/outline-core-accordion.ts b/packages/components/outline-core-accordion/src/outline-core-accordion.ts index 2e982c569..59b100973 100644 --- a/packages/components/outline-core-accordion/src/outline-core-accordion.ts +++ b/packages/components/outline-core-accordion/src/outline-core-accordion.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-accordion.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-accordion'; * The Outline Core Accordion component * * @element outline-core-accordion - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-accordion'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreAccordion extends OutlineElement { +export class OutlineCoreAccordion extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreAccordion extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreAccordion; diff --git a/packages/components/outline-core-alert/package.json b/packages/components/outline-core-alert/package.json index 16e45ec1a..7ef1d49db 100644 --- a/packages/components/outline-core-alert/package.json +++ b/packages/components/outline-core-alert/package.json @@ -9,9 +9,12 @@ "image", "picture" ], - "main": "index.ts", - "types": "index.ts", - "typings": "index.d.ts", + "engines": { + "node": ">=20" + }, + "type": "module", + "main": "dist/index.js", + "types": "dist/src/outline-core-alert.d.ts", "files": [ "/dist/", "/src/", @@ -29,17 +32,20 @@ "build": "node ../../../scripts/build.js", "package": "yarn publish" }, - "dependencies": { - "lit": "^3.1.2" - }, "publishConfig": { "access": "public" }, "exports": { - ".": "./index.ts" + ".": { + "import": "./index.ts", + "require": "./dist/index.js", + "default": "./dist/index.js" + }, + "./package.json": "./package.json" + }, + "dependencies": { + "lit": "^3.1.2", + "@phase2/outline-adopted-stylesheets-controller": "^1.0.2" }, - "devDependencies": { - "@phase2/outline-adopted-stylesheets-controller": "^1.0.2", - "@phase2/outline-core": "^0.2.7" - } + "devDependencies": {} } diff --git a/packages/components/outline-core-alert/src/outline-core-alert.ts b/packages/components/outline-core-alert/src/outline-core-alert.ts index 2cba32d28..a0bfafdd5 100644 --- a/packages/components/outline-core-alert/src/outline-core-alert.ts +++ b/packages/components/outline-core-alert/src/outline-core-alert.ts @@ -1,7 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { OutlineElement } from '@phase2/outline-core'; import { CoreAlertStatusType, OutlineCoreAlertInterface, @@ -18,7 +17,7 @@ const componentName = 'outline-core-alert'; * The Outline Core Alert component * * @element outline-core-alert - * @extends OutlineElement + * @extends LitElement * @slot header - The header in the alert. * @slot icon-start - The icon to display at the start of the alert. * @slot default - The alert contents. @@ -39,7 +38,7 @@ const componentName = 'outline-core-alert'; */ @customElement(componentName) export class OutlineCoreAlert - extends OutlineElement + extends LitElement implements OutlineCoreAlertInterface { GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets( @@ -89,6 +88,11 @@ export class OutlineCoreAlert } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreAlert; diff --git a/packages/components/outline-core-alert/tsconfig.build.json b/packages/components/outline-core-alert/tsconfig.build.json index 5eac9d313..2418527ce 100644 --- a/packages/components/outline-core-alert/tsconfig.build.json +++ b/packages/components/outline-core-alert/tsconfig.build.json @@ -1,9 +1,9 @@ { - "extends": "../../../tsconfig.json", + "extends": "../../../tsconfig.build.json", "compilerOptions": { "rootDir": ".", "outDir": "./dist" }, - "include": ["index.ts", "src/**/*", "tests/**/*"], - "references": [{ "path": "../../outline-core/tsconfig.build.json" }] + "include": ["index.ts", "src/**/*", "tests/**/*", "../../env.d.ts"], + "exclude": ["**/*.js"] } diff --git a/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts b/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts index 488721447..fabb9d728 100644 --- a/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts +++ b/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-breadcrumb.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-breadcrumb'; * The Outline Core Breadcrumb component * * @element outline-core-breadcrumb - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-breadcrumb'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreBreadcrumb extends OutlineElement { +export class OutlineCoreBreadcrumb extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreBreadcrumb extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreBreadcrumb; diff --git a/packages/components/outline-core-card/src/outline-core-card.ts b/packages/components/outline-core-card/src/outline-core-card.ts index fe0ee72b7..957dbfd1b 100644 --- a/packages/components/outline-core-card/src/outline-core-card.ts +++ b/packages/components/outline-core-card/src/outline-core-card.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-card.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-card'; * The Outline Core Card component * * @element outline-core-card - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-card'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreCard extends OutlineElement { +export class OutlineCoreCard extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreCard extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreCard; diff --git a/packages/components/outline-core-container/src/outline-core-container.ts b/packages/components/outline-core-container/src/outline-core-container.ts index a86255fd4..2002547ee 100644 --- a/packages/components/outline-core-container/src/outline-core-container.ts +++ b/packages/components/outline-core-container/src/outline-core-container.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-container.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-container'; * The Outline Core Container component * * @element outline-core-container - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-container'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreContainer extends OutlineElement { +export class OutlineCoreContainer extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreContainer extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreContainer; diff --git a/packages/components/outline-core-form/src/outline-core-form.ts b/packages/components/outline-core-form/src/outline-core-form.ts index 417008a50..76ada9c4e 100644 --- a/packages/components/outline-core-form/src/outline-core-form.ts +++ b/packages/components/outline-core-form/src/outline-core-form.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-form.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-form'; * The Outline Core Form component * * @element outline-core-form - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-form'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreForm extends OutlineElement { +export class OutlineCoreForm extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreForm extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreForm; diff --git a/packages/components/outline-core-icon/src/outline-core-icon.ts b/packages/components/outline-core-icon/src/outline-core-icon.ts index 602f851d0..0eec527da 100644 --- a/packages/components/outline-core-icon/src/outline-core-icon.ts +++ b/packages/components/outline-core-icon/src/outline-core-icon.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-icon.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-icon'; * The Outline Core Image component * * @element outline-core-icon - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-icon'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreIcon extends OutlineElement { +export class OutlineCoreIcon extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreIcon extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreIcon; diff --git a/packages/components/outline-core-image/src/outline-core-image.ts b/packages/components/outline-core-image/src/outline-core-image.ts index 9994117ec..e9631e60e 100644 --- a/packages/components/outline-core-image/src/outline-core-image.ts +++ b/packages/components/outline-core-image/src/outline-core-image.ts @@ -1,9 +1,6 @@ -import { html, TemplateResult } from 'lit'; +import { html, TemplateResult, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -// Our base component, which all others extend. -import { OutlineElement } from '@phase2/outline-core'; - // import componentStyles from './outline-core-image.css.lit'; /** The element name, reused throughout the codebase */ @@ -14,7 +11,7 @@ const componentName = 'outline-core-image'; * The Outline Core Image component * * @element outline-core-image - * @extends OutlineElement + * @extends LitElement * @slot - The default slot for this element. * * @todo: Complete component. @@ -25,7 +22,7 @@ const componentName = 'outline-core-image'; * @todo: Create PR for updated and completed component. */ @customElement(componentName) -export class OutlineCoreImage extends OutlineElement { +export class OutlineCoreImage extends LitElement { // static styles: CSSResultGroup = [componentStyles]; render(): TemplateResult { @@ -33,6 +30,11 @@ export class OutlineCoreImage extends OutlineElement { } } +/** + * TypeScript declaration extends the HTMLElementTagNameMap interface, adding + * the web component. This enhances type checking and autocompletion in IDEs. + * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} + */ declare global { interface HTMLElementTagNameMap { [componentName]: OutlineCoreImage; diff --git a/packages/components/outline-core-link/LICENSE.md b/packages/components/outline-core-link/LICENSE.md new file mode 100644 index 000000000..01c845877 --- /dev/null +++ b/packages/components/outline-core-link/LICENSE.md @@ -0,0 +1,9 @@ +# MIT License + +Copyright © 2024 Phase2 Technology + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/components/outline-core-link/index.html b/packages/components/outline-core-link/index.html index bcfffc3f4..6b2842eea 100644 --- a/packages/components/outline-core-link/index.html +++ b/packages/components/outline-core-link/index.html @@ -2,10 +2,16 @@
- +