@code0-tech/pictor 0.1.0

package/dist/esm/utils/types.d.ts

@@ -0,0 +1,4 @@
+export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+export declare const Colors: Color[];
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+export declare const Sizes: Size[];

package/dist/esm/utils/utils.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+export declare const getChild: (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean) => React.ReactElement | undefined;
+export declare const getContent: (children: ReactNode | ReactNode[], ...child: React.FC<any>[]) => ReactNode[] | null;
+export interface Positioning {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+export declare const getWindowPositioning: () => Omit<Omit<Positioning, "x">, "y">;
+export declare const getPositioning: (node: HTMLElement) => Positioning;
+export declare const getPositionAroundTarget: (target: HTMLElement, element: HTMLElement, position?: 'top' | 'bottom' | 'left' | 'right') => {
+    position: string;
+    y: number;
+    x: number;
+};

package/dist/index.d.ts

@@ -0,0 +1,247 @@
+import React, { ReactNode, HTMLProps, DetailedHTMLProps, AnchorHTMLAttributes, ReactElement, InputHTMLAttributes } from 'react';
+import { TablerIconsProps } from '@tabler/icons-react';
+import { PositionProps, OverlayTriggerProps } from '@react-types/overlays';
+import { AriaMenuProps, Key } from 'react-aria';
+
+type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface AlertType {
+    children?: ReactNode | ReactNode[];
+    title: ReactNode;
+    color?: Color;
+    icon?: boolean;
+    dismissible?: boolean;
+    onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+}
+declare const Alert: React.FC<AlertType>;
+
+interface BadgeType extends HTMLProps<HTMLSpanElement> {
+    children: string;
+    color?: Color;
+}
+declare const Badge: React.FC<BadgeType>;
+
+interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+    children: ReactNode | ReactNode[];
+    color?: Color;
+    variant?: "none" | "normal" | "outlined" | "filled";
+    active?: boolean;
+    disabled?: boolean;
+}
+interface ButtonIconType {
+    children: ReactNode;
+}
+declare const _default$7: React.FC<ButtonType> & {
+    Icon: React.FC<ButtonIconType>;
+};
+
+interface ButtonGroupType {
+    children: ReactElement<ButtonType>[];
+}
+declare const ButtonGroup: React.FC<ButtonGroupType>;
+
+interface CardType extends HTMLProps<HTMLDivElement> {
+    children: ReactNode | ReactNode[];
+    color?: Color;
+    variant?: "none" | "normal" | "outlined" | "filled";
+    gradient?: boolean;
+    gradientPosition?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    outline?: boolean;
+}
+interface SectionType {
+    children: ReactNode | ReactNode[];
+    image?: boolean;
+    border?: boolean;
+}
+declare const _default$6: React.FC<CardType> & {
+    Section: React.FC<SectionType>;
+};
+
+type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+interface ColType extends HTMLProps<HTMLDivElement> {
+    children: ReactNode | ReactNode[];
+    xs?: ColBreakPointRange;
+    sm?: ColBreakPointRange;
+    md?: ColBreakPointRange;
+    lg?: ColBreakPointRange;
+    xl?: ColBreakPointRange;
+    xxl?: ColBreakPointRange;
+}
+declare const Col: React.FC<ColType>;
+
+interface ContainerType extends HTMLProps<HTMLDivElement> {
+    children: ReactNode | ReactNode[];
+}
+declare const Container: React.FC<ContainerType>;
+
+interface DropdownItemType {
+    children: ReactNode;
+}
+
+interface DropdownItemGroupType {
+    children: ReactNode;
+}
+
+interface DropdownFooterType {
+    children: ReactNode;
+}
+
+interface DropdownHeaderType {
+    children: ReactNode;
+}
+
+interface DropdownType$1 {
+    children: ReactElement<DropdownTriggerType & DropdownMenuType>[];
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    maxWidthFactor?: number;
+}
+interface DropdownTriggerType {
+    children: ReactNode;
+}
+interface DropdownMenuType {
+    children: ReactNode;
+}
+declare const _default$5: React.FC<DropdownType$1> & {
+    Trigger: React.FC<DropdownTriggerType>;
+    Menu: React.FC<DropdownMenuType>;
+    Header: React.FC<DropdownHeaderType>;
+    Footer: React.FC<DropdownFooterType>;
+    Group: React.FC<DropdownItemGroupType> & {
+        Item: React.FC<DropdownItemType>;
+    };
+};
+
+interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
+    children: string;
+    size: Size;
+    hierarchy?: "primary" | "secondary" | "tertiary";
+}
+declare const Text: React.FC<FontType>;
+
+type InputChildType = InputControlType | InputDescType | InputLabelType;
+interface InputType {
+    children: ReactElement<InputControlType> | ReactElement<InputChildType>[];
+    disabled?: boolean;
+    valid?: boolean | undefined;
+}
+type InputControlTypesType = "email" | "date" | "datetime-local" | "hidden" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
+interface InputControlType extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    placeholder: string;
+    children?: ReactElement<InputControlMessageType | InputControlIconType>[] | ReactElement<InputControlMessageType | InputControlIconType>;
+    disabled?: boolean;
+    type?: InputControlTypesType;
+}
+type InputControlMessageType = {
+    children: string;
+};
+type InputControlIconType = {
+    children: ReactElement<TablerIconsProps>;
+};
+type InputLabelType = {
+    children: string;
+};
+type InputDescType = {
+    children: string;
+};
+declare const _default$4: React.FC<InputType> & {
+    Desc: React.FC<InputDescType>;
+    Label: React.FC<InputLabelType>;
+    Control: React.ForwardRefExoticComponent<Omit<InputControlType, "ref"> & React.RefAttributes<HTMLInputElement>> & {
+        Message: React.FC<InputControlMessageType>;
+        Icon: React.FC<InputControlIconType>;
+    };
+};
+
+interface ListGroupType {
+    children: ReactElement<ListGroupItemType> | ReactElement<ListGroupItemType>[];
+}
+interface ListGroupItemType {
+    children: ReactNode;
+}
+declare const _default$3: React.FC<ListGroupType> & {
+    Item: React.FC<ListGroupItemType>;
+};
+
+interface PopoverProps extends PositionProps, OverlayTriggerProps {
+    children: React.ReactElement<PopoverTriggerType & PopoverContentType>[];
+}
+interface PopoverTriggerType {
+    children: React.ReactElement;
+}
+interface PopoverContentType {
+    children: React.ReactNode;
+}
+declare const _default$2: React.FC<PopoverProps> & {
+    Trigger: React.FC<PopoverTriggerType>;
+    Content: React.FC<PopoverContentType>;
+};
+
+interface MenuType<T> extends AriaMenuProps<T>, PopoverProps {
+    children: React.ReactElement<MenuTriggerType & MenuContentType>[];
+}
+interface MenuTriggerType {
+    children: React.ReactElement;
+}
+interface MenuContentType {
+    children: React.ReactNode;
+}
+interface MenuItemType {
+    children: React.ReactNode;
+    key: Key;
+    color?: Color;
+    disabled?: boolean;
+    unselectable?: boolean;
+    textValue?: string;
+}
+interface MenuShortcutType {
+    children: string;
+}
+interface MenuIconType {
+    children: React.ReactNode;
+}
+interface MenuSectionType {
+    children: React.ReactElement<MenuItemType> | React.ReactElement<MenuItemType>[];
+    title?: string;
+}
+declare const _default$1: React.FC<MenuType<any>> & {
+    Trigger: React.FC<MenuTriggerType>;
+    Content: React.FC<MenuContentType>;
+    Item: React.FC<MenuItemType>;
+    Shortcut: React.FC<MenuShortcutType>;
+    Section: React.FC<MenuSectionType>;
+    Icon: React.FC<MenuIconType>;
+};
+
+interface QuoteType extends Omit<CardType, "children"> {
+    children: string;
+    logo: string;
+    name: string;
+    position: string;
+    inlineBorder?: boolean;
+}
+declare const Quote: React.FC<QuoteType>;
+
+interface RowType extends HTMLProps<HTMLDivElement> {
+    children: ReactNode | ReactNode[];
+}
+declare const Row: React.FC<RowType>;
+
+interface DropdownType {
+    children: ReactElement<TooltipTriggerType & TooltipMenuType>[];
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+}
+interface TooltipTriggerType {
+    children: ReactNode;
+}
+interface TooltipMenuType {
+    children: ReactNode;
+}
+declare const _default: React.FC<DropdownType> & {
+    Trigger: React.FC<TooltipTriggerType>;
+    Menu: React.FC<TooltipMenuType>;
+};
+
+export { Alert, Badge, _default$7 as Button, ButtonGroup, _default$6 as Card, Col, Container, _default$5 as Dropdown, _default$4 as Input, _default$3 as ListGroup, _default$1 as Menu, _default$2 as Popover, Quote, Row, Text, _default as Tooltip };

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@code0-tech/pictor",
+  "version": "0.1.0",
+  "description": "A simple template for a custom React component library",
+  "scripts": {
+    "dev": "npm run storybook:dev",
+    "build": "npm run clear && npm run rollup",
+    "clear": "concurrently --kill-others \"rimraf ./dist\" \"rimraf ./storybook-static\"",
+    "rollup": "rollup -c",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:test": "test-storybook",
+    "storybook:test:all": "test-storybook --browsers chromium firefox webkit",
+    "storybook:test:update": "npm run storybook:test:all -- -u",
+    "docs:preview": "npm run --prefix ../telescopium project:preview pictor"
+  },
+  "author": "Code0",
+  "devDependencies": {
+    "@mdx-js/react": "^2.1.2",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/cli": "^7.5.3",
+    "@storybook/manager-api": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "@tabler/icons-react": "^2.42.0",
+    "@types/react": "^18.0.15",
+    "axe-playwright": "^1.2.3",
+    "babel-loader": "^8.2.3",
+    "concurrently": "^8.2.2",
+    "css-loader": "^6.5.1",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-image-snapshot": "^6.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^2.60.0",
+    "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.43.5",
+    "sass-loader": "^12.3.0",
+    "storybook": "^7.5.3",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.4"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "react-aria": "^3.31.1",
+    "react-stately": "^3.29.1",
+    "rollup-plugin-visualizer": "^5.11.0"
+  }
+}