Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions .github/CODEOWNERS

This file was deleted.

123 changes: 123 additions & 0 deletions .github/workflows/build-and-deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@

#
# Prerequisites – igniteui-actions repo:
# - A workflow that handles event_type 'wc-samples-cd' (add one, or confirm the correct event name).

name: Build and Deploy - WC Samples EN
permissions:
contents: read

on:
push:
branches:
- vnext
- master
workflow_dispatch:
inputs:
branch:
description: 'Branch to build and deploy (e.g. vnext)'
required: true

env:
BRANCH_REF: ${{ github.event.inputs.branch && format('refs/heads/{0}', github.event.inputs.branch) || github.ref }}

jobs:
build-and-deploy:
name: Build and Deploy - WC Samples EN
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
ref: ${{ env.BRANCH_REF }}

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22.x'

- name: Create .npmrc file
run: |
if [ -f ".npmrc" ]; then
rm .npmrc
fi
touch .npmrc

- name: Configure licensed @infragistics registry
run: |
echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> .npmrc
echo "//packages.infragistics.com/npm/js-licensed/:username=${{ secrets.INFRAGISTICS_NPM_USER }}" >> .npmrc
echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.INFRAGISTICS_NPM_TOKEN }}" >> .npmrc

- name: npm install --legacy-peer-deps
run: npm install --legacy-peer-deps

# "Uninstall all IG trial packages & re-install their licensed versions"
- name: Replace trial IG packages with licensed versions
shell: pwsh
run: |
Get-Content -Path ./.npmrc
$packageJson = Get-Content -Raw ./package.json | ConvertFrom-Json
$npmUninstallPackages = "npm uninstall --save "
$npmInstallPackages = "npm install --legacy-peer-deps "
$packageJson.dependencies.PSObject.Properties | `
Where-Object {
$_.Name.StartsWith("igniteui-webcomponents-") -or $_.Name.StartsWith("igniteui-dockmanager")
} | `
ForEach-Object {
$npmUninstallPackages += $_.Name + " "
$npmInstallPackages += "@infragistics/" + $_.Name + "@" + $_.Value + " "
}
Write-Host $npmUninstallPackages
Write-Host $npmInstallPackages
Invoke-Expression -Command "$npmUninstallPackages"
Invoke-Expression -Command "$npmInstallPackages"

- name: npm run build
run: npm run build
env:
BASE_PATH: /webcomponents-demos

# Package the contents of dist folder as a zip artifact
- name: Create zip artifact
run: |
cd dist
zip -r ${{ github.workspace }}/WebComponentsSamples.zip ./

- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: WebComponentsSamplesBrowser
path: WebComponentsSamples.zip
retention-days: 1

- name: Get app token
id: app-token
uses: actions/create-github-app-token@v2
with:
app-id: ${{ secrets.IGNITEUI_GITHUB_APP_ID }}
private-key: ${{ secrets.IGNITEUI_GITHUB_APP_PRIVATE_KEY }}
owner: IgniteUI
repositories: igniteui-actions

- name: Trigger Deploy Workflow in IgniteUI Actions
uses: actions/github-script@v8
with:
github-token: ${{ steps.app-token.outputs.token }}
script: |
await github.rest.repos.createDispatchEvent({
owner: 'IgniteUI',
repo: 'igniteui-actions',
event_type: 'wc-samples-cd',
client_payload: {
calling_branch: "${{ env.BRANCH_REF }}",
repository: "${{ github.repository }}",
run_id: "${{ github.run_id }}",
artifact_name: "WebComponentsSamplesBrowser",
ref: "${{ github.ref }}",
sha: "${{ github.sha }}",
branch: "${{ github.ref_name }}",
}
});
Comment thread Fixed
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
/tmp/
/tests/

# Astro / Vite build output:
/.astro
/dist
/public/assets/code-viewer

# browser auto-generated files:
/browser/node_modules
/browser/src/samples
Expand Down
192 changes: 71 additions & 121 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

[![Node.js CI](https://github.com/IgniteUI/igniteui-wc-examples/actions/workflows/node.js.yml/badge.svg)](https://github.com/IgniteUI/igniteui-wc-examples/actions/workflows/node.js.yml)

This repository contains over 300 examples on how to use [Ignite UI for Web ](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html) components:
This repository contains over 300 examples on how to use [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html):

- Charts:
[Area](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/area-chart),
Expand Down Expand Up @@ -44,165 +44,115 @@ This repository contains over 300 examples on how to use [Ignite UI for Web ](ht

## Branches

> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-wc-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
> **_NOTE:_** Use the [master](https://github.com/IgniteUI/igniteui-wc-examples/tree/master) branch to run samples locally. Use the [vnext](https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext) branch only when contributing new samples.

## Preview

You can preview and browse all samples in this repository by opening our [Web Components Browser](https://www.infragistics.com/webcomponents-demos/samples/index). Alternatively, you you can view these samples with detailed information in our [Web Component Documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
You can preview and browse all samples by opening our [Web Components Browser](https://www.infragistics.com/webcomponents-demos/samples/index). Alternatively, view samples with detailed documentation in the [Web Components Documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

In addition, you can run each sample project individually from the [./samples](./samples) folder or you can run from the [./browser](./browser) folder to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the **Edit Sandbox** button in a readme file of sample project, e.g.
In addition, you can run each sample project individually from the [./samples](./samples) folder or you can run project containing all samples `npm run dev` to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the **Edit Sandbox** button in a readme file of sample project, e.g.

[./samples/charts/category-chart/overview/README.md](./samples/charts/category-chart/overview/README.md)


## Setup

To set up this project locally, clone this repository:
```
Clone the repository and install dependencies:

```bash
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
cd igniteui-wc-examples
git checkout master
npm install
```

## Running Individual Sample

Follow these instructions to run a single sample on your computer:

- in VS Code, open a folder with existing sample, e.g.

[./samples/charts/category-chart/overview](./samples/charts/category-chart/overview)

- type `npm install --legacy-peer-deps` command in terminal window

- type `npm run start` command in terminal window

- Wait until the build is completed and then open [http://localhost:4200](http://localhost:4200) in your browser.

At this point, you should see a website hosted example of [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html)

## Running All Samples (Dev Server)

## Running All Samples
Start the Astro development server:

Follow these instructions to run all samples locally in a browser application.

- open VS Code

- select **View** - **Terminal** menu item
```bash
npm run dev
```

- type `npm install --legacy-peer-deps` command in terminal window
Open [http://localhost:4200](http://localhost:4200) in your browser. You will see a navigation sidebar listing all samples. The dev server compiles samples on demand — no full build required.

This will install required packages and [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html) packages from npm website:
## Building for Production

- [igniteui-webcomponents-core](https://www.npmjs.com/package/igniteui-webcomponents-core)
- [igniteui-webcomponents-core](https://www.npmjs.com/package/igniteui-webcomponents-dashboards)
- [igniteui-webcomponents-charts](https://www.npmjs.com/package/igniteui-webcomponents-charts)
- [igniteui-webcomponents-excel](https://www.npmjs.com/package/igniteui-webcomponents-excel)
- [igniteui-webcomponents-gauges](https://www.npmjs.com/package/igniteui-webcomponents-gauges)
- [igniteui-webcomponents-grids](https://www.npmjs.com/package/igniteui-webcomponents-grids)
- [igniteui-webcomponents-maps](https://www.npmjs.com/package/igniteui-webcomponents-maps)
- [igniteui-webcomponents-spreadsheet](https://www.npmjs.com/package/igniteui-webcomponents-spreadsheet)
- [igniteui-webcomponents-datasources](https://www.npmjs.com/package/igniteui-webcomponents-datasources)
```bash
npm run build
```

Next, follow these steps:
This runs two steps automatically:
1. **`prebuild`** — generates `public/assets/code-viewer/**/*.json` files used by the docs site to display sample source code tabs
2. **`astro build`** — compiles all ~900+ samples into static HTML + JS in `dist/`

- type `npm run start` command in terminal window to start the browser application locally
To preview the production build locally:

- Wait until the build is completed and then open [http://localhost:4200](http://localhost:4200) in your browser. You should see a website with navigation menu for browning all samples in this repository.
```bash
npm run preview
```

![Samples Browser Preview](./browser/public/images/preview.PNG)
Opens [http://localhost:4200](http://localhost:4200) serving the `dist/` output exactly as it would be deployed.

## Adding New Sample
## Adding a New Sample

- create a new branch from the `vnext` branch
1. Create a new branch from `vnext`

- open a folder with existing sample, e.g.
2. Copy an existing sample folder as a starting point, e.g.:
```
./samples/charts/category-chart/axis-options/
./samples/charts/category-chart/axis-options/ → ./samples/charts/category-chart/axis-types/
```
- copy the sample and rename the new folder, e.g.
```
./samples/charts/category-chart/axis-types/
```
- open the newly created folder in VS Code

- rename the .ts file in src folder, using this naming convention:
3. The folder structure must be exactly **`samples/{group}/{component}/{name}/`** with:
- `index.html` — sample markup (only the content inside `<body>`, wrapped in `<div id="root">`)
- `src/index.ts` — sample TypeScript entry point, exporting a class (e.g. `export class Sample { ... }`)
- `package.json` — with `"main": "src/index.ts"` (used by Astro to discover the sample)

`ControlNameSampleName.ts`
4. Implement your sample in `src/index.ts`. Export the class but **do not** instantiate it at the module level — the browser app calls `new Sample()` automatically when the page loads.

5. Start the dev server and verify:
```bash
npm run dev
```
./samples/charts/category-chart/axis-types/src/CategoryChartAxisTypes.ts
```

- open the .ts file

- rename class to the name of .tsx file
- The new sample appears in the navigation sidebar
- It loads without errors in the browser console

- type `npm install --legacy-peer-deps` command in terminal window

- type `npm run start` command in terminal window

- implement the new sample in the .tsx file

- close the new sample project in VS Code

- delete `node_modules` folder in the new sample project

- follow instructions in the next section

## Verify New Sample

- type `npm run start` command in terminal window

- open [http://localhost:4200](http://localhost:4200) in your browser

- verify that the new sample is listed in the navigation menu

- verify that the new sample loads by clicking navigation link

- verify that there are no errors in DEV console

- take a screenshot of the new sample with navigation menu

- commit your changes

- create a pull request and target the `vnext` branch
6. Regenerate the code-viewer JSON files:
```bash
npm run generate:code-viewer
```

- paste the screenshot in you pull request
7. Commit, push, and open a pull request targeting `vnext`. Include a screenshot of the running sample.

- submit your pull request
## Updating Ignite UI Package Versions

Do **not** manually edit version strings in `package.json` files.

## Updating Packages in Samples
- Open [./scripts/update-ig.js](./scripts/update-ig.js)
- Update the version in the `packageUpgrades` array
- Run from the repo root:
```bash
npm run update:ig
npm install
```
- Create and merge a pull request with the updated `package.json` files

NOTE Do NOT find replace version of packages in package.json files.
## Scripts Reference

- open this repo in VS Code
- open [./browser/tasks/gulp-samples.js](./browser/tasks/gulp-samples.js) file
- navigate to the `updateIG` function
- update version of packages in `packageUpgrades` array
- open terminal window
- run `cd browser` command
- run the `gulp updateIG` command
- run `npm install --legacy-peer-deps` command
- create AND merge a pull request with changes in all package.json files in this repository
- create 2nd pull request with similar changes in `/editor-templates/WebComponents/main-template/package.json` of the [igniteui-xplat-examples](https://github.com/IgniteUI/igniteui-xplat-examples) repository.
| Script | Description |
|--------|-------------|
| `npm run dev` | Start Astro dev server on port 4200 |
| `npm run build` | Generate code-viewer JSONs then build static site to `dist/` |
| `npm run preview` | Serve the `dist/` production build on port 4200 |
| `npm run generate:code-viewer` | Regenerate `public/assets/code-viewer/**/*.json` |
| `npm run update:ig` | Update Ignite UI package versions across all sample `package.json` files |
| `npm run check` | Run Astro TypeScript type-checking |

## Learn More

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


# Updating Version of IgniteUI Packages

Perform these steps to update version of **Ignite UI for WebComponent** packages in all samples. NOTE that the order of these steps is very important.

- open this repo in VS Code
- open [gulp-samples.js](./browser/tasks/gulp-samples.js) file
- navigate to the `updateIG` function
- change version of **Ignite UI for WebComponent** packages in the `packageUpgrades` array
- open terminal window
- run `gulp updateIG` command
- run `npm install --legacy-peer-deps` command
- create pull request with your changes
- open the [Igniteui-xplat-example](https://github.com/IgniteUI/igniteui-xplat-examples) repo in VS Code
- update version of **Ignite UI for WebComponent** packages in [WC template](https://github.com/IgniteUI/igniteui-xplat-examples/blob/23.2.x/editor-templates/WebComponents/main-template/package.json)
- create pull request with your changes in [Igniteui-xplat-example](https://github.com/IgniteUI/igniteui-xplat-examples) repo
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html).
- run `npm install --legacy-peer-deps`
- create a pull request with your changes
- open the [igniteui-xplat-examples](https://github.com/IgniteUI/igniteui-xplat-examples) repo in VS Code
- update the version of **Ignite UI for WebComponent** packages in the [WC template](https://github.com/IgniteUI/igniteui-xplat-examples/blob/23.2.x/editor-templates/WebComponents/main-template/package.json)
- create a pull request with your changes in the [igniteui-xplat-examples](https://github.com/IgniteUI/igniteui-xplat-examples) repo
Loading
Loading