@mdocify/components 0.0.1

package/README.md

@@ -0,0 +1,36 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```sh
+npm create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── index.ts
+├── src
+│   └── MyComponent.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command       | Action                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
+| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |
+# mdocify-components

package/index.d.ts

@@ -0,0 +1,6 @@
+declare module '*.astro' {
+	import type { ComponentType } from 'astro'
+	const Component: ComponentType<Record<string, unknown>>
+	export { ComponentType }
+	export default Component
+}

package/index.ts

@@ -0,0 +1,10 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import Callout from './src/callout.astro'
+import Icon from './src/icon.astro'
+
+export * from '@lucide/astro'
+export * from './src/icons'
+
+export { Callout, Icon }

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@mdocify/components",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "",
+  "exports": {
+    ".": "./index.ts",
+    "./callout.astro": "./src/callout.astro",
+    "./icon.astro": "./src/icon.astro",
+    "./types": "./src/types.ts",
+    "./icons": "./src/icons.ts"
+  },
+  "files": [
+    "src",
+    "index.ts",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "astro-component",
+    "mdocify",
+    "markdoc",
+    "components",
+    "markdoc components"
+  ],
+  "scripts": {},
+  "devDependencies": {
+    "astro": "^5.16.6",
+    "@lucide/astro": "^0.562.0"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0",
+    "@lucide/astro": "^0.562.0"
+  },
+  "dependencies": {
+  },
+  "author": "Lazaro Osee <oseelazaro@gmail.com> (https://www.lazaroosee.xyz)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lazosee/mdocify-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lazosee/mdocify-components/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/callout.astro

@@ -0,0 +1,39 @@
+---
+import Icon from './icon.astro';
+import type { CalloutProps } from './types';
+
+interface Props extends CalloutProps {}
+const { title, type } = Astro.props;
+
+const icon = type === "danger" ? "triangle-alert" :  type ==="success" ? "circle-check" :  type === 'warning' ? 'circle-alert' : 'lightbulb'
+---
+
+<div class:list={[
+    'block m-1 border border-spacing-1.5 overflow-hidden rounded-xl [corner-shape:squircle]',
+    {'border-teal-700': type === 'tip'},
+    {'border-orange-700': type === 'warning'},
+    {'border-red-700': type === 'danger'},
+    {'border-green-700': type === 'success'}
+]}>
+    <div class:list={[
+        'flex font-semibold p-2 gap-2 justify-start items-center text-white',
+        {'bg-teal-500': type === 'tip'},
+        {'bg-orange-500': type === 'warning'},
+        {'bg-red-500': type === 'danger'},
+        {'bg-green-500': type === 'success'}
+    ]}>
+        <slot name="icon">
+            <Icon name={icon} class="w-8" />
+        </slot>
+        <slot name="title">{title}</slot>
+    </div>
+    <div class:list={[
+        "block p-2",
+        {'bg-teal-50': type === 'tip'},
+        {'bg-orange-50': type === 'warning'},
+        {'bg-red-50': type === 'danger'},
+        {'bg-green-50': type === 'success'}
+    ]}>
+        <slot></slot>
+    </div>
+</div>

package/src/icon.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { iconsList } from './icons';
+import type { IconProps } from './types';
+
+type Props = IconProps & Omit<HTMLAttributes<'svg'>, "color">;
+const { name, slot, ...rest } = Astro.props
+
+const LucideIcon = iconsList[name] as any;
+---
+
+{ (slot===undefined) ? (
+    <LucideIcon {...rest} />
+) : (
+    <LucideIcon {slot} {...rest} />
+)}

package/src/icons.ts

@@ -0,0 +1,10 @@
+import { CircleAlert, CircleCheck, Lightbulb, TriangleAlert } from '@lucide/astro/icons/index'
+
+export const iconsList = {
+	lightbulb: Lightbulb,
+	'circle-check': CircleCheck,
+	'circle-alert': CircleAlert,
+	'triangle-alert': TriangleAlert,
+} as const
+
+export type IconType = keyof typeof iconsList

package/src/types.ts

@@ -0,0 +1,11 @@
+import type { IconType } from './icons'
+
+export type CalloutProps = {
+	title: string
+	type: 'tip' | 'warning' | 'danger' | 'success'
+}
+
+export type IconProps = {
+	name: IconType
+	slot?: string
+}