tuix-webcomponents 0.0.12 → 0.0.13

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tuix-webcomponents following open-wc recommendations",
   "license": "MIT",
   "author": "tuix-webcomponents",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "commonjs",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -11,6 +11,7 @@
     ".": "./dist/src/index.js",
     "./tuix-webcomponents.js": "./dist/src/tuix-webcomponents.js"
   },
+  "files":["dist"],
   "scripts": {
     "prepare": "husky install",
     "analyze": "cem analyze --litelement",

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/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',
-};

package/stories/tuix-text.stories.ts

@@ -1,82 +0,0 @@
-import { html, TemplateResult } from 'lit';
-import '../src/tuix-text/TuixText.js';
-import { TextColor, TextSize, TextType } from '../src/enums/tuix-text.enums.js';
-
-export default {
-  title: 'TextComponent',
-  component: 'tuix-text',
-  argTypes: {
-    value: {
-      type: 'string',
-      required: true,
-      defaultValue: 'Headline 1',
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: TextSize,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-        options: TextType,
-      },
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: TextColor,
-      },
-    },
-  },
-};
-
-interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
-}
-
-interface ArgTypes {
-  size?: TextSize;
-  type?: TextType;
-  color?: TextColor;
-  value?: String;
-}
-
-const Template: Story<ArgTypes> = ({
-  color = TextColor.Primary,
-  size = TextSize.XL,
-  type = TextType.Headline,
-  value,
-}: ArgTypes) => html`
-  <div
-    style="display: flex; justify-content: center; align-items: center; height: 100vh;"
-  >
-    <tuix-text size="${size}" type="${type}" color="${color}">
-      ${value}
-    </tuix-text>
-  </div>
-`;
-
-export const headline = Template.bind({});
-headline.args = {
-  value: 'Headline 1',
-  size: TextSize.XL,
-  type: TextType.Headline,
-};
-
-export const body = Template.bind({});
-body.args = {
-  value: 'Body',
-  size: TextSize.M,
-  type: TextType.Body,
-};
-
-export const button = Template.bind({});
-button.args = {
-  value: 'Button/Link',
-  size: TextSize.XL,
-  type: TextType.Button,
-};

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true
-  },
-  "include": ["**/*.ts", "bin/build.sh"],
-  "exclude": ["stories"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});