@lukso/web-components 1.0.1 → 1.0.4

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "type": "module",
   "files": [
-    "dist"
+    "dist/",
+    "src/",
+    "tools/",
+    "dist/assets/*"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -11,21 +14,58 @@
   "exports": {
     ".": {
       "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
+    "./tailwind.config": "./tailwind.config.cjs",
+    "./assets/fonts/": "./dist/assets/fonts/",
+    "./assets/fonts": {
+      "require": "./dist/assets/fonts/index.cjs",
+      "import": "./dist/assets/fonts/index.js",
+      "types": "./dist/assets/fonts/index.d.ts"
+    },
+    "./styles/": "./dist/styles/",
+    "./styles": {
+      "require": "./dist/styles/index.cjs",
+      "import": "./dist/styles/index.js",
+      "types": "./dist/styles/index.d.ts"
+    },
+    "./sass/": "./dist/sass/",
+    "./sass": {
+      "require": "./dist/sass/index.cjs",
+      "import": "./dist/sass/index.js",
+      "types": "./dist/sass/index.d.ts"
+    },
+    "./tools/color-palette": "./tools/color-palette.cjs",
     "./lukso-button": {
-      "require": "./dist/lukso-button.cjs",
-      "import": "./dist/lukso-button.js"
+      "require": [
+        "./dist/lukso-button.cjs"
+      ],
+      "import": [
+        "./dist/lukso-button.js"
+      ],
+      "types": [
+        "./dist/lukso-button.d.ts"
+      ]
     },
     "./lukso-test": {
-      "require": "./dist/lukso-test.cjs",
-      "import": "./dist/lukso-test.js"
+      "require": [
+        "./dist/lukso-test.cjs"
+      ],
+      "import": [
+        "./dist/lukso-test.js"
+      ],
+      "types": [
+        "./dist/lukso-test.d.ts"
+      ]
     }
   },
   "scripts": {
-    "start": "vite dev --host",
-    "dev": "vite dev --host",
-    "build": "yarn analyze && vite build",
+    "config-prepare": "tsc-bundle ./tsconfig.work.json --exportAs commonjs && renamer --force --chain find-replace --path-element ext --find '.js' --replace '.cjs' './tools/**/*.js'",
+    "start": "yarn config-prepare && concurrently 'vite build -w' 'yarn storybook'",
+    "dev": "yarn start",
+    "build": "yarn config-prepare && yarn analyze && vite build && yarn sass --verbose ./src/shared/styles/main.scss ./dist/styles/main.css && yarn build:list-exports",
+    "build:list-exports": "node ./listExports.cjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:{eslint,css,fmt}'",
     "lint:eslint": "eslint src --fix",
     "lint:fmt": "prettier --check --loglevel=warn .",
@@ -33,10 +73,10 @@
     "lint:fmt:fix": "prettier --write .",
     "analyze": "cem analyze --litelement --globs 'src/**/index.ts' --exclude 'src/**/*.stories.ts'",
     "analyze:watch": "cem analyze --litelement --globs 'src/**/index.ts' --exclude 'src/**/*.stories.ts' --watch",
-    "storybook": "concurrently 'yarn analyze:watch' 'storybook dev -p 6006'",
-    "build-storybook": "storybook build",
-    "test-storybook": "test-storybook",
-    "test": "yarn analyze && yarn build-storybook && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006' 'wait-on -v tcp:127.0.0.1:6006 && yarn test-storybook --url http://127.0.0.1:6006'",
+    "storybook": "yarn config-prepare && concurrently 'yarn analyze:watch' 'storybook dev -p 6006'",
+    "build-storybook": "yarn config-prepare && storybook build",
+    "test-storybook": "yarn config-prepare && test-storybook",
+    "test": "yarn analyze && yarn config-prepare && yarn build-storybook && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006' 'wait-on -v tcp:127.0.0.1:6006 && yarn test-storybook --url http://127.0.0.1:6006'",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -52,51 +92,56 @@
     ]
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.6.7",
+    "@custom-elements-manifest/analyzer": "^0.6.8",
     "@lit-labs/motion": "^1.0.3",
-    "@storybook/addon-controls": "^7.0.0-beta.21",
-    "@storybook/addon-essentials": "^7.0.0-beta.21",
-    "@storybook/addon-interactions": "^7.0.0-beta.21",
-    "@storybook/addon-links": "^7.0.0-beta.21",
-    "@storybook/blocks": "^7.0.0-beta.21",
-    "@storybook/builder-vite": "^7.0.0-beta.21",
+    "@storybook/addon-controls": "^7.0.0-beta.31",
+    "@storybook/addon-essentials": "^7.0.0-beta.31",
+    "@storybook/addon-interactions": "^7.0.0-beta.31",
+    "@storybook/addon-links": "^7.0.0-beta.31",
+    "@storybook/blocks": "^7.0.0-beta.31",
+    "@storybook/builder-vite": "^7.0.0-beta.31",
     "@storybook/client-api": "^6.5.15",
     "@storybook/jest": "^0.0.10",
-    "@storybook/test-runner": "^0.9.2",
+    "@storybook/test-runner": "^0.9.3",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/web-components-vite": "^7.0.0-beta.21",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@storybook/web-components-vite": "^7.0.0-beta.31",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
     "autoprefixer": "^10.4.13",
     "concurrently": "^7.6.0",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-lit": "^1.7.2",
+    "eslint-plugin-lit": "^1.8.2",
     "espree": "^9.4.1",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "lit": "^2.5.0",
+    "list-exports": "^1.0.4",
+    "lit": "^2.6.1",
     "lit-analyzer": "^1.2.1",
-    "lit-html": "^2.5.0",
+    "lit-html": "^2.6.1",
     "npm-run-all": "^4.1.5",
     "playwright": "^1.29.2",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "renamer": "^4.0.0",
     "sass": "^1.57.1",
-    "storybook": "^7.0.0-beta.21",
+    "storybook": "7.0.0-beta.31",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-standard-scss": "^6.1.0",
     "stylelint-prettier": "^2.0.0",
     "tailwindcss": "^3.2.4",
+    "tinycolor2": "^1.5.2",
     "typescript": "^4.9.4",
+    "typescript-bundle": "^1.0.18",
     "vite": "^4.0.4",
+    "vite-plugin-static-copy": "^0.13.0",
     "wait-on": "^7.0.1"
   },
   "packageManager": "yarn@3.3.1",

package/src/components/lukso-button/index.ts

@@ -0,0 +1 @@
+import './lukso-button'

package/src/components/lukso-button/lukso-button.stories.ts

@@ -0,0 +1,51 @@
+import { html } from 'lit-html'
+import { within } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+import '../lukso-button'
+
+export default {
+  title: 'Design System/Atoms/Button',
+  component: 'lukso-button',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'landing'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['defaultStyles', 'secondaryStyles', 'primaryStyles'],
+    },
+  },
+}
+
+const Template = ({ variant, disabled }) =>
+  html`<lukso-button variant=${variant} ?disabled=${disabled}
+    >Hello World</lukso-button
+  >`
+
+export const Primary = Template.bind({})
+Primary.args = {
+  variant: 'primary',
+}
+
+Primary.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+
+  // 👇 Assert DOM structure
+  expect(canvas.getByText('Hello World')).toBeInTheDocument()
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  variant: 'secondary',
+}
+
+export const Landing = Template.bind({})
+Landing.args = {
+  variant: 'landing',
+}

package/src/components/lukso-button/lukso-button.ts

@@ -0,0 +1,55 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { TailwindElement } from '../../shared/tailwind.element'
+import { customClassMap } from '../../shared/directives/custom-class-map'
+
+export type ButtonVariants = 'primary' | 'secondary' | 'landing'
+
+@customElement('lukso-button')
+export class LuksoButton extends TailwindElement {
+  @property({ type: String })
+  variant: ButtonVariants = 'primary'
+
+  @property({ type: Boolean })
+  disabled = false
+
+  private defaultStyles = `flex justify-center items-center relative gap-2 py-3 px-6 rounded-xl
+    border border-solid cursor-pointer paragraph-16-semi-bold`
+
+  private secondaryStyles = `bg-neutral-100 border-neutral-90 text-neutral-20 disabled:bg-neutral-90
+    disabled:border-neutral-90 disabled:text-neutral-100 hover:shadow-button-hover-secondary`
+
+  private primaryStyles = `bg-neutral-20 border-neutral-20 text-neutral-100
+    disabled:bg-neutral-90
+    disabled:border-neutral-90
+    hover:shadow-button-hover-primary
+  `
+
+  private landingStyles = `bg-purple-51 border-purple-51 text-neutral-100
+    disabled:bg-neutral-90 disabled:border-neutral-90
+    hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58`
+
+  render() {
+    return html`
+      <button
+        data-testid="button"
+        ?disabled=${this.disabled}
+        class=${customClassMap({
+          [this.defaultStyles]: true,
+          [this.primaryStyles]: this.variant === 'primary',
+          [this.secondaryStyles]: this.variant === 'secondary',
+          [this.landingStyles]: this.variant === 'landing',
+        })}
+      >
+        <slot></slot>
+      </button>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-button': LuksoButton
+  }
+}

package/src/components/lukso-test/index.ts

@@ -0,0 +1,72 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { animate, AnimateController } from '@lit-labs/motion'
+import { classMap } from 'lit/directives/class-map.js'
+
+import { TailwindStyledElement } from '../../shared/tailwind.element'
+import style from './test.component.scss?inline'
+
+@customElement('lukso-test')
+export class LuksoTest extends TailwindStyledElement(style) {
+  @property()
+  name = 'World'
+
+  @property()
+  private clicked = false
+
+  @property({ type: Boolean })
+  disabled = false
+
+  duration = 1000
+  controller = new AnimateController(this, {
+    defaultOptions: {
+      keyframeOptions: {
+        duration: this.duration,
+        fill: 'backwards',
+      },
+    },
+  })
+
+  _onClick() {
+    if (this.disabled) {
+      return
+    }
+    this.clicked = true
+    setTimeout(() => {
+      this.clicked = false
+    }, 2000)
+  }
+
+  render() {
+    const classes = {
+      'text-yellow-200': !this.disabled,
+      'p-2': true,
+      'rounded-full': true,
+      'text-24': true,
+      'bg-blue-800': this.clicked && !this.disabled,
+      'bg-blue-200': !this.clicked && !this.disabled,
+    }
+    return html`
+      <p class="heading-1">
+        Hello,
+        <b class="heading-4">${this.name}</b>
+        !
+      </p>
+      <button
+        ?disabled=${this.disabled}
+        data-testid="button"
+        @click=${this._onClick}
+        class="hover:text-yellow-700 ${classMap(classes)}"
+        ${animate()}
+      >
+        Hello world! 2
+      </button>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-test': LuksoTest
+  }
+}

package/src/components/lukso-test/test.component.scss

@@ -0,0 +1,7 @@
+p {
+  @apply bg-red-200;
+
+  b {
+    @apply text-orange-500;
+  }
+}

package/src/components/lukso-test/test.stories.ts

@@ -0,0 +1,31 @@
+import { html } from 'lit-html'
+import { within } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import './index'
+
+export default {
+  title: 'Test',
+  component: 'lukso-test',
+}
+
+export function Primary({ disabled }) {
+  return html`<lukso-test ?disabled=${disabled}>Hello World</lukso-test>`
+}
+
+Primary.args = {
+  disabled: false,
+}
+
+Primary.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+
+  // 👇 Assert DOM structure
+  await expect(canvas.getByText('Hello World')).toBeInTheDocument()
+
+  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  // await userEvent.click(canvas.getByTestId("button"));
+
+  // 👇 Assert DOM structure
+  await expect(canvas.getByText('Hello World')).toBeInTheDocument()
+}

package/src/docs/buttons.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs'
+import { html } from 'lit-html'
+
+<Meta title="Design System/Atoms/Button" />
+
+# Button component
+
+This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
+
+It can be further expanded with your own code snippets and include specific information related to your stories.
+
+For example:
+
+import { Story } from '@storybook/addon-docs'
+
+## Button
+
+Button is the primary component. It has four possible states.
+
+- [Primary](?path=/docs/design-system-typography--currency-10-semi-bold)
+- [Secondary](#design-system-atoms-button--secondary)
+- [Large](#large)
+- [Small](#small)
+
+## With the story title defined
+
+If you included the title in the story's default export, use this approach.
+
+### Primary
+
+<Story id="design-system-atoms-button--primary" />
+
+### Secondary
+
+<Story id="design-system-atoms-button--secondary" />

package/src/docs/colors.stories.mdx

@@ -0,0 +1,72 @@
+import {
+  Meta,
+  ColorPalette,
+  ColorItem,
+  Story,
+  Canvas,
+  Source,
+} from '@storybook/addon-docs'
+import { html } from 'lit-html'
+import dedent from 'ts-dedent'
+
+import {
+  colorPalette,
+  neutral1,
+  neutral2,
+  neutral3,
+} from '../shared/styles/color-palette'
+
+<Meta title="Design System/Colors" />
+
+<h1 id="typography">Colors</h1>
+
+We use colors that has fixed `hue` and `saturation` and operate over `lightness` values.
+For instance in `neutral-20` the lightness value is `20`.
+
+### **Example Usage**
+
+Apply color class like any other Tailwind color, for example:
+
+```html
+<span class="bg-neutral-20 text-honey-72">Text</span>
+```
+
+### **Color Palette**
+
+<br />
+
+<ColorPalette>
+  #### **Neutral Colors**
+  <br />
+  <br />
+  <ColorItem title="neutral" colors={neutral1} />
+  <ColorItem colors={neutral2} />
+  <ColorItem colors={neutral3} />
+  ### **Accent Colors**
+  <br />
+  <br />
+  <ColorItem title="honey" colors={colorPalette.honey} />
+  <ColorItem title="coral" colors={colorPalette.coral} />
+  <ColorItem title="warm" colors={colorPalette.warm} />
+  <ColorItem title="sea salt" colors={colorPalette['sea-salt']} />
+  <ColorItem title="cloud" colors={colorPalette.cloud} />
+  <ColorItem title="ocean" colors={colorPalette.ocean} />
+  <ColorItem title="sky" colors={colorPalette.sky} />
+  <ColorItem title="lukso" colors={colorPalette.lukso} />
+  ### **Utility Colors**
+  <br />
+  <br />
+  <ColorItem title="yellow" colors={colorPalette.yellow} />
+  <ColorItem title="green" colors={colorPalette.green} />
+  <ColorItem title="blue" colors={colorPalette.blue} />
+  <ColorItem title="red" colors={colorPalette.red} />
+  ### **Purples**
+  <br />
+  <br />
+  <ColorItem title="purple" colors={colorPalette.purple} />
+  ### **Gradients**
+  <br />
+  <br />
+  <ColorItem title="gradient-1" colors={colorPalette['gradient-1']} />
+  <ColorItem title="gradient-2" colors={colorPalette['gradient-2']} />
+</ColorPalette>