@gsk_poc/untitled-ui-base 0.1.1

package/components/application/loading-indicator/loading-indicator.demo.tsx

@@ -0,0 +1,73 @@
+import { LoadingIndicator } from "@/components/application/loading-indicator/loading-indicator";
+
+export const DefaultDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-8 md:flex-row md:gap-16">
+            <LoadingIndicator type="line-simple" size="md" label="Loading..." />
+            <LoadingIndicator type="line-spinner" size="md" label="Loading..." />
+            <LoadingIndicator type="dot-circle" size="md" label="Loading..." />
+        </div>
+    );
+};
+
+export const LineSimpleDemo = () => {
+    return <LoadingIndicator type="line-simple" size="md" />;
+};
+
+export const LineSimpleWithLabelDemo = () => {
+    return <LoadingIndicator type="line-simple" size="md" label="Loading..." />;
+};
+
+export const LineSpinnerDemo = () => {
+    return <LoadingIndicator type="line-spinner" size="md" />;
+};
+
+export const LineSpinnerWithLabelDemo = () => {
+    return <LoadingIndicator type="line-spinner" size="md" label="Loading..." />;
+};
+
+export const DotCircleDemo = () => {
+    return <LoadingIndicator type="dot-circle" size="md" />;
+};
+
+export const DotCircleWithLabelDemo = () => {
+    return <LoadingIndicator type="dot-circle" size="md" label="Loading..." />;
+};
+
+export const SizesDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-8 md:flex-row">
+            <LoadingIndicator type="line-simple" size="sm" label="Loading..." />
+            <LoadingIndicator type="line-simple" size="md" label="Loading..." />
+            <LoadingIndicator type="line-simple" size="lg" label="Loading..." />
+            <LoadingIndicator type="line-simple" size="xl" label="Loading..." />
+        </div>
+    );
+};
+
+export const LoadingIndicatorLineSimple = () => (
+    <div className="flex flex-col items-start gap-8 md:flex-row">
+        <LoadingIndicator type="line-simple" size="sm" label="Loading..." />
+        <LoadingIndicator type="line-simple" size="md" label="Loading..." />
+        <LoadingIndicator type="line-simple" size="lg" label="Loading..." />
+        <LoadingIndicator type="line-simple" size="xl" label="Loading..." />
+    </div>
+);
+
+export const LoadingIndicatorLineSpinner = () => (
+    <div className="flex flex-col items-start gap-8 md:flex-row">
+        <LoadingIndicator type="line-spinner" size="sm" label="Loading..." />
+        <LoadingIndicator type="line-spinner" size="md" label="Loading..." />
+        <LoadingIndicator type="line-spinner" size="lg" label="Loading..." />
+        <LoadingIndicator type="line-spinner" size="xl" label="Loading..." />
+    </div>
+);
+
+export const LoadingIndicatorDotCircle = () => (
+    <div className="flex flex-col items-start gap-8 md:flex-row">
+        <LoadingIndicator type="dot-circle" size="sm" label="Loading..." />
+        <LoadingIndicator type="dot-circle" size="md" label="Loading..." />
+        <LoadingIndicator type="dot-circle" size="lg" label="Loading..." />
+        <LoadingIndicator type="dot-circle" size="xl" label="Loading..." />
+    </div>
+);

package/components/application/loading-indicator/loading-indicator.story.tsx

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+import * as Demos from "./loading-indicator.demo";
+
+export default {
+    title: "Application/Loading indicators",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-center justify-center bg-primary p-8">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const LoadingIndicatorLineSimple = () => <Demos.LoadingIndicatorLineSimple />;
+LoadingIndicatorLineSimple.storyName = "Loading indicator line simple";
+
+export const LoadingIndicatorLineSpinner = () => <Demos.LoadingIndicatorLineSpinner />;
+LoadingIndicatorLineSpinner.storyName = "Loading indicator line spinner";
+
+export const LoadingIndicatorDotCircle = () => <Demos.LoadingIndicatorDotCircle />;
+LoadingIndicatorDotCircle.storyName = "Loading indicator dot circle";

package/components/application/pagination/pagination.demo.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import * as Paginations from "@/components/application/pagination/pagination";
+import { PaginationDot as PaginationDotComponent } from "@/components/application/pagination/pagination-dot";
+import { PaginationLine as PaginationLineComponent } from "@/components/application/pagination/pagination-line";
+
+export const PaginationPageDefault = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationPageDefault page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationPageMinimalCenter = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationPageMinimalCenter page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationCardDefault = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationCardDefault page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationCardMinimalRightAligned = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationCardMinimal align="right" page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationCardMinimalCenterAligned = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationCardMinimal align="center" page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationCardMinimalLeftAligned = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationCardMinimal align="left" page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationButtonGroupRightAligned = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationButtonGroup align="right" page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationButtonGroupCenterAligned = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationButtonGroup align="center" page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationButtonGroupLeftAligned = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return <Paginations.PaginationButtonGroup align="left" page={currentPage} onPageChange={setCurrentPage} />;
+};
+
+export const PaginationDotMd = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+        <div className="flex flex-col gap-8">
+            <PaginationDotComponent total={3} size="md" page={currentPage} onPageChange={setCurrentPage} />
+            <PaginationDotComponent total={3} size="lg" page={currentPage} onPageChange={setCurrentPage} />
+        </div>
+    );
+};
+
+export const PaginationDotLg = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+        <div className="flex flex-col gap-8">
+            <PaginationDotComponent total={3} size="md" framed page={currentPage} onPageChange={setCurrentPage} />
+            <PaginationDotComponent total={3} size="lg" framed page={currentPage} onPageChange={setCurrentPage} />
+        </div>
+    );
+};
+
+export const PaginationLineMd = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+        <div className="flex flex-col gap-8">
+            <PaginationLineComponent className="w-36" total={3} size="md" page={currentPage} onPageChange={setCurrentPage} />
+            <PaginationLineComponent className="w-38" total={3} size="lg" page={currentPage} onPageChange={setCurrentPage} />
+        </div>
+    );
+};
+
+export const PaginationLineLg = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+        <div className="flex flex-col gap-8">
+            <PaginationLineComponent className="w-40" total={3} size="md" framed page={currentPage} onPageChange={setCurrentPage} />
+            <PaginationLineComponent className="w-44" total={3} size="lg" framed page={currentPage} onPageChange={setCurrentPage} />
+        </div>
+    );
+};

package/components/application/pagination/pagination.story.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { FC } from "react";
+import * as Demos from "./pagination.demo";
+
+export default {
+    title: "Application/Pagination",
+    decorators: [
+        (Story: FC) => (
+            <div className="min-h-screen bg-secondary p-8">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const PaginationPageDefault = () => <Demos.PaginationPageDefault />;
+PaginationPageDefault.storyName = "Pagination page default";
+
+export const PaginationPageMinimalCenter = () => <Demos.PaginationPageMinimalCenter />;
+PaginationPageMinimalCenter.storyName = "Pagination page minimal center";
+
+export const PaginationCardDefault = () => <Demos.PaginationCardDefault />;
+PaginationCardDefault.storyName = "Pagination card default";
+
+export const PaginationCardMinimalRightAligned = () => <Demos.PaginationCardMinimalRightAligned />;
+PaginationCardMinimalRightAligned.storyName = "Pagination card minimal right aligned";
+
+export const PaginationCardMinimalCenterAligned = () => <Demos.PaginationCardMinimalCenterAligned />;
+PaginationCardMinimalCenterAligned.storyName = "Pagination card minimal center aligned";
+
+export const PaginationCardMinimalLeftAligned = () => <Demos.PaginationCardMinimalLeftAligned />;
+PaginationCardMinimalLeftAligned.storyName = "Pagination card minimal left aligned";
+
+export const PaginationButtonGroupRightAligned = () => <Demos.PaginationButtonGroupRightAligned />;
+PaginationButtonGroupRightAligned.storyName = "Pagination button group right aligned";
+
+export const PaginationButtonGroupCenterAligned = () => <Demos.PaginationButtonGroupCenterAligned />;
+PaginationButtonGroupCenterAligned.storyName = "Pagination button group center aligned";
+
+export const PaginationButtonGroupLeftAligned = () => <Demos.PaginationButtonGroupLeftAligned />;
+PaginationButtonGroupLeftAligned.storyName = "Pagination button group left aligned";
+
+export const PaginationDotMd = () => <Demos.PaginationDotMd />;
+PaginationDotMd.storyName = "Pagination dot md";
+
+export const PaginationDotLg = () => <Demos.PaginationDotLg />;
+PaginationDotLg.storyName = "Pagination dot lg";
+
+export const PaginationLineMd = () => <Demos.PaginationLineMd />;
+PaginationLineMd.storyName = "Pagination line md";
+
+export const PaginationLineLg = () => <Demos.PaginationLineLg />;
+PaginationLineLg.storyName = "Pagination line lg";