From d096325eeb3fbc1691957cf0aaa6c3114d5100f1 Mon Sep 17 00:00:00 2001 From: clementh59 Date: Tue, 21 Nov 2023 15:28:45 +0100 Subject: [PATCH 1/8] Renamed all components to *-plugin --- .gitignore | 6 ++- README.md | 1 + make-UI-compatible.sh | 1 + .../c2pa-wc/etc/rollup/plugins/lit-svg.cjs | 2 +- .../src/components/AssetsUsed/AssetsUsed.ts | 20 +++---- .../ContentSummary/ContentSummary.ts | 18 +++---- .../EditsAndActivity/EditsAndActivity.ts | 38 +++++++------- packages/c2pa-wc/src/components/Icon/Icon.ts | 24 +++++---- .../src/components/Indicator/Indicator.ts | 14 +++-- .../ManifestSummary.stories.ts | 18 +++---- .../ManifestSummary/ManifestSummary.ts | 52 +++++++++---------- .../MinimumViableProvenance.ts | 36 ++++++------- .../components/PanelSection/PanelSection.ts | 10 ++-- .../c2pa-wc/src/components/Popover/Popover.ts | 10 ++-- .../src/components/ProducedBy/ProducedBy.ts | 10 ++-- .../components/ProducedWith/ProducedWith.ts | 18 +++---- .../src/components/SocialMedia/SocialMedia.ts | 26 +++++----- .../src/components/Thumbnail/Thumbnail.ts | 44 +++++++++------- .../c2pa-wc/src/components/Tooltip/Tooltip.ts | 24 ++++----- 19 files changed, 198 insertions(+), 174 deletions(-) create mode 100755 make-UI-compatible.sh diff --git a/.gitignore b/.gitignore index a72fba43..e1b38755 100644 --- a/.gitignore +++ b/.gitignore @@ -33,7 +33,11 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json node_modules # Build artifacts -dist/ +packages/c2pa/dist +packages/react/dist +examples/minimal-ts-webpack/dist +tools/testing/dist +packages/c2pa-wc/dist/ build.tar.gz # TypeScript cache diff --git a/README.md b/README.md index afa1587b..140281c0 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ rush install Build all packages: ``` rush build +./make-UI-compatible.sh ``` To run an individual package's `package.json` commands, use the `rushx` command from within that package's directory, e.g.: diff --git a/make-UI-compatible.sh b/make-UI-compatible.sh new file mode 100755 index 00000000..700679d7 --- /dev/null +++ b/make-UI-compatible.sh @@ -0,0 +1 @@ +sed -i '' 's|\"production\"!==process.env.NODE_ENV|true|g' ./packages/c2pa-wc/dist/components/Popover/popover.js \ No newline at end of file diff --git a/packages/c2pa-wc/etc/rollup/plugins/lit-svg.cjs b/packages/c2pa-wc/etc/rollup/plugins/lit-svg.cjs index 0491b046..8a7062ce 100644 --- a/packages/c2pa-wc/etc/rollup/plugins/lit-svg.cjs +++ b/packages/c2pa-wc/etc/rollup/plugins/lit-svg.cjs @@ -80,7 +80,7 @@ function renderElement({ prefix, isMonochrome, name, svg }) { } } - customElements.define('${prefix}-icon-${elementName}', ${className}); + customElements.define('${prefix}-icon-${elementName}-dm-plugin', ${className}); `; return prettier.format(code, { parser: 'typescript' }); } diff --git a/packages/c2pa-wc/src/components/AssetsUsed/AssetsUsed.ts b/packages/c2pa-wc/src/components/AssetsUsed/AssetsUsed.ts index bb071595..c1a77588 100644 --- a/packages/c2pa-wc/src/components/AssetsUsed/AssetsUsed.ts +++ b/packages/c2pa-wc/src/components/AssetsUsed/AssetsUsed.ts @@ -20,12 +20,12 @@ import '../PanelSection'; declare global { interface HTMLElementTagNameMap { - 'cai-assets-used': AssetsUsed; + 'cai-assets-used-dm-plugin': AssetsUsed; } namespace JSX { interface IntrinsicElements { - 'cai-assets-used': any; + 'cai-assets-used-dm-plugin': any; } } } @@ -38,7 +38,7 @@ const defaultConfig: AssetsUsedConfig = { stringMap: defaultStringMap, }; -@customElement('cai-assets-used') +@customElement('cai-assets-used-dm-plugin') export class AssetsUsed extends ConfigurablePanelSection(LitElement, { dataSelector: (manifestStore) => manifestStore.ingredients, isEmpty: (data) => !data.length, @@ -49,7 +49,7 @@ export class AssetsUsed extends ConfigurablePanelSection(LitElement, { defaultStyles, baseSectionStyles, css` - .section-assets-used { + .section-assets-used-dm-plugin { --cai-thumbnail-size: 48px; display: grid; color: blue; @@ -65,21 +65,21 @@ export class AssetsUsed extends ConfigurablePanelSection(LitElement, { } render() { - return this.renderSection(html` -
+
${this._data?.map( (ingredient) => html` - + > `, )}
- `); + `); } } diff --git a/packages/c2pa-wc/src/components/ContentSummary/ContentSummary.ts b/packages/c2pa-wc/src/components/ContentSummary/ContentSummary.ts index f3ac4a38..5b8cb55f 100644 --- a/packages/c2pa-wc/src/components/ContentSummary/ContentSummary.ts +++ b/packages/c2pa-wc/src/components/ContentSummary/ContentSummary.ts @@ -19,12 +19,12 @@ import '../PanelSection'; declare global { interface HTMLElementTagNameMap { - 'cai-content-summary': ContentSummary; + 'cai-content-summary-dm-plugin': ContentSummary; } namespace JSX { interface IntrinsicElements { - 'cai-content-summary': any; + 'cai-content-summary-dm-plugin': any; } } } @@ -37,7 +37,7 @@ const defaultConfig: ContentSummaryConfig = { stringMap: defaultStringMap, }; -@customElement('cai-content-summary') +@customElement('cai-content-summary-dm-plugin') export class ContentSummary extends ConfigurablePanelSection(LitElement, { dataSelector: (manifestStore) => manifestStore?.generativeInfo, config: defaultConfig, @@ -47,11 +47,11 @@ export class ContentSummary extends ConfigurablePanelSection(LitElement, { defaultStyles, baseSectionStyles, css` - .section-process-content { + .section-process-content-dm-plugin { display: flex; align-items: center; } - .section-icon-content { + .section-icon-content-dm-plugin { display: flex; align-items: flex-start; gap: var(--cai-icon-spacing, 8px); @@ -61,16 +61,16 @@ export class ContentSummary extends ConfigurablePanelSection(LitElement, { } render() { - return this.renderSection(html` -
- +
+ ${this._config.stringMap['content-summary.content.aiGenerated']}
- `); + `); } } diff --git a/packages/c2pa-wc/src/components/EditsAndActivity/EditsAndActivity.ts b/packages/c2pa-wc/src/components/EditsAndActivity/EditsAndActivity.ts index ef4042b1..af632573 100644 --- a/packages/c2pa-wc/src/components/EditsAndActivity/EditsAndActivity.ts +++ b/packages/c2pa-wc/src/components/EditsAndActivity/EditsAndActivity.ts @@ -19,12 +19,12 @@ import '../PanelSection'; declare global { interface HTMLElementTagNameMap { - 'cai-edits-and-activity': EditsAndActivity; + 'cai-edits-and-activity-dm-plugin': EditsAndActivity; } namespace JSX { interface IntrinsicElements { - 'cai-edits-and-activity': any; + 'cai-edits-and-activity-dm-plugin': any; } } } @@ -39,7 +39,7 @@ const defaultConfig: EditsAndActivityConfig = { showDescriptions: false, }; -@customElement('cai-edits-and-activity') +@customElement('cai-edits-and-activity-dm-plugin') export class EditsAndActivity extends ConfigurablePanelSection(LitElement, { dataSelector: (manifestStore) => manifestStore.editsAndActivity, isEmpty: (data) => !data?.length, @@ -50,12 +50,12 @@ export class EditsAndActivity extends ConfigurablePanelSection(LitElement, { defaultStyles, baseSectionStyles, css` - .section-edits-and-activity-content { + .section-edits-and-activity-content-dm-plugin { display: flex; flex-direction: column; } - .section-edits-and-activity-list { + .section-edits-and-activity-list-dm-plugin { display: flex; flex-direction: column; gap: var(--cai-edits-and-activity-item-spacing, 6px); @@ -65,28 +65,28 @@ export class EditsAndActivity extends ConfigurablePanelSection(LitElement, { overflow: hidden; } - .section-edits-and-activity-list-item-term { + .section-edits-and-activity-list-item-term-dm-plugin { display: flex; align-items: center; } - .section-edits-and-activity-list-item-icon { + .section-edits-and-activity-list-item-icon-dm-plugin { margin-right: 8px; width: 16px; } - .section-edits-and-activity-list-item-label { + .section-edits-and-activity-list-item-label-dm-plugin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .section-edits-and-activity-list-item-description { + .section-edits-and-activity-list-item-description-dm-plugin { color: var(--cai-secondary-color); margin-left: 0px; } - .section-edits-and-activity-list-item-description.has-icon { + .section-edits-and-activity-list-item-description-dm-plugin.has-icon { margin-left: 24px; } `, @@ -95,23 +95,25 @@ export class EditsAndActivity extends ConfigurablePanelSection(LitElement, { render() { return this.renderSection(html` - -
+
${this._data?.map( ({ icon, label, description }) => html` -
-
+
+
${icon ? html`${label}` : null} - + ${label}
@@ -119,7 +121,7 @@ export class EditsAndActivity extends ConfigurablePanelSection(LitElement, { ? html`
- + `); } } diff --git a/packages/c2pa-wc/src/components/Icon/Icon.ts b/packages/c2pa-wc/src/components/Icon/Icon.ts index 913b93d9..528078fe 100644 --- a/packages/c2pa-wc/src/components/Icon/Icon.ts +++ b/packages/c2pa-wc/src/components/Icon/Icon.ts @@ -42,39 +42,39 @@ export class Icon extends LitElement { static readonly matchers = [ { pattern: /photoshop/i, - icon: html``, + icon: html``, }, { pattern: /adobe\sstock/i, - icon: html``, + icon: html``, }, { pattern: /adobe/i, - icon: html``, + icon: html``, }, { pattern: /behance\.net/i, - icon: html``, + icon: html``, }, { pattern: /facebook\.com/i, - icon: html``, + icon: html``, }, { pattern: /instagram\.com/i, - icon: html``, + icon: html``, }, { pattern: /truepic/i, - icon: html``, + icon: html``, }, { pattern: /twitter\.com/i, - icon: html``, + icon: html``, }, { pattern: /lightroom/i, - icon: html``, + icon: html``, }, ]; @@ -96,7 +96,7 @@ export class Icon extends LitElement { :host { max-height: var(--cai-icon-size, 16px); } - #container { + #container-dm-plugin { display: inline-block; width: var(--cai-icon-size, 16px); height: var(--cai-icon-size, 16px); @@ -109,6 +109,8 @@ export class Icon extends LitElement { } render() { - return this.icon ? html`
${this.icon}
` : nothing; + return this.icon + ? html`
${this.icon}
` + : nothing; } } diff --git a/packages/c2pa-wc/src/components/Indicator/Indicator.ts b/packages/c2pa-wc/src/components/Indicator/Indicator.ts index 5ecc417b..2e434e8e 100644 --- a/packages/c2pa-wc/src/components/Indicator/Indicator.ts +++ b/packages/c2pa-wc/src/components/Indicator/Indicator.ts @@ -14,19 +14,19 @@ import { defaultStyles } from '../../styles'; declare global { interface HTMLElementTagNameMap { - 'cai-indicator': Indicator; + 'cai-indicator-dm-plugin': Indicator; } namespace JSX { interface IntrinsicElements { - 'cai-indicator': any; + 'cai-indicator-dm-plugin': any; } } } type Variant = 'info-light' | 'info-dark' | 'warning' | 'error'; -@customElement('cai-indicator') +@customElement('cai-indicator-dm-plugin') export class Indicator extends LitElement { /** * Image source - if set to undefined/null it will show a broken image icon @@ -52,6 +52,12 @@ export class Indicator extends LitElement { } render() { - return html``; + switch (this.variant) { + case 'warning': + return html``; + case 'error': + return html``; + } + return html``; } } diff --git a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.stories.ts b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.stories.ts index 432abcc7..717d3dd6 100644 --- a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.stories.ts +++ b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.stories.ts @@ -26,7 +26,7 @@ interface ArgTypes { export default { title: 'Components/ManifestSummary', - component: 'cai-manifest-summary', + component: 'cai-manifest-summary-dm-plugin', argTypes: { manifestStore: { control: { @@ -70,12 +70,12 @@ const Base: Story = ({ theme, }: ArgTypes) => { return html` - + > `; }; @@ -97,27 +97,27 @@ export const AppendCustomSection: Story = ({ theme, }: ArgTypes) => { return html` - - Number of ingredients: - ${manifestStore.ingredients?.length} - Number of ingredients: - ${manifestStore.ingredients?.length} - + `; }; AppendCustomSection.args = { diff --git a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts index e2b7d0a3..0ee45dd3 100644 --- a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts +++ b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts @@ -27,12 +27,12 @@ import '../MinimumViableProvenance'; declare global { interface HTMLElementTagNameMap { - 'cai-manifest-summary': ManifestSummary; + 'cai-manifest-summary-dm-plugin': ManifestSummary; } namespace JSX { interface IntrinsicElements { - 'cai-manifest-summary': any; + 'cai-manifest-summary-dm-plugin': any; } } } @@ -65,7 +65,7 @@ const defaultConfig: ManifestSummaryConfig = { }, }; -@customElement('cai-manifest-summary') +@customElement('cai-manifest-summary-dm-plugin') export class ManifestSummary extends Configurable(LitElement, defaultConfig) { static readonly cssParts = { viewMore: 'manifest-summary-view-more', @@ -75,11 +75,11 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { return [ defaultStyles, css` - #container { + #container-dm-plugin { width: var(--cai-manifest-summary-width, 320px); } - #content-container { + #content-container-dm-plugin { padding: var(--cai-manifest-summary-content-padding, 20px); max-height: var(--cai-manifest-summary-content-max-height, 550px); border-bottom-width: var( @@ -99,7 +99,7 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { overflow-x: hidden; } - #content-container > *:not(:first-child):not([empty]), + #content-container-dm-plugin > *:not(:first-child):not([empty]), ::slotted(*) { padding-top: var(--cai-manifest-summary-section-spacing, 20px); margin-top: var(--cai-manifest-summary-section-spacing, 20px); @@ -117,11 +117,11 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { ) !important; } - #view-more-container { + #view-more-container-dm-plugin { padding: var(--cai-manifest-summary-view-more-padding, 20px); } - #view-more { + #view-more-dm-plugin { display: block; transition: all 150ms ease-in-out; background-color: transparent; @@ -135,7 +135,7 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { color: var(--cai-primary-color); } - #view-more:hover { + #view-more-dm-plugin:hover { background-color: #eeeeee; } `, @@ -159,12 +159,12 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { return null; } - return html`
-
- +
+ + > ${this.manifestStore.error === 'error' ? html` @@ -173,57 +173,57 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { : html` ${this._config?.sections?.contentSummary ? html` - + > ` : nothing} ${this._config?.sections?.producedBy ? html` - + > ` : nothing} ${this._config?.sections?.producedWith ? html` - + > ` : nothing} ${this._config?.sections?.editsAndActivity ? html` - + > ` : nothing} ${this._config?.sections?.assetsUsed ? html` - + > ` : nothing} ${this._config?.sections?.socialMedia ? html` - + > ` : nothing} `}
-
+
${this.viewMoreUrl ? html` -
- + + >
- + > ${this.manifestStore?.signature?.issuer}
${!hasError ? html` -
+
${isValid(signatureDate) ? html`${this._config?.dateFormatter(signatureDate!)}` : html`${this._config?.stringMap[ @@ -128,6 +128,6 @@ export class MinimumViableProvenance extends Configurable( ` : nothing}
- `; + `; } } diff --git a/packages/c2pa-wc/src/components/PanelSection/PanelSection.ts b/packages/c2pa-wc/src/components/PanelSection/PanelSection.ts index 4e54019b..ae59ecbb 100644 --- a/packages/c2pa-wc/src/components/PanelSection/PanelSection.ts +++ b/packages/c2pa-wc/src/components/PanelSection/PanelSection.ts @@ -16,17 +16,17 @@ import '../Tooltip'; declare global { interface HTMLElementTagNameMap { - 'cai-panel-section': PanelSection; + 'cai-panel-section-dm-plugin': PanelSection; } namespace JSX { interface IntrinsicElements { - 'cai-panel-section': any; + 'cai-panel-section-dm-plugin': any; } } } -@customElement('cai-panel-section') +@customElement('cai-panel-section-dm-plugin') export class PanelSection extends LitElement { @property({ type: String }) header = ''; @@ -68,9 +68,9 @@ export class PanelSection extends LitElement {
${this.header}
${this.helpText - ? html` + ? html`
${this.helpText}
- ` + ` : nothing}
diff --git a/packages/c2pa-wc/src/components/Popover/Popover.ts b/packages/c2pa-wc/src/components/Popover/Popover.ts index 0eeab352..f8a12e50 100644 --- a/packages/c2pa-wc/src/components/Popover/Popover.ts +++ b/packages/c2pa-wc/src/components/Popover/Popover.ts @@ -30,17 +30,17 @@ import { defaultStyles } from '../../styles'; declare global { interface HTMLElementTagNameMap { - 'cai-popover': Popover; + 'cai-popover-dm-plugin': Popover; } namespace JSX { interface IntrinsicElements { - 'cai-popover': any; + 'cai-popover-dm-plugin': any; } } } -@customElement('cai-popover') +@customElement('cai-popover-dm-plugin') export class Popover extends LitElement { private _updateCleanupFn: Function | null = null; @@ -182,7 +182,7 @@ export class Popover extends LitElement { height: 8px; transform: rotate(45deg); } - .hidden-layer { + .hidden-layer-dm-plugin { position: absolute; left: calc(var(--cai-popover-icon-size, 24px) * -1); width: var(--cai-popover-icon-size, 24px); @@ -357,7 +357,7 @@ export class Popover extends LitElement { ${this.arrow ? html`
` : null}
-
+
`; diff --git a/packages/c2pa-wc/src/components/ProducedBy/ProducedBy.ts b/packages/c2pa-wc/src/components/ProducedBy/ProducedBy.ts index 469b8eb9..ffc1567e 100644 --- a/packages/c2pa-wc/src/components/ProducedBy/ProducedBy.ts +++ b/packages/c2pa-wc/src/components/ProducedBy/ProducedBy.ts @@ -18,12 +18,12 @@ import '../PanelSection'; declare global { interface HTMLElementTagNameMap { - 'cai-produced-by': ProducedBy; + 'cai-produced-by-dm-plugin': ProducedBy; } namespace JSX { interface IntrinsicElements { - 'cai-produced-by': any; + 'cai-produced-by-dm-plugin': any; } } } @@ -36,7 +36,7 @@ const defaultConfig: ProducedByConfig = { stringMap: defaultStringMap, }; -@customElement('cai-produced-by') +@customElement('cai-produced-by-dm-plugin') export class ProducedBy extends ConfigurablePanelSection(LitElement, { dataSelector: (manifestStore) => manifestStore.producer?.name, config: defaultConfig, @@ -46,11 +46,11 @@ export class ProducedBy extends ConfigurablePanelSection(LitElement, { } render() { - return this.renderSection(html`
${this._data}
- `); + `); } } diff --git a/packages/c2pa-wc/src/components/ProducedWith/ProducedWith.ts b/packages/c2pa-wc/src/components/ProducedWith/ProducedWith.ts index 6bbe5cb1..1ddfb266 100644 --- a/packages/c2pa-wc/src/components/ProducedWith/ProducedWith.ts +++ b/packages/c2pa-wc/src/components/ProducedWith/ProducedWith.ts @@ -19,12 +19,12 @@ import '../Icon'; declare global { interface HTMLElementTagNameMap { - 'cai-produced-with': ProducedWith; + 'cai-produced-with-dm-plugin': ProducedWith; } namespace JSX { interface IntrinsicElements { - 'cai-produced-with': any; + 'cai-produced-with-dm-plugin': any; } } } @@ -37,7 +37,7 @@ const defaultConfig: ProducedWithConfig = { stringMap: defaultStringMap, }; -@customElement('cai-produced-with') +@customElement('cai-produced-with-dm-plugin') export class ProducedWith extends ConfigurablePanelSection(LitElement, { dataSelector: (manifestStore) => manifestStore.claimGenerator, config: defaultConfig, @@ -47,12 +47,12 @@ export class ProducedWith extends ConfigurablePanelSection(LitElement, { defaultStyles, baseSectionStyles, css` - .section-produced-with-content { + .section-produced-with-content-dm-plugin { display: flex; align-items: center; } - .section-produced-with-beta { + .section-produced-with-beta-dm-plugin { margin-left: 24px; color: var(--cai-secondary-color); } @@ -61,21 +61,21 @@ export class ProducedWith extends ConfigurablePanelSection(LitElement, { } render() { - return this.renderSection(html`
-
+
${this._data?.product}
${this.manifestStore?.isBeta - ? html`
+ ? html`
${this._config.stringMap['produced-with.beta']}
` : null}
- `); + `); } } diff --git a/packages/c2pa-wc/src/components/SocialMedia/SocialMedia.ts b/packages/c2pa-wc/src/components/SocialMedia/SocialMedia.ts index c28fe087..b7c6ef40 100644 --- a/packages/c2pa-wc/src/components/SocialMedia/SocialMedia.ts +++ b/packages/c2pa-wc/src/components/SocialMedia/SocialMedia.ts @@ -18,12 +18,12 @@ import '../Icon'; declare global { interface HTMLElementTagNameMap { - 'cai-social-media': SocialMedia; + 'cai-social-media-dm-plugin': SocialMedia; } namespace JSX { interface IntrinsicElements { - 'cai-social-media': any; + 'cai-social-media-dm-plugin': any; } } } @@ -36,7 +36,7 @@ const defaultConfig: SocialMediaConfig = { stringMap: defaultStringMap, }; -@customElement('cai-social-media') +@customElement('cai-social-media-dm-plugin') export class SocialMedia extends ConfigurablePanelSection(LitElement, { dataSelector: (manifestStore) => manifestStore?.socialAccounts, isEmpty: (data) => !data?.length, @@ -47,7 +47,7 @@ export class SocialMedia extends ConfigurablePanelSection(LitElement, { defaultStyles, baseSectionStyles, css` - .section-social-media-list { + .section-social-media-list-dm-plugin { display: flex; flex-direction: column; gap: 6px; @@ -57,12 +57,12 @@ export class SocialMedia extends ConfigurablePanelSection(LitElement, { overflow: hidden; } - .section-social-media-list-item { + .section-social-media-list-item-dm-plugin { display: flex; align-items: center; } - .section-social-media-list-item-link { + .section-social-media-list-item-link-dm-plugin { color: var(--cai-social-media-item-color, var(--cai-primary-color)); overflow: hidden; text-overflow: ellipsis; @@ -73,17 +73,19 @@ export class SocialMedia extends ConfigurablePanelSection(LitElement, { } render() { - return this.renderSection(html` -