@kroo-web/design-system 1.0.0 → 1.0.2

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowSize(): {
+    width: number;
+    height?: number | undefined;
+};

package/dist/hooks/useWindowSize.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+export function useWindowSize() {
+    var _a = useState({
+        width: 600,
+        height: undefined,
+    }), windowSize = _a[0], setWindowSize = _a[1];
+    useEffect(function () {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth || 600,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener('resize', handleResize, { passive: true });
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}

package/dist/main.d.ts

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

package/{src/index.ts → dist/main.js}

@@ -1,3 +1,2 @@
-
 // ? All of the Product components
 export * from "./product";

package/dist/product/components/TextField/index.d.ts

@@ -0,0 +1,24 @@
+import React, { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
+import { FieldValues, Path, UseFormRegister } from 'react-hook-form';
+export type TTextFieldProps<T extends FieldValues> = {
+    id: string;
+    label: string;
+    name: Path<T>;
+    disabled?: boolean;
+    helper?: {
+        message: ReactNode | string;
+    };
+    error?: {
+        message: ReactNode | string;
+    };
+    /** React Hook form requirement if you dont pass it in the component will act like a normal uncontrolled input */
+    register?: UseFormRegister<T>;
+    type?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['type'];
+    prefix?: string | ReactNode;
+    suffix?: string | ReactNode;
+    value?: string;
+    className?: string;
+    rightContent?: ReactNode | string;
+    leftContent?: ReactNode | string;
+};
+export declare const TextField: <T extends FieldValues>({ id, label, helper, error, register, name, type, prefix, suffix, disabled, value, className, rightContent, leftContent, }: TTextFieldProps<T>) => React.JSX.Element;

package/dist/product/components/TextField/index.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState, } from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import { useWindowSize } from '../../../hooks/useWindowSize';
+// @ts-ignore
+import styles from "./textField.module.css";
+export var TextField = function (_a) {
+    var id = _a.id, label = _a.label, helper = _a.helper, error = _a.error, register = _a.register, name = _a.name, type = _a.type, prefix = _a.prefix, suffix = _a.suffix, disabled = _a.disabled, value = _a.value, className = _a.className, rightContent = _a.rightContent, leftContent = _a.leftContent;
+    var width = useWindowSize().width;
+    var _b = useState(value || false), hasValue = _b[0], setHasValue = _b[1];
+    var isDesktop = width > 768;
+    var variants = {
+        focused: {
+            fontSize: isDesktop ? '1rem' : '0.875rem',
+            top: '1rem',
+        },
+        notFocused: {
+            transform: 'translateY(-50%)',
+            fontSize: isDesktop ? '1.25rem' : '1.125rem',
+            top: '50%',
+        },
+    };
+    return (React.createElement("div", { className: styles.outer },
+        React.createElement("div", { className: clsx(styles.container, error && styles['container--error']) },
+            React.createElement(motion.label, { className: styles.label, initial: "notFocused", variants: variants, htmlFor: "input-".concat(id), animate: hasValue ? 'focused' : 'notFocused' },
+                prefix && React.createElement("span", null, prefix),
+                " ",
+                label,
+                ' ',
+                suffix && React.createElement("span", null, suffix)),
+            React.createElement("input", __assign({ className: clsx(styles["input--".concat(className)], styles.input), id: "input-".concat(id), type: type, "aria-describedby": "error-".concat(id), disabled: disabled }, (register && register(name),
+                {
+                    onFocus: function () {
+                        setHasValue(true);
+                    },
+                    onBlur: function (e) {
+                        setHasValue(!!e.target.value);
+                    },
+                }), { value: value })),
+            React.createElement("div", null,
+                rightContent && (React.createElement("div", { className: styles.rightContent }, rightContent)),
+                leftContent && (React.createElement("div", { className: styles.leftContent }, leftContent)))),
+        React.createElement("div", { className: styles.inputDescription },
+            helper && (React.createElement("span", { id: "feedback-".concat(id), className: styles.helper }, helper.message)),
+            error && (React.createElement("span", { id: "error-".concat(id), className: styles.error }, error.message)))));
+};

package/dist/product/components/TextField/textField.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react';
+import { TextField } from '.';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TTextFieldProps<import("react-hook-form").FieldValues>>;
+export default _default;
+type Story = StoryObj<typeof TextField>;
+export declare const Default: Story;
+export declare const Error: Story;
+export declare const HelperText: Story;
+export declare const RightContent: Story;
+export declare const LeftContent: Story;

package/dist/product/components/TextField/textField.stories.js

@@ -0,0 +1,56 @@
+import { TextField } from '.';
+export default {
+    title: 'Design System Product/C1 - TextField',
+    component: TextField,
+    parameters: {},
+};
+export var Default = {
+    render: function () { return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { id: "default-no-value", label: "Default", name: "example" }),
+        React.createElement(TextField, { className: "hover", id: "default2-no-value", label: "Hovered", name: "example2" }),
+        React.createElement(TextField, { className: "focus", id: "default3-no-value", label: "Focused", name: "example3" }),
+        React.createElement(TextField, { id: "default-value", label: "Default", name: "example", value: "Example text" }),
+        React.createElement(TextField, { className: "hover", id: "default2-value", label: "Hovered", name: "example2", value: "Example text" }),
+        React.createElement(TextField, { className: "focus", id: "default3-value", label: "Focused", name: "example3", value: "Example text" }),
+        React.createElement(TextField, { id: "default4-value", label: "Disabled ", name: "example4", disabled: true }))); },
+};
+export var Error = {
+    render: function () { return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { id: "error", label: "Default", name: "error1", error: { message: 'This is an error' } }),
+        React.createElement(TextField, { className: "hover", id: "error2", label: "Hovered", name: "error2", error: { message: 'This is an error' } }),
+        React.createElement(TextField, { className: "focus", id: "error3", label: "Focused", name: "error3", error: { message: 'This is an error' } }),
+        React.createElement(TextField, { id: "error4-value", label: "Default", name: "error4-value", value: "Example text", error: { message: 'This is an error' } }),
+        React.createElement(TextField, { className: "hover", id: "error5-value", label: "Hovered", name: "error5-value", value: "Example text", error: { message: 'This is an error' } }),
+        React.createElement(TextField, { className: "focus", id: "error5-value", label: "Focused", name: "error5-value", value: "Example text", error: { message: 'This is an error' } }),
+        React.createElement(TextField, { id: "error4", label: "Disabled", name: "error4", error: { message: 'This is an error' }, disabled: true }))); },
+};
+export var HelperText = {
+    render: function () { return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { id: "helper", label: "Default", name: "helper1", helper: { message: 'This is helper text' } }),
+        React.createElement(TextField, { className: "hover", id: "helper2", label: "Hovered", name: "helper2", helper: { message: 'This is helper text' } }),
+        React.createElement(TextField, { className: "focus", id: "helper3", label: "Focused", name: "helper3", helper: { message: 'This is helper text' } }),
+        React.createElement(TextField, { id: "helper4-text", label: "Default", name: "helper4-text", helper: { message: 'This is helper text' }, value: "Example text" }),
+        React.createElement(TextField, { className: "hover", id: "helper5-text", label: "Hovered", name: "helper5-text", helper: { message: 'This is helper text' }, value: "Example text" }),
+        React.createElement(TextField, { className: "focus", id: "helper6-text", label: "Focused", name: "helper6-text", helper: { message: 'This is helper text' }, value: "Example text" }),
+        React.createElement(TextField, { id: "helper4", label: "Disabled", name: "helper4", helper: { message: 'This is helper text' }, disabled: true }))); },
+};
+export var RightContent = {
+    render: function () { return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { id: "right", label: "Default", name: "right1", rightContent: React.createElement("button", null, "Example") }),
+        React.createElement(TextField, { className: "hover", id: "right2", label: "Hovered", name: "right2", rightContent: React.createElement("button", null, "Example") }),
+        React.createElement(TextField, { className: "focus", id: "right3", label: "Focused", name: "right3", rightContent: React.createElement("button", null, "Example") }),
+        React.createElement(TextField, { id: "right4-text", label: "Default", name: "right4-text", value: "Example text", rightContent: React.createElement("button", null, "Example") }),
+        React.createElement(TextField, { className: "hover", id: "right5-text", label: "Hovered", name: "right5-text", value: "Example text", rightContent: React.createElement("button", null, "Example") }),
+        React.createElement(TextField, { className: "focus", id: "right6-text", label: "Focused", name: "right6-text", value: "Example text", rightContent: React.createElement("button", null, "Example") }),
+        React.createElement(TextField, { id: "right4", label: "Disabled", name: "right4", rightContent: React.createElement("button", null, "Example"), disabled: true }))); },
+};
+export var LeftContent = {
+    render: function () { return (React.createElement(React.Fragment, null,
+        React.createElement("h1", null, "No Designs"),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(TextField, { id: "left", label: "Default", name: "left1", leftContent: "Example" }),
+        React.createElement(TextField, { className: "hover", id: "left2", label: "Hovered", name: "left2", leftContent: "Example" }),
+        React.createElement(TextField, { className: "focus", id: "left3", label: "Focused", name: "left3", leftContent: "Example" }),
+        React.createElement(TextField, { id: "left4", label: "Disabled", name: "left4", leftContent: "Example", disabled: true }))); },
+};

package/dist/product/components/TextField/textField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/product/components/TextField/textField.test.js

@@ -0,0 +1,85 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { TextField } from '.';
+describe('<TextField />', function () {
+    it('should render', function () {
+        var component = render(React.createElement(TextField, { id: "example-TextField", label: "example-TextField", name: "example" }));
+        expect(component).toBeTruthy();
+    });
+    it('should show the helper text when supplied to the component', function () {
+        var component = render(React.createElement(TextField, { helper: { message: 'Helper text' }, id: "example-TextField", label: "example-TextField", name: "example" }));
+        expect(component.getByText('Helper text')).toBeTruthy();
+    });
+    it('should show the error text when supplied to the component', function () {
+        var component = render(React.createElement(TextField, { error: { message: 'Error text' }, id: "example-TextField", label: "example-TextField", name: "example" }));
+        expect(component.getByText('Error text')).toBeTruthy();
+    });
+    it('should show the prefix when supplied to the component', function () {
+        var component = render(React.createElement(TextField, { id: "example-TextField", label: "example-TextField", name: "example", prefix: "Prefix" }));
+        expect(component.getByText('Prefix')).toBeTruthy();
+    });
+    it('should show the suffix when supplied to the component', function () {
+        var component = render(React.createElement(TextField, { id: "example-TextField", label: "example-TextField", name: "example", suffix: "Suffix" }));
+        expect(component.getByText('Suffix')).toBeTruthy();
+    });
+    it('should show the label when supplied to the component', function () {
+        var component = render(React.createElement(TextField, { id: "example-TextField", label: "example-TextField", name: "example" }));
+        expect(component.getByText('example-TextField')).toBeTruthy();
+    });
+    it('Should show an error message if one is present', function () {
+        var component = render(React.createElement(TextField, { error: { message: 'Error text' }, id: "example-TextField", label: "example-TextField", name: "example" }));
+        expect(component.getByText('Error text')).toBeTruthy();
+    });
+    it('should be able to input text into the input field', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    component = render(React.createElement(TextField, { id: "example-TextField", label: "example-TextField", name: "example" }));
+                    input = component.getByLabelText('example-TextField');
+                    return [4 /*yield*/, userEvent.type(input, 'Hello, World!')];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveValue('Hello, World!');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/{src/product/index.ts → dist/product/index.d.ts}

@@ -1,3 +1,2 @@
 import { TextField } from "./components/TextField";
-
 export { TextField };

package/dist/product/index.js

@@ -0,0 +1,2 @@
+import { TextField } from "./components/TextField";
+export { TextField };

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@kroo-web/design-system",
-  "version": "1.0.0",
-  "description": "",
-  "main": "src/index.ts",
+  "version": "1.0.2",
+  "description": "Web design system for Kroo including the components for the marketing site and the product side.",
+  "main": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "module": "./dist/main.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "deploy": "npm publish --access public"
+    "copy-files": "copyfiles -u 1 \"src/**/*.css\" \"src/**/*.svg\" \"src/**/*.json\" dist/",
+    "deploy": "npm run copy-files && npm publish --access public"
   },
   "keywords": [],
   "author": "",
@@ -21,6 +27,7 @@
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
     "@storybook/test": "^7.6.17",
+    "copyfiles": "^2.4.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -30,6 +37,7 @@
     "@storybook/addon-docs": "^7.6.17",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.8",
-    "react-hook-form": "^7.51.0"
+    "react-hook-form": "^7.51.0",
+    "typescript": "^5.4.2"
   }
 }

package/.storybook/main.js

@@ -1,19 +0,0 @@
-/** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-    "@storybook/addon-docs"
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,8 +0,0 @@
-<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=Brygada+1918:ital,wght@0,400;0,500;0,700;1,500&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-  rel="stylesheet"
-  crossorigin="anonymous"
-/>
-

package/.storybook/preview.js

@@ -1,21 +0,0 @@
-/** @type { import('@storybook/react').Preview } */
-import "../src/styles/global.css";
-const preview = {
-  parameters: {
-    docs: {
-      toc: {
-        headingSelector: "h2, h3, h4, h5, h6",
-        title: "Contents"
-      },
-    },
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/src/hooks/useWindowSize.ts

@@ -1,29 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useWindowSize() {
-  const [windowSize, setWindowSize] = useState<{
-    width: number;
-    height?: number;
-  }>({
-    width: 600,
-    height: undefined,
-  });
-
-  useEffect(() => {
-    // Handler to call on window resize
-    function handleResize() {
-      // Set window width/height to state
-      setWindowSize({
-        width: window.innerWidth || 600,
-        height: window.innerHeight,
-      });
-    }
-    // Add event listener
-    window.addEventListener('resize', handleResize, { passive: true });
-    // Call handler right away so state gets updated with initial window size
-    handleResize();
-    // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize);
-  }, []); // Empty array ensures that effect is only run on mount
-  return windowSize;
-}

package/src/product/components/TextField/index.tsx

@@ -1,126 +0,0 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  ReactNode,
-  useState,
-} from 'react';
-import { motion } from 'framer-motion';
-import clsx from 'clsx';
-import { FieldValues, Path, UseFormRegister } from 'react-hook-form';
-import { useWindowSize } from '../../../hooks/useWindowSize';
-import styles from "./textField.module.css"
-
-export type TTextFieldProps<T extends FieldValues> = {
-  id: string;
-  label: string;
-  name: Path<T>;
-  disabled?: boolean;
-  helper?: {
-    message: ReactNode | string;
-  };
-  error?: {
-    message: ReactNode | string;
-  };
-  /** React Hook form requirement if you dont pass it in the component will act like a normal uncontrolled input */
-  register?: UseFormRegister<T>;
-  type?: DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  >['type'];
-  prefix?: string | ReactNode;
-  suffix?: string | ReactNode;
-  value?: string;
-  className?: string;
-  rightContent?: ReactNode | string;
-  leftContent?: ReactNode | string;
-};
-
-export const TextField = <T extends FieldValues>({
-  id,
-  label,
-  helper,
-  error,
-  register,
-  name,
-  type,
-  prefix,
-  suffix,
-  disabled,
-  value,
-  className,
-  rightContent,
-  leftContent,
-}: TTextFieldProps<T>) => {
-  const { width } = useWindowSize();
-  const [hasValue, setHasValue] = useState(value || false);
-  const isDesktop = width > 768;
-
-  const variants = {
-    focused: {
-      fontSize: isDesktop ? '1rem' : '0.875rem',
-      top: '1rem',
-    },
-    notFocused: {
-      transform: 'translateY(-50%)',
-      fontSize: isDesktop ? '1.25rem' : '1.125rem',
-      top: '50%',
-    },
-  };
-
-  return (
-    <div className={styles.outer}>
-      <div
-        className={clsx(styles.container, error && styles['container--error'])}
-      >
-        <motion.label
-          className={styles.label}
-          initial="notFocused"
-          variants={variants}
-          htmlFor={`input-${id}`}
-          animate={hasValue ? 'focused' : 'notFocused'}
-        >
-          {prefix && <span>{prefix}</span>} {label}{' '}
-          {suffix && <span>{suffix}</span>}
-        </motion.label>
-        <input
-          className={clsx(styles[`input--${className}`], styles.input)}
-          id={`input-${id}`}
-          type={type}
-          aria-describedby={`error-${id}`}
-          disabled={disabled}
-          {...(register && register(name),
-          {
-            onFocus: () => {
-              setHasValue(true);
-            },
-
-            onBlur: (e) => {
-              setHasValue(!!e.target.value);
-            },
-          })}
-          value={value}
-        />
-        <div>
-          {rightContent && (
-            <div className={styles.rightContent}>{rightContent}</div>
-          )}
-          {leftContent && (
-            <div className={styles.leftContent}>{leftContent}</div>
-          )}
-        </div>
-      </div>
-      <div className={styles.inputDescription}>
-        {helper && (
-          <span id={`feedback-${id}`} className={styles.helper}>
-            {helper.message}
-          </span>
-        )}
-        {error && (
-          <span id={`error-${id}`} className={styles.error}>
-            {error.message}
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/product/components/TextField/textField.stories.mdx

@@ -1,113 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { TextField } from '.'
-
-
-<Meta title="Design System Product/C1 - TextField / Documentation" /> 
-
-# TextField
-
-TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.
-
-
-## Example
-
-<Canvas>
-  <TextField
-    label="Label" 
-  />
-</Canvas>
-
-
-### Usage
-
-In the Nextjs repo and this component is expected to be used with react-hook-form and accepts the 
-register prop from useForm to hook it upto the form.
-
-However, it can be used as a standalone component as well without registering in a HTML form if needed.
-
-```tsx
-import { useForm } from 'react-hook-form'
-import { TextField } from 'design-system-product'
-
-const { register, handleSubmit } = useForm()
-
-const onSubmit = (data) => {
-  console.log(data)
-}
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <TextField
-        label="Label"
-        {...register('example')}
-      />
-    </form>
-  )
-  ```
-
-  ### Labelling 
-
-  The label prop is required and is used to display the label for the input field. A label is required for accessiblity and should
-  always be provided.
-
-  <Canvas>
-    <TextField
-    label="Label" />
-  </Canvas>
-
-
-
-
-  ### Required Fields
-
-  Currently we do not support the required prop with the TextField component due to currently our forms assumes that everything 
-  is required and we have no reason to ask for everything to be required. Instead please use the suffix prop to add an (optional) tag
-  to the label.
-
-<Canvas>
-  <TextField
-  label="Label"
-  suffix="(optional)" />
-</Canvas>
-
-
-  ## Visual Options
-  
-  ### Validation 
-  Validation will be handled by react-hook-form or by passing an error with a message to the error prop.
-  The error prop will display an error message below the input field and change the border of the input field to red.
-
-  <Canvas>
-    <TextField
-    label="Label"
-    error="Error Message" />
-  </Canvas>
-
- 
-
-
-  ### Read Only
-    The ReadOnly prop is used to make the input field read only. This is useful when you want to display and copy the value of the input field but not allow the user to edit it. Use this instead of the disabled state.
-
-  <Canvas>
-    <TextField
-    value="Read Only Value"
-    label="Label"
-    readOnly />
-  </Canvas>
-
- 
-
-    ### Disabled 
-    The disabled prop is used to disable the input field. This is useful when you want to prevent the user from editing the input field. Use this instead of the readOnly state.
-
-    <Canvas>
-      <TextField
-      value="Example Value"
-      label="Label"
-      disabled />
-    </Canvas>
-
-
-
-

package/src/product/components/TextField/textField.stories.tsx

@@ -1,263 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { TextField } from '.';
-
-export default {
-  title: 'Design System Product/C1 - TextField',
-  component: TextField,
-  parameters: {},
-} as Meta<typeof TextField>;
-
-type Story = StoryObj<typeof TextField>;
-
-export const Default: Story = {
-  render: () => (
-    <>
-      <TextField id="default-no-value" label="Default" name="example" />
-      <TextField
-        className="hover"
-        id="default2-no-value"
-        label="Hovered"
-        name="example2"
-      />
-      <TextField
-        className="focus"
-        id="default3-no-value"
-        label="Focused"
-        name="example3"
-      />
-
-      <TextField
-        id="default-value"
-        label="Default"
-        name="example"
-        value="Example text"
-      />
-      <TextField
-        className="hover"
-        id="default2-value"
-        label="Hovered"
-        name="example2"
-        value="Example text"
-      />
-      <TextField
-        className="focus"
-        id="default3-value"
-        label="Focused"
-        name="example3"
-        value="Example text"
-      />
-      <TextField
-        id="default4-value"
-        label="Disabled "
-        name="example4"
-        disabled
-      />
-    </>
-  ),
-};
-
-export const Error: Story = {
-  render: () => (
-    <>
-      <TextField
-        id="error"
-        label="Default"
-        name="error1"
-        error={{ message: 'This is an error' }}
-      />
-      <TextField
-        className="hover"
-        id="error2"
-        label="Hovered"
-        name="error2"
-        error={{ message: 'This is an error' }}
-      />
-      <TextField
-        className="focus"
-        id="error3"
-        label="Focused"
-        name="error3"
-        error={{ message: 'This is an error' }}
-      />
-      <TextField
-        id="error4-value"
-        label="Default"
-        name="error4-value"
-        value="Example text"
-        error={{ message: 'This is an error' }}
-      />
-      <TextField
-        className="hover"
-        id="error5-value"
-        label="Hovered"
-        name="error5-value"
-        value="Example text"
-        error={{ message: 'This is an error' }}
-      />
-      <TextField
-        className="focus"
-        id="error5-value"
-        label="Focused"
-        name="error5-value"
-        value="Example text"
-        error={{ message: 'This is an error' }}
-      />
-      <TextField
-        id="error4"
-        label="Disabled"
-        name="error4"
-        error={{ message: 'This is an error' }}
-        disabled
-      />
-    </>
-  ),
-};
-
-export const HelperText: Story = {
-  render: () => (
-    <>
-      <TextField
-        id="helper"
-        label="Default"
-        name="helper1"
-        helper={{ message: 'This is helper text' }}
-      />
-      <TextField
-        className="hover"
-        id="helper2"
-        label="Hovered"
-        name="helper2"
-        helper={{ message: 'This is helper text' }}
-      />
-      <TextField
-        className="focus"
-        id="helper3"
-        label="Focused"
-        name="helper3"
-        helper={{ message: 'This is helper text' }}
-      />
-      <TextField
-        id="helper4-text"
-        label="Default"
-        name="helper4-text"
-        helper={{ message: 'This is helper text' }}
-        value="Example text"
-      />
-      <TextField
-        className="hover"
-        id="helper5-text"
-        label="Hovered"
-        name="helper5-text"
-        helper={{ message: 'This is helper text' }}
-        value="Example text"
-      />
-      <TextField
-        className="focus"
-        id="helper6-text"
-        label="Focused"
-        name="helper6-text"
-        helper={{ message: 'This is helper text' }}
-        value="Example text"
-      />
-      <TextField
-        id="helper4"
-        label="Disabled"
-        name="helper4"
-        helper={{ message: 'This is helper text' }}
-        disabled
-      />
-    </>
-  ),
-};
-
-export const RightContent: Story = {
-  render: () => (
-    <>
-      <TextField
-        id="right"
-        label="Default"
-        name="right1"
-        rightContent={<button>Example</button>}
-      />
-      <TextField
-        className="hover"
-        id="right2"
-        label="Hovered"
-        name="right2"
-        rightContent={<button>Example</button>}
-      />
-      <TextField
-        className="focus"
-        id="right3"
-        label="Focused"
-        name="right3"
-        rightContent={<button>Example</button>}
-      />
-      <TextField
-        id="right4-text"
-        label="Default"
-        name="right4-text"
-        value="Example text"
-        rightContent={<button>Example</button>}
-      />
-      <TextField
-        className="hover"
-        id="right5-text"
-        label="Hovered"
-        name="right5-text"
-        value="Example text"
-        rightContent={<button>Example</button>}
-      />
-      <TextField
-        className="focus"
-        id="right6-text"
-        label="Focused"
-        name="right6-text"
-        value="Example text"
-        rightContent={<button>Example</button>}
-      />
-
-      <TextField
-        id="right4"
-        label="Disabled"
-        name="right4"
-        rightContent={<button>Example</button>}
-        disabled
-      />
-    </>
-  ),
-};
-
-export const LeftContent: Story = {
-  render: () => (
-    <>
-      <h1>No Designs</h1>
-      <br />
-      <br />
-
-      <TextField id="left" label="Default" name="left1" leftContent="Example" />
-      <TextField
-        className="hover"
-        id="left2"
-        label="Hovered"
-        name="left2"
-        leftContent="Example"
-      />
-      <TextField
-        className="focus"
-        id="left3"
-        label="Focused"
-        name="left3"
-        leftContent="Example"
-      />
-      <TextField
-        id="left4"
-        label="Disabled"
-        name="left4"
-        leftContent="Example"
-        disabled
-      />
-    </>
-  ),
-};

package/src/product/components/TextField/textField.test.tsx

@@ -1,111 +0,0 @@
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import userEvent from '@testing-library/user-event';
-import { TextField } from '.';
-
-describe('<TextField />', () => {
-  it('should render', () => {
-    const component = render(
-      <TextField
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-      />,
-    );
-
-    expect(component).toBeTruthy();
-  });
-
-  it('should show the helper text when supplied to the component', () => {
-    const component = render(
-      <TextField
-        helper={{ message: 'Helper text' }}
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-      />,
-    );
-
-    expect(component.getByText('Helper text')).toBeTruthy();
-  });
-
-  it('should show the error text when supplied to the component', () => {
-    const component = render(
-      <TextField
-        error={{ message: 'Error text' }}
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-      />,
-    );
-
-    expect(component.getByText('Error text')).toBeTruthy();
-  });
-
-  it('should show the prefix when supplied to the component', () => {
-    const component = render(
-      <TextField
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-        prefix="Prefix"
-      />,
-    );
-
-    expect(component.getByText('Prefix')).toBeTruthy();
-  });
-
-  it('should show the suffix when supplied to the component', () => {
-    const component = render(
-      <TextField
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-        suffix="Suffix"
-      />,
-    );
-
-    expect(component.getByText('Suffix')).toBeTruthy();
-  });
-
-  it('should show the label when supplied to the component', () => {
-    const component = render(
-      <TextField
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-      />,
-    );
-
-    expect(component.getByText('example-TextField')).toBeTruthy();
-  });
-
-  it('Should show an error message if one is present', () => {
-    const component = render(
-      <TextField
-        error={{ message: 'Error text' }}
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-      />,
-    );
-
-    expect(component.getByText('Error text')).toBeTruthy();
-  });
-
-  it('should be able to input text into the input field', async () => {
-    const component = render(
-      <TextField
-        id="example-TextField"
-        label="example-TextField"
-        name="example"
-      />,
-    );
-
-    const input = component.getByLabelText('example-TextField');
-
-    await userEvent.type(input, 'Hello, World!');
-
-    expect(input).toHaveValue('Hello, World!');
-  });
-});

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "@hooks/*": ["./src/hooks/*"]
-    },
-    "forceConsistentCasingInFileNames": true,
-  },
- 
-}