fix: styles of as prop in Skeleton

sikka-software · Aug 15, 2024 · 804e6c6 · 804e6c6
1 parent 9f0ad8b
commit 804e6c6
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 10 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies
+ - @sikka/hawa@0.46.4
+
 ## 0.0.111
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hawa-docs",
- "version": "0.0.111",
+ "version": "0.0.112",
  "private": true,
  "scripts": {
  "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sikka/hawa
 
+## 0.46.4
+
+### Patch Changes
+
+- Fix styles for `as` prop in `Skeleton`
+- Remove test console logs from `Input`
+
 ## 0.46.3
 
 ### Patch Changes

diff --git a/packages/components/elements/input/Input.tsx b/packages/components/elements/input/Input.tsx
@@ -94,14 +94,11 @@ export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
 
  if (props.onChange) {
  if (props.type === "number" && props.maxLength) {
- console.log("type is ", props.type);
- console.log("max length is ", props.maxLength);
  let v = newValue.replace(/[^0-9]/g, "").slice(0, props.maxLength);
  const newEvent = { ...e, target: { ...e.target, value: v } };
  setValue(v);
  props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);
  } else {
- console.log("NETIHERRRER");
  const newEvent = { ...e, target: { ...e.target, value: newValue } };
  setValue(newValue);
  props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);
@@ -135,7 +132,7 @@ export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
  )}
  {props.isLoading ? (
  <div className="hawa-pb-2 hawa-w-full">
- <Skeleton className="hawa-h-[40px] hawa-w-full" />
+ <Skeleton as="input" />
  </div>
  ) : props.isLoadingError ? (
  <div className="hawa-pb-2 hawa-w-full">

diff --git a/packages/components/elements/skeleton/Skeleton.tsx b/packages/components/elements/skeleton/Skeleton.tsx
@@ -33,15 +33,14 @@ function Skeleton({
 
  const styledAs = {
  div: "",
- input: "!h-[38px] !w-full",
+ input: "hawa-h-[40px] hawa-w-full",
  };
 
  return (
  <div
  className={cn(
  animationStyles[animation],
- content &&
- "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
+ content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
  fade && fadeStyle[fade],
  styledAs[as],
  className,

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sikka/hawa",
- "version": "0.46.3",
+ "version": "0.46.4",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.134
+
+### Patch Changes
+
+- Updated dependencies
+ - @sikka/hawa@0.46.4
+
 ## 0.26.133
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hawa-storybook",
- "version": "0.26.133",
+ "version": "0.26.134",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

diff --git a/packages/storybook/stories/ElementsStories/Input.stories.tsx b/packages/storybook/stories/ElementsStories/Input.stories.tsx
@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Lock, Search } from "lucide-react";
 
 import { SA, USA } from "@sikka/alam";
+import { Label, Skeleton } from "@sikka/hawa/elements";
 import { Button } from "@sikka/hawa/elements/button";
 import { DropdownMenuRadio } from "@sikka/hawa/elements/dropdownMenu";
 import { Input } from "@sikka/hawa/elements/input";
@@ -37,6 +38,14 @@ export const Default: Story = {
  onChange={(e) => console.log("im outside", e.target.value)}
  />
  </div>
+ <div className="hawa-flex hawa-flex-row hawa-gap-4">
+ <Input label="Input Field" placeholder={"Bismillah"} />
+ <Input label="Skeleton" isLoading placeholder={"Bismillah"} />
+ <div className="hawa-flex hawa-w-full hawa-flex-col hawa-gap-2">
+ <Label>Loading Skeleton</Label>
+ <Skeleton as="input" />
+ </div>
+ </div>
  </div>
  );
  },