# ideasoft-panel

> IDEASOFT PANEL

Latest version **0.0.1-rc10** (published 2024-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install ideasoft-panel
pnpm add ideasoft-panel
yarn add ideasoft-panel
bun add ideasoft-panel
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-rc10 |
| Published | 2024-02-20 |
| First published | 2024-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 50.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | ideasoft |
| Keywords | react, vite, tailwindcss, styled-components, framer-motion, fontawesome |

## Links

- npm: https://www.npmjs.com/package/ideasoft-panel
- Repository: https://github.com/ideasoftcode/ideasoft-panel
- Homepage: https://github.com/ideasoftcode/ideasoft-panel.git
- Issues: https://github.com/ideasoftcode/ideasoft-panel/issues
- npm.io page: https://npm.io/package/ideasoft-panel

## Dependencies (8)

- [clsx](https://npm.io/package/clsx.md) 2.1.0
- [framer-motion](https://npm.io/package/framer-motion.md) 11.0.5
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) 2.2.1
- [styled-components](https://npm.io/package/styled-components.md) 6.1.8
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) 0.2.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) 6.5.1
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) 6.5.1
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) 6.5.1

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.1-rc10 (latest) — 2024-02-20
- 0.0.1-rc8 — 2024-02-20
- 0.0.1-rc7 — 2024-02-20
- 0.0.1-rc6 — 2024-02-20
- 0.0.1-rc5 — 2024-02-20
- 0.0.1-rc4 — 2024-02-20
- 0.0.1-rc3 — 2024-02-20
- 0.0.1-rc2 — 2024-02-20
- 0.0.1-rc1 — 2024-02-20
- 0.0.1 — 2024-02-20

## README

<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center">
    <img src="./public/logo.png" width="150px" />
    <h1>IDEASOFT PANEL</h1>
</div>

# Esta dependencia es para hacer un PANEL de forma rápida.

# Dependencies

-   React
-   React-DOM
-   tailwindcss
-   tailwind-merge
-   clsx
-   styled-components
-   framer-motion
-   fontawesome

# Nuestros componentes

-   `<PanelHeader />`
-   `<PanelHeaderOption />`
-   `<PanelSidebar />`
-   `<PanelSidebarOption />`
-   `<PanelMain />`
-   `<CrudHeader />`
-   `<CrudTable />`
-   `<CrudForm />`
-   `<InputText />`
-   `<InputTextarea />`
-   `<InputRadio />`
-   `<InputPassword />`
-   `<InputSelect />`
-   `<InputFile />`
-   `<Loading />`

# Cómo instalar

```bash
    npm install ideasoft-panel
```

### 1. Si no tienes tailwindcss instalado, instala tailwindcss, postcss y autoprefixer

```bash
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
```

### 2. Configurar tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/ideasoft-panel/dist/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};
```

### 3. Agrega tailwindcss en tu archivo `index.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 4. Si ya tienes tailwindcss instalado solo debes incluir `"./node_modules/ideasoft-panel/dist/**/*.{js,ts,jsx,tsx}"` en el `content:[]` de tu archivo `tailwind.config.js`.

# Cómo importar

```javascript
import {
    Panel,
    PanelHeader,
    PanelHeaderOption,
    PanelSidebar,
    PanelSidebarOption,
    PanelMain,
    CrudHeader,
    CrudTable,
    CrudForm,
    InputText,
    InputTextarea,
    InputRadio,
    InputPassword,
    InputSelect,
    InputFile,
    Loading,
} from "ideasoft-panel";
```

# Cómo utilizar el Panel

```jsx
<Panel sidebarIsOpen={isOpen} isMobile={isMobile}>
    <Header
        title="Ideasoft Panel"
        username="Harold Anderson Hernández Zambrano"
        src="https://avatars.githubusercontent.com/u/77129645?v=4"
        isOpen={isOpen}
        togleOpen={togle}
    >
        <HeaderOption Tag={Link} to="/profile" text="Perfil" icon={faUser} />
        <HeaderOption
            Tag={Link}
            to="/logout"
            text="Cerrar Sesión"
            icon={faRightFromBracket}
            logout
        />
    </Header>
    <Sidebar isOpen={isOpen} src="https://avatars.githubusercontent.com/u/77129645?v=4">
        <SidebarOption
            Tag={Link}
            path="/"
            name="Home"
            icon={faHome}
            isOpen={isOpen}
            onClick={handleClickOption}
        />
        <SidebarOption
            Tag={Link}
            path="/other"
            name="Other"
            icon={faContactBook}
            isOpen={isOpen}
            onClick={handleClickOption}
        />
    </Sidebar>
    <Main>
        <YourComponent />
    </Main>
</Panel>
```

# Como utilizar el CRUD

```jsx
<>
    <Header />
    <Table />
    <Form>
        <InputRadio
            title="Genero"
            name="genero"
            options={[
                { text: "Masculino", value: "Masculino", checked: true },
                { text: "Femenino", value: "Femenino" },
            ]}
        />
        <InputPassword title="Contraseña" name="password" />
        <InputSelect
            title="Pais"
            name="pais"
            options={[
                { text: "Mexico", value: "Mexico" },
                { text: "Colombia", value: "Colombia" },
                { text: "Argentina", value: "Argentina" },
            ]}
        />
        <InputText title="Nombre" name="name" placeholder="Escribe tu Nombre" />
        <InputTextarea title="Descripcion" name="descripcion" classInput="min-h-20" />
        <InputFile title="Foto" name="foto" placeholder="Selecciona una foto" accept="image/*" />
    </Form>
</>
```

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