feat(checkbox): Added the Checkbox design component package

components/checkbox/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": ["../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*", "node_modules/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": ["components/checkbox/tsconfig.*?.json"]
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "buildTargets": ["build"],
+            "ignoredFiles": [
+              "{projectRoot}/esbuild.config.{js,ts,mjs,mts}",
+              "{projectRoot}/jest.config.ts"
+            ],
+            "checkMissingDependencies": true,
+            "checkObsoleteDependencies": true,
+            "checkVersionMismatches": false
+          }
+        ]
+      }
+    }
+  ]
+}

components/checkbox/README.md

@@ -0,0 +1,58 @@
+<!-- START header -->
+<!-- END header -->
+
+# checkbox
+
+A package containing the Checkbox component used by Storm Software
+
+<!-- START doctoc -->
+<!-- END doctoc -->
+
+## Installing
+
+Using [pnpm](http://pnpm.io):
+
+```bash
+pnpm add -D @cyclone-ui/checkbox
+```
+
+<details>
+  <summary>Using npm</summary>
+
+```bash
+npm install -D @cyclone-ui/checkbox
+```
+
+</details>
+
+<details>
+  <summary>Using yarn</summary>
+
+```bash
+yarn add -D @cyclone-ui/checkbox
+```
+
+</details>
+
+## Reduced Package Size
+
+This project uses [tsup](https://tsup.egoist.dev/) to package the source code due to its ability to remove unused code and ship smaller javascript files thanks to code splitting. This helps to greatly reduce the size of the package and to make it easier to use in other projects.
+
+## Development
+
+This project is built using [Nx](https://nx.dev). As a result, many of the usual commands are available to assist in development.
+
+### Building
+
+Run `nx build checkbox` to build the library.
+
+### Running unit tests
+
+Run `nx test checkbox` to execute the unit tests via [Jest](https://jestjs.io).
+
+### Linting
+
+Run `nx lint checkbox` to run [ESLint](https://eslint.org/) on the package.
+
+<!-- START footer -->
+<!-- END footer -->

components/checkbox/jest.config.ts

@@ -0,0 +1,3 @@
+import { getJestConfig } from '@storm-software/testing-tools';
+
+export default getJestConfig('components/checkbox', true, 'checkbox');

components/checkbox/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@cyclone-ui/checkbox",
+  "version": "0.0.1",
+  "private": false,
+  "description": "A repository containing the core front-end components used by Storm Software across many platforms",
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/storm-software/cyclone-ui.git",
+    "directory": "components/checkbox"
+  },
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "react-native": "./dist/cjs/index.native.js"
+    }
+  },
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "dependencies": {
+    "@tamagui/animate-presence": "^1.98.0",
+    "@tamagui/checkbox": "^1.98.0",
+    "@tamagui/compose-refs": "^1.98.0",
+    "@tamagui/constants": "^1.98.0",
+    "@tamagui/core": "^1.98.0",
+    "@tamagui/focusable": "^1.98.0",
+    "@tamagui/font-size": "^1.98.0",
+    "@tamagui/get-button-sized": "^1.98.0",
+    "@tamagui/get-font-sized": "^1.98.0",
+    "@tamagui/get-token": "^1.98.0",
+    "@tamagui/group": "^1.98.0",
+    "@tamagui/helpers": "^1.98.0",
+    "@tamagui/helpers-tamagui": "^1.98.0",
+    "@tamagui/label": "^1.98.0",
+    "@tamagui/lucide-icons": "^1.98.0",
+    "@tamagui/stacks": "^1.98.0",
+    "@tamagui/text": "^1.98.0",
+    "@tamagui/web": "^1.98.0",
+    "react-native-svg": "^15.2.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-native": "0.73.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-native": "0.73.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

components/checkbox/project.json

@@ -0,0 +1,46 @@
+{
+  "name": "checkbox",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "components/checkbox/src",
+  "targets": {
+    "build": {
+      "cache": true,
+      "executor": "@cyclone-ui/nx:build",
+      "inputs": ["default", "^production"],
+      "dependsOn": ["^build"],
+      "output": "{options.outputPath}",
+      "options": {
+        "outputPath": "dist/components/checkbox",
+        "tsConfig": "components/checkbox/tsconfig.json",
+        "project": "components/checkbox/package.json",
+        "defaultConfiguration": "production",
+        "assets": [
+          {
+            "input": "components/checkbox",
+            "glob": "*.md",
+            "output": "/"
+          },
+          {
+            "input": "",
+            "glob": "LICENSE",
+            "output": "/"
+          }
+        ]
+      },
+      "configurations": {
+        "production": {
+          "debug": false,
+          "verbose": false
+        },
+        "development": {
+          "debug": true,
+          "verbose": true
+        }
+      }
+    },
+    "nx-release-publish": {
+      "executor": "@storm-software/workspace-tools:npm-publish"
+    }
+  }
+}

components/checkbox/src/Checkbox.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Checkbox } from "./Checkbox";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Form/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  render: (args: any) => (
+    <Checkbox name="checkboxName" {...args}>
+      <Checkbox.Label>Label Text</Checkbox.Label>
+      <Checkbox.Details>
+        This is an example detailed message for an checkbox
+      </Checkbox.Details>
+    </Checkbox>
+  )
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Base: Story = {
+  args: {}
+};
+
+export const Required: Story = {
+  args: {
+    required: true
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true
+  }
+};
+
+export const DefaultValue: Story = {
+  args: {
+    defaultValue: true
+  }
+};
+
+export const Help: Story = {
+  args: {
+    theme: "help"
+  }
+};
+
+export const Error: Story = {
+  args: {
+    theme: "error"
+  }
+};
+
+export const Warning: Story = {
+  args: {
+    theme: "warning"
+  }
+};
+
+export const Info: Story = {
+  args: {
+    theme: "info"
+  }
+};
+
+export const Success: Story = {
+  args: {
+    theme: "success"
+  }
+};