atlantix-form-share 1.0.7

package/README.md

@@ -0,0 +1,135 @@
+## Atlantix Form Share Web Component 📱
+This project exposes a web component with a very adaptable multi step form. The form will send a real loan application to our leads system.
+
+### In this guide 📋
+1. How to install 🕹️
+  - CDN for static sites 🔗
+  - Type fix for typescript node based projects 📚
+2. How to style 💄
+
+### How to install 🕹️
+### 1.1 Using CDN for static sites 🔗
+
+First, place this script tag inside the `<head></head>` selector.
+```html
+<script async type="module" src="https://unpkg.com/atlantix-form-share"></script>
+```
+
+Then, place the web component wherever in your website inside the `<body></body>` tag.
+
+```html
+<atx-form-share token="your-token"></atx-form-share>
+```
+`your-token` is a required property for the web component. We will provide you with your own token value.
+
+That's it. Here a full example.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script async type="module" src="https://unpkg.com/atlantix-form-share"></script>
+  <title>Document</title>
+</head>
+<body>
+  <h1>This is your own website header title</h1>
+  <atx-form-share token="your-token"></atx-form-share>
+</body>
+</html>
+```
+
+### 1.2 Type fix for typescript node based projects 📚
+In case your website is based on node you might have problems with types. Here a simple solution:
+
+#### For react base projects ⚛
+In the root for your project, create a file called `additional-types.d.ts` and this content:
+
+```ts
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+declare module 'react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'atx-form-share': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
+        token?: string;
+        devMode?: string;
+      };
+    }
+  }
+}
+```
+
+For older react versions, use this instead
+```ts
+import * as React from 'react';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'atx-form-share': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+        token?: string;
+        devMode?: string;
+      }, HTMLElement>;
+    }
+  }
+}
+```
+
+This will avoid any type and build errors.
+
+That's it. 🎉
+
+### 2. How to style 💄
+Last, we also provide multiple options to style the web component so, it can be synchronized with your own project look and feel.
+
+Firs, by default your web component will look like this.
+
+![default-styles](assets/default-styles.png)
+
+Also, by default the web component will inherit from your website, like `color`, `font-family`, another `font-*` and also all custom properties `--*`
+
+Now, we expose the following css properties so you can add your custom values:
+
+- `--atx-border-radius`
+- `--atx-button-radius`
+- `--atx-background-color`
+- `--atx-border-color`
+- `--atx-secondary-color`
+- `--atx-accent-color`
+- `--atx-text-color`
+- `--atx-next-button-color`
+- `--atx-back-button-color` 
+- `--atx-error-color`
+- `--atx-error-color-shadow`
+
+For example, if we apply the following styles.
+
+```css
+body {
+  /* more styles here */
+  --atx-border-radius: 5px;
+  --atx-button-radius: 24px;
+  --atx-background-color: white;
+  --atx-border-color: #E5E3EA;
+  --atx-secondary-color: #d8b4fe;
+  --atx-accent-color: #581c87;
+  --atx-text-color: #581c87;
+  --atx-next-button-color: #581c87;
+  --atx-back-button-color: #581c87; 
+  --atx-error-color: #e7000b;
+  --atx-error-color-shadow: #e1676e;
+}
+```
+
+Will look something like this:
+
+![default-styles](assets/with-styles-preview-basic.png)
+
+And here a basic explanation:
+
+![default-styles](assets/with-styles-preview.png)
+
+### About 🧑‍💻
+This repository is maintained by everyone at Atlantix Media Inc.

package/buildspec.yml

@@ -0,0 +1,37 @@
+version: 0.2
+
+phases:
+  install:
+    runtime-versions:
+      nodejs: 24
+    commands:
+      - echo "Navigating to web-component directory..."
+      - cd web-component
+      - echo "Installing dependencies with legacy peer deps"
+      - npm ci --legacy-peer-deps
+
+  pre_build:
+    commands:
+      - PACKAGE_VERSION=$(node -p "require('./package.json').version")
+      - echo "Starting build for web-component bundle for version $PACKAGE_VERSION"
+
+  build:
+    commands:
+      - echo "Building web-component bundle for version $PACKAGE_VERSION"
+      - npm run build
+      - echo "Built web-component bundle for version $PACKAGE_VERSION"
+
+  post_build:
+    commands:
+      - 'echo "Deploying to S3 : $S3_BUCKET_NAME, with version $PACKAGE_VERSION"'
+      - aws s3 sync dist/ s3://$S3_BUCKET_NAME/v/$PACKAGE_VERSION/ --delete
+      - aws s3 sync dist/ s3://$S3_BUCKET_NAME/ --exclude "v/*" --delete
+      - 'echo "deployed to S3 : $S3_BUCKET_NAME, with version $PACKAGE_VERSION"'
+      - 'echo "Invalidating CloudFront CDN cache : $CLOUDFRONT_DISTRIBUTION_ID"'
+      - aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
+      - 'echo "invalidated CloudFront CDN cache : $CLOUDFRONT_DISTRIBUTION_ID"'
+
+artifacts:
+  files:
+    - '**/*'
+  base-directory: 'web-component/dist'

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "atlantix-form-share",
+  "private": false,
+  "version": "1.0.7",
+  "type": "module",
+  "main": "./dist/index.bundle.js",
+  "module": "./dist/index.bundle.js",
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c rollup.config.js",
+    "preview": "vite preview"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.bundle.js"
+    }
+  },
+  "dependencies": {
+    "lit": "^3.3.3"
+  },
+  "devDependencies": {
+    "@lit-labs/rollup-plugin-minify-html-literals": "^0.2.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "rollup": "^4.63.6",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^3.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,33 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+import minifyHTML from '@lit-labs/rollup-plugin-minify-html-literals';
+import summary from 'rollup-plugin-summary';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.bundle.js',
+    format: 'esm',
+    sourcemap: true,
+  },
+  plugins: [
+    minifyHTML(),
+    typescript({ 
+      tsconfig: './tsconfig.json',
+      declarationDir: './dist/types'
+    }),
+    nodeResolve(),
+    terser({
+      ecma: 2020,
+      module: true,
+      warnings: true,
+      mangle: {
+        properties: {
+          regex: /^__/,
+        },
+      },
+    }),
+    summary(),
+  ],
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "declaration": true,                    // Generates .d.ts files for typings
+    "experimentalDecorators": true,         // Required for Lit decorators
+    "useDefineForClassFields": false,       // CRITICAL: Must be false for Lit properties to work
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    dts() 
+  ],
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+      fileName: 'index',
+      name: 'AtxFormShare'
+    },
+    rollupOptions: {
+      // Don't bundle Lit; let the consumer's package manager manage it
+      external: ['lit', /^lit\/.*/]  
+    }
+  },
+  resolve: {
+    preserveSymlinks: true
+  }
+});