retail-design-system 1.0.0

package/.github/workflows/release.yml

@@ -0,0 +1,46 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read # for checkout
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version-file: package.json
+      - name: Setup Node.js for release tooling
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+      - name: Configure npm for private packages and publish
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.SECURITY_BATON_NPMJS_PUBLISH_TOKEN }}" > .npmrc
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Audit dependencies
+        run: bun audit
+      - name: Build
+        run: bun run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
+          NPM_TOKEN: ${{ secrets.SECURITY_BATON_NPMJS_PUBLISH_TOKEN }}
+        run: bunx semantic-release

package/.oxfmtrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "experimentalTailwindcss": {
+    "attributes": ["className"]
+  },
+  "experimentalSortImports": {
+    "newlinesBetween": false
+  },
+  "experimentalSortPackageJson": {
+    "sortScripts": true
+  },
+  "ignorePatterns": [
+    "packages/ui/src/foundations/colors/retail-design-system.css",
+    "packages/ui/src/foundations/colors/tailwind-v4.css"
+  ],
+  "semi": false
+}

package/.oxlintrc.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "eslint",
+    "import",
+    "jsdoc",
+    "jsx-a11y",
+    "nextjs",
+    "oxc",
+    "react",
+    "react-perf",
+    "typescript",
+    "unicorn"
+  ],
+  "jsPlugins": [
+    {
+      "name": "unused-imports",
+      "specifier": "eslint-plugin-unused-imports"
+    },
+    {
+      "name": "perfectionist",
+      "specifier": "eslint-plugin-perfectionist"
+    }
+  ],
+  "categories": {
+    "correctness": "error",
+    "nursery": "error",
+    "pedantic": "error",
+    "perf": "error",
+    "restriction": "error",
+    "style": "error",
+    "suspicious": "error"
+  },
+  "rules": {
+    "eslint-plugin-import/consistent-type-specifier-style": "allow",
+    "eslint-plugin-import/exports-last": "allow",
+    "eslint-plugin-import/group-exports": "allow",
+    "eslint-plugin-import/no-default-export": "allow",
+    "eslint-plugin-import/no-named-export": "allow",
+    "eslint-plugin-import/no-unassigned-import": "allow",
+    "eslint-plugin-import/prefer-default-export": "allow",
+    "eslint-plugin-import/unambiguous": "allow",
+    "eslint-plugin-react-perf/jsx-no-jsx-as-prop": "allow",
+    "eslint-plugin-react-perf/jsx-no-new-array-as-prop": "allow",
+    "eslint-plugin-react-perf/jsx-no-new-function-as-prop": "allow",
+    "eslint-plugin-react-perf/jsx-no-new-object-as-prop": "allow",
+    "eslint-plugin-react/button-has-type": "allow",
+    "eslint-plugin-react/jsx-filename-extension": "allow",
+    "eslint-plugin-react/jsx-max-depth": "allow",
+    "eslint-plugin-react/jsx-props-no-spreading": "allow",
+    "eslint-plugin-react/no-array-index-key": "allow",
+    "eslint-plugin-react/only-export-components": "allow",
+    "eslint-plugin-react/react-in-jsx-scope": "allow",
+    "eslint-plugin-unicorn/consistent-function-scoping": "allow",
+    "eslint-plugin-unicorn/no-nested-ternary": "allow",
+    "eslint/complexity": "allow",
+    "eslint/func-style": ["error", "declaration"],
+    "eslint/id-length": ["error", { "exceptions": ["_"] }],
+    "eslint/max-lines-per-function": "allow",
+    "eslint/no-inline-comments": "allow",
+    "eslint/no-magic-numbers": "allow",
+    "eslint/no-nested-ternary": "allow",
+    "eslint/no-ternary": "allow",
+    "eslint/no-undefined": "allow",
+    "eslint/sort-imports": "allow",
+    "max-lines": "allow",
+    "max-statements": "allow",
+    "nextjs/no-img-element": "allow",
+    "no-console": "allow",
+    "no-undef": "allow",
+    "oxc/no-async-await": "allow",
+    "oxc/no-rest-spread-properties": "allow",
+    "perfectionist/sort-array-includes": "error",
+    "perfectionist/sort-classes": "error",
+    "perfectionist/sort-decorators": "error",
+    "perfectionist/sort-enums": "error",
+    "perfectionist/sort-export-attributes": "error",
+    "perfectionist/sort-exports": "error",
+    "perfectionist/sort-heritage-clauses": "error",
+    "perfectionist/sort-interfaces": "error",
+    "perfectionist/sort-intersection-types": "error",
+    "perfectionist/sort-jsx-props": "error",
+    "perfectionist/sort-maps": "error",
+    "perfectionist/sort-modules": "error",
+    "perfectionist/sort-named-exports": "error",
+    "perfectionist/sort-object-types": "error",
+    "perfectionist/sort-sets": "error",
+    "perfectionist/sort-switch-case": "error",
+    "perfectionist/sort-union-types": "error",
+    "perfectionist/sort-variable-declarations": "error",
+    "typescript/explicit-function-return-type": "allow",
+    "typescript/explicit-module-boundary-types": "allow",
+    "typescript/no-empty-interface": "allow",
+    "typescript/no-empty-object-type": "allow",
+    "typescript/no-use-before-define": "allow",
+    "unused-imports/no-unused-imports": "error"
+  },
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "next": {
+      "rootDir": []
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null,
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["oxc.oxc-vscode"]
+}

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "oxc.fixKind": "all",
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "peacock.color": "#61dafb",
+  "tailwindCSS.experimental.configFile": "apps/web/styles/tailwind.css",
+  "tailwindCSS.rootFontSize": 10
+}

package/README.md

@@ -0,0 +1,56 @@
+# @pump-fun/retail-design-system
+
+A collection of reusable React components built with TypeScript and CSS Modules.
+
+> [!WARNING]
+> This project is currently a work in progress. Forked from https://github.com/nattstack/react-components
+
+## Get Started
+
+```bash
+bun install
+bun run dev
+```
+
+## Links
+
+- Website: https://retail-design-system-web.preview.pump.fun
+- Storybook: https://retail-design-system-storybook.preview.pump.fun
+
+## Installation
+
+```bash
+bun add @pump-fun/retail-design-system
+```
+
+## Usage
+
+```tsx
+import { Button } from "@pump-fun/retail-design-system"
+
+function App() {
+  return <Button onClick={() => console.log("Clicked!")}>Click me</Button>
+}
+```
+
+## Development
+
+### Project Structure
+
+```
+src/
+├── index.ts          # Main export file
+├── button.tsx        # Button component
+├── button.module.css # Button styles
+└── global.d.ts       # TypeScript declarations
+```
+
+### Build Configuration
+
+The project uses [tsup](https://tsup.egoist.dev/) for building:
+
+- **Output formats:** ESM and CommonJS
+- **TypeScript declarations:** Generated automatically
+- **CSS handling:** CSS files are copied to the dist folder
+- **Tree shaking:** Enabled for optimal bundle size
+- **Source maps:** Generated for debugging

package/apps/storybook/.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+  framework: "@storybook/react-vite",
+  stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+}
+
+export default config

package/apps/storybook/.storybook/preview.css

@@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import "@pump-fun/retail-design-system/tailwind-v4/colors.css";
+@import "@pump-fun/retail-design-system/retail-design-system.css";
+
+body {
+  font-family: "Inter", sans-serif;
+  color: var(--color-zinc-50);
+  background-color: var(--color-zinc-950);
+}

package/apps/storybook/.storybook/preview.ts

@@ -0,0 +1,6 @@
+import type { Preview } from "@storybook/react-vite"
+import "@/.storybook/preview.css"
+
+const preview: Preview = {}
+
+export default preview

package/apps/storybook/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "storybook",
+  "type": "module",
+  "scripts": {
+    "build": "storybook build",
+    "dev": "storybook dev --no-open --port 6006"
+  },
+  "dependencies": {
+    "@pump-fun/icons-filled": "catalog:",
+    "@pump-fun/icons-line": "catalog:",
+    "@pump-fun/retail-design-system": "workspace:*",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "10.2.19",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "5.2.0",
+    "storybook": "10.2.19",
+    "typescript": "catalog:",
+    "vite": "7.3.1"
+  }
+}

package/apps/storybook/stories/button.stories.ts

@@ -0,0 +1,118 @@
+import { Button } from "@pump-fun/retail-design-system"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+
+const meta = {
+  argTypes: {
+    isDisabled: { control: "boolean" },
+    isFullWidth: { control: "boolean" },
+    isLoading: { control: "boolean" },
+    isRounded: { control: "boolean" },
+    size: { control: "select", options: [32, 36, 40, 48] },
+    variant: {
+      control: "select",
+      options: ["accent", "primary", "secondary", "ghost"],
+    },
+  },
+  args: { onClick: fn() },
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  title: "Components/Button",
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    children: "Primary Button",
+    variant: "primary",
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    children: "Accent Button",
+    variant: "accent",
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary Button",
+    variant: "secondary",
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    children: "Ghost Button",
+    variant: "ghost",
+  },
+}
+
+export const Large: Story = {
+  args: {
+    children: "Large Button",
+    size: 44,
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: "Small Button",
+    size: 32,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    children: "Loading...",
+    isLoading: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled Button",
+    isDisabled: true,
+  },
+}
+
+export const Rounded: Story = {
+  args: {
+    children: "Rounded Button",
+    isRounded: true,
+  },
+}
+
+export const FullWidth: Story = {
+  args: {
+    children: "Full Width Button",
+    isFullWidth: true,
+  },
+}
+
+export const IconOnly: Story = {
+  args: {
+    children: "🚀",
+    isIconOnly: true,
+  },
+}
+
+export const WithIcons: Story = {
+  args: {
+    children: "Button with Icons",
+    iconEnd: "✨",
+    iconStart: "🚀",
+  },
+}

package/apps/storybook/stories/input.stories.ts

@@ -0,0 +1,127 @@
+import { Input } from "@pump-fun/retail-design-system"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+
+const meta = {
+  argTypes: {
+    isActive: { control: "boolean" },
+    isDisabled: { control: "boolean" },
+    placeholder: { control: "text" },
+    type: {
+      control: "select",
+      options: ["text", "email", "password", "number", "tel", "url", "search"],
+    },
+    value: { control: "text" },
+  },
+  args: {
+    onBlur: fn(),
+    onChange: fn(),
+    onFocus: fn(),
+  },
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  title: "Components/Input",
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    placeholder: "Enter text...",
+    value: "Sample text",
+  },
+}
+
+export const Email: Story = {
+  args: {
+    placeholder: "Enter your email...",
+    type: "email",
+  },
+}
+
+export const Password: Story = {
+  args: {
+    placeholder: "Enter your password...",
+    type: "password",
+  },
+}
+
+export const Number: Story = {
+  args: {
+    placeholder: "Enter a number...",
+    type: "number",
+  },
+}
+
+export const Search: Story = {
+  args: {
+    placeholder: "Search...",
+    type: "search",
+  },
+}
+
+export const Tel: Story = {
+  args: {
+    placeholder: "Enter phone number...",
+    type: "tel",
+  },
+}
+
+export const URL: Story = {
+  args: {
+    placeholder: "Enter URL...",
+    type: "url",
+  },
+}
+
+export const Active: Story = {
+  args: {
+    isActive: true,
+    placeholder: "Active input",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    placeholder: "Disabled input",
+  },
+}
+
+export const DisabledWithValue: Story = {
+  args: {
+    isDisabled: true,
+    value: "Cannot edit this",
+  },
+}
+
+export const Required: Story = {
+  args: {
+    isRequired: true,
+    placeholder: "Required field",
+  },
+}
+
+export const WithMaxLength: Story = {
+  args: {
+    maxLength: 10,
+    placeholder: "Max 10 characters",
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    isReadOnly: true,
+    value: "Read-only value",
+  },
+}

package/apps/storybook/stories/label.stories.ts

@@ -0,0 +1,98 @@
+import { Label } from "@pump-fun/retail-design-system"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+
+const meta = {
+  argTypes: {
+    children: { control: "text" },
+    htmlFor: { control: "text" },
+  },
+  args: {
+    onClick: fn(),
+  },
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  title: "Components/Label",
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: "Label",
+  },
+}
+
+export const WithText: Story = {
+  args: {
+    children: "Username",
+  },
+}
+
+export const ForInput: Story = {
+  args: {
+    children: "Email Address",
+    htmlFor: "email-input",
+  },
+}
+
+export const Required: Story = {
+  args: {
+    children: "Password *",
+    htmlFor: "password-input",
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    children:
+      "This is a longer label text that might wrap to multiple lines depending on the container width",
+    htmlFor: "description-input",
+  },
+}
+
+export const WithSpecialCharacters: Story = {
+  args: {
+    children: "Full Name (First & Last)",
+    htmlFor: "fullname-input",
+  },
+}
+
+export const Clickable: Story = {
+  args: {
+    children: "Click me to focus input",
+    htmlFor: "clickable-input",
+    style: { cursor: "pointer" },
+  },
+}
+
+export const WithCustomStyling: Story = {
+  args: {
+    children: "Custom Styled Label",
+    htmlFor: "custom-input",
+    style: {
+      color: "#0066cc",
+      fontWeight: "bold",
+    },
+  },
+}
+
+export const FormLabel: Story = {
+  args: {
+    children: "Phone Number",
+    htmlFor: "phone-input",
+    title: "Enter your phone number including area code",
+  },
+}
+
+export const AccessibilityLabel: Story = {
+  args: {
+    "aria-label": "Search through available options",
+    children: "Search",
+    htmlFor: "search-input",
+  },
+}

package/apps/storybook/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "erasableSyntaxOnly": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "useDefineForClassFields": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["stories"]
+}

package/apps/storybook/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}