linkedunion-design-kit 0.1.0

package/dist/components/Color/Color.stories.jsx

@@ -0,0 +1,76 @@
+import { Color } from "../../components/Color/Color";
+import { colorGroups } from "../../utils";
+export default {
+    title: "Components/Color",
+    component: Color,
+    argTypes: {
+        label: { control: "text" },
+    },
+};
+var Template = function (args) { return <Color {...args}/>; };
+export var Primary = Template.bind({});
+Primary.args = {
+    label: "Primary",
+    color: "bg-primary-600", // Default color
+};
+Primary.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.primary,
+    },
+};
+export var Gray = Template.bind({});
+Gray.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.gray,
+    },
+};
+Gray.args = {
+    label: "Gray",
+    color: "bg-gray-500",
+};
+export var Success = Template.bind({});
+Success.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.success,
+    },
+};
+Success.args = {
+    label: "Success",
+    color: "bg-success-500",
+};
+export var Warning = Template.bind({});
+Warning.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.warning,
+    },
+};
+Warning.args = {
+    label: "Warning",
+    color: "bg-warning-500",
+};
+export var Danger = Template.bind({});
+Danger.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.danger,
+    },
+};
+Danger.args = {
+    label: "Danger",
+    color: "bg-danger-500",
+};
+export var Info = Template.bind({});
+Info.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.info,
+    },
+};
+Info.args = {
+    label: "Info",
+    color: "bg-info-500",
+};

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from "@/types/interface";
+import React from "react";
+export declare const Typography: React.FC<TypographyProps>;

package/dist/components/Typography/Typography.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+export var Typography = function (_a) {
+    var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, fontSize = _a.fontSize, fontWeight = _a.fontWeight, lineHeight = _a.lineHeight, textAlign = _a.textAlign, textTransform = _a.textTransform, textDecoration = _a.textDecoration, textWrap = _a.textWrap;
+    return (<>
+    <p className={"".concat(className, " ").concat(fontSize, " ").concat(fontWeight, " ").concat(lineHeight, " ").concat(textAlign, " ").concat(textTransform, " ").concat(textDecoration, " ").concat(textWrap)}>{label}</p>
+  </>);
+};

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

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { TypographyProps } from "@/types/interface";
+declare const _default: Meta;
+export default _default;
+export declare const BasicTypography: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TypographyProps>;

package/dist/components/Typography/Typography.stories.jsx

@@ -0,0 +1,51 @@
+import { Typography } from "./Typography";
+import { fontSizes, fontWeights, lineHeights, text, textAlignment, textDecorations, textTransform, textWraps } from "../../utils";
+export default {
+    title: "Components/Typography",
+    component: Typography,
+    argTypes: {
+        label: { control: "text" },
+    },
+};
+var Template = function (args) { return <Typography {...args}/>; };
+export var BasicTypography = Template.bind({});
+BasicTypography.args = {
+    label: "".concat(text),
+    fontSize: 'lu-base-font-size',
+    fontWeight: 'lu-font-weight-thin',
+    lineHeight: 'lu-line-height-sm',
+    textAlign: 'lu-text-justify',
+    textTransform: 'lu-text-lowercase',
+    textDecoration: 'lu-text-decoration-none',
+    textWrap: 'lu-text-wrap',
+};
+BasicTypography.argTypes = {
+    fontSize: {
+        control: { type: "select", labels: Object.fromEntries(fontSizes.map(function (size) { return [size.key, size.label]; })) },
+        options: fontSizes.map(function (size) { return size.key; }),
+    },
+    fontWeight: {
+        control: { type: "select", labels: Object.fromEntries(fontWeights.map(function (size) { return [size.key, size.label]; })) },
+        options: fontWeights.map(function (weight) { return weight.key; }),
+    },
+    lineHeight: {
+        control: { type: "select", labels: Object.fromEntries(lineHeights.map(function (size) { return [size.key, size.label]; })) },
+        options: lineHeights.map(function (lineHeight) { return lineHeight.key; }),
+    },
+    textAlign: {
+        control: { type: "select", labels: Object.fromEntries(textAlignment.map(function (size) { return [size.key, size.label]; })) },
+        options: textAlignment.map(function (alignment) { return alignment.key; }),
+    },
+    textTransform: {
+        control: { type: "select", labels: Object.fromEntries(textTransform.map(function (size) { return [size.key, size.label]; })) },
+        options: textTransform.map(function (transform) { return transform.key; }),
+    },
+    textDecoration: {
+        control: { type: "select", labels: Object.fromEntries(textDecorations.map(function (size) { return [size.key, size.label]; })) },
+        options: textDecorations.map(function (decoration) { return decoration.key; }),
+    },
+    textWrap: {
+        control: { type: "select", labels: Object.fromEntries(textWraps.map(function (size) { return [size.key, size.label]; })) },
+        options: textWraps.map(function (wrap) { return wrap.key; }),
+    },
+};