tuix-webcomponents 0.0.12 → 0.0.14

package/package.json

@@ -3,25 +3,24 @@
   "description": "Webcomponent tuix-webcomponents following open-wc recommendations",
   "license": "MIT",
   "author": "tuix-webcomponents",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "commonjs",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
     ".": "./dist/src/index.js",
-    "./tuix-webcomponents.js": "./dist/src/tuix-webcomponents.js"
+    "./tuix-webcomponents.js": "./dist/src/index.js"
   },
+  "files":["dist", "fonts"],
   "scripts": {
-    "prepare": "husky install",
     "analyze": "cem analyze --litelement",
-    "start": "rm -rf dist && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "start": "./bin/build.sh && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "./bin/build.sh && npm run analyze -- --exclude dist",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "./bin/build.sh && npm run analyze -- --exclude dist",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "prettier --write \"src/**/*.ts\" \"stories/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\" \"stories/**/*.ts\"",
-    "storybook": "rm -rf dist && tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
-    "storybook:build": "rm -rf dist && tsc && npm run analyze -- --exclude dist && build-storybook"
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "storybook": "./bin/build.sh && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "./bin/build.sh && npm run analyze -- --exclude dist && build-storybook"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.6.1",

package/.circleci/config.yml

@@ -1,105 +0,0 @@
-
-version: 2.1
-
-workflows:
-  git_deploy:
-    jobs:
-      - deploy-prod:
-          filters:
-            branches:
-              only: master
-      - deploy-dev:
-          filters:
-            branches:
-              only: develop
-
-jobs:
-
-  deploy-dev:
-    working_directory: ~/app
-    docker:
-      - image: mhart/alpine-node:14.15.4
-    steps:
-      - run:
-          name: install git and ssh
-          command: apk update && apk add rsync && apk add git && apk add openssh-client
-      - add_ssh_keys:
-          fingerprints:
-            - "a1:a0:00:b4:59:8d:34:81:9c:d8:ac:25:cc:e5:93:00"
-      - run:
-          name: config git
-          command: git config --global user.email "pipeline@circleci.com" && git config --global user.name "CircleCI"
-      - run:
-          name: add github.com as known host
-          command: ssh-keygen -F github.com || ssh-keyscan github.com >> ~/.ssh/known_hosts
-      - run:
-          name: checkout
-          command: git clone "$CIRCLE_REPOSITORY_URL" --branch "$CIRCLE_BRANCH" .
-      - run:
-          name: npm install
-          command: npm install
-      - run:
-          name: npm run storybook:build
-          command: npm run storybook:build
-      - run:
-          name: push build to github
-          command: |
-            git clone git@github.com:tuixdevelopment/tuix-storybook-staging.git tuix-storybook-staging
-            cp -R tuix-storybook-staging/.git .git-backup
-            cp -R tuix-storybook-staging/CNAME CNAME-backup
-            rm -rf tuix-storybook-staging
-            cp -R storybook-static tuix-storybook-staging
-            cp -R .git-backup tuix-storybook-staging/.git
-            cp -R CNAME-backup tuix-storybook-staging/CNAME
-
-            GIT_TAG="$GIT_TAG.$(date +%s)"
-
-            cd tuix-storybook-staging
-            git add .
-            git commit -m "$GIT_TAG" --allow-empty
-            git push origin master -f
-
-  deploy-prod:
-    working_directory: ~/app
-    docker:
-      - image: mhart/alpine-node:14.15.4
-    steps:
-      - run:
-          name: install git and ssh
-          command: apk update && apk add rsync && apk add git && apk add openssh-client
-      - add_ssh_keys:
-          fingerprints:
-            - "a1:a0:00:b4:59:8d:34:81:9c:d8:ac:25:cc:e5:93:00"
-      - run:
-          name: config git
-          command: git config --global user.email "pipeline@circleci.com" && git config --global user.name "CircleCI"
-      - run:
-          name: add github.com as known host
-          command: ssh-keygen -F github.com || ssh-keyscan github.com >> ~/.ssh/known_hosts
-      - run:
-          name: checkout
-          command: git clone "$CIRCLE_REPOSITORY_URL" --branch "$CIRCLE_BRANCH" .
-      - run:
-          name: npm install
-          command: npm install
-      - run:
-          name: npm run storybook:build
-          command: npm run storybook:build
-      - run:
-          name: push build to github
-          command: |
-            git clone git@github.com:tuixdevelopment/tuix-storybook-prod.git tuix-storybook-prod
-            cp -R tuix-storybook-prod/.git .git-backup
-            cp -R tuix-storybook-prod/CNAME CNAME-backup
-            rm -rf tuix-storybook-prod
-            cp -R storybook-static tuix-storybook-prod
-            cp -R .git-backup tuix-storybook-prod/.git
-            cp -R CNAME-backup tuix-storybook-prod/CNAME
-
-            GIT_TAG="0.0.0.$(date +%s)"
-
-            cd tuix-storybook-prod
-            git add .
-            git commit -m "$GIT_TAG" --allow-empty
-            git push origin master -f
-

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-./node_modules/.bin/commitlint --edit $1

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-./node_modules/.bin/lint-staged --allow-empty --concurrent=true

package/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/bin/build.sh

@@ -1,9 +0,0 @@
-#!/bin/sh
-
-rm -rf dist
-
-tsc
-
-cp package.json dist
-cp LICENSE dist
-cp README.md dist

package/demo/index.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-
-<head>
-  <meta charset="utf-8">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap" rel="stylesheet">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../dist/src/tuix-text/TuixText.js';
-    import { TextSize, TextColor, TextType } from '../dist/src/enums/tuix-text.enums.js'
-
-    render(
-      html`
-        <tuix-text size="${TextSize.XL}" color="${TextColor.Primary}" type="${TextType.Headline}">
-          Hello World
-        </tuix-text>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-
-</html>

package/dist/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 tuix-webcomponents
-
-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.

package/dist/README.md

@@ -1,62 +0,0 @@
-# \<tuix-webcomponents>
-
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
-
-## Installation
-
-```bash
-npm i tuix-webcomponents
-```
-
-## Usage
-
-```html
-<script type="module">
-  import 'tuix-webcomponents/tuix-webcomponents.js';
-</script>
-
-<tuix-webcomponents></tuix-webcomponents>
-```
-
-## Linting and formatting
-
-To scan the project for linting and formatting errors, run
-
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
-
-## Demoing with Storybook
-
-To run a local instance of Storybook for your component, run
-
-```bash
-npm run storybook
-```
-
-To build a production version of Storybook, run
-
-```bash
-npm run storybook:build
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
-
-To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/package.json

@@ -1,93 +0,0 @@
-{
-  "name": "tuix-webcomponents",
-  "description": "Webcomponent tuix-webcomponents following open-wc recommendations",
-  "license": "MIT",
-  "author": "tuix-webcomponents",
-  "version": "0.0.11",
-  "type": "commonjs",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./tuix-webcomponents.js": "./dist/src/tuix-webcomponents.js"
-  },
-  "scripts": {
-    "prepare": "husky install",
-    "analyze": "cem analyze --litelement",
-    "start": "rm -rf dist && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "./bin/build.sh && npm run analyze -- --exclude dist",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "prettier --write \"src/**/*.ts\" \"stories/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\" \"stories/**/*.ts\"",
-    "storybook": "rm -rf dist && tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
-    "storybook:build": "rm -rf dist && tsc && npm run analyze -- --exclude dist && build-storybook"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^17.6.1",
-    "@commitlint/config-conventional": "^17.6.1",
-    "@custom-elements-manifest/analyzer": "^0.8.0",
-    "@open-wc/eslint-config": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@web/dev-server": "^0.1.38",
-    "@web/dev-server-storybook": "^0.6.2",
-    "commitlint": "^17.6.1",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^8.8.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.1",
-    "prettier": "^2.8.7",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.4"
-  },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
-      "import/no-unresolved": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ]
-    }
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "npm run format",
-      "npm run lint"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "dependencies": {
-    "lit": "^2.7.2"
-  }
-}

package/src/enums/tuix-text.enums.ts

@@ -1,27 +0,0 @@
-/* eslint-disable */
-export enum TextSize {
-  XL = 'xl',
-  L = 'l',
-  M = 'm',
-  S = 's',
-  XS = 'xs',
-}
-
-export enum TextColor {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  Grey = 'grey',
-  LightGrey = 'lightGrey',
-  Disabled = 'disabled',
-  Validation = 'validation',
-  Error = 'error',
-  Success = 'success',
-}
-
-export enum TextType {
-  Headline = 'headline',
-  Body = 'body',
-  Button = 'button_link',
-  Link = 'button_link',
-  Fields = 'fields',
-}

package/src/index.ts

@@ -1 +0,0 @@
-export { TuixText } from './tuix-text/TuixText.js';

package/src/tuix-text/TuixText.ts

@@ -1,150 +0,0 @@
-import { html, css, LitElement } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
-import { customElement, property } from 'lit/decorators.js';
-import { TextType, TextColor, TextSize } from '../enums/tuix-text.enums.js';
-import { ColorText } from '../utils/colors.js';
-
-@customElement('tuix-text')
-export class TuixText extends LitElement {
-  @property({ type: String })
-  size?: TextSize;
-
-  @property({ type: TextColor })
-  color?: TextColor;
-
-  @property({ type: TextType })
-  type?: TextType;
-
-  static styles = css`
-    .text {
-      font-family: 'Rubik', sans-serif;
-    }
-
-    .text.headline.xl {
-      font-size: 4rem;
-      font-weight: 600;
-      line-height: 4.4rem;
-    }
-
-    .text.headline.l {
-      font-size: 3.5rem;
-      font-weight: 600;
-      line-height: 4.2rem;
-    }
-
-    .text.headline.m {
-      font-size: 2.25rem;
-      font-weight: 500;
-      line-height: 2.7rem;
-    }
-
-    .text.headline.s {
-      font-size: 1.5rem;
-      font-weight: 500;
-      line-height: 1.8rem;
-    }
-
-    .text.headline.xs {
-      font-size: 1.125rem;
-      font-weight: 500;
-      line-height: 1.35;
-    }
-
-    .text.body.m {
-      font-size: 1rem;
-      font-weight: 300;
-      line-height: 1.4rem;
-    }
-
-    .text.body.s {
-      font-size: 0.875rem;
-      font-weight: 300;
-      line-height: 1.225rem;
-    }
-
-    .text.button_link.xl {
-      font-size: 1.25rem;
-      font-weight: 400;
-      line-height: 1.5rem;
-    }
-
-    .text.button_link.l {
-      font-size: 1.25rem;
-      font-weight: 400;
-      line-height: 1.5rem;
-    }
-
-    @media only screen and (max-width: 40rem) {
-      .text.button_link.m {
-        font-size: 1rem;
-        font-weight: 400;
-        line-height: 1.25rem;
-      }
-
-      .text.body.m {
-        line-height: 1.3rem;
-      }
-
-      .text.body.s {
-        line-height: 1.1375rem;
-      }
-
-      .text.headline.xl {
-        font-size: 3rem;
-        line-height: 3.3rem;
-      }
-      .text.headline.l {
-        font-size: 2rem;
-        line-height: 2.4rem;
-      }
-      .text.headline.m {
-        font-size: 1.5rem;
-        line-height: 1.8rem;
-      }
-      .text.headline.s {
-        font-size: 1.125rem;
-        line-height: 1.35rem;
-      }
-      .text.headline.xs {
-        font-size: 1rem;
-        line-height: 1.2rem;
-      }
-    }
-
-    @media only screen and (max-width: 20rem) {
-      .text.button_link.s {
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1rem;
-      }
-      .text.button_link.xs {
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1rem;
-      }
-      .text.headline.xl {
-        font-size: 1.5rem;
-        line-height: 1.8rem;
-      }
-      .text.headline.l {
-        font-size: 1.375rem;
-        line-height: 1.65rem;
-      }
-      .text.headline.m {
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-      }
-    }
-  `;
-
-  getTextClass() {
-    return `${this.type} ${this.size}`;
-  }
-
-  render() {
-    return html`<slot
-      class="text ${this.getTextClass()}"
-      style="${styleMap({ color: ColorText[this.color || TextColor.Primary] })}"
-    ></slot>`;
-  }
-}

package/src/utils/colors.ts

@@ -1,10 +0,0 @@
-export const ColorText = {
-  primary: '#000000',
-  secondary: '#FFFFFF',
-  grey: '#8A8894',
-  lightGrey: '#C9C8D3',
-  disabled: '#BEC0DA',
-  validation: '#FFB82E',
-  error: '#F93232',
-  success: '#439F6E',
-};