@kroo-web/design-system 1.0.0

package/.storybook/main.js

@@ -0,0 +1,19 @@
+/** @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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,21 @@
+/** @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/README.MD

@@ -0,0 +1,17 @@
+# Kroo Web Component Lib / Design system
+
+## Usage
+
+### Install
+
+```bash
+  npm install @kroo-web/design-system -S
+```
+or
+```bash
+  yarn add @kroo-web/design-system -S
+```
+or
+```bash
+  pnpm add @kroo-web/design-system -S
+```

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@kroo-web/design-system",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy": "npm publish --access public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.17"
+  },
+  "dependencies": {
+    "@storybook/addon-docs": "^7.6.17",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.0.8",
+    "react-hook-form": "^7.51.0"
+  }
+}

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,29 @@
+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/index.ts

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

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

@@ -0,0 +1,126 @@
+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.module.css

@@ -0,0 +1,115 @@
+.outer {
+  margin-bottom: 1rem;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  position: absolute;
+  z-index: 3;
+  left: 1.25rem;
+  color: #666666;
+  pointer-events: none;
+}
+
+.input {
+  all: unset;
+  background: white;
+  padding: 1rem 1.25rem;
+  padding-top: 1.70rem;
+  border-radius: var(--product-radius-2);
+  z-index: 1;
+  font-size: 1.125rem;
+  caret-color: var(--primary-love-pink-100);
+}
+
+.inputDescription {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  padding-left: 1.5rem;
+}
+
+.container--error > label {
+  color: var(--product-error);
+}
+
+.container--error > input {
+  border: var(--product-border-width-1) solid var(--product-error);
+}
+
+.error {
+  color: var(--product-error);
+}
+
+.helper {
+  color: rgba(var(--grey-60-rgb));
+}
+
+.rightContent {
+  position: absolute;
+  right: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.leftContent {
+  position: absolute;
+  left: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+
+.input:focus {
+  border: var(--product-border-width-1) solid rgba(var(--primary-dark-rgb));
+}
+
+.input--focus {
+  border: var(--product-border-width-1) solid rgba(var(--primary-dark-rgb));
+}
+
+.input:hover {
+  outline: var(--product-border-width-1) solid #E6E6E6;
+}
+
+.input--hover {
+  outline: var(--product-border-width-1) solid #E6E6E6;
+}
+
+.input:disabled {
+  background: #E6E6E6;
+  cursor: not-allowed;
+}
+
+.input:disabled:hover {
+  outline: none;
+}
+
+
+
+ @media (min-width: 768px) {
+  .input {
+    padding: 1.5rem;
+    padding-top: 1.8rem;
+    font-size: 1.25rem;
+  }
+
+  .label {
+    left: 1.5rem;
+  }
+}
+
+
+
+
+
+
+

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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,263 @@
+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

@@ -0,0 +1,111 @@
+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/src/product/index.ts

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

package/src/product/styles/tokens/variables.css

@@ -0,0 +1,36 @@
+
+
+/* Product Variables */
+
+:root {
+  /* Colors */
+  --product-error: rgba(var(--system-red-rgb));
+
+  /* Spacing */
+  --product-spacing-1: 0.25rem;
+  --product-spacing-2: 0.50rem;
+  --product-spacing-3: 0.75rem;
+  --product-spacing-4: 1rem;
+  --product-spacing-5: 1.25rem;
+  --product-spacing-6: 1.50rem;
+  --product-spacing-7: 2rem;
+  --product-spacing-8: 2.50rem;
+  --product-spacing-9: 3rem;
+  --product-spacing-10: 3.50rem;
+  --product-spacing-11: 4rem;
+
+  /* Border Radius  */
+  --product-radius-1: 0.25rem;
+  --product-radius-2: 0.50rem;
+  --product-radius-3: 0.75rem;
+  --product-radius-4: 1rem;
+
+  /* Border Width */
+  --product-border-width-1: 2px;
+
+
+  /* Component Specific Variables */
+
+  --product-text-field-spacing: 0.625rem;
+  --product-radio-select-spacing: 1.25rem;
+}

package/src/styles/global.css

@@ -0,0 +1,20 @@
+
+/* Import all tokens from each section of Design System */
+@import "./tokens/variables.css";
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-primary);
+}
+
+.sr-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0); 
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap; 
+  width: 1px;
+}

package/src/styles/tokens/variables.css

@@ -0,0 +1,15 @@
+/* PRODUCT TOKENS */
+@import url("../../product/styles/tokens/variables.css");
+
+/* MARKETING TOKENS */
+
+@import url("../../marketing/styles/tokens/variables.css");
+
+/* GLOBAL TOKENS */
+
+:root {
+  --font-primary: "Inter", sans-serif;
+  --font-secondary: "Brygada 1918", sans-serif;
+}
+
+

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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,
+  },
+ 
+}