@mbao01/ui 0.0.1

package/README.md

@@ -0,0 +1,41 @@
+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.
+
+I believe in future this UI component library may extend to meta frameworks like [Next.js](https://nextjs.org/), [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).
+
+
+# Description
+
+The library is written using [React](https://react.dev/), [Tailwind](https://tailwindcss.com/), [Typescript](https://www.typescriptlang.org/) and [Vite](https://vitejs.dev/). The library is uncooked which means there is no build step involved which means you'd have to cater for building the components into your library.
+
+# Consuming the library
+
+1. Ensure you have react and typescript install and setup in your project.
+Then install the library
+
+```bash
+pnpm add @mbao01/ui
+```
+
+or
+
+```bash
+npm install @mbao01/ui
+```
+
+2. Install tailwind - do so by following the [installation guide](https://tailwindcss.com/docs/installation)
+
+3. Configure tailwind
+
+```typescript
+const plugin = require("@mbao01/ui/plugin") // -> import the library plugin
+
+export default {
+  ...plugin.config, // -> add the library plugin config
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "node_modules/@mbao01/ui/src/**/*.{js,ts,jsx,tsx,mdx}" // -> ensure to add this to allow tailwind to scan the library for classes
+  ]
+}
+```

package/dist/index.d.ts

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

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@mbao01/ui",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "author": "Ayomide Bakare",
+  "license": "MIT",
+  "description": "A fully ready-to-consume component library available in different frontend frameworks",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "library"
+  ],
+  "main": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "plugin.js",
+    "plugin.d.ts",
+    "dist/index.d.ts"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.16",
+    "clsx": "^2.0.0",
+    "daisyui": "^4.4.24"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-themes": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
+    "@storybook/test": "^7.6.6",
+    "@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",
+    "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",
+    "path": "^0.12.7",
+    "postcss": "^8.4.32",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.6",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.0"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.32",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.2.2"
+  }
+}

package/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from "tailwindcss";
+
+declare const plugin: { handler: () => void; config?: Config };
+export = plugin;

package/plugin.js

@@ -0,0 +1,10 @@
+const plugin = require("tailwindcss/plugin");
+const config = require("./tailwind.config");
+
+const { theme, plugins, daisyui } = config;
+
+module.exports = plugin(() => null, {
+  theme,
+  plugins,
+  daisyui,
+});

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

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

@@ -0,0 +1,37 @@
+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/components/Button/constants.ts

@@ -0,0 +1,44 @@
+import c from 'clsx';
+import type { ButtonSize, ButtonVariant } from './types';
+
+const BUTTON_SIZE = {
+  xs: c('btn-xs'),
+  sm: c('btn-sm'),
+  md: c('btn-md'),
+  lg: c('btn-lg'),
+} satisfies Record<ButtonSize, string>;
+
+const BUTTON_VARIANTS = {
+  accent: c('btn-accent'),
+  default: c('btn-default'),
+  error: c('btn-error'),
+  ghost: c('btn-ghost'),
+  info: c('btn-info'),
+  link: c('btn-link'),
+  neutral: c('btn-neutral'),
+  primary: c('btn-primary'),
+  secondary: c('btn-secondary'),
+  success: c('btn-success'),
+  warning: c('btn-warning'),
+} satisfies Record<ButtonVariant, string>;
+
+export const getButtonClasses = ({
+  size,
+  wide,
+  loading,
+  outline,
+  variant,
+}: {
+  size?: ButtonSize;
+  wide?: boolean;
+  loading?: boolean;
+  outline?: boolean;
+  variant?: ButtonVariant;
+}) => {
+  return c('btn', BUTTON_VARIANTS[variant!], BUTTON_SIZE[size!], {
+    'btn-outline': outline,
+    'btn-wide': wide,
+    'relative overflow-hidden': loading,
+    'min-h-fit h-10': !size,
+  });
+};

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,26 @@
+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/src/index.ts

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

package/src/tailwind.css

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

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