@skel-ui/react 0.1.0-alpha.9764c85

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Augustin Joseph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default,
+  generatePlaceholder: () => generatePlaceholder
+});
+module.exports = __toCommonJS(src_exports);
+var import_react = __toESM(require("react"));
+const IsLoadingContext = import_react.default.createContext(false);
+function Root({ as, isLoading = true, children, ...rest }) {
+  const Component = as || "div";
+  return <IsLoadingContext.Provider value={isLoading}><Component {...rest} data-loading={isLoading}>{children}</Component></IsLoadingContext.Provider>;
+}
+function Item({ as, color, radius, children, ...rest }) {
+  const isLoading = import_react.default.useContext(IsLoadingContext);
+  const component = as || "p";
+  const Component = typeof component === "string" ? component : isLoading ? "div" : component;
+  return <Component
+    {...rest}
+    style={{
+      // @ts-ignore
+      ...rest.style,
+      "--skel-ui-color": color,
+      "--skel-ui-radius": radius
+    }}
+    data-loading={isLoading}
+  >{isLoading ? "\u200C" : typeof children === "function" ? children() : children}</Component>;
+}
+function generatePlaceholder(length, primary) {
+  return Array(length).fill(null).map((_, index) => ({ [primary]: `id-${index}` }));
+}
+const Skel = { Root, Item };
+var src_default = Skel;

package/dist/cjs/tailwind.js

@@ -0,0 +1,47 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tailwind_exports = {};
+__export(tailwind_exports, {
+  default: () => tailwindcssPlugin
+});
+module.exports = __toCommonJS(tailwind_exports);
+var import_plugin = __toESM(require("tailwindcss/plugin"));
+function tailwindcssPlugin() {
+  const variants = [
+    { name: "loaded", value: false },
+    { name: "loading", value: true }
+  ];
+  return (0, import_plugin.default)(({ addVariant }) => {
+    variants.forEach(({ name, value }) => {
+      addVariant(name, `&[data-loading='${value}']`);
+      addVariant(`peer-${name}`, `:merge(.peer)[data-loading='${value}'] ~ &`);
+      addVariant(`group-${name}`, `:merge(.group)[data-loading='${value}'] &`);
+    });
+  });
+}

package/dist/esm/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+const IsLoadingContext = React.createContext(false);
+function Root({ as, isLoading = true, children, ...rest }) {
+  const Component = as || "div";
+  return <IsLoadingContext.Provider value={isLoading}><Component {...rest} data-loading={isLoading}>{children}</Component></IsLoadingContext.Provider>;
+}
+function Item({ as, color, radius, children, ...rest }) {
+  const isLoading = React.useContext(IsLoadingContext);
+  const component = as || "p";
+  const Component = typeof component === "string" ? component : isLoading ? "div" : component;
+  return <Component
+    {...rest}
+    style={{
+      // @ts-ignore
+      ...rest.style,
+      "--skel-ui-color": color,
+      "--skel-ui-radius": radius
+    }}
+    data-loading={isLoading}
+  >{isLoading ? "\u200C" : typeof children === "function" ? children() : children}</Component>;
+}
+function generatePlaceholder(length, primary) {
+  return Array(length).fill(null).map((_, index) => ({ [primary]: `id-${index}` }));
+}
+const Skel = { Root, Item };
+var src_default = Skel;
+export {
+  src_default as default,
+  generatePlaceholder
+};

package/dist/esm/tailwind.js

@@ -0,0 +1,17 @@
+import plugin from "tailwindcss/plugin";
+function tailwindcssPlugin() {
+  const variants = [
+    { name: "loaded", value: false },
+    { name: "loading", value: true }
+  ];
+  return plugin(({ addVariant }) => {
+    variants.forEach(({ name, value }) => {
+      addVariant(name, `&[data-loading='${value}']`);
+      addVariant(`peer-${name}`, `:merge(.peer)[data-loading='${value}'] ~ &`);
+      addVariant(`group-${name}`, `:merge(.group)[data-loading='${value}'] &`);
+    });
+  });
+}
+export {
+  tailwindcssPlugin as default
+};

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+type HTMLProps<T extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<T>, "children">;
+type RootProps<T extends React.ElementType = "div"> = {
+    as?: T;
+    children: React.ReactNode;
+    isLoading: boolean;
+} & HTMLProps<T>;
+type ItemProps<T extends React.ElementType = "p"> = {
+    as?: T;
+    color?: string;
+    radius?: string;
+    children?: React.ReactNode | (() => React.ReactNode);
+} & HTMLProps<T>;
+declare function Root<T extends React.ElementType = "div">({ as, isLoading, children, ...rest }: RootProps<T>): React.JSX.Element;
+declare function Item<T extends React.ElementType = "p">({ as, color, radius, children, ...rest }: ItemProps<T>): React.JSX.Element;
+export declare function generatePlaceholder<T = {
+    [k: string]: unknown;
+}>(length: number, primary: string): T[];
+declare const Skel: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+export default Skel;

package/dist/styles.css

@@ -0,0 +1,21 @@
+:root {
+  --skel-ui-color: #cbd5e1;
+  --skel-ui-radius: 0.25rem;
+}
+[data-loading=true] {
+  border-radius: var(--skel-ui-radius);
+  background-color: var(--skel-ui-color) !important;
+  color: transparent !important;
+  cursor: default !important;
+  user-select: none !important;
+  pointer-events: none !important;
+  animation: skel-ui-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate-reverse !important;
+}
+@keyframes skel-ui-pulse {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}

package/dist/tailwind.d.ts

@@ -0,0 +1,4 @@
+export default function tailwindcssPlugin(): {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config>;
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@skel-ui/react",
+  "author": "https://github.com/sudoaugustin",
+  "version": "0.1.0-alpha.9764c85",
+  "license": "MIT",
+  "description": "Next era of skeleton loading for react",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/cjs/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
+  "keywords": [
+    "react",
+    "skeleton",
+    "loading",
+    "placeholder"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/esm/tailwind.js",
+      "require": "./dist/cjs/tailwind.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "bugs": {
+    "url": "https://github.com/sudoaugustin/react-sleleto/issues"
+  },
+  "homepage": "https://skel-ui.augustin.zip",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sudoaugustin/react-sleleto"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-interactions": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/addon-onboarding": "^8.3.3",
+    "@storybook/blocks": "^8.3.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-vite": "^8.3.3",
+    "@storybook/test": "^8.3.3",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.0.10",
+    "esbuild": "^0.17.5",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "storybook": "^8.3.3",
+    "swr": "^2.2.5",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006 --no-open",
+    "build": "rm -rf dist && pnpm build:dts && pnpm build:css && pnpm build:esm && pnpm build:cjs",
+    "build:dts": "tsc -p tsconfig.build.json --outDir dist",
+    "build:css": "esbuild src/styles.css --outdir=dist",
+    "build:esm": "esbuild src/*.ts* --format=esm --outdir=dist/esm",
+    "build:cjs": "esbuild src/*.ts* --format=cjs --outdir=dist/cjs"
+  }
+}