# @artifak/component-generator

> Component generator utility for Artifak

Latest version **2.0.4** (published 2021-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @artifak/component-generator
pnpm add @artifak/component-generator
yarn add @artifak/component-generator
bun add @artifak/component-generator
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2021-04-07 |
| First published | 2020-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 137.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Julian Low |
| Maintainers | heyjules |
| Keywords | react, react-component, component, ui, flex, grid, block, layout |

## Links

- npm: https://www.npmjs.com/package/@artifak/component-generator
- Repository: https://github.com/heyjul3s/artifak
- Homepage: https://github.com/heyjul3s/artifak#readme
- Issues: https://github.com/heyjul3s/artifak/issues
- npm.io page: https://npm.io/package/@artifak/component-generator

## Dependencies (2)

- [lodash.isempty](https://npm.io/package/lodash.isempty.md) ^4.4.0
- [lodash.isplainobject](https://npm.io/package/lodash.isplainobject.md) ^4.0.6

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2021-04-07
- 2.0.3 — 2021-02-17
- 2.0.1 — 2021-01-28
- 2.0.0 — 2021-01-12
- 1.1.4 — 2020-10-28
- 1.1.3 — 2020-10-19
- 1.1.2 — 2020-10-16
- 1.1.1 — 2020-10-16
- 1.1.0 — 2020-10-04
- 1.0.4 — 2020-10-02
- 1.0.3 — 2020-09-04
- 1.0.2 — 2020-09-02
- 1.0.1 — 2020-09-01
- 1.0.0 — 2020-08-23

## README

# `@artifak/component-generator`

Component Generator library to generate similar components based off of styles and or attributes you provide. You can also view the docs
at [Artifak Generator](https://www.artifak.dev/?content=Generator).

## Installation

### Yarn

```sh
yarn add @artifak/component-generator
```

### NPM

```sh
npm install @artifak/component-generator
```

## Usage

### createComponents

This generates components based on the config provided. Below a usage example with full configuration applied.

```ts
import { position, PositionProps } from 'styled-system';
  import { createComponents } from 'artifak';
  import { theme } from './theme';

  // # EXAMPLE 1 - USING A CONFIGURATION OBJECT AS BASE
  // Note that this is just an example, please use the
  // "button" HTML element whenever possible. In the
  // examples, we will see full usage of the
  // createComponents function.

  const base = {
    styles: {
      display: 'block',
      padding: ['1em', '1.5em 1em'],
      width: '100%',
      fontSize: ['1rem', '1.2rem']
    },
    styleProps: [position],
    attrs: { role: 'button' },
    element: 'div'
  };

  // Define your component styles
  const config = {
    TextButton: {
      background: transparent,
      border: 'none',
      '&:hover': {
        color: theme.colors.primary
      },
      attrs: { name: 'text-button' },
      as: 'span'
    },

    FilledButton: {
      margin: '0 auto',
      padding: ['1.2em 1em', '1.5em 1.2em'],
      background: theme.colors.primary
      '&:hover': {
        background: theme.colors.secondary
      },
      attrs: { name: 'filled-button' }
    },

    OutlinedButton: {
      background: transparent,
      border: 1px solid black,
      padding: 0,
      '&:hover': {
        borderColor: theme.colors.primary
      },
      attrs: { name: 'outlined-button' }
    }
  };

  // Invoke and destructure for usage. Since a configuration object
  // is provided, you will also get the base as a component.
  // You can rename it as use as a base for something else if desired.
  export const {
    Base: ButtonBase,
    FilledButton,
    OutlinedButton,
    TextButton
  } = createComponents<typeof config, typeof theme>(BaseComponent, config);


  // # EXAMPLE 2 - USING A COMPONENT AS BASE
  // You can also pass in a component to use as base.
  // For example, let us create a BasicButton component.

  const BasicButton = styled('div')(
    {
      display: 'block',
      padding: ['1em', '1.5em 1em'],
      width: '100%',
      fontSize: ['1rem', '1.2rem']
    }
  );

  // Invoke and call like Example 1. Here we will reuse the
  // config constant we previously defined in Example 1.
  // Note that passing a component as base will not yield
  // a Base component in the results.
  export const {
    FilledButton,
    OutlinedButton,
    TextButton
  } = createComponents<typeof config, typeof theme>(BasicButton, config);
```

### createStyledComponent

Creates a single styled component based on the configuration that you provide.

```ts
import { HTMLAttributes } from 'react';
import { position, PositionProps } from 'styled-system';
import { theme } from './theme';

type CardProps = {
  isHidden: boolean;
} & PositionProps;

const StyledArticle = createStyledComponent<
  CardProps,
  typeof theme,
  HTMLAttributes<HTMLDivElement>
>({
  styles: { position: 'relative' },
  attrs: { title: 'Hello World' },
  styledProps: [position],
  element: 'article'
});
```

---
_Source: https://npm.io/package/@artifak/component-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._