Skip to content

Commit

Permalink
feat: Added form integration sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@rkaraivanov
rkaraivanov committed Oct 17, 2023
1 parent a04c057 commit 3a7f8be
Show file tree
Hide file tree
Showing 14 changed files with 322 additions and 25 deletions.
10 changes: 9 additions & 1 deletion browser/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,14 @@
<a class="nav-link" href="#" data-nav="/samples/inputs/switches/label">─<span>Label</span></a>
<a class="nav-link" href="#" data-nav="/samples/inputs/switches/overview">─<span>Overview</span></a>
</div>
<label id="nav-textarea" class="nav-component">Textarea</label>
<div id="nav-textarea-list" class="nav-list" state="collapsed">
<a class="nav-link" href="#" data-nav="/samples/input/textarea/form-integration">-<span>Form Integration</span></a>
<a class="nav-link" href="#" data-nav="/samples/input/textarea/overview">-<span>Overview</span></a>
<a class="nav-link" href="#" data-nav="/samples/input/textarea/resize">-<span>Resize</span></a>
<a class="nav-link" href="#" data-nav="/samples/input/textarea/slots">-<span>Slots</span></a>
<a class="nav-link" href="#" data-nav="/samples/input/textarea/styling">-<span>Styling</span></a>
</div>

<div class="nav-group">LAYOUTS</div>
<label id="nav-accordion" class="nav-component">Accordion</label>
Expand Down Expand Up @@ -863,4 +871,4 @@
</div>

</body>
</html>
</html>
11 changes: 11 additions & 0 deletions samples/inputs/textarea/form-integration/.prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"printWidth": 250,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"fluid": false
}
50 changes: 50 additions & 0 deletions samples/inputs/textarea/form-integration/ReadMe.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->

This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
</a>
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/textarea/form-integration" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/textarea/form-integration?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
</a>
</body>
</html>

## Instructions

To set up this project locally, execute these commands:

```
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
cd ./igniteui-wc-examples
cd ./samples/inputs/textarea/form-integration
```

open above folder in VS Code or type:

```
code .
```

In terminal window, run:

```
npm install
npm run start
```

Then open http://localhost:4200/ in your browser

## Learn More

To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
32 changes: 32 additions & 0 deletions samples/inputs/textarea/form-integration/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Textarea Form Integration</title>
<meta charset="UTF-8" />

<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
</head>

<body>
<div id="root">
<div class="container sample center">
<form id="form">
<igc-textarea rows="5" name="user_feedback" label="Your review" required></igc-textarea>
<div class="controls">
<igc-button type="submit">Submit review</igc-button>
<igc-button type="reset" variant="outlined">Reset</igc-button>
</div>
<igc-toast id="submitted" position="top" display-time="1e3">Your review was submitted</igc-toast>
</form>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
59 changes: 59 additions & 0 deletions samples/inputs/textarea/form-integration/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{
"name": "wc-textarea-form-integration",
"version": "1.0.0",
"description": "This project provides example of textarea form integration using IgniteUI for Web Components",
"main": "src/index.ts",
"scripts": {
"build": "npm run build:prod",
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
"start": "npm run serve:dev",
"build:legacy": "npm run build:prod:legacy",
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
"start:legacy": "npm run serve:dev:legacy"
},
"author": "Infragistics",
"dependencies": {
"@webcomponents/custom-elements": "^1.4.1",
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
"igniteui-webcomponents": "^4.5.0",
"lit": "^2.0.2",
"lit-html": "^2.2.0",
"tslib": "^2.0.0"
},
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.10.0",
"@babel/preset-env": "^7.8.3",
"@babel/preset-typescript": "^7.8.3",
"@types/source-map": "^0.5.7",
"babel-loader": "^8.1.0",
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"css-loader": "^1.0.0",
"csv-loader": "^3.0.2",
"file-loader": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^4.1.5",
"html-webpack-plugin": "^4.3.0",
"parcel-bundler": "^1.6.1",
"source-map": "^0.7.3",
"style-loader": "^0.22.1",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "^4.4.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1",
"worker-loader": "^3.0.8",
"xml-loader": "^1.2.1"
},
"license": "",
"homepage": "."
}
6 changes: 6 additions & 0 deletions samples/inputs/textarea/form-integration/sandbox.config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"infiniteLoopProtection": false,
"hardReloadOnChange": false,
"view": "browser",
"template": "parcel"
}
6 changes: 6 additions & 0 deletions samples/inputs/textarea/form-integration/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.controls {
margin-top: 1rem;
}
19 changes: 19 additions & 0 deletions samples/inputs/textarea/form-integration/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/fluent.css";
import "./index.css";

defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent);

export class IgcTextareaFormIntegration {
constructor() {
const toast = document.querySelector("#submitted") as IgcToastComponent;
const form = document.querySelector("#form") as HTMLFormElement;

form.addEventListener("submit", (e: SubmitEvent) => {
e.preventDefault();
toast.show();
});
}
}

new IgcTextareaFormIntegration();
15 changes: 15 additions & 0 deletions samples/inputs/textarea/form-integration/tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"compilerOptions": {
"noImplicitReturns": true,
"esModuleInterop": true,
"noImplicitAny": true,
"declarationDir": "dist/types",
"moduleResolution": "node",
"declaration": true,
"target": "es2015",
"module": "es2015",
"strict": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
95 changes: 95 additions & 0 deletions samples/inputs/textarea/form-integration/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = (env) => {
const nodeEnv = process.env.NODE_ENV || "development";
const isProd = nodeEnv === "production";
const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
console.log(">> webpack nodeEnv=" + nodeEnv);
console.log(">> webpack isProd=" + isProd);
console.log(">> webpack isLegacy=" + isLegacy);
const presets = [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: 3,
targets: {
browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
}
}
],
"@babel/preset-typescript"
];

return {
entry: isLegacy ? [path.resolve(__dirname, "node_modules/@webcomponents/custom-elements"), path.resolve(__dirname, "node_modules/@webcomponents/template"), path.resolve(__dirname, "src")] : path.resolve(__dirname, "src"),
devtool: isProd ? false : "source-map",
output: {
filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
globalObject: "this",
path: path.resolve(__dirname, "dist")
},

resolve: {
mainFields: ["esm2015", "module", "main"],
extensions: [".ts", ".js", ".json"],
plugins: [
new TsconfigPathsPlugin({
configFile: "./tsconfig.json",
extensions: [".ts", ".js"],
mainFields: ["esm2015", "module", "main"]
})
]
},

module: {
rules: [
{ test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
{ test: /\.(csv|tsv)$/, use: ["csv-loader"] },
{ test: /\.xml$/, use: ["xml-loader"] },
{ test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
{
test: /worker\.(ts|js)$/,
use: [
{ loader: "worker-loader" },
{
loader: "babel-loader",
options: {
compact: isProd ? true : false,
presets: presets,
plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
}
}
]
},
{
test: /\.(ts|js)$/,
loader: "babel-loader",
options: {
compact: isProd ? true : false,
presets: presets,
plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
},
exclude: function (modulePath) {
return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
}
}
]
},

plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(nodeEnv)
}),
new HtmlWebpackPlugin({
title: "for-cs",
template: "index.html"
}),
new ForkTsCheckerWebpackPlugin()
]
};
};
11 changes: 5 additions & 6 deletions samples/inputs/textarea/overview/ReadMe.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->

This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.

This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
Expand All @@ -12,10 +11,10 @@ This folder contains implementation of Web Components application with example o
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/input/overview" rel="noopener noreferrer">
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/textarea/overview" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/textarea/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
</a>
</body>
Expand All @@ -28,10 +27,11 @@ To set up this project locally, execute these commands:
```
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
cd ./igniteui-wc-examples
cd ./samples/inputs/input/overview
cd ./samples/inputs/textarea/overview
```

open above folder in VS Code or type:

```
code .
```
Expand All @@ -45,7 +45,6 @@ npm run start

Then open http://localhost:4200/ in your browser


## Learn More

To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
Loading

0 comments on commit 3a7f8be

Please sign in to comment.