feat(pie-textarea): DSW-2125 create skeleton component (#1518)

* feat(pie-textarea): DSW-2125 add initial files for pie-textarea

* Add storybook figma link

.changeset/perfect-moose-tell.md

@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-textarea": minor
+"@justeattakeaway/pie-webc": patch
+"pie-storybook": patch
+---
+
+[Added] - initial pie-textarea files from component generator

.changeset/spotty-grapes-destroy.md

@@ -0,0 +1,5 @@
+---
+"pie-monorepo": patch
+---
+
+[Changed] - update github workflows for new pie-textarea component

.github/project-labeler.yml

@@ -76,6 +76,9 @@ pie-icon-button:
 pie-text-input:
 - "packages/components/pie-text-input/**/*"
 
+pie-textarea:
+- "packages/components/pie-textarea/**/*"
+
 pie-link:
 - 'packages/components/pie-link/**/*'
 

.github/workflows/ci.yml

@@ -28,19 +28,20 @@ env:
   PERCY_TOKEN_PIE_BUTTON: ${{ secrets.PERCY_TOKEN_PIE_BUTTON }}
   PERCY_TOKEN_PIE_CARD: ${{ secrets.PERCY_TOKEN_PIE_CARD }}
   PERCY_TOKEN_PIE_CHECKBOX: ${{ secrets.PERCY_TOKEN_PIE_CHECKBOX }}
-  PERCY_TOKEN_PIE_COOKIE_BANNER: ${{ secrets.PERCY_TOKEN_PIE_COOKIE_BANNER }}
   PERCY_TOKEN_PIE_CHIP: ${{ secrets.PERCY_TOKEN_PIE_CHIP }}
-  PERCY_TOKEN_PIE_FORM_LABEL: ${{ secrets.PERCY_TOKEN_PIE_FORM_LABEL }}
+  PERCY_TOKEN_PIE_COOKIE_BANNER: ${{ secrets.PERCY_TOKEN_PIE_COOKIE_BANNER }}
   PERCY_TOKEN_PIE_DIVIDER: ${{ secrets.PERCY_TOKEN_PIE_DIVIDER }}
+  PERCY_TOKEN_PIE_FORM_LABEL: ${{ secrets.PERCY_TOKEN_PIE_FORM_LABEL }}
   PERCY_TOKEN_PIE_ICON_BUTTON: ${{ secrets.PERCY_TOKEN_PIE_ICON_BUTTON }}
   PERCY_TOKEN_PIE_ICONS_WEBC: ${{ secrets.PERCY_TOKEN_PIE_ICONS_WEBC }}
-  PERCY_TOKEN_PIE_TEXT_INPUT: ${{ secrets.PERCY_TOKEN_PIE_TEXT_INPUT }}
   PERCY_TOKEN_PIE_LINK: ${{ secrets.PERCY_TOKEN_PIE_LINK }}
   PERCY_TOKEN_PIE_MODAL: ${{ secrets.PERCY_TOKEN_PIE_MODAL }}
   PERCY_TOKEN_PIE_NOTIFICATION: ${{ secrets.PERCY_TOKEN_PIE_NOTIFICATION }}
-  PERCY_TOKEN_PIE_SWITCH: ${{ secrets.PERCY_TOKEN_PIE_SWITCH }}
   PERCY_TOKEN_PIE_SPINNER: ${{ secrets.PERCY_TOKEN_PIE_SPINNER }}
+  PERCY_TOKEN_PIE_SWITCH: ${{ secrets.PERCY_TOKEN_PIE_SWITCH }}
   PERCY_TOKEN_PIE_TAG: ${{ secrets.PERCY_TOKEN_PIE_TAG }}
+  PERCY_TOKEN_PIE_TEXT_INPUT: ${{ secrets.PERCY_TOKEN_PIE_TEXT_INPUT }}
+  PERCY_TOKEN_PIE_TEXTAREA: ${{ secrets.PERCY_TOKEN_PIE_TEXTAREA }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
 jobs:

apps/pie-storybook/package.json

@@ -32,6 +32,7 @@
     "@justeattakeaway/pie-switch": "0.29.8",
     "@justeattakeaway/pie-tag": "0.9.6",
     "@justeattakeaway/pie-text-input": "0.22.2",
+    "@justeattakeaway/pie-textarea": "0.0.0",
     "dompurify": "3.0.11"
   },
   "devDependencies": {

apps/pie-storybook/stories/pie-textarea.stories.ts

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+
+/* eslint-disable import/no-duplicates */
+import '@justeattakeaway/pie-textarea';
+import { TextareaProps } from '@justeattakeaway/pie-textarea';
+/* eslint-enable import/no-duplicates */
+
+import { type StoryMeta } from '../types';
+import { createStory } from '../utilities';
+
+type TextareaStoryMeta = StoryMeta<TextareaProps>;
+
+const defaultArgs: TextareaProps = {};
+
+const textareaStoryMeta: TextareaStoryMeta = {
+    title: 'Textarea',
+    component: 'pie-textarea',
+    argTypes: {},
+    args: defaultArgs,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/6mNN7EK3baDTPJjFx2E69u/Textarea-web-component-audit?node-id=1573-114527',
+        },
+    },
+};
+
+export default textareaStoryMeta;
+
+// TODO: remove the eslint-disable rule when props are added
+// eslint-disable-next-line no-empty-pattern
+const Template = ({}: TextareaProps) => html`
+    <pie-textarea></pie-textarea>
+`;
+
+export const Default = createStory<TextareaProps>(Template, defaultArgs)();

packages/components/pie-textarea/.eslintignore

@@ -0,0 +1,6 @@
+.turbo
+dist
+node_modules
+lit-browsers-report
+lit-visual-report
+test-results

packages/components/pie-textarea/README.md

@@ -0,0 +1,91 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-textarea">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-textarea.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-textarea)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-textarea
+
+`pie-textarea` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+
+## Installation
+
+To install `pie-textarea` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-textarea
+
+# yarn
+$ yarn add @justeattakeaway/pie-textarea
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+#### JavaScript
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
+import { PieTextarea } from '@justeattakeaway/pie-textarea';
+
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-textarea';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
+```
+
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-textarea`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| - | - | - | - |
+
+In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
+
+```html
+<!-- Native HTML -->
+<pie-textarea></pie-textarea>
+
+<!-- JSX -->
+<PieTextarea></PieTextarea>
+```
+
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

packages/components/pie-textarea/custom-elements-manifest.config.mjs

@@ -0,0 +1,15 @@
+import { moduleFileExtensionsPlugin } from 'cem-plugin-module-file-extensions';
+
+export default {
+    globs: [
+        './src/**/!(*.css).ts',
+    ],
+    exclude: [
+        '**/*.d.ts',
+        '**/*.d.js',
+        '**/react.ts',
+        '**/test/**',
+        '**/node_modules/**',
+    ],
+    plugins: [moduleFileExtensionsPlugin()],
+};

packages/components/pie-textarea/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

packages/components/pie-textarea/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@justeattakeaway/pie-textarea",
+  "description": "PIE Design System Textarea built using Web Components",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "custom-elements.json",
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "pieMetadata": {
+    "componentStatus": "alpha"
+  },
+  "scripts": {
+    "build": "run -T vite build",
+    "build:react-wrapper": "npx build-react-wrapper",
+    "create:manifest": "yarn cem analyze --litelement",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TEXTAREA} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual",
+    "test:browsers-setup": "npx playwright-lit-setup"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.16.0",
+    "cem-plugin-module-file-extensions": "0.0.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "0.23.0"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

packages/components/pie-textarea/playwright-lit-visual.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+
+export default defineConfig(getPlaywrightVisualConfig());

packages/components/pie-textarea/playwright-lit.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
+
+export default defineConfig(getPlaywrightConfig());

packages/components/pie-textarea/src/defs-react.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * TODO: Verify if ReactBaseType can be set as a more specific React interface
+ * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
+ * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
+ */
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

packages/components/pie-textarea/src/defs.ts

@@ -0,0 +1,3 @@
+// TODO - please remove the eslint disable comment below when you add props to this interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TextareaProps {}

packages/components/pie-textarea/src/index.ts

@@ -0,0 +1,30 @@
+import { LitElement, html, unsafeCSS } from 'lit';
+import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+
+import styles from './textarea.scss?inline';
+import { TextareaProps } from './defs';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-textarea';
+
+/**
+ * @tagname pie-textarea
+ */
+export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
+    render () {
+        return html`<h1 data-test-id="pie-textarea">Hello world!</h1>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+defineCustomElement(componentSelector, PieTextarea);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieTextarea;
+    }
+}

packages/components/pie-textarea/src/textarea.scss

@@ -0,0 +1 @@
+@use '@justeattakeaway/pie-css/scss' as p;

packages/components/pie-textarea/test/accessibility/pie-textarea.spec.ts

@@ -0,0 +1,18 @@
+
+import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
+import { PieTextarea, TextareaProps } from '../../src/index.ts';
+
+test.describe('PieTextarea - Accessibility tests', () => {
+    test('a11y - should test the PieTextarea component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
+        await mount(
+            PieTextarea,
+            {
+                props: {} as TextareaProps,
+            },
+        );
+
+        const results = await makeAxeBuilder().analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+});

packages/components/pie-textarea/test/component/pie-textarea.spec.ts

@@ -0,0 +1,20 @@
+
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import { PieTextarea, TextareaProps } from '../../src/index.ts';
+
+const componentSelector = '[data-test-id="pie-textarea"]';
+
+test.describe('PieTextarea - Component tests', () => {
+    test('should render successfully', async ({ mount, page }) => {
+        // Arrange
+        await mount(PieTextarea, {
+            props: {} as TextareaProps,
+        });
+
+        // Act
+        const textarea = page.locator(componentSelector);
+
+        // Assert
+        expect(textarea).toBeVisible();
+    });
+});

packages/components/pie-textarea/test/visual/pie-textarea.spec.ts

@@ -0,0 +1,14 @@
+
+import { test } from '@sand4rt/experimental-ct-web';
+import percySnapshot from '@percy/playwright';
+import { PieTextarea, TextareaProps } from '../../src/index.ts';
+
+test.describe('PieTextarea - Visual tests`', () => {
+    test('should display the PieTextarea component successfully', async ({ page, mount }) => {
+        await mount(PieTextarea, {
+            props: {} as TextareaProps,
+        });
+
+        await percySnapshot(page, 'PieTextarea - Visual Test');
+    });
+});

packages/components/pie-textarea/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@justeattakeaway/pie-components-config/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+  },
+  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"],
+}

packages/components/pie-textarea/vite.config.js

@@ -0,0 +1,3 @@
+import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
+
+export default viteConfig;

packages/components/pie-webc/components/textarea.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-textarea';