@mbao01/ui 0.0.1 → 0.0.5

package/dist/types/components/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { type ButtonProps } from "./types";
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Button/constants.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonSize, ButtonVariant } from './types';
+export declare const getButtonClasses: ({ size, wide, loading, outline, variant, }: {
+    size?: ButtonSize | undefined;
+    wide?: boolean | undefined;
+    loading?: boolean | undefined;
+    outline?: boolean | undefined;
+    variant?: ButtonVariant | undefined;
+}) => string;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/dist/types/components/Button/types.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
+export type ButtonProps = {
+    size?: ButtonSize;
+    wide?: boolean;
+    label: ReactNode;
+    loading?: boolean;
+    outline?: boolean;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/types/components/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import { type TextProps } from './types';
+export declare const Text: ({ as, size, variant, children, className }: TextProps) => import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/dist/types/components/Text/constants.d.ts

@@ -0,0 +1,5 @@
+import type { TextSize, TextVariant } from './types';
+export declare const getTextClasses: ({ size, variant }: {
+    size?: TextSize | undefined;
+    variant?: TextVariant | undefined;
+}) => string;

package/dist/types/components/Text/index.d.ts

@@ -0,0 +1 @@
+export { Text } from './Text';

package/dist/types/components/Text/types.d.ts

@@ -0,0 +1,10 @@
+export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
+export type TextVariant = 'info' | 'error' | 'success' | 'warning' | 'primary' | 'secondary' | 'accent' | 'neutral';
+export type TextProps = {
+    as?: TextTag;
+    size?: TextSize;
+    variant?: TextVariant;
+    children: React.ReactNode;
+    className?: string;
+};

package/dist/{index.d.ts → 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.1",
+  "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",
-    "dist/index.d.ts"
+    "dist/types"
   ],
   "sideEffects": false,
   "scripts": {
@@ -26,7 +26,11 @@
     "build": "tsc && vite build",
     "build-storybook": "storybook build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "autoprefixer": "^10.4.16",
@@ -43,17 +47,23 @@
     "@storybook/react": "^7.6.6",
     "@storybook/react-vite": "^7.6.6",
     "@storybook/test": "^7.6.6",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.1.1",
+    "@vitest/ui": "^1.1.1",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
+    "jsdom": "^23.0.1",
     "path": "^0.12.7",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
@@ -62,7 +72,8 @@
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.7.0"
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.1.1"
   },
   "peerDependencies": {
     "postcss": "^8.4.32",
@@ -70,5 +81,6 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2"
-  }
+  },
+  "gitHead": "c2c9b7d5cfa793a6c9e59f62814aa51de57ee42d"
 }

package/src/components/Button/Button.tsx

@@ -28,7 +28,10 @@ export const Button = (props: ButtonProps) => {
     >
       {label}
       {loading ? (
-        <span className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]">
+        <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}

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/components/Text/constants.ts

@@ -0,0 +1,29 @@
+import c from 'clsx';
+import type { TextSize, TextVariant } from './types';
+
+const TEXT_SIZE = {
+  xs: c('text-xs'),
+  sm: c('text-sm'),
+  base: c('text-base'),
+  lg: c('text-lg'),
+  xl: c('text-xl'),
+  '2xl': c('text-2xl'),
+  '3xl': c('text-3xl'),
+  '4xl': c('text-4xl'),
+  '5xl': c('text-5xl'),
+} satisfies Record<TextSize, string>;
+
+const TEXT_VARIANT = {
+  info: c('text-info'),
+  error: c('text-error'),
+  success: c('text-success'),
+  warning: c('text-warning'),
+  primary: c('text-primary'),
+  secondary: c('text-secondary'),
+  accent: c('text-accent'),
+  neutral: c('text-neutral'),
+} satisfies Record<TextVariant, string>;
+
+export const getTextClasses = ({ size, variant }: { size?: TextSize; variant?: TextVariant }) => {
+  return c(TEXT_VARIANT[variant!], TEXT_SIZE[size!]);
+};

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text } from './Text';

package/src/components/Text/types.ts

@@ -0,0 +1,21 @@
+export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+
+export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
+
+export type TextVariant =
+  | 'info'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'neutral';
+
+export type TextProps = {
+  as?: TextTag;
+  size?: TextSize;
+  variant?: TextVariant;
+  children: React.ReactNode;
+  className?: string;
+};

package/src/index.ts

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

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/tailwind.css

@@ -1,25 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.scroll-shadow {
-  background-image: linear-gradient(to top, white, white),
-    linear-gradient(to top, white, white),
-    linear-gradient(to top, rgba(100, 100, 100, 0.25), rgba(255, 255, 255, 0)),
-    linear-gradient(to bottom, rgba(100, 100, 100, 0.25), rgba(255, 255, 255, 0));
-  background-position: bottom center, top center, bottom center, top center;
-  background-color: white;
-  background-repeat: no-repeat;
-  background-size: 100% 12px, 100% 12px, 100% 10px, 100% 10px;
-  background-attachment: local, local, scroll, scroll;
-}
-
-input[type=number]::-webkit-outer-spin-button,
-input[type=number]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}

package/src/vite-env.d.ts

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