@mbao01/ui 0.0.2 → 0.0.5

package/README.md

@@ -1,5 +1,3 @@
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-
 So here it is, I have gotten really bored creating UI component from scratch for the many projects I work on.
 It is high time I have a unified component library - so here it is.
 I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, and react.

package/dist/{src → types}/index.d.ts

@@ -1 +1,2 @@
 export * from "./components/Button";
+export * from "./components/Text";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.5",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -13,12 +13,12 @@
     "library"
   ],
   "main": "./src/index.ts",
-  "types": "./dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "files": [
+    "src",
     "plugin.js",
     "plugin.d.ts",
-    "src/**/*.ts",
-    "dist/**/*.d.ts"
+    "dist/types"
   ],
   "sideEffects": false,
   "scripts": {
@@ -82,5 +82,5 @@
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "befbd919a67ae1084ad5ef64cf4cc1ced6f848e2"
+  "gitHead": "c2c9b7d5cfa793a6c9e59f62814aa51de57ee42d"
 }

package/src/components/Button/Button.tsx

@@ -0,0 +1,40 @@
+import c from "clsx";
+import { getButtonClasses } from "./constants";
+import { type ButtonProps } from "./types";
+
+export const Button = (props: ButtonProps) => {
+  const {
+    className,
+    outline,
+    label,
+    disabled,
+    onClick,
+    loading,
+    variant,
+    size,
+    wide,
+    ...rest
+  } = props;
+
+  return (
+    <button
+      {...rest}
+      onClick={onClick}
+      disabled={disabled}
+      className={c(
+        getButtonClasses({ size, wide, outline, variant, loading }),
+        className
+      )}
+    >
+      {label}
+      {loading ? (
+        <span
+          className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
+          data-testid="loading"
+        >
+          <span className="loading loading-spinner" />
+        </span>
+      ) : null}
+    </button>
+  );
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,12 @@
+import c from 'clsx';
+import { createElement } from 'react';
+import { type TextProps } from './types';
+import { getTextClasses } from './constants';
+
+export const Text = ({ as = 'span', size, variant, children, className }: TextProps) => {
+  return createElement(
+    as,
+    { className: c(getTextClasses({ size, variant }), className) },
+    children
+  );
+};

package/src/index.ts

@@ -1 +1,2 @@
 export * from "./components/Button";
+export * from "./components/Text";

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from './src/index'

package/dist/src/components/Button/Button.stories.d.ts

@@ -1,19 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    component: (props: import("./types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const PrimaryButton: Story;
-export declare const WideButton: Story;
-export declare const TinyButton: Story;
-export declare const OutlineButton: Story;
-export declare const DisabledButton: Story;
-export declare const LoadingButton: Story;
-export declare const BlockButton: Story;

package/dist/src/components/Button/Button.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/components/Text/Text.stories.d.ts

@@ -1,17 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    component: ({ as, size, variant, children, className }: import("./types").TextProps) => import("react").DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const PrimaryText: Story;
-export declare const TinyText: Story;
-export declare const HeadingText: Story;

package/dist/src/components/Text/Text.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/tailwind.config.d.ts

@@ -1,3 +0,0 @@
-import type { Config } from "tailwindcss";
-declare const config: Config;
-export default config;

package/dist/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

package/dist/vitest.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

package/src/components/Button/Button.stories.ts

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {},
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {
-    variant: 'default',
-    label: 'Button',
-  },
-};
-
-export const PrimaryButton: Story = {
-  args: {
-    variant: 'primary',
-    label: 'Button',
-  },
-};
-
-export const WideButton: Story = {
-  args: {
-    wide: true,
-    label: 'Wide Button',
-  },
-};
-
-export const TinyButton: Story = {
-  args: {
-    size: 'xs',
-    label: 'Tiny',
-  },
-};
-
-export const OutlineButton: Story = {
-  args: {
-    outline: true,
-    label: 'Click me!',
-  },
-};
-
-export const DisabledButton: Story = {
-  args: {
-    disabled: true,
-    label: 'Click me?',
-  },
-};
-
-export const LoadingButton: Story = {
-  args: {
-    loading: true,
-    label: 'Loading',
-  },
-};
-
-export const BlockButton: Story = {
-  args: {
-    disabled: true,
-    className: 'btn-block',
-    label: 'Block Button',
-  },
-};

package/src/components/Text/Text.stories.ts

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Text } from './Text';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  component: Text,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {},
-} satisfies Meta<typeof Text>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {
-    children: 'Text',
-  },
-};
-
-export const PrimaryText: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Primary text',
-  },
-};
-
-export const TinyText: Story = {
-  args: {
-    size: 'xs',
-    children: 'Tiny Text',
-  },
-};
-
-export const HeadingText: Story = {
-  args: {
-    as: 'h1',
-    children: 'Heading 1',
-  },
-};

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />