@bronzelabs/oakma-ui 0.0.1

package/.prettierrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  printWidth: 100,
+  trailingComma: "all",
+  semi: false,
+  bracketSpacing: true,
+  arrowParens: "avoid",
+  quoteProps: "as-needed",
+  overrides: [
+    {
+      files: ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
+      options: {
+        parser: "typescript",
+      },
+    },
+    {
+      files: ["./src/index.ts"],
+      options: {
+        printWidth: 180,
+      },
+    },
+  ],
+  tailwindFunctions: ["clsx"],
+  plugins: ["prettier-plugin-tailwindcss"],
+  tailwindStylesheet: "./src/tailwind.css",
+}

package/.storybook/components/ActionButton.tsx

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes } from "react"
+
+// Utils
+import { clsx } from "clsx"
+
+// Params
+interface Props extends HTMLAttributes<HTMLButtonElement> {
+  type?: React.JSX.IntrinsicElements["button"]["type"]
+}
+
+/*
+
+
+
+
+*/
+
+const StorybookActionButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <button
+        className={clsx("bg-surface-20 hover:bg-surface-50", className)}
+        ref={ref}
+        style={{
+          position: "relative",
+          padding: 14,
+          borderRadius: 9999,
+          border: "none",
+          cursor: "pointer",
+          minWidth: 64,
+          fontSize: 13.3333,
+          // color: "ButtonText",
+          fontFamily: "Arial, sans-serif",
+          transition: ".1s ease-in-out",
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+export default StorybookActionButton

package/.storybook/components/DummyIcons.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+
+/*
+
+
+
+
+
+*/
+
+export function DummyPhoneIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export function DummyChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.21967 8.21967C5.51256 7.92678 5.98744 7.92678 6.28033 8.21967L10 11.9393L13.7197 8.21967C14.0126 7.92678 14.4874 7.92678 14.7803 8.21967C15.0732 8.51256 15.0732 8.98744 14.7803 9.28033L10.5303 13.5303C10.3897 13.671 10.1989 13.75 10 13.75C9.80109 13.75 9.61032 13.671 9.46967 13.5303L5.21967 9.28033C4.92678 8.98744 4.92678 8.51256 5.21967 8.21967Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/.storybook/components/index.ts

@@ -0,0 +1,2 @@
+export { DummyPhoneIcon, DummyChevronDownIcon } from "./DummyIcons"
+export { default as StorybookActionButton } from "./ActionButton"

package/.storybook/docs/blocks/ImportStatement.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+
+// Components
+import { Source, useOf } from "@storybook/addon-docs/blocks"
+
+// Helpers
+const getStoryName = (name?: string): string | undefined => name?.split("/").pop()
+
+// Props
+export interface ImportStatementProps {
+  source?: string
+  override?: string
+}
+
+/*
+
+
+
+
+*/
+
+const ImportStatement: React.FC<ImportStatementProps> = ({ source, override }) => {
+  const { story } = useOf<"story">("story")
+
+  const componentName = getStoryName(story.title)
+
+  const importStatement = override ?? `import { ${componentName} } from '@bronzelabs/oakma-ui';`
+
+  if (!componentName) {
+    return null
+  }
+
+  return (
+    <div className="mx-0 my-6 flex flex-col gap-2">
+      <a
+        className="self-end text-sm"
+        style={{ color: "#0000ff" }}
+        href={`https://github.com/BronzeLabs/oakma-ui${
+          source ?? `/tree/master/src/components/${componentName}`
+        }`}
+        target="_blank"
+      >
+        View Source
+      </a>
+      <div id="import-src">
+        <Source code={importStatement} />
+      </div>
+    </div>
+  )
+}
+
+export default ImportStatement

package/.storybook/docs/blocks/index.ts

@@ -0,0 +1 @@
+export { default as ImportStatement } from "./ImportStatement"

package/.storybook/docs/page.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+// Components
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+  Markdown,
+} from "@storybook/addon-docs/blocks"
+import ImportStatement, { type ImportStatementProps } from "./blocks/ImportStatement"
+
+// Props
+export interface DocsProps {
+  importStatementProps?: ImportStatementProps
+  extraDocs?: string
+}
+
+/*
+
+
+
+
+*/
+
+const Docs: React.FC<DocsProps> = ({ importStatementProps, extraDocs }) => (
+  <>
+    <Title />
+    <Subtitle />
+    <ImportStatement {...importStatementProps} />
+    <Description />
+    <Primary />
+    <Controls />
+    <Stories />
+    {extraDocs && <Markdown>{extraDocs}</Markdown>}
+  </>
+)
+
+export default Docs

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/react-webpack5"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+  ],
+  framework: "@storybook/react-webpack5",
+  webpackFinal: async config => {
+    config.module?.rules?.forEach((rule: any) => {
+      if (rule && typeof rule === "object" && rule.test?.test?.("test.css")) {
+        rule.use?.push("postcss-loader")
+      }
+    })
+    return config
+  },
+}
+export default config

package/.storybook/postcss.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+
+module.exports = config

package/.storybook/preview-body.html

@@ -0,0 +1,20 @@
+<style>
+  html {
+    font-size: 16px;
+  }
+
+  .docs-story {
+    background: #ffffff;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .docs-story,
+    .sb-main-centered {
+      background: #0f212b;
+    }
+  }
+
+  #import-src .docblock-source.sb-unstyled {
+    margin: 0 !important;
+  }
+</style>

package/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap"
+  rel="stylesheet"
+/>

package/.storybook/preview.tsx

@@ -0,0 +1,30 @@
+import type { Preview } from "@storybook/react-webpack5"
+
+// Styles
+// @ts-ignore
+import "./tailwind.css"
+
+// Components
+import Docs from "./docs/page"
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: Docs,
+      source: {
+        excludeDecorators: true,
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  tags: ["autodocs"],
+}
+
+export default preview

package/.storybook/tailwind.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@import "@bronzelabs/oakma-tailwind-preset";
+
+html {
+  font-family: var(--font-inter);
+}

package/.storybook/utils/index.ts

@@ -0,0 +1,2 @@
+export { renderAsReact } from "./renderAsReact"
+export { renderDocsWithProps } from "./renderDocsWithProps"

package/.storybook/utils/renderAsReact.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+// Types
+import type { StoryFn } from "@storybook/react"
+
+/**
+ * This occasionally needs to be added as a decorator to make Reacty-y stuff work
+ * in stories.Unless the story itself is called as a React component storybook will
+ * bypass React...
+ *
+ * This is a helpful explanation: https://stackoverflow.com/a/74281976
+ *
+ * @param {StoryFn} Story
+ * @param {any} args
+ * @returns {React.JSX.Element}
+ */
+
+/*
+
+
+
+
+*/
+
+const renderAsReact = (Story: StoryFn, args: any): React.JSX.Element => {
+  const Component = Story as unknown as React.ComponentType
+  return <Component {...args} />
+}
+
+export { renderAsReact }

package/.storybook/utils/renderDocsWithProps.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+// Components
+import Docs from "../docs/page"
+
+// Types
+import type { DocsProps } from "../docs/page"
+
+/*
+
+
+
+
+*/
+
+const renderDocsWithProps =
+  (props: DocsProps = {}) =>
+  () => {
+    return <Docs {...props} />
+  }
+
+export { renderDocsWithProps }

package/@types/markdown.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+  const value: string
+  export default value
+}

package/README.md

@@ -0,0 +1,3 @@
+# Oakma UI
+
+Oakma's component system for the web.

package/eslint.config.js

@@ -0,0 +1,91 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook"
+
+import tseslint from "typescript-eslint"
+import reactPlugin from "eslint-plugin-react"
+import reactHooksPlugin from "eslint-plugin-react-hooks"
+import importPlugin from "eslint-plugin-import-x"
+import betterTailwindcss from "eslint-plugin-better-tailwindcss"
+
+export default tseslint.config(
+  { ignores: ["dist/**", "node_modules/**"] },
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    extends: [tseslint.configs.recommended],
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      import: importPlugin,
+      "better-tailwindcss": betterTailwindcss,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+      "better-tailwindcss": {
+        entryPoint: "./src/tailwind.css",
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+
+      "no-param-reassign": [2, { props: false }],
+      "no-console": 0,
+      "consistent-return": 0,
+      "no-nested-ternary": 0,
+      "no-constant-condition": [2, { checkLoops: false }],
+
+      // Import
+      "import/newline-after-import": 2,
+      "import/no-duplicates": 2,
+      "import/no-useless-path-segments": 1,
+      "import/order": 0,
+      "import/prefer-default-export": 0,
+      "import/extensions": 0,
+      "import/no-named-as-default-member": 0,
+      "import/no-cycle": 2,
+
+      // React
+      "react/react-in-jsx-scope": 0,
+      "react/prop-types": 0,
+      "react/jsx-props-no-spreading": 0,
+      "react/jsx-filename-extension": 0,
+      "react/no-array-index-key": 1,
+      "react/display-name": 0,
+      "react/no-unknown-property": 0,
+      "react/no-unescaped-entities": 1,
+      "react/jsx-no-comment-textnodes": 1,
+      "react/jsx-no-target-blank": 0,
+
+      // TypeScript
+      "@typescript-eslint/explicit-function-return-type": 0,
+      "@typescript-eslint/semi": 0,
+      "@typescript-eslint/no-explicit-any": 0,
+      "@typescript-eslint/no-inferrable-types": 0,
+      "@typescript-eslint/ban-ts-comment": 0,
+      "@typescript-eslint/no-restricted-types": 1,
+      "@typescript-eslint/no-empty-object-type": 1,
+      "@typescript-eslint/no-unsafe-function-type": 1,
+      "@typescript-eslint/no-wrapper-object-types": 1,
+      "@typescript-eslint/no-unused-vars": 1,
+      "@typescript-eslint/no-unused-expressions": 0,
+
+      // Tailwind CSS
+      "better-tailwindcss/enforce-consistent-line-wrapping": 0,
+      "better-tailwindcss/enforce-consistent-class-order": 0,
+      "better-tailwindcss/enforce-consistent-variable-syntax": 1,
+      "better-tailwindcss/enforce-consistent-important-position": 1,
+      "better-tailwindcss/enforce-shorthand-classes": 0,
+      "better-tailwindcss/enforce-canonical-classes": 1,
+      "better-tailwindcss/no-duplicate-classes": 1,
+      "better-tailwindcss/no-deprecated-classes": 1,
+      "better-tailwindcss/no-unnecessary-whitespace": 1,
+      "better-tailwindcss/no-unknown-classes": 0,
+      "better-tailwindcss/no-restricted-classes": 0,
+      "better-tailwindcss/no-conflicting-classes": 0,
+      "better-tailwindcss/sort-classes": 0,
+    },
+  },
+  storybook.configs["flat/recommended"],
+)

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@bronzelabs/oakma-ui",
+  "version": "0.0.1",
+  "description": "Oakma's component system for the web.",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BronzeLabs/oakma-ui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build:styles": "NODE_ENV=production npx @tailwindcss/cli -i ./src/tailwind.css -o ./dist/oakma-ui.css --minify",
+    "build:components": "tsup",
+    "build": "npm run build:components && npm run build:styles",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "release": "rm -rf dist && npm run build && bash ./scripts/release.sh"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "react-select": "^5.10.2"
+  },
+  "devDependencies": {
+    "@bronzelabs/oakma-tailwind-preset": "^1.0.5",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-onboarding": "^10.4.0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.3",
+    "@storybook/react-webpack5": "^10.4.0",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "9.39.4",
+    "eslint-plugin-better-tailwindcss": "^4.5.0",
+    "eslint-plugin-import-x": "^4.0.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-storybook": "^10.4.0",
+    "postcss": "^8.5.14",
+    "postcss-loader": "^8.2.1",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "storybook": "^10.4.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.0.0"
+  },
+  "peerDependencies": {
+    "@heroicons/react": "^2.2.0",
+    "motion": "^12.40.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+
+module.exports = config

package/scripts/release.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+
+# Function to run a command and check its exit status
+run_command() {
+    "$@"
+    if [ $? -ne 0 ]; then
+        echo "Command failed: $@"
+        exit 1
+    else
+        echo "Command succeeded: $@"
+    fi
+}
+
+# Navigate to tribe tailwind preset
+cd /Users/nathanhughes/Documents/Projects/Oakma/oakma-ui
+
+# Get current version
+current_version=$(node -p "require('./package.json').version")
+
+echo "Current version: $current_version"
+echo ""
+echo "Select release option:"
+echo "1) patch (e.g., $current_version -> $(node -p "'$current_version'.split('.').map((n,i)=>i===2?+n+1:n).join('.')"))"
+echo "2) minor (e.g., $current_version -> $(node -p "'$current_version'.split('.').map((n,i)=>i===1?+n+1:i===2?0:n).join('.')"))"
+echo "3) major (e.g., $current_version -> $(node -p "'$current_version'.split('.').map((n,i)=>i===0?+n+1:0).join('.')"))"
+echo "4) Enter custom version"
+read -p "Enter your choice (1, 2, 3, or 4): " choice
+
+case $choice in
+    1)
+        bump_type="patch"
+        run_command npm version $bump_type --no-git-tag-version
+        ;;
+    2)
+        bump_type="minor"
+        run_command npm version $bump_type --no-git-tag-version
+        ;;
+    3)
+        bump_type="major"
+        run_command npm version $bump_type --no-git-tag-version
+        ;;
+    4)
+        read -p "Enter the new version (e.g., 2.0.0): " custom_version
+        run_command npm version $custom_version --no-git-tag-version
+        ;;
+    *)
+        echo "Invalid choice"
+        exit 1
+        ;;
+esac
+
+# Get the new version
+new_version=$(node -p "require('./package.json').version")
+
+echo ""
+echo "New version will be: $new_version"
+read -p "Proceed with publishing? (y/n): " confirm
+
+if [ "$confirm" != "y" ]; then
+    echo "Publish cancelled"
+    exit 1
+fi
+
+# Publish the package
+run_command npm publish
+
+# Commit the changes
+run_command git add .
+run_command git commit -m "oakma-ui v$new_version" --no-verify
+run_command git tag "oakma-ui/v$new_version"
+run_command git push --no-verify
+run_command git push --tags --no-verify
+
+echo "oakma-ui v$new_version has been published!"
+
+exit 0