├── .nvmrc
├── .yarnrc
├── src
├── styles.css
├── index.ts
├── types.d.ts
├── styles.ts
├── reset.ts
├── YoodaComp.ts
└── reset.css
├── .storybook
├── main.js
└── server.mjs
├── public
└── fonts
│ ├── Roboto-Black.ttf
│ ├── Roboto-Bold.ttf
│ ├── Roboto-Italic.ttf
│ ├── Roboto-Light.ttf
│ ├── Roboto-Medium.ttf
│ ├── Roboto-Thin.ttf
│ ├── Roboto-Regular.ttf
│ ├── Roboto-BlackItalic.ttf
│ ├── Roboto-BoldItalic.ttf
│ ├── Roboto-LightItalic.ttf
│ ├── Roboto-ThinItalic.ttf
│ └── Roboto-MediumItalic.ttf
├── .github
├── dependabot.yml
└── workflows
│ └── main.yml
├── tailwind.config.js
├── .gitignore
├── postcss.config.js
├── web-test-runner.config.mjs
├── tsconfig.json
├── .editorconfig
├── custom-elements.json
├── web-dev-server.config.mjs
├── demo
└── index.html
├── LICENSE
├── test
└── yooda-comp.test.ts
├── stories
└── index.stories.ts
├── README.md
├── rollup.config.js
└── package.json
/.nvmrc:
--------------------------------------------------------------------------------
1 | v12.19.1
2 |
--------------------------------------------------------------------------------
/.yarnrc:
--------------------------------------------------------------------------------
1 | save-prefix ""
2 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stories: ['../stories/**/*.stories.{ts,md,mdx}'],
3 | };
4 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { setupReset } from '../src/reset';
2 | export { YoodaComp } from './YoodaComp';
3 |
--------------------------------------------------------------------------------
/public/fonts/Roboto-Black.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Black.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Bold.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Italic.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Light.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Medium.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Thin.ttf
--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module 'static-params';
3 | declare module 'style-inject';
4 |
--------------------------------------------------------------------------------
/public/fonts/Roboto-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-Regular.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-BlackItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-BlackItalic.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-BoldItalic.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-LightItalic.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-ThinItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-ThinItalic.ttf
--------------------------------------------------------------------------------
/public/fonts/Roboto-MediumItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sync/yooda-comp/master/public/fonts/Roboto-MediumItalic.ttf
--------------------------------------------------------------------------------
/src/styles.ts:
--------------------------------------------------------------------------------
1 | import { unsafeCSS } from 'lit-element';
2 | import styles from './styles.css';
3 |
4 | export default unsafeCSS(styles);
5 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: 'npm'
4 | directory: '/'
5 | schedule:
6 | interval: 'daily'
7 |
--------------------------------------------------------------------------------
/src/reset.ts:
--------------------------------------------------------------------------------
1 | import styleInject from 'style-inject';
2 | import fontStyles from './reset.css';
3 |
4 | export const setupReset = () => {
5 | styleInject(fontStyles, { insertAt: 'top' });
6 | };
7 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: ['./src/**.ts'],
3 | darkMode: false, // or 'media' or 'class'
4 | theme: {
5 | extend: {},
6 | },
7 | variants: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | };
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ## editors
2 | /.idea
3 | /.vscode
4 |
5 | ## system files
6 | .DS_Store
7 |
8 | ## npm
9 | /node_modules/
10 | /npm-debug.log
11 |
12 | ## testing
13 | /coverage/
14 |
15 | ## temp folders
16 | /.tmp/
17 |
18 | # build
19 | /_site/
20 | /dist/
21 | /out-tsc/
22 |
23 | storybook-static
--------------------------------------------------------------------------------
/.storybook/server.mjs:
--------------------------------------------------------------------------------
1 | import { storybookPlugin } from '@web/dev-server-storybook';
2 | import baseConfig from '../web-dev-server.config.mjs';
3 |
4 | export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5 | ...baseConfig,
6 | open: '/',
7 | plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
8 | });
9 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = ({ env }) => ({
2 | plugins:
3 | env !== 'test'
4 | ? [
5 | require('tailwindcss'),
6 | require('autoprefixer'),
7 | env === 'production'
8 | ? require('postcss-url')([
9 | {
10 | url: asset => asset.url.replace('../public/', ''),
11 | },
12 | ])
13 | : false,
14 | ]
15 | : [],
16 | });
17 |
--------------------------------------------------------------------------------
/web-test-runner.config.mjs:
--------------------------------------------------------------------------------
1 | import { esbuildPlugin } from '@web/dev-server-esbuild';
2 | import { fromRollup } from '@web/dev-server-rollup';
3 | import rollupPostcss from 'rollup-plugin-postcss';
4 |
5 | const postcss = fromRollup(rollupPostcss);
6 |
7 | export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
8 | files: 'test/**/*.test.ts',
9 | nodeResolve: true,
10 | mimeTypes: {
11 | '**/*.css': 'js',
12 | },
13 |
14 | plugins: [
15 | esbuildPlugin({ ts: true }),
16 | postcss({ include: ['src/**/*.css'], inject: false }),
17 | ],
18 | });
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "lib": ["dom", "dom.iterable", "esnext"],
7 | "allowJs": true,
8 | "checkJs": true,
9 | "strict": true,
10 | "esModuleInterop": true,
11 | "noEmit": true,
12 | "resolveJsonModule": true,
13 | "allowSyntheticDefaultImports": true,
14 | "experimentalDecorators": true,
15 | "downlevelIteration": true,
16 | "skipLibCheck": true,
17 | "forceConsistentCasingInFileNames": true
18 | },
19 | "include": ["**/*.ts"]
20 | }
21 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 | on: [push]
3 | jobs:
4 | build:
5 | name: Build, lint, and test
6 | runs-on: ubuntu-latest
7 |
8 | steps:
9 | - name: Checkout repo
10 | uses: actions/checkout@v2
11 |
12 | - name: Use Node 12
13 | uses: actions/setup-node@v1
14 | with:
15 | node-version: 12
16 |
17 | - name: Install deps and build (with cache)
18 | uses: bahmutov/npm-install@v1
19 |
20 | - name: Lint
21 | run: yarn lint
22 |
23 | - name: Test
24 | run: yarn test
25 |
26 | - name: Build
27 | run: yarn build
28 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
23 | [*.json]
24 | indent_size = 2
25 |
26 | [*.{html,js,md}]
27 | block_comment_start = /**
28 | block_comment = *
29 | block_comment_end = */
30 |
--------------------------------------------------------------------------------
/custom-elements.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "tags": [
4 | {
5 | "name": "yooda-comp",
6 | "description": "A component with a title and an action counter",
7 | "properties": [
8 | {
9 | "name": "title",
10 | "type": "String",
11 | "description": "The title of your component",
12 | "default": "Hey there"
13 | },
14 | {
15 | "name": "counter",
16 | "type": "Number",
17 | "description": "An action counter",
18 | "default": 0
19 | }
20 | ],
21 | "events": [],
22 | "slots": [],
23 | "cssProperties": [
24 | {
25 | "name": "--yooda-comp-text-color",
26 | "description": "Main Text Color",
27 | "type": "Color"
28 | }
29 | ]
30 | }
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/web-dev-server.config.mjs:
--------------------------------------------------------------------------------
1 | import { esbuildPlugin } from '@web/dev-server-esbuild';
2 | import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
3 | import { fromRollup } from '@web/dev-server-rollup';
4 | import rollupPostcss from 'rollup-plugin-postcss';
5 |
6 | const postcss = fromRollup(rollupPostcss);
7 |
8 | /** Use Hot Module replacement by adding --hmr to the start command */
9 | const hmr = process.argv.includes('--hmr');
10 |
11 | export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
12 | nodeResolve: true,
13 | open: '/demo/',
14 | watch: !hmr,
15 | mimeTypes: {
16 | '**/*.css': 'js',
17 | },
18 |
19 | plugins: [
20 | esbuildPlugin({ ts: true }),
21 | postcss({ include: ['src/**/*.css'], inject: false }),
22 | hmr &&
23 | hmrPlugin({
24 | exclude: ['**/*/node_modules/**/*'],
25 | presets: [presets.litElement],
26 | }),
27 | ],
28 | });
29 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
14 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 yooda-comp
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/test/yooda-comp.test.ts:
--------------------------------------------------------------------------------
1 | import { html, fixture, expect } from '@open-wc/testing';
2 |
3 | import type { YoodaComp } from '../src/YoodaComp';
4 | import '../src/YoodaComp';
5 |
6 | describe('YoodaComp', () => {
7 | it('has a default title "Hey there" and counter 5', async () => {
8 | const el = await fixture(html``);
9 |
10 | expect(el.title).to.equal('Hey there');
11 | expect(el.counter).to.equal(5);
12 | });
13 |
14 | it('increases the counter on button click', async () => {
15 | const el = await fixture(html``);
16 | el.shadowRoot!.querySelector('button')!.click();
17 |
18 | expect(el.counter).to.equal(6);
19 | });
20 |
21 | it('can check the box', async () => {
22 | const el = await fixture(html``);
23 | el.shadowRoot!.querySelector('input')!.click();
24 |
25 | expect(el.checked).to.equal(true);
26 | });
27 |
28 | it('can override the title via attribute', async () => {
29 | const el = await fixture(
30 | html``
31 | );
32 |
33 | expect(el.title).to.equal('attribute title');
34 | });
35 |
36 | it('passes the a11y audit', async () => {
37 | const el = await fixture(html``);
38 |
39 | expect(el).shadowDom.to.be.accessible();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/stories/index.stories.ts:
--------------------------------------------------------------------------------
1 | import { html, TemplateResult } from 'lit-html';
2 | import { setupReset } from '../src/reset';
3 | import '../src/YoodaComp';
4 |
5 | setupReset();
6 |
7 | export default {
8 | title: 'YoodaComp',
9 | component: 'yooda-comp',
10 | argTypes: {
11 | title: { control: 'text' },
12 | counter: { control: 'number' },
13 | textColor: { control: 'color' },
14 | },
15 | };
16 |
17 | interface Story {
18 | (args: T): TemplateResult;
19 | args?: Partial;
20 | argTypes?: Record;
21 | }
22 |
23 | interface ArgTypes {
24 | title?: string;
25 | counter?: number;
26 | textColor?: string;
27 | slot?: TemplateResult;
28 | }
29 |
30 | const Template: Story = ({
31 | title = 'Hello world',
32 | counter = 5,
33 | textColor,
34 | slot,
35 | }: ArgTypes) => html`
36 |
41 | ${slot}
42 |
43 | `;
44 |
45 | export const Regular = Template.bind({});
46 |
47 | export const CustomTitle = Template.bind({});
48 | CustomTitle.args = {
49 | title: 'My title',
50 | };
51 |
52 | export const CustomCounter = Template.bind({});
53 | CustomCounter.args = {
54 | counter: 123456,
55 | };
56 |
57 | export const SlottedContent = Template.bind({});
58 | SlottedContent.args = {
59 | slot: html`Slotted content
`,
60 | };
61 | SlottedContent.argTypes = {
62 | slot: { table: { disable: true } },
63 | };
64 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # \
2 |
3 | This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
4 |
5 | ## Installation
6 |
7 | ```bash
8 | npm i yooda-comp
9 | ```
10 |
11 | ## Usage
12 |
13 | ```html
14 |
17 |
18 |
19 | ```
20 |
21 | ## Linting with ESLint, Prettier, and Types
22 |
23 | To scan the project for linting errors, run
24 |
25 | ```bash
26 | yarn lint
27 | ```
28 |
29 | You can lint with ESLint and Prettier individually as well
30 |
31 | ```bash
32 | yarn lint:eslint
33 | ```
34 |
35 | ```bash
36 | yarn lint:prettier
37 | ```
38 |
39 | To automatically fix many linting errors, run
40 |
41 | ```bash
42 | uarm format
43 | ```
44 |
45 | You can format using ESLint and Prettier individually as well
46 |
47 | ```bash
48 | yarn format:eslint
49 | ```
50 |
51 | ```bash
52 | yarn format:prettier
53 | ```
54 |
55 | ## Testing with Web Test Runner
56 |
57 | To run the suite of Web Test Runner tests, run
58 |
59 | ```bash
60 | yarn test
61 | ```
62 |
63 | To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
64 |
65 | ```bash
66 | yarn test:watch
67 | ```
68 |
69 | ## Demoing with Storybook
70 |
71 | To run a local instance of Storybook for your component, run
72 |
73 | ```bash
74 | yarn storybook
75 | ```
76 |
77 | To build a production version of Storybook, run
78 |
79 | ```bash
80 | yarn storybook:build
81 | ```
82 |
83 | ## Tooling configs
84 |
85 | For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
86 |
87 | If you customize the configuration a lot, you can consider moving them to individual files.
88 |
89 | ## Local Demo with `web-dev-server`
90 |
91 | ```bash
92 | yarn start
93 | ```
94 |
95 | To run a local development server that serves the basic demo located in `demo/index.html`
96 |
--------------------------------------------------------------------------------
/src/YoodaComp.ts:
--------------------------------------------------------------------------------
1 | import { customElement, html, LitElement, property } from 'lit-element';
2 | import { asStatic, asTag } from 'static-params';
3 | import { spread } from '@open-wc/lit-helpers';
4 | import styles from './styles';
5 |
6 | const shtml = asTag(html);
7 |
8 | @customElement('yooda-comp')
9 | export class YoodaComp extends LitElement {
10 | static styles = [styles];
11 |
12 | @property({ type: String }) title = 'Hey there';
13 |
14 | @property({ type: Number }) counter = 5;
15 |
16 | @property({ type: Boolean }) checked = false;
17 |
18 | @property({ type: String }) as = 'div';
19 |
20 | __increment() {
21 | this.counter += 1;
22 | }
23 |
24 | __toggleCheck(e: any) {
25 | const checked = Boolean(e.target.value);
26 | this.checked = checked;
27 | }
28 |
29 | __buildSpreadAttributes() {
30 | const spreadAttributeNames = this.getAttributeNames().filter(
31 | attribute =>
32 | !['title', 'counter', 'checked', 'as', 'style'].includes(attribute)
33 | );
34 |
35 | const spreadAttributes = spreadAttributeNames.reduce(
36 | (attributes, name) => ({
37 | ...attributes,
38 | [name]: this.getAttribute(name),
39 | }),
40 | {}
41 | );
42 |
43 | return spreadAttributes;
44 | }
45 |
46 | render() {
47 | const tag = asStatic(this.as);
48 |
49 | return shtml`
50 | <${tag} ...=${spread(this.__buildSpreadAttributes())}>
51 | ${this.title} Nr. ${this.counter}!
52 |
53 |
54 |
61 |
62 |
63 |
64 | `;
65 | }
66 | }
67 |
68 | declare global {
69 | interface HTMLElementTagNameMap {
70 | 'yooda-comp': YoodaComp;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import dts from 'rollup-plugin-dts';
2 | import esbuild from 'rollup-plugin-esbuild';
3 | import filesize from 'rollup-plugin-filesize';
4 | import { terser } from 'rollup-plugin-terser';
5 | import postcss from 'rollup-plugin-postcss';
6 | import commonjs from '@rollup/plugin-commonjs';
7 | import resolve from '@rollup/plugin-node-resolve';
8 | import copy from 'rollup-plugin-copy';
9 |
10 | const filesizeConfig = {
11 | showGzippedSize: true,
12 | showBrotliSize: true,
13 | showMinifiedSize: false,
14 | };
15 |
16 | const postCssConfig = {
17 | inject: false,
18 | };
19 |
20 | const copyConfig = {
21 | targets: [{ src: 'public/fonts', dest: 'dist' }],
22 | };
23 |
24 | // eslint-disable-next-line @typescript-eslint/no-var-requires
25 | const filename = require('./package.json').main.replace(/\.js$/, '');
26 |
27 | /** @type {(format: 'es' | 'cjs' | 'dts') => string} */
28 | const ext = format => {
29 | switch (format) {
30 | case 'dts':
31 | return 'd.ts';
32 | case 'es':
33 | return 'module.js';
34 | default:
35 | return 'js';
36 | }
37 | };
38 |
39 | /** @type {(format: 'es' | 'cjs' | 'dts') => import('rollup').ModuleFormat} */
40 | const outputFormat = format => {
41 | switch (format) {
42 | case 'cjs':
43 | return 'cjs';
44 | default:
45 | return 'es';
46 | }
47 | };
48 |
49 | /** @type {(format: 'es' | 'cjs' | 'dts') => import('rollup').Plugin[]} */
50 | const plugins = format => {
51 | if (format === 'dts') {
52 | return [dts()];
53 | }
54 |
55 | const allPlugins = [
56 | esbuild(),
57 | postcss(postCssConfig),
58 | commonjs(),
59 | resolve(),
60 | copy(copyConfig),
61 | ];
62 |
63 | if (process.env.NODE_ENV === 'production') {
64 | allPlugins.push(terser());
65 | allPlugins.push(filesize(filesizeConfig));
66 | }
67 |
68 | return allPlugins;
69 | };
70 |
71 | /** @type {(format: 'es' | 'cjs' | 'dts') => import('rollup').RollupOptions} */
72 | const bundle = format => ({
73 | input: 'src/index.ts',
74 | output: {
75 | file: `${filename}.${ext(format)}`,
76 | format: outputFormat(format),
77 | sourcemap: format !== 'dts',
78 | name: 'YodaComp',
79 | },
80 | plugins: plugins(format),
81 | external: [
82 | '@open-wc/lit-helpers',
83 | 'lit-element',
84 | 'lit-html',
85 | 'static-params',
86 | 'style-inject',
87 | ],
88 | });
89 |
90 | export default [
91 | bundle('es'), //
92 | bundle('cjs'),
93 | bundle('dts'),
94 | ];
95 |
--------------------------------------------------------------------------------
/src/reset.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 |
3 | @font-face {
4 | font-family: 'Roboto';
5 | font-style: italic;
6 | font-weight: 100;
7 | font-display: swap;
8 | src: url('../public/fonts/Roboto-ThinItalic.ttf') format('truetype');
9 | }
10 |
11 | @font-face {
12 | font-family: 'Roboto';
13 | font-style: italic;
14 | font-weight: 300;
15 | font-display: swap;
16 | src: url('../public/fonts/Roboto-LightItalic.ttf') format('truetype');
17 | }
18 |
19 | @font-face {
20 | font-family: 'Roboto';
21 | font-style: italic;
22 | font-weight: 400;
23 | font-display: swap;
24 | src: url('../public/fonts/Roboto-Italic.ttf') format('truetype');
25 | }
26 |
27 | @font-face {
28 | font-family: 'Roboto';
29 | font-style: italic;
30 | font-weight: 500;
31 | font-display: swap;
32 | src: url('../public/fonts/Roboto-MediumItalic.ttf') format('truetype');
33 | }
34 |
35 | @font-face {
36 | font-family: 'Roboto';
37 | font-style: italic;
38 | font-weight: 700;
39 | font-display: swap;
40 | src: url('../public/fonts/Roboto-BoldItalic.ttf') format('truetype');
41 | }
42 |
43 | @font-face {
44 | font-family: 'Roboto';
45 | font-style: italic;
46 | font-weight: 900;
47 | font-display: swap;
48 | src: url('../public/fonts/Roboto-BoldItalic.ttf') format('truetype');
49 | }
50 |
51 | @font-face {
52 | font-family: 'Roboto';
53 | font-style: normal;
54 | font-weight: 100;
55 | font-display: swap;
56 | src: url('../public/fonts/Roboto-Thin.ttf') format('truetype');
57 | }
58 |
59 | @font-face {
60 | font-family: 'Roboto';
61 | font-style: normal;
62 | font-weight: 300;
63 | font-display: swap;
64 | src: url('../public/fonts/Roboto-Light.ttf') format('truetype');
65 | }
66 |
67 | @font-face {
68 | font-family: 'Roboto';
69 | font-style: normal;
70 | font-weight: 400;
71 | font-display: swap;
72 | src: url('../public/fonts/Roboto-Regular.ttf') format('truetype');
73 | }
74 |
75 | @font-face {
76 | font-family: 'Roboto';
77 | font-style: normal;
78 | font-weight: 500;
79 | font-display: swap;
80 | src: url('../public/fonts/Roboto-Medium.ttf') format('truetype');
81 | }
82 |
83 | @font-face {
84 | font-family: 'Roboto';
85 | font-style: normal;
86 | font-weight: 700;
87 | font-display: swap;
88 | src: url('../public/fonts/Roboto-Bold.ttf') format('truetype');
89 | }
90 |
91 | @font-face {
92 | font-family: 'Roboto';
93 | font-style: normal;
94 | font-weight: 900;
95 | font-display: swap;
96 | src: url('../public/fonts/Roboto-Black.ttf') format('truetype');
97 | }
98 |
99 | body {
100 | font-family: 'Roboto', sans-serif;
101 | }
102 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "clean": "rimraf dist",
4 | "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds --hmr\"",
5 | "dev": "rollup -c -w",
6 | "build": "yarn clean && NODE_ENV=production rollup -c",
7 | "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
8 | "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
9 | "test": "tsc && NODE_ENV=test wtr --coverage",
10 | "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"NODE_ENV=test wtr --watch\"",
11 | "storybook": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
12 | "storybook:build": "tsc && build-storybook"
13 | },
14 | "module": "dist/index.js",
15 | "description": "Webcomponent yooda-comp following open-wc recommendations",
16 | "author": "yooda-comp",
17 | "license": "MIT",
18 | "version": "0.0.0",
19 | "name": "yooda-comp",
20 | "main": "dist/index.js",
21 | "peerDependencies": {
22 | "@open-wc/lit-helpers": "0.3.12",
23 | "lit-element": "2.4.0",
24 | "lit-html": "1.3.0",
25 | "static-params": "0.1.3",
26 | "style-inject": "0.3.0"
27 | },
28 | "devDependencies": {
29 | "@babel/core": "7.12.10",
30 | "@babel/eslint-parser": "7.12.1",
31 | "@babel/eslint-plugin": "7.12.1",
32 | "@open-wc/dev-server-hmr": "0.1.1",
33 | "@open-wc/eslint-config": "4.2.0",
34 | "@open-wc/lit-helpers": "0.3.12",
35 | "@open-wc/testing": "2.5.32",
36 | "@rollup/plugin-commonjs": "17.0.0",
37 | "@rollup/plugin-node-resolve": "11.1.0",
38 | "@stylelint/postcss-css-in-js": "0.37.2",
39 | "@typescript-eslint/eslint-plugin": "4.14.0",
40 | "@typescript-eslint/parser": "4.14.0",
41 | "@web/dev-server": "0.1.5",
42 | "@web/dev-server-esbuild": "0.2.11",
43 | "@web/dev-server-rollup": "0.3.2",
44 | "@web/dev-server-storybook": "0.3.3",
45 | "@web/test-runner": "0.12.5",
46 | "autoprefixer": "10.2.3",
47 | "concurrently": "5.3.0",
48 | "esbuild": "0.8.33",
49 | "eslint": "7.18.0",
50 | "eslint-config-prettier": "7.2.0",
51 | "eslint-plugin-html": "6.1.1",
52 | "eslint-plugin-import": "2.22.1",
53 | "eslint-plugin-lit": "1.3.0",
54 | "eslint-plugin-lit-a11y": "1.0.1",
55 | "eslint-plugin-no-only-tests": "2.4.0",
56 | "eslint-plugin-wc": "1.2.0",
57 | "husky": "4.3.8",
58 | "lint-staged": "10.5.3",
59 | "lit-element": "2.4.0",
60 | "lit-html": "1.3.0",
61 | "postcss": "8.2.4",
62 | "postcss-cli": "8.3.1",
63 | "postcss-discard-comments": "4.0.2",
64 | "postcss-discard-empty": "4.0.1",
65 | "postcss-syntax": "0.36.2",
66 | "postcss-url": "10.1.1",
67 | "prettier": "2.2.1",
68 | "rimraf": "3.0.2",
69 | "rollup": "2.37.1",
70 | "rollup-plugin-copy": "3.3.0",
71 | "rollup-plugin-dts": "2.0.1",
72 | "rollup-plugin-esbuild": "2.6.1",
73 | "rollup-plugin-filesize": "9.1.0",
74 | "rollup-plugin-postcss": "4.0.0",
75 | "rollup-plugin-terser": "7.0.2",
76 | "sinon": "9.2.3",
77 | "static-params": "0.1.3",
78 | "style-inject": "0.3.0",
79 | "tailwindcss": "2.0.2",
80 | "tslib": "2.1.0",
81 | "typescript": "4.1.3"
82 | },
83 | "eslintConfig": {
84 | "parser": "@typescript-eslint/parser",
85 | "extends": [
86 | "@open-wc/eslint-config",
87 | "eslint-config-prettier"
88 | ],
89 | "plugins": [
90 | "@typescript-eslint"
91 | ],
92 | "rules": {
93 | "no-unused-vars": "off",
94 | "@typescript-eslint/no-unused-vars": [
95 | "error"
96 | ],
97 | "import/no-unresolved": "off",
98 | "import/extensions": "off"
99 | }
100 | },
101 | "prettier": {
102 | "singleQuote": true,
103 | "arrowParens": "avoid"
104 | },
105 | "husky": {
106 | "hooks": {
107 | "pre-commit": "lint-staged"
108 | }
109 | },
110 | "lint-staged": {
111 | "*.ts": [
112 | "eslint --fix",
113 | "prettier --write",
114 | "git add"
115 | ]
116 | }
117 | }
118 |
--------------------------------------------------------------------------------