@skel-ui/react 1.0.0-alpha.fa3737d → 1.0.0-alpha.fc281bd

package/README.md

@@ -1,42 +1,39 @@
-# Getting Started
+Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.
 
-Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using react-context.
+See the comparision [here](https://skel-ui.augustin.zip/#comparision).
 
-## Installation
+## Get Started
 
-Install the package into your project via command line.
-
-```bash
-npm install @skel-ui/react
-```
-
-## Importing CSS
+### Import CSS
 
 Import the CSS file into the root of your application.
 
-```js
+```ts
 import "@skel-ui/react/styles.css";
 ```
 
-## Start crafting UI
+### Implement Skel UI
 
 Now it's time for you to craft your user interface to life!
 
-```jsx
+```tsx
 import * as Skel from "@skel-ui/react";
-import Image from "next/image";
+import Image from "@ui/image";
 
-function Profile() {
-  const { user, isLoading } = useProfile();
+export default function PostCard() {
+  const { post, isLoading } = usePost();
 
   return (
     <Skel.Root isLoading={isLoading}>
-      <Skel.Item className="user-avatar">
-        <Image src={user.profile} />
-      </Skel.Item>
-      <Skel.Item as="h1" className="user-email">
-        {user.email}
-      </Skel.Item>
+      <div className="group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300">
+        <Skel.Item
+          as={Image}
+          src={post?.image}
+          className="rounded aspect-[800/530] duration-150 loaded:group-hover:scale-110"
+        />
+        <Skel.h1 className="text-xl font-bold mt-4 loading:max-w-48">{post?.title}</Skel.h1>
+        <Skel.p className="text-sm my-2 loading:h-[3.75rem]">{post?.description}</Skel.p>
+      </div>
     </Skel.Root>
   );
 }
@@ -44,28 +41,6 @@ function Profile() {
 
 Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
 
-## Customization
 
-Customize the default color and border-radius of skeleton using css variables.
-
-```css title="global.css"
-:root {
-    --skel-ui-color1: #a1a1aa;
-    --skel-ui-color2: #e4e4e7;
-    --skel-ui-radius: 0.25rem;
-}
-```
 
-Each `Skel.Item` will have a `data-loading` attribute that is set to `"true"` when the item is in a loading state, and `"false"` otherwise. You can use this attribute in your CSS to create styles based on the loading state.
-
-```css
-/* This style will be applied during loading. */
-.user-email[data-loading="true"] {
-  width: 5rem;
-}
-
-/* This style will be applied after loading is done. */
-.user-email[data-loading="false"]:hover {
-  background: #f97316;
-}
-```
+For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)

package/dist/cjs/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
-  Custom: () => Custom,
+var index_exports = {};
+__export(index_exports, {
+  Item: () => Item,
   Root: () => Root,
   a: () => a,
   address: () => address,
@@ -130,7 +130,7 @@ __export(src_exports, {
   wbr: () => wbr,
   webview: () => webview
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_core = require("@skel-ui/core");
 var import_react = __toESM(require("react"));
 function createSkelComponent(type, isVoidTag = false) {
@@ -139,7 +139,7 @@ function createSkelComponent(type, isVoidTag = false) {
     const loadingStyle = isLoading ? {
       width: sw,
       height: sh,
-      borderRadius: sr || "var(--skel-ui-radius)",
+      borderRadius: sr,
       color: "transparent",
       cursor: "default",
       userSelect: "none",
@@ -152,8 +152,8 @@ function createSkelComponent(type, isVoidTag = false) {
         style: { ...style, ...loadingStyle },
         "aria-hidden": isLoading,
         "data-loading": isLoading,
-        // Use base64 transparent image while loading to avoid broken image ui. This doesn't trigger error on other media tags.
-        ...isLoading && "src" in props && props.src === void 0 ? {
+        // Use base64 transparent image while loading to avoid broken image ui for falsy src. This doesn't trigger error on other media tags.
+        ...isLoading && "src" in props ? {
           src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEB/6mZBQAAAABJRU5ErkJggg=="
         } : {}
       },
@@ -161,11 +161,11 @@ function createSkelComponent(type, isVoidTag = false) {
     );
   };
 }
-function SkelCustom({ as, ...rest }) {
+function SkelItem({ as, ...rest }) {
   return createSkelComponent(as)(rest);
 }
 const Root = import_core.SkelRoot;
-const Custom = SkelCustom;
+const Item = SkelItem;
 const a = createSkelComponent("a");
 const address = createSkelComponent("address");
 const article = createSkelComponent("article");

package/dist/esm/index.js

@@ -7,7 +7,7 @@ function createSkelComponent(type, isVoidTag = false) {
     const loadingStyle = isLoading ? {
       width: sw,
       height: sh,
-      borderRadius: sr || "var(--skel-ui-radius)",
+      borderRadius: sr,
       color: "transparent",
       cursor: "default",
       userSelect: "none",
@@ -20,8 +20,8 @@ function createSkelComponent(type, isVoidTag = false) {
         style: { ...style, ...loadingStyle },
         "aria-hidden": isLoading,
         "data-loading": isLoading,
-        // Use base64 transparent image while loading to avoid broken image ui. This doesn't trigger error on other media tags.
-        ...isLoading && "src" in props && props.src === void 0 ? {
+        // Use base64 transparent image while loading to avoid broken image ui for falsy src. This doesn't trigger error on other media tags.
+        ...isLoading && "src" in props ? {
           src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEB/6mZBQAAAABJRU5ErkJggg=="
         } : {}
       },
@@ -29,11 +29,11 @@ function createSkelComponent(type, isVoidTag = false) {
     );
   };
 }
-function SkelCustom({ as, ...rest }) {
+function SkelItem({ as, ...rest }) {
   return createSkelComponent(as)(rest);
 }
 const Root = SkelRoot;
-const Custom = SkelCustom;
+const Item = SkelItem;
 const a = createSkelComponent("a");
 const address = createSkelComponent("address");
 const article = createSkelComponent("article");
@@ -133,7 +133,7 @@ const video = createSkelComponent("video");
 const wbr = createSkelComponent("wbr", true);
 const webview = createSkelComponent("webview");
 export {
-  Custom,
+  Item,
   Root,
   a,
   address,

package/dist/{src/index.d.ts → index.d.ts}

@@ -1,12 +1,12 @@
 import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
 import type { ComponentProps, ComponentType } from "react";
 import React from "react";
-type SkelCustomProps<T extends ComponentType<ComponentProps<T>>> = {
+type SkelItemProps<T extends ComponentType<ComponentProps<T>>> = {
     as: T;
 } & ComponentProps<T> & Pick<SkelComponentProps<T>, "sw" | "sh" | "sr">;
-declare function SkelCustom<T extends ComponentType<ComponentProps<T>>>({ as, ...rest }: SkelCustomProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function SkelItem<T extends ComponentType<ComponentProps<T>>>({ as, ...rest }: SkelItemProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const Root: typeof SkelRoot;
-export declare const Custom: typeof SkelCustom;
+export declare const Item: typeof SkelItem;
 export declare const a: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"a">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const address: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"address">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const article: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"article">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/styles.css

@@ -1,29 +1,32 @@
 :root {
-  --skel-ui-color1: #cbd5e1;
-  --skel-ui-color2: #f1f0f0;
+  --skel-ui-color: #cbd5e1;
   --skel-ui-radius: 0.25rem;
+  --skel-ui-animation-delay: 0s;
   --skel-ui-animation-easing: cubic-bezier(0.4, 0, 0.6, 1);
 }
-[aria-hidden=true][data-loading=true] {
-  animation: skel-ui-shimmer var(--skel-ui-animation-duration, 2s) var(--skel-ui-animation-easing) infinite !important;
+[data-loading=true] {
+  border-radius: var(--skel-ui-radius);
+}
+[data-loading=true] {
+  animation: skel-ui-shimmer var(--skel-ui-animation-duration, 2s) var(--skel-ui-animation-easing) var(--skel-ui-animation-delay) infinite !important;
   background-image:
     linear-gradient(
       to right,
-      var(--skel-ui-color1) 33%,
-      var(--skel-ui-color2),
-      var(--skel-ui-color1) 66%);
+      var(--skel-ui-color) 33%,
+      var(--skel-ui-shimmer-color, #f1f0f0),
+      var(--skel-ui-color) 66%);
   background-size: 300%;
 }
-.skel-ui-pulse [aria-hidden=true][data-loading=true] {
-  animation: skel-ui-pulse var(--skel-ui-animation-duration, 1s) var(--skel-ui-animation-easing) infinite alternate-reverse !important;
-  background-color: var(--skel-ui-color1);
+.skel-ui-pulse [data-loading=true] {
+  animation: skel-ui-pulse var(--skel-ui-animation-duration, 1s) var(--skel-ui-animation-easing) var(--skel-ui-animation-delay) infinite alternate-reverse !important;
+  background-color: var(--skel-ui-color);
 }
 @keyframes skel-ui-pulse {
   0% {
     opacity: 1;
   }
   100% {
-    opacity: 0.35;
+    opacity: 0.5;
   }
 }
 @keyframes skel-ui-shimmer {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@skel-ui/react",
   "author": "https://github.com/sudoaugustin",
-  "version": "1.0.0-alpha.fa3737d",
+  "version": "1.0.0-alpha.fc281bd",
   "license": "MIT",
-  "description": "Next era of skeleton loading for React",
+  "description": "Lightweight and powerful skeleton loading library for React.",
   "files": [
     "dist"
   ],
@@ -35,6 +35,16 @@
     "./styles.css": "./dist/styles.css",
     "./$components": "./stories/components/index.tsx"
   },
+  "typesVersions": {
+    "*": {
+      "utils": [
+        "./dist/utils.d.ts"
+      ],
+      "tailwind": [
+        "./dist/tailwind.d.ts"
+      ]
+    }
+  },
   "bugs": {
     "url": "https://github.com/sudoaugustin/skel-ui/issues"
   },
@@ -43,6 +53,9 @@
     "type": "git",
     "url": "git+https://github.com/sudoaugustin/skel-ui"
   },
+  "dependencies": {
+    "@skel-ui/core": "1.0.0"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
     "@storybook/addon-essentials": "^8.3.4",
@@ -67,13 +80,12 @@
   },
   "peerDependencies": {
     "react": "^17.0 || ^18.0",
-    "react-dom": "^17.0 || ^18.0",
-    "@skel-ui/core": "1.0.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.json --outDir dist --emitDeclarationOnly",
+    "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"

package/dist/stories/components/Animations.d.ts

@@ -1 +0,0 @@
-export default function Animations(): import("react/jsx-runtime").JSX.Element;

package/dist/stories/components/Image.d.ts

@@ -1,4 +0,0 @@
-import { ImgHTMLAttributes } from "react";
-type Props = ImgHTMLAttributes<HTMLImageElement>;
-export default function Image({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/stories/components/PostCard.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    isLoading?: boolean;
-};
-export default function PostCard(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/stories/components/PostCardList.d.ts

@@ -1 +0,0 @@
-export default function PostCardList(): import("react/jsx-runtime").JSX.Element;

package/dist/stories/components/index.d.ts

@@ -1,5 +0,0 @@
-import Animations from "./Animations";
-import Image from "./Image";
-import PostCard from "./PostCard";
-import PostCardList from "./PostCardList";
-export { Animations, Image, PostCard, PostCardList };

package/dist/stories/index.stories.d.ts

@@ -1,8 +0,0 @@
-import "../src/styles.css";
-import { Animations, PostCard, PostCardList } from "./components";
-declare const _default: {
-    title: string;
-    component: typeof import("@skel-ui/core").SkelRoot;
-};
-export default _default;
-export { Animations, PostCard, PostCardList };