Hijlkema.Codes/z-elements
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Activity

chore: maintenance

Browse Source
This commit is contained in:
Mitch Hijlkema
2024-08-02 13:57:10 +02:00
parent 638e1eb739
commit 68be013f8f
30 changed files with 3818 additions and 2811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/_internal/controllers/README.md
View File

@@ -2,16 +2,10 @@
This library was generated with [Nx](https://nx.dev).
## Building
Run `nx build _internal-controllers` to build the library.
## Running unit tests
Run `nx test _internal-controllers` to execute the unit tests via [Jest](https://jestjs.io).

16
libs/_internal/styles/project.json
View File

@@ -6,17 +6,23 @@
"targets": {
"build": {
"executor": "@nx/js:tsc",
"outputs": ["{options.outputPath}"],
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist/libs/_internal/styles",
"main": "libs/_internal/styles/src/index.ts",
"tsConfig": "libs/_internal/styles/tsconfig.lib.json",
"assets": ["libs/_internal/styles/*.md"]
"assets": [
"libs/_internal/styles/*.md"
]
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"libs/_internal/styles/**/*.ts",
@@ -26,7 +32,9 @@
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"outputs": [
"{workspaceRoot}/coverage/{projectRoot}"
],
"options": {
"jestConfig": "libs/_internal/styles/jest.config.ts",
"passWithNoTests": true

21
libs/accordion/project.json
View File

@@ -6,18 +6,24 @@
"targets": {
"build": {
"executor": "@nx/vite:build",
"outputs": ["{options.outputPath}"],
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist/libs/accordion"
}
},
"publish": {
"command": "node tools/scripts/publish.mjs accordion {args.ver} {args.tag}",
"dependsOn": ["build"]
"dependsOn": [
"build"
]
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"libs/accordion/**/*.ts",
@@ -27,7 +33,9 @@
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"outputs": [
"{workspaceRoot}/coverage/{projectRoot}"
],
"options": {
"jestConfig": "libs/accordion/jest.config.ts",
"passWithNoTests": true
@@ -40,5 +48,8 @@
}
}
},
"tags": ["type:component", ""]
"tags": [
"type:component",
""
]
}

26
libs/accordion/src/lib/accordion-group.component.ts
View File

@@ -1,5 +1,6 @@
import { LitElement, TemplateResult, html } from 'lit';
import { customElement, queryAssignedElements } from 'lit/decorators.js';
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
import AccordionComponent from './accordion.component';
@customElement('z-accordion.group')
@@ -7,22 +8,19 @@ export default class AccordionGroupComponent extends LitElement {
@queryAssignedElements({ selector: 'z-accordion' })
public items!: NodeListOf<AccordionComponent>;
@property({ type: Boolean })
public closeOthers: boolean = false;
protected override firstUpdated() {
this.items.forEach((item) => {
item.addEventListener('open', () => {
this.items.forEach((i) => {
if (i !== item) {
i.open = false;
}
});
});
item.addEventListener('close', () => {
this.items.forEach((i) => {
if (i !== item) {
i.open = false;
}
});
if (this.closeOthers) {
this.items.forEach((i: AccordionComponent) => {
if (i !== item) {
i.open = false;
}
});
}
});
});
}

29
libs/container/.eslintrc.json
View File

@@ -1,21 +1,38 @@
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"extends": [
"../../.eslintrc.json"
],
"ignorePatterns": [
"!**/*"
],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"files": [
"*.ts",
"*.tsx",
"*.js",
"*.jsx"
],
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"files": [
"*.ts",
"*.tsx"
],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"files": [
"*.js",
"*.jsx"
],
"rules": {}
},
{
"files": ["*.json"],
"files": [
"*.json"
],
"parser": "jsonc-eslint-parser",
"rules": {
"@nx/dependency-checks": "error"

35
libs/container/.storybook/main.ts Normal file
View File

@@ -0,0 +1,35 @@
import type { StorybookConfig } from '@storybook/web-components-vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
const config: StorybookConfig = {
stories: [
'../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: ['@storybook/addon-essentials' , '@storybook/addon-interactions' ],
framework: {
name: '@storybook/web-components-vite',
options: {
},
},
viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
}),
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/packages/storybook/documents/custom-builder-configs

0
libs/container/.storybook/preview.ts Normal file
View File

49
libs/container/project.json
View File

@@ -6,17 +6,23 @@
"targets": {
"build": {
"executor": "@nx/js:tsc",
"outputs": ["{options.outputPath}"],
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist/libs/container",
"main": "libs/container/src/index.ts",
"tsConfig": "libs/container/tsconfig.lib.json",
"assets": ["libs/container/*.md"]
"assets": [
"libs/container/*.md"
]
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"libs/container/**/*.ts",
@@ -26,7 +32,9 @@
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"outputs": [
"{workspaceRoot}/coverage/{projectRoot}"
],
"options": {
"jestConfig": "libs/container/jest.config.ts",
"passWithNoTests": true
@@ -37,6 +45,39 @@
"codeCoverage": true
}
}
},
"storybook": {
"executor": "@nx/storybook:storybook",
"options": {
"port": 4400,
"configDir": "libs/container/.storybook"
},
"configurations": {
"ci": {
"quiet": true
}
}
},
"build-storybook": {
"executor": "@nx/storybook:build",
"outputs": [
"{options.outputDir}"
],
"options": {
"outputDir": "dist/storybook/container",
"configDir": "libs/container/.storybook"
},
"configurations": {
"ci": {
"quiet": true
}
}
},
"test-storybook": {
"executor": "nx:run-commands",
"options": {
"command": "test-storybook -c libs/container/.storybook --url=http://localhost:4400"
}
}
},
"tags": []

2
libs/container/src/index.ts
View File

@@ -1 +1 @@
export * from './lib/container';
export * from './lib/container.component';

45
libs/container/src/lib/container.component.stories.ts Normal file
View File

@@ -0,0 +1,45 @@
import { Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
import './container.component';
import { Container } from './container.component';
const meta: Meta<Container> = {
title: 'Design System/Atoms/Container',
component: 'z-container',
args: {
conditionalRadius: true,
radius: '12px',
},
render: (args) => html`
<style>
html {
background-color: #e2e2e2;
--container--background-color: #fff;
--container--max-width: 80rem;
}
</style>
<z-container radius="${args['radius']}" ?conditional-radius="${args['conditionalRadius']}">
<div style="display: flex; column-gap: 3.5rem; padding-left: 3.5rem;">
<p style="margin: 0; padding-block: 3.5rem">
Incididunt voluptate non ea reprehenderit quis nostrud proident pariatur enim mollit esse nulla. Ex mollit mollit occaecat esse
consequat. Tempor dolor irure qui dolor proident esse voluptate excepteur dolor. Pariatur aliqua exercitation Lorem Lorem irure
occaecat amet est in nulla eu.
</p>
<img src="https://placeholder.co/350" alt="" />
</div>
</z-container>
`,
parameters: {
layout: 'fullscreen',
},
} satisfies Meta;
export default meta;
type Story = StoryObj<unknown>;
export const Primary: Story = {};

99
libs/container/src/lib/container.component.ts Normal file
View File

@@ -0,0 +1,99 @@
import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
/**
* A container element that centers its content and has a max-width.
*
* @slot - The default slot.
* @slot img - The slot for the image.
*
* @cssproperty --container--max-width - The max-width of the container.
* @cssproperty --container--background-color - The background color of the container.
*/
@customElement('z-container')
export class Container extends LitElement {
/// Private variables ///
/// Protected variables ///
/// Public variables ///
@property() public radius: string | undefined;
@property({ type: Boolean, attribute: 'conditional-radius' }) public conditionalRadius: boolean = false;
/// constructor & lifecycle ///
protected override willUpdate(_changedProperties: PropertyValues): void {
super.willUpdate(_changedProperties);
this.updateBorderRadius();
}
/// Public methods ///
/// Protected methods ///
protected override render(): unknown {
return html`
<section>
<slot></slot>
<slot name="img"></slot>
</section>
`;
}
/// Private methods ///
private updateBorderRadius(): void {
const hasRadius = !!this.radius;
const isConditional = this.conditionalRadius;
switch (true) {
case !hasRadius:
this.removeBorderRadius();
break;
case hasRadius && isConditional:
this.setConditionRadius();
break;
case hasRadius && !isConditional:
this.setRadius();
break;
}
}
private removeBorderRadius(): void {
this.style.removeProperty(Container.CSS_PROPERTY_NAMES.RADIUS);
}
private setConditionRadius(): void {
if (this.radius) {
this.style.setProperty(Container.CSS_PROPERTY_NAMES.RADIUS, `max(0px, min(${this.radius}, calc((100vw - 4px - 100%) * 9999)))`);
}
}
private setRadius(): void {
if (this.radius) {
this.style.setProperty(Container.CSS_PROPERTY_NAMES.RADIUS, this.radius);
}
}
/// Statics ///
static CSS_PROPERTY_NAMES = {
RADIUS: '--container--radius',
BACKGROUND_COLOR: '--container--background-color',
MAX_WIDTH: '--container--max-width',
};
static override get styles() {
return [
css`
:host {
width: 100%;
max-width: var(${unsafeCSS(Container.CSS_PROPERTY_NAMES.MAX_WIDTH)}, 80rem);
margin-inline: auto;
display: flex;
background-color: var(${unsafeCSS(Container.CSS_PROPERTY_NAMES.BACKGROUND_COLOR)});
border-radius: var(${unsafeCSS(Container.CSS_PROPERTY_NAMES.RADIUS)}, 0px);
overflow: hidden;
}
`,
];
}
}

3
libs/container/src/lib/container.ts
View File

@@ -1,3 +0,0 @@
export function container(): string {
return 'container';
}

3
libs/container/tsconfig.json
View File

@@ -17,6 +17,9 @@
},
{
"path": "./tsconfig.spec.json"
},
{
"path": "./tsconfig.storybook.json"
}
]
}

16
libs/container/tsconfig.lib.json
View File

@@ -3,8 +3,18 @@
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"declaration": true,
"types": ["node"]
"types": [
"node"
]
},
"include": ["src/**/*.ts"],
"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
"include": [
"src/**/*.ts"
],
"exclude": [
"jest.config.ts",
"src/**/*.spec.ts",
"src/**/*.test.ts",
"**/*.stories.ts",
"**/*.stories.js"
]
}

19
libs/container/tsconfig.storybook.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"emitDecoratorMetadata": true
},
"exclude": [
"src/**/*.spec.ts",
"src/**/*.test.ts"
],
"include": [
"src/**/*.stories.ts",
"src/**/*.stories.js",
"src/**/*.stories.jsx",
"src/**/*.stories.tsx",
"src/**/*.stories.mdx",
".storybook/*.js",
".storybook/*.ts"
]
}

2
libs/panels/bottom-panel/project.json
View File

@@ -33,7 +33,7 @@
"test": {
"executor": "@nx/vite:test",
"outputs": [
"coverage/libs/panels/bottom-panel"
"{workspaceRoot}/coverage/libs/panels/bottom-panel"
],
"options": {
"passWithNoTests": true,

16
libs/panels/side-panel/project.json
View File

@@ -6,17 +6,23 @@
"targets": {
"build": {
"executor": "@nx/js:tsc",
"outputs": ["{options.outputPath}"],
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist/libs/panels/side-panel",
"main": "libs/panels/side-panel/src/index.ts",
"tsConfig": "libs/panels/side-panel/tsconfig.lib.json",
"assets": ["libs/panels/side-panel/*.md"]
"assets": [
"libs/panels/side-panel/*.md"
]
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"libs/panels/side-panel/**/*.ts",
@@ -26,7 +32,9 @@
},
"test": {
"executor": "@nx/vite:test",
"outputs": ["coverage/libs/panels/side-panel"],
"outputs": [
"{workspaceRoot}/coverage/libs/panels/side-panel"
],
"options": {
"passWithNoTests": true,
"reportsDirectory": "../../../coverage/libs/panels/side-panel"

4
libs/panels/side-panel/src/lib/panels-side-panel.spec.ts
View File

@@ -1,7 +1,7 @@
import { panelsSidePanel } from './panels-side-panel';
import { SidePanel } from './panels-side-panel';
describe('panelsSidePanel', () => {
it('should work', () => {
expect(panelsSidePanel()).toEqual('panels-side-panel');
expect(SidePanel()).toEqual('panels-side-panel');
});
});

2
libs/panels/side-panel/src/lib/panels-side-panel.ts
View File

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('z-panels.side')
export default class SidePanel extends LitElement {
export class SidePanel extends LitElement {
static override get styles() {
return [];
}

2
libs/tooltip/project.json
View File

@@ -33,7 +33,7 @@
"test": {
"executor": "@nx/vite:test",
"outputs": [
"coverage/libs/tooltip"
"{workspaceRoot}/coverage/libs/tooltip"
],
"options": {
"passWithNoTests": true,