@ziky/ui 0.1.0 → 0.1.2

package/dist/styles/layout/_topbar.scss

@@ -1,152 +1,158 @@
-@use './_variables' as vars;
-@use './_mixins' as mixins;
-
-.layout-topbar {
-    position: fixed;
-    height: 5rem;
-    z-index: 997;
-    left: 0;
-    top: 0;
-    width: 100%;
-    padding: 0 2rem;
-    background-color: var(--surface-card);
-    transition: left vars.$transitionDuration;
-    display: flex;
-    align-items: center;
-    box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
-
-    .layout-topbar-logo {
-        display: flex;
-        align-items: center;
-        color: var(--surface-900);
-        font-size: 1.5rem;
-        font-weight: 500;
-        width: 300px;
-        border-radius: 12px;
-
-        img {
-            height: 2.5rem;
-            margin-right: .5rem;
-        }
-
-        &:focus {
-            @include mixins.focused();
-        }
-    }
-
-    .layout-topbar-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        color: var(--text-color-secondary);
-        border-radius: 50%;
-        width: 3rem;
-        height: 3rem;
-        cursor: pointer;
-        transition: background-color vars.$transitionDuration;
-
-        &:hover {
-            color: var(--text-color);
-            background-color: var(--surface-hover);
-        }
-
-        &:focus {
-            @include mixins.focused();
-        }
-
-        i {
-            font-size: 1.5rem;
-        }
-
-        span {
-            font-size: 1rem;
-            display: none;
-        }
-    }
-
-    .layout-menu-button {
-        margin-left: 2rem;
-    }
-
-    .layout-topbar-menu-button {
-        display: none;
-
-        i {
-            font-size: 1.25rem;
-        }
-    }
-
-    .layout-topbar-menu {
-        margin: 0 0 0 auto;
-        padding: 0;
-        list-style: none;
-        display: flex;
-
-        .layout-topbar-button {
-            margin-left: 1rem;
-        }
-    }
-}
-
-@media (max-width: 991px) {
-    .layout-topbar {
-        justify-content: space-between;
-
-        .layout-topbar-logo {
-            width: auto;
-            order: 2;
-        }
-
-        .layout-menu-button {
-            margin-left: 0;
-            order: 1;
-        }
-
-        .layout-topbar-menu-button {
-            display: inline-flex;
-            margin-left: 0;
-            order: 3;
-        }
-
-        .layout-topbar-menu {
-            margin-left: 0;
-            position: absolute;
-            flex-direction: column;
-            background-color: var(--surface-overlay);
-            box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
-            border-radius: 12px;
-            padding: 1rem;
-            right: 2rem;
-            top: 5rem;
-            min-width: 15rem;
-            display: none;
-            -webkit-animation: scalein 0.15s linear;
-            animation: scalein 0.15s linear;
-
-            &.layout-topbar-menu-mobile-active {
-                display: block
-            }
-
-            .layout-topbar-button {
-                margin-left: 0;
-                display: flex;
-                width: 100%;
-                height: auto;
-                justify-content: flex-start;
-                border-radius: 12px;
-                padding: 1rem;
-
-                i {
-                    font-size: 1rem;
-                    margin-right: .5rem;
-                }
-
-                span {
-                    font-weight: medium;
-                    display: block;
-                }
-            }
-        }
-    }
-}
+@use './_variables' as vars;
+@use './_mixins' as mixins;
+
+.layout-topbar {
+  position: fixed;
+  height: 5rem;
+  z-index: 997;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 2rem;
+  background-color: var(--surface-card);
+  transition: left vars.$transitionDuration;
+  display: flex;
+  align-items: center;
+  box-shadow:
+    0px 3px 5px rgba(0, 0, 0, 0.02),
+    0px 0px 2px rgba(0, 0, 0, 0.05),
+    0px 1px 4px rgba(0, 0, 0, 0.08);
+
+  .layout-topbar-logo {
+    display: flex;
+    align-items: center;
+    color: var(--surface-900);
+    font-size: 1.5rem;
+    font-weight: 500;
+    width: 300px;
+    border-radius: 12px;
+
+    img {
+      height: 2.5rem;
+      margin-right: 0.5rem;
+    }
+
+    &:focus {
+      @include mixins.focused();
+    }
+  }
+
+  .layout-topbar-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    color: var(--text-color-secondary);
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    cursor: pointer;
+    transition: background-color vars.$transitionDuration;
+
+    &:hover {
+      color: var(--text-color);
+      background-color: var(--surface-hover);
+    }
+
+    &:focus {
+      @include mixins.focused();
+    }
+
+    i {
+      font-size: 1.5rem;
+    }
+
+    span {
+      font-size: 1rem;
+      display: none;
+    }
+  }
+
+  .layout-menu-button {
+    margin-left: 2rem;
+  }
+
+  .layout-topbar-menu-button {
+    display: none;
+
+    i {
+      font-size: 1.25rem;
+    }
+  }
+
+  .layout-topbar-menu {
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
+    .layout-topbar-button {
+      margin-left: 1rem;
+    }
+  }
+}
+
+@media (max-width: 991px) {
+  .layout-topbar {
+    justify-content: space-between;
+
+    .layout-topbar-logo {
+      width: auto;
+      order: 2;
+    }
+
+    .layout-menu-button {
+      margin-left: 0;
+      order: 1;
+    }
+
+    .layout-topbar-menu-button {
+      display: inline-flex;
+      margin-left: 0;
+      order: 3;
+    }
+
+    .layout-topbar-menu {
+      margin-left: 0;
+      position: absolute;
+      flex-direction: column;
+      background-color: var(--surface-overlay);
+      box-shadow:
+        0px 3px 5px rgba(0, 0, 0, 0.02),
+        0px 0px 2px rgba(0, 0, 0, 0.05),
+        0px 1px 4px rgba(0, 0, 0, 0.08);
+      border-radius: 12px;
+      padding: 1rem;
+      right: 2rem;
+      top: 5rem;
+      min-width: 15rem;
+      display: none;
+      -webkit-animation: scalein 0.15s linear;
+      animation: scalein 0.15s linear;
+
+      &.layout-topbar-menu-mobile-active {
+        display: block;
+      }
+
+      .layout-topbar-button {
+        margin-left: 0;
+        display: flex;
+        width: 100%;
+        height: auto;
+        justify-content: flex-start;
+        border-radius: 12px;
+        padding: 1rem;
+
+        i {
+          font-size: 1rem;
+          margin-right: 0.5rem;
+        }
+
+        span {
+          font-weight: medium;
+          display: block;
+        }
+      }
+    }
+  }
+}

package/dist/styles/layout/_typography.scss

@@ -1,65 +1,70 @@
-@use './_variables' as vars;
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 1.5rem 0 1rem 0;
-    font-family: inherit;
-    font-weight: 500;
-    line-height: 1.2;
-    color: var(--surface-900);
-
-    &:first-child {
-        margin-top: 0;
-    }
-}
-
-h1 {
-    font-size: 2.5rem;
-}
-
-h2 {
-    font-size: 2rem;
-}
-
-h3 {
-    font-size: 1.75rem;
-}
-
-h4 {
-    font-size: 1.5rem;
-}
-
-h5 {
-    font-size: 1.25rem;
-}
-
-h6 {
-    font-size: 1rem;
-}
-
-mark {
-    background: #FFF8E1;
-    padding: .25rem .4rem;
-    border-radius: vars.$borderRadius;
-    font-family: monospace;
-}
-
-blockquote {
-    margin: 1rem 0;
-    padding: 0 2rem;
-    border-left: 4px solid #90A4AE;
-}
-
-hr {
-    border-top: solid var(--surface-border);
-    border-width: 1px 0 0 0;
-    margin: 1rem 0;
-}
-
-p {
-    margin: 0 0 1rem 0;
-    line-height: 1.5;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
+@use './_variables' as vars;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1.5rem 0 1rem 0;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--surface-900);
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+mark {
+  background: #fff8e1;
+  padding: 0.25rem 0.4rem;
+  border-radius: vars.$borderRadius;
+  font-family: monospace;
+}
+
+blockquote {
+  margin: 1rem 0;
+  padding: 0 2rem;
+  border-left: 4px solid #90a4ae;
+}
+
+hr {
+  border-top: solid var(--surface-border);
+  border-width: 1px 0 0 0;
+  margin: 1rem 0;
+}
+
+p {
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

package/dist/styles/layout/_utils.scss

@@ -1,40 +1,40 @@
-@use './_variables' as vars;
-
-/* Utils */
-.clearfix:after {
-    content: " ";
-    display: block;
-    clear: both;
-}
-
-.card {
-    background: var(--surface-card);
-    border: 1px solid var(--surface-border);
-    padding: 2rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--card-shadow);
-    border-radius: vars.$borderRadius;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.p-toast {
-    &.p-toast-top-right,
-    &.p-toast-top-left,
-    &.p-toast-top-center {
-        top: 100px;
-    }
-}
-
-.global-loading-overlay {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.6);
-    backdrop-filter: blur(1px);
-    z-index: 9999;
-}
+@use './_variables' as vars;
+
+/* Utils */
+.clearfix:after {
+  content: ' ';
+  display: block;
+  clear: both;
+}
+
+.card {
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: var(--card-shadow);
+  border-radius: vars.$borderRadius;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.p-toast {
+  &.p-toast-top-right,
+  &.p-toast-top-left,
+  &.p-toast-top-center {
+    top: 100px;
+  }
+}
+
+.global-loading-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(1px);
+  z-index: 9999;
+}

package/dist/styles/layout/_variables.scss

@@ -1,3 +1,3 @@
-/* General */
-$borderRadius:12px;             /* border radius of layout element e.g. card, sidebar */ 
-$transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar, overlay menus */ 
+/* General */
+$borderRadius: 12px; /* border radius of layout element e.g. card, sidebar */
+$transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */

package/dist/styles/layout/layout.scss

@@ -1,11 +1,11 @@
-@use './_variables' as *;
-@use "./_mixins" as *;
-@use "./_main" as *;
-@use "./_topbar" as *;
-@use "./_menu" as *;
-@use "./_config" as *;
-@use "./_content" as *;
-@use "./_footer" as *;
-@use "./_responsive" as *;
-@use "./_utils" as *;
-@use "./_typography" as *;
+@use './_variables' as *;
+@use './_mixins' as *;
+@use './_main' as *;
+@use './_topbar' as *;
+@use './_menu' as *;
+@use './_config' as *;
+@use './_content' as *;
+@use './_footer' as *;
+@use './_responsive' as *;
+@use './_utils' as *;
+@use './_typography' as *;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction, HTMLAttributeAnchorTarget, MutableRefObject, ReactNode } from "react";
+import type { Dispatch, SetStateAction, HTMLAttributeAnchorTarget, MutableRefObject, ReactNode } from 'react';
 export type ChildContainerProps = {
     children: ReactNode;
 };
@@ -51,7 +51,7 @@ export interface AppMenuItem {
     url?: string;
     target?: HTMLAttributeAnchorTarget;
     seperator?: boolean;
-    badge?: "UPDATED" | "NEW";
+    badge?: 'UPDATED' | 'NEW';
     badgeClass?: string;
     class?: string;
     preventExact?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziky/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Shared UI components/layout for RIDIN MFEs",
   "license": "UNLICENSED",
   "sideEffects": ["**/*.css", "**/*.scss", "**/*.sass"],
@@ -21,6 +21,8 @@
     "build-storybook": "storybook build -o storybook-static",
     "prepublishOnly": "npm run build:lib",
     "publish": "npm publish --access public",
+    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
+    "format": "prettier \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md,mdx}\" --write",
     "deploy": "vercel --prod"
   },
   "peerDependencies": {
@@ -51,7 +53,15 @@
     "@types/react-transition-group": "^4.4.12",
     "sass": "^1.83.4",
     "typescript": "~5.9.3",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "prettier": "^3.4.1"
   }
 }