chore: maintenance

libs/container/.eslintrc.json

@@ -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"

libs/container/.storybook/main.ts

@@ -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
+

libs/container/project.json

@@ -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": []

libs/container/src/index.ts

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

libs/container/src/lib/container.component.stories.ts

@@ -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 = {};

libs/container/src/lib/container.component.ts

@@ -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;
+        }
+      `,
+    ];
+  }
+}

libs/container/src/lib/container.ts

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

libs/container/tsconfig.json

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

libs/container/tsconfig.lib.json

@@ -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"
+  ]
 }

libs/container/tsconfig.storybook.json

@@ -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"
+  ]
+}