open-index/open-npm huggingface dataset:
npm package: @felixwochnick/vue-docgen-vetur
Description: Generate vetur component data for your vue component library
Author: Ruben Gees
Latest version: 0.1.1

# vue-docgen-vetur ![npm](https://img.shields.io/npm/v/vue-docgen-vetur) ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/SmartsquareGmbH/vue-docgen-vetur/CI)

Generate vetur component data for your vue component library.

### Installation

`npm i -D vue-docgen-vetur`

### Usage

Run the generator from your project: `vue-docgen-vetur`.

The resulting files are generated into the current directory per default. The input and output directory can be
customized by passing them as arguments:

`vue-docgen-vetur -o dist/json src/components/**/*.vue`

Generate vetur docs with prefix:

`vue-docgen-vetur -o dist/json src/components/**/*.vue -p D`

The input supports the glob syntax. See [`fast-glob`](https://www.npmjs.com/package/fast-glob) for details.

For convenience, this call can be added to the `scripts` in the `package.json`:

```json
{
  "scripts": {
    "build:meta": "vue-docgen-vetur -o dist/json"
  }
}
```

For Vetur to detect the generated files, add another section to the `package.json`:

```json
{
  "vetur": {
    "tags": "dist/json/tags.json",
    "attributes": "dist/json/attributes.json"
  }
}
```

### Example

Relevant data is parsed from the documentation of your components. Given this component:

```vue
<template>
  <div>{{ text }}</div>
</template>

<script>
/**
 * My component
 */
export default {
  props: {
    /**
     * The text to display
     */
    text: {
      type: String,
      default: "Hello",
    },
  },
}
</script>
```

Vetur shows autocompletion:

| Component                                                                                                                     | Prop                                                                                                                     |
| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| ![component-completion](https://user-images.githubusercontent.com/8021265/142169577-7d8b2c8c-01e7-4bec-a32e-f02a6e729ace.png) | ![prop-completion](https://user-images.githubusercontent.com/8021265/142169590-cca078b7-af11-4596-8802-2a0e8c54e621.png) |
npm package: @fellesdatakatalog/alert
Description: Felles datakatalog UI alert component
Author: Jeff Reiffers
Latest version: 0.3.9

# @fellesdatakatalog/alert

Alert component displays an alert message.

## Installation

```bash
npm i @fellesdatakatalog/alert
```

## Dependencies

- react
- styled-components
- @material-ui/icons
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the alert component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the alert as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Alert, { Severity } from '@fellesdatakatalog/alert';

const App: FC = () => (
  <ThemeProvider>
    <Alert severity={Severity.SUCCESS}>
      You succeeded!
    </Alert>
  </ThemeProvider>
);

export default App;
```
npm package: @fellesdatakatalog/breadcrumbs
Description: Felles datakatalog UI breadcrumbs component
Author: Alexander Zakharov
Latest version: 0.2.7

# @fellesdatakatalog/breadcrumbs

Breadcrumbs provide users with an alternative way to navigate an application.

## Installation

```bash
npm i @fellesdatakatalog/breadcrumbs
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the breadcrumbs component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the breadcrumbs as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Breadcrumbs, { Breadcrumb } from '@fellesdatakatalog/breadcrumbs';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs>
      <Breadcrumb>
        Path 1
      </Breadcrumb>
      <Breadcrumb>
        Path 2
      </Breadcrumb>
      <Breadcrumb active>
        Path 3
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;
```

### Custom separator

Breadcrumbs separator is fully customisable and accepts both text and element nodes.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Breadcrumbs, { Breadcrumb } from '@fellesdatakatalog/breadcrumbs';
import FavoriteIcon from '@material-ui/icons/Favorite';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs separator={<FavoriteIcon />}>
      <Breadcrumb>
        <a href="/path/1">Path 1</a>
      </Breadcrumb>
      <Breadcrumb>
        <a href="/path/2">Path 2</a>
      </Breadcrumb>
      <Breadcrumb active>
        <a href="/path/3">Path 3</a>
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;
```

### Custom breadcrumbs

`Breadcrumbs` and `Breadcrumb` components are polymorphic and can thus be customised using `as` prop. Furthermore, `Breadcrumb` components accept arbitrary text and element nodes as children.

```tsx
import React, { FC } from 'react';
import styled from 'styled-components';
import ThemeProvider from '@fellesdatakatalog/theme';
import Breadcrumbs, { Breadcrumb } from '@fellesdatakatalog/breadcrumbs';

const CustomBreadcrumbs = styled.nav`
  padding: 16px;
`;

const CustomBreadcrumb = styled.li`
  padding: 16px;
`;

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs as={CustomBreadcrumbs}>
      <Breadcrumb as={CustomBreadcrumb}>
        <a href="/path/1">Path 1</a>
      </Breadcrumb>
      <Breadcrumb as={CustomBreadcrumb}>
        <a href="/path/2">Path 2</a>
      </Breadcrumb>
      <Breadcrumb active as={CustomBreadcrumb}>
        <a href="/path/3">Path 3</a>
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;
```
npm package: @fellesdatakatalog/button
Description: Felles datakatalog UI button component
Author: Jeff Reiffers
Latest version: 0.2.10

# @fellesdatakatalog/button

Button component.

## Installation

```bash
npm i @fellesdatakatalog/button
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the Button component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the alert as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Button from '@fellesdatakatalog/button';

const App: FC = () => (
  <ThemeProvider>
    <Button>
      Press me!
    </Button>
  </ThemeProvider>
);

export default App;
```
npm package: @fellesdatakatalog/dropdown-menu
Description: Felles datakatalog dropdown-menu component
Latest version: 0.1.13

# @fellesdatakatalog/dropdown-menu

Dropdown-menu component.

## Installation

```bash
npm i @fellesdatakatalog/dropdown-menu
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the dropdown-menu component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the dropdown-menu as any regular component.

```tsx
import React, { FC, useState } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Link from '@fellesdatakatalog/link';
import DropdownMenu, { Menu, Trigger } from '@fellesdatakatalog/dropdown-menu';

const App: FC = () => {
  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
  const openDropdownMenu = () => setIsDropdownMenuOpen(true);
  const closeDropdownMenu = () => setIsDropdownMenuOpen(false);

  return (
    <ThemeProvider>
      <DropdownMenu
        isOpen={true}
      >
        <Trigger>
          <button onClick={openDropdownMenu}>
            Meny
          </button>
        </Trigger>
        <Menu>
          <Link href="https://data.norge">Søk i Felles datakatalog</Link>
        </Menu>
      </DropdownMenu>
    </ThemeProvider>
  );
}

export default App;
```
npm package: @fellesdatakatalog/expansion-panel
Description: Felles datakatalog UI expansion-panel component
Author: Øyvind Isaksen
Latest version: 0.2.7

# @fellesdatakatalog/expansion-panel

Expansion panel component.

## Installation

```bash
npm i @fellesdatakatalog/expansion-panel
```

## Dependencies

- react
- styled-components

## Usage

### Basic usage

In order to use the Expansion panel component, wrap the ExpansionPanelHead and ExpansionPanelBody in ExpansionPanel.

```tsx
import React, { FC } from 'react';
import ExpansionPanel, { ExpansionPanelBody, ExpansionPanelHead} from '@fellesdatakatalog/expansion-panel';

const App: FC = () => (
  <ExpansionPanel>
    <ExpansionPanelHead>
      Expand me!
    </ExpansionPanelHead>
    <ExpansionPanelBody>
      <p>
        Expansion panel body
      </p>
    </ExpansionPanelBody>
  </ExpansionPanel>
);

export default App;
```

### Custom expansion indicator

`ExpansionPanel` component accept expansionIndicator prop as custom elements.

```tsx
import React, { FC } from 'react';
import styled from 'styled-components';
import ExpandLessIcon from '@material-ui/icons/ExpandLess';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import ExpansionPanel, { ExpansionPanelBody, ExpansionPanelHead} from '@fellesdatakatalog/expansion-panel';

const App: FC = () => (
  <ExpansionPanel
    expansionIndicator={{
      expand: <ExpandMoreIcon />,
      collapse: <ExpandLessIcon />
    }}
  >
    <ExpansionPanelHead>Expand me!</ExpansionPanelHead>
    <ExpansionPanelBody>
      <p>
        Expansion panel body
      </p>
    </ExpansionPanelBody>
  </ExpansionPanel>
);

export default App;
```
npm package: @fellesdatakatalog/external-footer
Description: Felles datakatalog UI external footer component
Author: Alexander Zakharov
Latest version: 0.4.1

# @fellesdatakatalog/external-footer

FDK footer component intended for external use.

## Installation

```bash
npm i @fellesdatakatalog/external-footer
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the footer component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the footer as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Footer from '@fellesdatakatalog/external-footer';

const App: FC = () => (
  <ThemeProvider>
    <Footer>Footer</Footer>
  </ThemeProvider>
)

export default App;
```
npm package: @fellesdatakatalog/graphql
Description: Felles datakatalog collection of reusable GraphQL modules.
Author: Alexander Zakharov
Latest version: 0.1.0

# @fellesdatakatalog/graphql

Felles datakatalog collection of reusable GraphQL modules.

## Installation

```bash
npm i @fellesdatakatalog/graphql
```

## Dependencies

- graphql
- apollo-server
- axios
- jose
- validator
- winston

## Usage

### Directives

The following directives are available:
  - `@auth` - checks authorisation state when accessing GraphQL fields and objects
  - `@permission` - checks for necessary permissions when accessing GraphQL fields and objects
  - `@shape` - allows adding constraints to GraphQL fields

In order to add a directive to the schema, do the following:
  - Add directive-specific type definitions to schema
  - Register directive with schema
npm package: @fellesdatakatalog/internal-footer
Description: Felles datakatalog UI internal footer component
Author: Alexander Zakharov
Latest version: 0.5.1

# @fellesdatakatalog/internal-footer

FDK footer component intended for internal use.

## Installation

```bash
npm i @fellesdatakatalog/internal-footer
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the footer component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the footer as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Footer from '@fellesdatakatalog/internal-footer';

const App: FC = () => (
  <ThemeProvider>
    <Footer>Footer</Footer>
  </ThemeProvider>
)

export default App;
```

### Skatteetaten usage

In order to use the footer component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the footer as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider, { ThemeProfile } from '@fellesdatakatalog/theme';
import Footer from '@fellesdatakatalog/internal-footer';

const App: FC = () => (
  <ThemeProvider>
    <Footer themeProfile={ThemeProfile.SKE} />
  </ThemeProvider>
)

export default App;
```
npm package: @fellesdatakatalog/link
Description: Felles datakatalog UI link component
Author: Alexander Zakharov
Latest version: 0.2.15

# @fellesdatakatalog/link

Link component allows for easy customisation of anchor elements.

## Installation

```bash
npm i @fellesdatakatalog/link
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the link component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the link as any regular component. Link component is an extension of HTML anchor element. It supports all the props of its HTML counterpart.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Link from '@fellesdatakatalog/link';

const App: FC = () => (
  <ThemeProvider>
    <Link href='https://world/go/places'>
      Take me places!
    </Link>
  </ThemeProvider>
);

export default App;
```

### External link

Links can point to external resources that will open in a new tab or window. Pass an `external` prop in order to indicate that a link points to an external resource.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Link from '@fellesdatakatalog/link';

const App: FC = () => (
  <ThemeProvider>
    <Link href='https://world/go/places' external>
      Take me places!
    </Link>
  </ThemeProvider>
);

export default App;
```

### Link children and icons

It is possible to pass children to a link. The mest common type would be text. It might be necessary to add an icon for improved user experience. An icon can be passed using `icon` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Link from '@fellesdatakatalog/link';
import FavouriteIcon from '@material-ui/icons/Favorite'

const App: FC = () => (
  <ThemeProvider>
    <Link href='https://world/go/places' icon={<FavouriteIcon />}>
      Take me places!
    </Link>
  </ThemeProvider>
);

export default App;
```

### Colour inheritance

All parts of a link component will attempt to inherit the colour from its parent element.

### Polymorphism

The base element in a link component is polymorphic, meaning that it is possible to render any other HTML element as a base element in a link component. This is useful when rendering link elements from third-party routing libraries. Given this freedom, it is important not to break semantics.


```tsx
import React, { FC } from 'react';
import { Link as RouteLink } from 'react-router-dom';
import ThemeProvider from '@fellesdatakatalog/theme';
import Link from '@fellesdatakatalog/link';

const App: FC = () => (
  <ThemeProvider>
    <Link href='https://world/go/places' as={RouteLink}>
      Take me places!
    </Link>
  </ThemeProvider>
);

export default App;
```
npm package: @fellesdatakatalog/side-menu
Description: Felles datakatalog UI SideMenu component
Author: Jeff Reiffers
Latest version: 0.1.10

# @fellesdatakatalog/side-menu

Side menu component.

## Installation

```bash
npm i @fellesdatakatalog/side-menu
```

## Dependencies

- react
- styled-components
- @fellesdatakatalog/theme

## Usage

### Basic usage

In order to use the SideMenu component, wrap the application in global theme provider from `@fellesdatakatalog/theme`. Then, use the alert as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Button from '@fellesdatakatalog/side-menu';

const menuItems = [
  { id: 'page1', title: 'Page 1', active: true },
  { id: 'page2', title: 'Page 2' },
  { id: 'page3', title: 'Page 3' }
];

const App: FC = () => (
  <ThemeProvider>
    <SideMenu title='My side menu' menuItems={menuItems} />
  </ThemeProvider>
);

export default App;
```