@mbao01/ui 0.0.1 → 0.0.2

package/README.md

@@ -1,3 +1,5 @@
+[![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/index.d.ts

@@ -1 +1 @@
-export * from "./components/Button";
+export * from './src/index'

package/dist/src/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/src/components/Button/Button.stories.d.ts

@@ -0,0 +1,19 @@
+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

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

package/dist/src/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/src/components/Button/index.d.ts

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

package/dist/src/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/src/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/src/components/Text/Text.stories.d.ts

@@ -0,0 +1,17 @@
+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

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

package/dist/src/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/src/components/Text/index.d.ts

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

package/dist/src/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/src/index.d.ts

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

package/dist/tailwind.config.d.ts

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

package/dist/vite.config.d.ts

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

package/dist/vitest.config.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -15,10 +15,10 @@
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "files": [
-    "src",
     "plugin.js",
     "plugin.d.ts",
-    "dist/index.d.ts"
+    "src/**/*.ts",
+    "dist/**/*.d.ts"
   ],
   "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": "befbd919a67ae1084ad5ef64cf4cc1ced6f848e2"
 }

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

@@ -0,0 +1,47 @@
+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/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/components/Button/Button.tsx

@@ -1,37 +0,0 @@
-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]">
-          <span className="loading loading-spinner" />
-        </span>
-      ) : null}
-    </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;
-}