open-index/open-npm huggingface dataset:
npm package: @moxiworks/mds-angular
Description: ![npm](https://img.shields.io/npm/v/%40moxiworks%2Fmds-angular)
Latest version: 0.25.1

# @moxiworks/mds-angular
![npm](https://img.shields.io/npm/v/%40moxiworks%2Fmds-angular)

This package in the monorepo serves as the Angular integration for the Stencil-generated components. The `lib` directory within this package contains the Stencil-generated components, which are built to be consumed by Angular applications.

# MdsAngular

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.5, following the [stencil-js integration docs](https://stenciljs.com/docs/angular).

The docs suggested a complex structure deeply nested, seemingly a monorepo within a monorepo. Instead, we've chosen to keep things simple and structure it as a single application. Additionally, the `ng` tooling used to build Angular applications would normally build the `package.json` in with the dist. We've chosen to ignore this for simplicity, and to seemlessly work with lerna.

## Generating the `lib` Directory

The `lib` directory holds the Stencil-generated components, which serve as the foundation for the Angular library. These components are defined using web standards and can be used seamlessly within Angular applications. To generate the `lib` directory, run the build script in the `mds` package. In the `packages/mds/stencil.config.ts`, you can see the config for outputting this.

## Building the `lib` Directory

The `yarn build` script handles the tsc build. The output is stored in the `dist` directory. Only run this command after successfully completing the previous step.

## Usage
1. In your angular application, add the `@moxiworks/mds-angular` package to your dependancies.

    Make sure you replace the `x.x.x` with the latest version, we can be found in the badge at the top of this doc. Avoid using `^` or `~`, as we want to be using the exact value.

```json
"dependencies": {
  "@moxiworks/mds-angular": "x.x.x"
}
```

2. Install the package

```
yarn install
// or
npm install
```

3. Setup the custom components
```jsx
// app.module.ts

import { ComponentLibraryModule } from '@moxiworks/mds-angular';

@NgModule({
  imports: [ComponentLibraryModule],
})
export class AppModule {}
```

4. Setup the mds global styles
```diff
// angular.json

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/angular",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": [
        "zone.js"
      ],
      "tsConfig": "tsconfig.app.json",
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "src/styles.css",
+       "@moxiworks/mds-angular/dist/styles/mds-core.css"
      ],
      "scripts": []
    },
```

5. Use the components in the app
```tsx
<!-- app.component.html -->

<mx-button icon="mds-check">It works!</mx-button>
```
npm package: @moxiworks/mds-react
Description: ![npm](https://img.shields.io/npm/v/%40moxiworks%2Fmds-react)
Latest version: 0.25.1

# @moxiworks/mds-react
![npm](https://img.shields.io/npm/v/%40moxiworks%2Fmds-react)

This package in the monorepo serves as the React integration for the Stencil-generated components. The `lib` directory within this package contains the Stencil-generated components, which are built to be consumed by React applications.

## Generating the `lib` Directory

The `lib` directory holds the Stencil-generated components, which serve as the foundation for the React library. These components are defined using web standards and can be used seamlessly within React applications. To generate the `lib` directory, run the build script in the `stencil-library` package. In the `packages/stencil-library/stencil.config.ts`, you can see the config for outputting this.

## Building the `lib` Directory

The `yarn build` script handles the tsc build. The output is stored in the `dist` directory. Only run this command after successfully completing the previous step.

## Usage
1. In your react application, add the `@moxiworks/mds-react` package to your dependancies.

    Make sure you replace the `x.x.x` with the latest version, we can be found in the badge at the top of this doc. Avoid using `^` or `~`, as we want to be using the exact value.

```json
"dependencies": {
  "@moxiworks/mds-react": "x.x.x"
}
```

2. Install the package

```
yarn install
// or
npm install
```

3. Use in the app. We've decided to make call the `defineCustomElements` function within `@moxiworks/mds-react`. This will be called the moment you import from the package.

    Ensure that you wrap the code with a `mds` class. This allows you to customise what sections of the app have access to the mds styles. In most cases, leaving it in the root component does the job.
```jsx
// App.tsx
import './App.css';
import { MxButton } from '@moxiworks/mds-react';

function App() {
  return (
    <div className="mds">
      <MxButton icon="mds-check">It works!</MxButton>
    </div>
  );
}

export default App;
```
npm package: @moxiworks/mds-vue
Description: ![npm](https://img.shields.io/npm/v/%40moxiworks%2Fmds-vu)
Latest version: 0.25.1

# @moxiworks/mds-vue
![npm](https://img.shields.io/npm/v/%40moxiworks%2Fmds-vu)

This package in the monorepo serves as the Vue integration for the Stencil-generated components. The `lib` directory within this package contains the Stencil-generated components, which are built to be consumed by Vue applications.

## Generating the `lib` Directory

The `lib` directory holds the Stencil-generated components, which serve as the foundation for the Vue library. These components are defined using web standards and can be used seamlessly within Vue applications. To generate the `lib` directory, run the build script in the `stencil-library` package. In the `packages/stencil-library/stencil.config.ts`, you can see the config for outputting this.

## Building the `lib` Directory

The `yarn build` script handles the tsc build. The output is stored in the `dist` directory. Only run this command after successfully completing the previous step.

## Usage
1. In your vue application, add the `@moxiworks/mds-vue` package to your dependancies.

    Make sure you replace the `x.x.x` with the latest version, we can be found in the badge at the top of this doc. Avoid using `^` or `~`, as we want to be using the exact value.

```json
"dependencies": {
  "@moxiworks/mds-vue": "x.x.x"
}
```

2. Install the package

```
yarn install
// or
npm install
```

3. Define the custom components in the `vite.config.ts` file.
```diff
export default defineConfig({
  plugins: [
+   vue({
+     template: {
+       compilerOptions: {
+         // treat all tags with a `mx-` as custom elements
+         isCustomElement: (tag) => tag.startsWith('mx-'),
+       },
+     },
+   }),
    vueJsx(),
  ],
})
```

4. Import the component library plugin in the `main.js` file. Also include the mds-core.css stylesheet
```diff
// src/main.js
+ import '@moxiworks/mds-vue/dist/styles/mds-core.css'
import { createApp } from 'vue'
import App from './App.vue'
+ import { ComponentLibrary } from '@moxiworks/mds-vue';

+ createApp(App).use(ComponentLibrary).mount('#app');
```

5. Use the components.
```jsx
<template>
  <mx-button icon="mds-check">It works!</mx-button>
</template>
```