@pondipondi/mimas 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/lib/components/crumbs/Button/Button.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import Button from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Mimas/Crumbs/Button",
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    size: {
+      control: "radio",
+      options: ["large", "small"],
+    },
+    width: {
+      control: "radio",
+      options: ["fit", "grow"],
+    },
+    colour: {
+      control: "select",
+      options: ["red", "blue", "green", "white", "neutral"],
+    },
+    corners: {
+      control: "select",
+      options: ["sharp", "round", "circle"],
+    },
+    leftCorners: {
+      control: "select",
+      options: ["none", "sharp", "round", "circle"],
+    },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    onClick: fn(),
+    size: "large",
+    noise: "medium",
+    colour: "neutral",
+    text: "Button",
+    width: "fit",
+    corners: "round",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/lib/components/crumbs/Button/Button.tsx

@@ -0,0 +1,162 @@
+import LoadingRing from "../LoadingRing/LoadingRing";
+import Noise from "../../util/Noise/Noise";
+import { tv, VariantProps } from "tailwind-variants";
+
+const button = tv({
+  slots: {
+    outer: "group p-[2px] bg-neutral-200 dark:bg-neutral-900",
+    inner: "relative shadow-form border overflow-hidden animate-press",
+    chip: "pb-[2px]",
+  },
+  variants: {
+    corners: {
+      sharp: {
+        inner: "rounded-sm",
+        outer: "rounded-sm",
+        chip: "rounded-sm",
+      },
+      round: {
+        inner: "rounded-md",
+        outer: "rounded-lg",
+        chip: "rounded-md",
+      },
+      circle: {
+        inner: "rounded-full",
+        outer: "rounded-full",
+        chip: "rounded-full",
+      },
+    },
+    leftCorners: {
+      none: {},
+      sharp: {
+        inner: "rounded-s-sm",
+        outer: "rounded-s-sm",
+        chip: "rounded-s-sm",
+      },
+      round: {
+        inner: "rounded-s-md",
+        outer: "rounded-s-lg",
+        chip: "rounded-s-md",
+      },
+      circle: {
+        inner: "rounded-s-full",
+        outer: "rounded-s-full",
+        chip: "rounded-s-full",
+      },
+    },
+    size: {
+      small: {
+        inner: "py-[2px] px-2 text-xs min-h-5",
+      },
+      large: {
+        inner: "py-1 px-3 min-h-8",
+      },
+    },
+    colour: {
+      neutral: {
+        inner:
+          "bg-neutral-800 border-neutral-700/70 group-disabled:border-neutral-700/40 group-active:border-neutral-700/40 text-neutral-200",
+        chip: "bg-neutral-800",
+      },
+      red: {
+        inner:
+          "bg-red-700 border-red-500/60 group-disabled:border-red-600/40 group-active:border-red-600/40 text-neutral-200",
+        chip: "bg-red-900",
+      },
+      green: {
+        inner:
+          "bg-lime-700 border-lime-600/70 group-disabled:border-lime-600/40 group-active:border-lime-600/40 text-neutral-200",
+        chip: "bg-lime-900",
+      },
+      blue: {
+        inner:
+          "bg-sky-700 border-sky-600/70 group-disabled:border-sky-600/40 group-active:border-sky-600/40 text-neutral-200",
+        chip: "bg-sky-900",
+      },
+      white: {
+        inner:
+          "bg-neutral-300 border-neutral-300/70 group-disabled:border-neutral-300/40 group-active:border-neutral-300/40 text-neutral-800",
+        chip: "bg-neutral-400",
+      },
+    },
+    width: {
+      fit: {},
+      grow: {
+        inner: "w-full",
+        outer: "w-full",
+        chip: "w-full",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "large",
+    colour: "neutral",
+    corners: "round",
+    leftCorners: "none",
+  },
+});
+
+interface ButtonProps
+  extends VariantProps<typeof button>,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {
+  noise?: "low" | "medium" | "high";
+  loading?: boolean;
+  text?: string;
+}
+
+function Button({
+  size,
+  noise,
+  colour,
+  width,
+  corners,
+  leftCorners,
+  loading,
+  text,
+  children,
+  className,
+  disabled,
+  onClick,
+  ...props
+}: ButtonProps) {
+  const { outer, chip, inner } = button({
+    size,
+    colour,
+    width,
+    corners,
+    leftCorners,
+  });
+
+  // TODO handle keyboard
+
+  return (
+    <button
+      className={outer()}
+      disabled={disabled || loading}
+      onClick={onClick}
+      {...props}
+    >
+      <div className={chip()}>
+        <div className={inner({ className })}>
+          <span
+            className="relative block z-10 text-inherit group-disabled:opacity-50"
+            style={{ visibility: loading ? "hidden" : "visible" }}
+          >
+            {children}
+            {text}
+          </span>
+
+          {loading && (
+            <div className="absolute inset-0 w-full h-full flex justify-center items-center">
+              <LoadingRing size={size} />
+            </div>
+          )}
+
+          <Noise strength={noise ?? "medium"} />
+        </div>
+      </div>
+    </button>
+  );
+}
+
+export default Button;

package/lib/components/crumbs/LoadingRing/LoadingRing.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import LoadingRing from "./LoadingRing";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Mimas/Crumbs/LoadingRing",
+  component: LoadingRing,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    size: {
+      control: "radio",
+      options: ["large", "small"],
+    },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    size: "large",
+  },
+} satisfies Meta<typeof LoadingRing>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/lib/components/crumbs/LoadingRing/LoadingRing.tsx

@@ -0,0 +1,33 @@
+import { tv, VariantProps } from "tailwind-variants";
+
+const loadingRing = tv({
+  base: "animate-spin",
+  variants: {
+    size: {
+      small: "w-5 h-5",
+      large: "w-8 h-8",
+    },
+  },
+});
+
+function LoadingRing({ size }: VariantProps<typeof loadingRing>) {
+  return (
+    <div className={loadingRing({ size })}>
+      <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="400"
+          cy="400"
+          fill="none"
+          r="200"
+          stroke-width="50"
+          stroke-dasharray="269 150"
+          stroke="currentColor"
+          opacity={0.5}
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  );
+}
+
+export default LoadingRing;

package/lib/components/crumbs/ToggleSet/ToggleSet.tsx

@@ -0,0 +1,12 @@
+// colour (for selected)
+// values: {key, label}
+// selected value (typeof values)
+// roundedness
+// onSelect
+//
+
+function ToggleSet() {
+  return <div>ToggleSet</div>;
+}
+
+export default ToggleSet;

package/lib/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Button } from "./crumbs/Button/Button";
+export { default as LoadingRing } from "./crumbs/LoadingRing/LoadingRing";
+export { default as ToggleSet } from "./crumbs/ToggleSet/ToggleSet";
+
+export { default as Noise } from "./util/Noise/Noise";

package/lib/components/util/Noise/Noise.tsx

@@ -0,0 +1,25 @@
+import { tv, VariantProps } from "tailwind-variants";
+
+const noise = tv({
+  base: "bg-neutral-200 noise absolute w-full h-full inset-0 z-0",
+  variants: {
+    strength: {
+      low: "noise",
+      medium: "noise-2",
+      high: "noise-4",
+    },
+  },
+  defaultVariants: {
+    strength: "medium",
+  },
+});
+
+interface NoiseProps extends VariantProps<typeof noise> {
+  className?: string;
+}
+
+function Noise({ strength, className }: NoiseProps) {
+  return <div className={noise({ strength, className })} />;
+}
+
+export default Noise;

package/lib/index.css

@@ -0,0 +1,99 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
+
+:root {
+  font-family: "Rubik", sans-serif;
+  color: white;
+
+  --lines: 0.0007px;
+}
+
+.noise {
+  /* nerdy.dev */
+  mask: repeating-radial-gradient(
+    circle at center,
+    #0000,
+    var(--lines),
+    #0000,
+    0,
+    rgba(0, 0, 0, 0.02),
+    calc(var(--lines) * 2),
+    rgba(0, 0, 0, 0.02) 0
+  );
+}
+
+.noise-2 {
+  /* nerdy.dev */
+  mask: repeating-radial-gradient(
+    circle at center,
+    #0000,
+    var(--lines),
+    #0000,
+    0,
+    rgba(0, 0, 0, 0.04),
+    calc(var(--lines) * 2),
+    rgba(0, 0, 0, 0.04) 0
+  );
+}
+
+.noise-4 {
+  /* nerdy.dev */
+  mask: repeating-radial-gradient(
+    circle at center,
+    #0000,
+    var(--lines),
+    #0000,
+    0,
+    rgba(0, 0, 0, 0.06),
+    calc(var(--lines) * 2),
+    rgba(0, 0, 0, 0.06) 0
+  );
+}
+
+.shadow-form {
+  box-shadow:
+    inset 0 1px 8px 2px rgba(255, 255, 255, 0.03),
+    inset 0 -6px 5px -3px rgba(0, 0, 0, 0.08);
+
+  transition:
+    background-color 200ms ease,
+    box-shadow 200ms ease;
+}
+
+.group:hover .shadow-form,
+.shadow-form:hover {
+  box-shadow:
+    inset 0 1px 5px 3px rgba(255, 255, 255, 0.03),
+    inset 0 -7px 5px -3px rgba(0, 0, 0, 0.1);
+}
+
+.group:active .shadow-form,
+.shadow-form:active {
+  box-shadow:
+    inset 0 2px 6px 6px rgba(0, 0, 0, 0.12),
+    inset 0 -7px 5px -3px rgba(0, 0, 0, 0);
+}
+
+.group:disabled .shadow-form,
+.shadow-form:disabled,
+.shadow-form:disabled:hover {
+  box-shadow:
+    inset 0 2px 6px 6px rgba(0, 0, 0, 0.12),
+    inset 0 -7px 5px -3px rgba(0, 0, 0, 0);
+}
+
+.animate-press {
+  transition: all 100ms ease;
+}
+
+.group:hover .animate-press {
+  translate: 0 -1px;
+}
+
+.group:disabled .animate-press,
+.group:active .animate-press {
+  translate: 0 1px;
+}

package/lib/vite-env.d.ts

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

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@pondipondi/mimas",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "transpile": "rimraf lib && babel src -d lib --copy-files",
+    "prepublishOnly": "npm run transpile"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-variants": "^0.2.1",
+    "tailwindcss": "^3.4.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@chromatic-com/storybook": "1.6.1",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-onboarding": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/manager-api": "^8.2.1",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-vite": "^8.2.2",
+    "@storybook/test": "^8.2.2",
+    "@storybook/theming": "^8.2.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.2.1",
+    "storybook-dark-mode": "^4.0.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  },
+  "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bevans-o/mimas.git"
+  },
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "components"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "bevans",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/bevans-o/mimas/issues"
+  },
+  "homepage": "https://github.com/bevans-o/mimas#readme"
+}