@skel-ui/react 1.0.0-alpha.248d1fb

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/README.md

@@ -0,0 +1,25 @@
+# 🚧 This package is highly under development. 🛠️
+
+```JSX
+const { user, isLoading } = useProfile();
+
+// Legacy Way
+if(isLoading){
+  return <ProfileSkeleton/>
+}
+
+// Current Way
+{isLoading ? (
+  <Skeleton circle />
+) : (
+  <Avatar src={user.image} name={user.name} />
+)}
+<h1>{user.name || <Skeleton />}</h1>
+
+
+// Skel's Way ✨
+<Skel.Root isLoading={isLoading}>
+  <Skel.Item as={Avatar} src={user.image} />
+  <Skel.Item as="h1">{user.name}</Skel.Item>
+</Skel.Root>
+```

package/dist/cjs/index.js

@@ -0,0 +1,53 @@
+"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
+});
+module.exports = __toCommonJS(src_exports);
+var import_react = __toESM(require("react"));
+const IsLoadingContext = import_react.default.createContext(false);
+function Root({ isLoading = true, children }) {
+  return <IsLoadingContext.Provider value={isLoading}>{children}</IsLoadingContext.Provider>;
+}
+function Item({ as, color, radius, children, ...props }) {
+  const isLoading = import_react.default.useContext(IsLoadingContext);
+  const Component = as || "p";
+  return <Component
+    {...props}
+    style={{
+      // @ts-ignore
+      ...props.style,
+      "--skel-ui-color": color,
+      "--skel-ui-radius": radius
+    }}
+    data-loading={isLoading}
+  >{isLoading ? null : typeof children === "function" ? children() : children}</Component>;
+}
+var src_default = { Root, Item };

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,23 @@
+import React from "react";
+const IsLoadingContext = React.createContext(false);
+function Root({ isLoading = true, children }) {
+  return <IsLoadingContext.Provider value={isLoading}>{children}</IsLoadingContext.Provider>;
+}
+function Item({ as, color, radius, children, ...props }) {
+  const isLoading = React.useContext(IsLoadingContext);
+  const Component = as || "p";
+  return <Component
+    {...props}
+    style={{
+      // @ts-ignore
+      ...props.style,
+      "--skel-ui-color": color,
+      "--skel-ui-radius": radius
+    }}
+    data-loading={isLoading}
+  >{isLoading ? null : typeof children === "function" ? children() : children}</Component>;
+}
+var src_default = { Root, Item };
+export {
+  src_default as default
+};

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,19 @@
+import React from "react";
+type As<T> = React.ElementType | React.JSXElementConstructor<T>;
+type RootProps = {
+    children: React.ReactNode;
+    isLoading: boolean;
+};
+type ItemProps<T extends As<T>> = {
+    as?: T;
+    children?: React.ReactNode | (() => React.ReactNode);
+    color?: string;
+    radius?: string;
+} & (T extends React.ElementType ? Omit<React.ComponentPropsWithoutRef<T>, "children"> : {});
+declare function Root({ isLoading, children }: RootProps): React.JSX.Element;
+declare function Item<T extends As<T>>({ as, color, radius, children, ...props }: ItemProps<T>): React.JSX.Element;
+declare const _default: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+export default _default;

package/dist/styles.css

@@ -0,0 +1,21 @@
+:root {
+  --skel-ui-color: #f0f0f0;
+  --skel-ui-radius: 0.25rem;
+}
+[data-loading=true] {
+  animation: skel-ui-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate-reverse !important;
+  border-radius: var(--skel-ui-radius) !important;
+  background-color: var(--skel-ui-color) !important;
+  color: transparent !important;
+  cursor: default !important;
+  user-select: none !important;
+  pointer-events: none !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,74 @@
+{
+  "name": "@skel-ui/react",
+  "author": "https://github.com/sudoaugustin",
+  "version": "1.0.0-alpha.248d1fb",
+  "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",
+      "/tailwind": "./dist/tailwind.d.ts"
+    },
+    "import": {
+      "/": "./dist/esm/index.js",
+      "/tailwind": "./dist/esm/tailwind.js"
+    },
+    "require": {
+      "/": "./dist/cjs/index.js",
+      "/tailwind": "./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": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.3.3",
+    "swr": "^2.2.5",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0  || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.0.0  || ^17.0.0 || ^18.0.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"
+  }
+}