@gsk_poc/untitled-ui-base 0.1.1

package/components/base/input/inputs.story.tsx

@@ -0,0 +1,52 @@
+import type { FC } from "react";
+import * as Inputs from "@/components/base/input/inputs.demo";
+
+export default {
+    title: "Base components/Inputs",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+const DefaultDecorator = (Story: FC) => (
+    <div className="w-full max-w-xs">
+        <Story />
+    </div>
+);
+
+const WiderDecorator = (Story: FC) => (
+    <div className="w-full max-w-100">
+        <Story />
+    </div>
+);
+
+export const Default = () => <Inputs.Default />;
+Default.decorators = [DefaultDecorator];
+
+export const LeadingIcon = () => <Inputs.LeadingIcon />;
+LeadingIcon.decorators = [DefaultDecorator];
+LeadingIcon.storyName = "Leading icon";
+
+export const LeadingDropdown = () => <Inputs.LeadingDropdown />;
+LeadingDropdown.decorators = [DefaultDecorator];
+LeadingDropdown.storyName = "Leading dropdown";
+
+export const TrailingDropdown = () => <Inputs.TrailingDropdown />;
+TrailingDropdown.decorators = [DefaultDecorator];
+TrailingDropdown.storyName = "Trailing dropdown";
+
+export const LeadingText = () => <Inputs.LeadingText />;
+LeadingText.decorators = [DefaultDecorator];
+LeadingText.storyName = "Leading text";
+
+export const PaymentInputs = () => <Inputs.PaymentInputs />;
+PaymentInputs.decorators = [DefaultDecorator];
+PaymentInputs.storyName = "Payment inputs";
+
+export const TrailingButton = () => <Inputs.TrailingButton />;
+TrailingButton.decorators = [WiderDecorator];
+TrailingButton.storyName = "Trailing button";

package/components/base/pin-input/pin-input.demo.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { PinInput } from "@/components/base/pin-input/pin-input";
+
+export const FourDigitsDemo = () => {
+    return (
+        <PinInput>
+            <PinInput.Label>Secure code</PinInput.Label>
+            <PinInput.Group maxLength={4}>
+                <PinInput.Slot index={0} />
+                <PinInput.Slot index={1} />
+                <PinInput.Slot index={2} />
+                <PinInput.Slot index={3} />
+            </PinInput.Group>
+            <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+        </PinInput>
+    );
+};
+
+export const DisabledDemo = () => {
+    return (
+        <PinInput disabled>
+            <PinInput.Label>Secure code</PinInput.Label>
+            <PinInput.Group maxLength={4}>
+                <PinInput.Slot index={0} />
+                <PinInput.Slot index={1} />
+                <PinInput.Slot index={2} />
+                <PinInput.Slot index={3} />
+            </PinInput.Group>
+            <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+        </PinInput>
+    );
+};
+
+export const SizesDemo = () => {
+    return (
+        <div className="flex flex-col gap-8">
+            <PinInput size="sm">
+                <PinInput.Label>Secure code</PinInput.Label>
+                <PinInput.Group maxLength={4}>
+                    <PinInput.Slot index={0} />
+                    <PinInput.Slot index={1} />
+                    <PinInput.Slot index={2} />
+                    <PinInput.Slot index={3} />
+                </PinInput.Group>
+                <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+            </PinInput>
+
+            <PinInput size="md">
+                <PinInput.Label>Secure code</PinInput.Label>
+                <PinInput.Group maxLength={4}>
+                    <PinInput.Slot index={0} />
+                    <PinInput.Slot index={1} />
+                    <PinInput.Slot index={2} />
+                    <PinInput.Slot index={3} />
+                </PinInput.Group>
+                <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+            </PinInput>
+
+            <PinInput size="lg">
+                <PinInput.Label>Secure code</PinInput.Label>
+                <PinInput.Group maxLength={4}>
+                    <PinInput.Slot index={0} />
+                    <PinInput.Slot index={1} />
+                    <PinInput.Slot index={2} />
+                    <PinInput.Slot index={3} />
+                </PinInput.Group>
+                <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+            </PinInput>
+        </div>
+    );
+};
+
+export const VerificationCodeInputSM = () => {
+    return (
+        <PinInput size="sm">
+            <PinInput.Label>Secure code</PinInput.Label>
+            <PinInput.Group maxLength={6}>
+                <PinInput.Slot index={0} />
+                <PinInput.Slot index={1} />
+                <PinInput.Slot index={2} />
+                <PinInput.Separator />
+                <PinInput.Slot index={3} />
+                <PinInput.Slot index={4} />
+                <PinInput.Slot index={5} />
+            </PinInput.Group>
+            <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+        </PinInput>
+    );
+};
+
+export const VerificationCodeInputMD = () => {
+    return (
+        <PinInput size="md">
+            <PinInput.Label>Secure code</PinInput.Label>
+            <PinInput.Group maxLength={6}>
+                <PinInput.Slot index={0} />
+                <PinInput.Slot index={1} />
+                <PinInput.Slot index={2} />
+                <PinInput.Separator />
+                <PinInput.Slot index={3} />
+                <PinInput.Slot index={4} />
+                <PinInput.Slot index={5} />
+            </PinInput.Group>
+            <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+        </PinInput>
+    );
+};
+
+export const VerificationCodeInputLG = () => {
+    return (
+        <PinInput size="lg">
+            <PinInput.Label>Secure code</PinInput.Label>
+            <PinInput.Group maxLength={6}>
+                <PinInput.Slot index={0} />
+                <PinInput.Slot index={1} />
+                <PinInput.Slot index={2} />
+                <PinInput.Separator />
+                <PinInput.Slot index={3} />
+                <PinInput.Slot index={4} />
+                <PinInput.Slot index={5} />
+            </PinInput.Group>
+            <PinInput.Description>This is a hint text to help user.</PinInput.Description>
+        </PinInput>
+    );
+};

package/components/base/pin-input/pin-input.story.tsx

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+import * as PinInputs from "@/components/base/pin-input/pin-input.demo";
+
+export default {
+    title: "Base components/Inputs/Verification code input",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const VerificationCodeInputSm = () => <PinInputs.VerificationCodeInputSM />;
+VerificationCodeInputSm.storyName = "Verification code input sm";
+
+export const VerificationCodeInputMd = () => <PinInputs.VerificationCodeInputMD />;
+VerificationCodeInputMd.storyName = "Verification code input md";
+
+export const VerificationCodeInputLg = () => <PinInputs.VerificationCodeInputLG />;
+VerificationCodeInputLg.storyName = "Verification code input lg";

package/components/base/progress-indicators/progress-indicators.demo.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ProgressBarCircle, ProgressBarHalfCircle } from "@/components/base/progress-indicators/progress-circles";
+import { ProgressBar } from "@/components/base/progress-indicators/progress-indicators";
+
+export const ProgressBarDefault = () => <ProgressBar min={0} max={100} value={40} />;
+
+export const ProgressBarTextRight = () => <ProgressBar labelPosition="right" min={0} max={100} value={40} />;
+
+export const ProgressBarTextBottom = () => <ProgressBar labelPosition="bottom" min={0} max={100} value={40} />;
+
+export const ProgressBarTextTopFloating = () => <ProgressBar labelPosition="top-floating" min={0} max={100} value={40} />;
+
+export const ProgressBarTextBottomFloating = () => <ProgressBar labelPosition="bottom-floating" min={0} max={100} value={40} />;
+
+export const CircleProgressBar = () => (
+    <div className="flex flex-col items-start gap-10 md:flex-row">
+        <ProgressBarCircle size="xxs" min={0} max={100} value={40} />
+        <ProgressBarCircle size="xs" min={0} max={100} value={40} />
+        <ProgressBarCircle size="sm" min={0} max={100} value={40} />
+        {/* <ProgressBarCircle size="md" min={0} max={100} value={40} /> */}
+        {/* <ProgressBarCircle size="lg" min={0} max={100} value={40} /> */}
+    </div>
+);
+
+export const CircleProgressBarLabel = () => (
+    <div className="flex flex-col items-start gap-10 md:flex-row">
+        <ProgressBarCircle size="xxs" label="Users" min={0} max={100} value={40} />
+        <ProgressBarCircle size="xs" label="Active users" min={0} max={100} value={40} />
+        <ProgressBarCircle size="sm" label="Active users" min={0} max={100} value={40} />
+        {/* <ProgressBarCircle size="md" label="Active users" min={0} max={100} value={40} /> */}
+        {/* <ProgressBarCircle size="lg" label="Active users" min={0} max={100} value={40} /> */}
+    </div>
+);
+
+export const HalfCircleProgressBar = () => (
+    <div className="flex flex-col items-start gap-10 md:flex-row">
+        <ProgressBarHalfCircle size="xxs" min={0} max={100} value={40} />
+        <ProgressBarHalfCircle size="xs" min={0} max={100} value={40} />
+        <ProgressBarHalfCircle size="sm" min={0} max={100} value={40} />
+        {/* <ProgressBarHalfCircle size="md" min={0} max={100} value={40} /> */}
+        {/* <ProgressBarHalfCircle size="lg" min={0} max={100} value={40} /> */}
+    </div>
+);
+
+export const HalfCircleProgressBarLabel = () => (
+    <div className="flex flex-col items-start gap-10 md:flex-row">
+        <ProgressBarHalfCircle size="xxs" label="Users" min={0} max={100} value={40} />
+        <ProgressBarHalfCircle size="xs" label="Active users" min={0} max={100} value={40} />
+        <ProgressBarHalfCircle size="sm" label="Active users" min={0} max={100} value={40} />
+        {/* <ProgressBarHalfCircle size="md" label="Active users" min={0} max={100} value={40} /> */}
+        {/* <ProgressBarHalfCircle size="lg" label="Active users" min={0} max={100} value={40} /> */}
+    </div>
+);

package/components/base/progress-indicators/progress-indicators.story.tsx

@@ -0,0 +1,57 @@
+import type { FC } from "react";
+import * as Demos from "./progress-indicators.demo";
+
+export default {
+    title: "Base components/Progress indicators",
+};
+
+const DefaultDecorator = (Story: FC) => (
+    <div className="flex min-h-screen w-screen bg-primary p-16">
+        <div className="w-full max-w-xs">
+            <Story />
+        </div>
+    </div>
+);
+
+const WiderDecorator = (Story: FC) => (
+    <div className="flex min-h-screen w-full bg-primary p-16">
+        <div className="w-100">
+            <Story />
+        </div>
+    </div>
+);
+
+export const Default = () => <Demos.ProgressBarDefault />;
+Default.decorators = [DefaultDecorator];
+
+export const TextRight = () => <Demos.ProgressBarTextRight />;
+TextRight.decorators = [DefaultDecorator];
+TextRight.storyName = "Text right";
+
+export const TextBottom = () => <Demos.ProgressBarTextBottom />;
+TextBottom.decorators = [DefaultDecorator];
+TextBottom.storyName = "Text bottom";
+
+export const TextTopFloating = () => <Demos.ProgressBarTextTopFloating />;
+TextTopFloating.decorators = [DefaultDecorator];
+TextTopFloating.storyName = "Text top floating";
+
+export const TextBottomFloating = () => <Demos.ProgressBarTextBottomFloating />;
+TextBottomFloating.decorators = [DefaultDecorator];
+TextBottomFloating.storyName = "Text bottom floating";
+
+export const CircleProgressBar = () => <Demos.CircleProgressBar />;
+CircleProgressBar.decorators = [WiderDecorator];
+CircleProgressBar.storyName = "Circle progress bar";
+
+export const CircleProgressBarLabel = () => <Demos.CircleProgressBarLabel />;
+CircleProgressBarLabel.decorators = [WiderDecorator];
+CircleProgressBarLabel.storyName = "Circle progress bar label";
+
+export const HalfCircleProgressBar = () => <Demos.HalfCircleProgressBar />;
+HalfCircleProgressBar.decorators = [WiderDecorator];
+HalfCircleProgressBar.storyName = "Half circle progress bar";
+
+export const HalfCircleProgressBarLabel = () => <Demos.HalfCircleProgressBarLabel />;
+HalfCircleProgressBarLabel.decorators = [WiderDecorator];
+HalfCircleProgressBarLabel.storyName = "Half circle progress bar label";

package/components/base/radio-buttons/radio-buttons.demo.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { RadioButton, RadioGroup } from "@/components/base/radio-buttons/radio-buttons";
+
+export const WithLabelDemo = () => {
+    return (
+        <RadioGroup aria-label="Pricing plans" defaultValue="basic">
+            <RadioButton label="Basic plan" value="basic" />
+            <RadioButton label="Business plan" value="business" />
+            <RadioButton label="Enterprise plan" value="enterprise" />
+        </RadioGroup>
+    );
+};
+
+export const WithLabelAndHintDemo = () => {
+    return (
+        <RadioGroup aria-label="Pricing plans" defaultValue="basic">
+            <RadioButton label="Basic plan" hint="Up to 10 users and 20 GB data." value="basic" />
+            <RadioButton label="Business plan" hint="Up to 20 users and 40 GB data." value="business" />
+            <RadioButton label="Enterprise plan" hint="Unlimited users and unlimited data." value="enterprise" />
+        </RadioGroup>
+    );
+};
+
+export const DisabledDemo = () => {
+    return (
+        <RadioGroup aria-label="Pricing plans" isDisabled defaultValue="basic">
+            <RadioButton label="Basic plan" hint="Up to 10 users and 20 GB data." value="basic" />
+            <RadioButton label="Business plan" hint="Up to 20 users and 40 GB data." value="business" />
+            <RadioButton label="Enterprise plan" hint="Unlimited users and unlimited data." value="enterprise" />
+        </RadioGroup>
+    );
+};
+
+export const DisabledIndividualItemDemo = () => {
+    return (
+        <RadioGroup aria-label="Pricing plans" defaultValue="basic">
+            <RadioButton label="Basic plan" hint="Up to 10 users and 20 GB data." value="basic" />
+            <RadioButton label="Business plan" hint="Up to 20 users and 40 GB data." value="business" />
+            <RadioButton isDisabled label="Enterprise plan" hint="Unlimited users and unlimited data." value="enterprise" />
+        </RadioGroup>
+    );
+};
+
+export const RadioButtons = () => {
+    return (
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            <RadioGroup aria-label="Pricing plans" defaultValue="basic">
+                <RadioButton label="Basic plan" hint="Up to 10 users and 20 GB data." value="basic" />
+                <RadioButton label="Business plan" hint="Up to 20 users and 40 GB data." value="business" />
+                <RadioButton label="Enterprise plan" hint="Unlimited users and unlimited data." value="enterprise" />
+            </RadioGroup>
+            <RadioGroup aria-label="Pricing plans" defaultValue="basic" size="md">
+                <RadioButton label="Basic plan" hint="Up to 10 users and 20 GB data." value="basic" />
+                <RadioButton label="Business plan" hint="Up to 20 users and 40 GB data." value="business" />
+                <RadioButton label="Enterprise plan" hint="Unlimited users and unlimited data." value="enterprise" />
+            </RadioGroup>
+        </div>
+    );
+};
+
+export const RadioButtonsBase = () => {
+    return (
+        <div className="grid grid-cols-2 gap-8">
+            <RadioGroup aria-label="Radio Button Example" defaultValue="option3">
+                <RadioButton value="option1" />
+                <RadioButton value="option2" />
+                <RadioButton isDisabled value="option3" />
+            </RadioGroup>
+            <RadioGroup aria-label="Radio Button Example" defaultValue="option3" size="md">
+                <RadioButton value="option1" />
+                <RadioButton value="option2" />
+                <RadioButton isDisabled value="option3" />
+            </RadioGroup>
+        </div>
+    );
+};

package/components/base/radio-buttons/radio-buttons.story.tsx

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import * as Radio from "@/components/base/radio-buttons/radio-buttons.demo";
+
+export default {
+    title: "Base components/Radio buttons",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const RadioButtons = () => <Radio.RadioButtons />;
+RadioButtons.storyName = "Radio buttons";
+
+export const RadioButtonsBase = () => <Radio.RadioButtonsBase />;
+RadioButtonsBase.storyName = "Radio buttons base";