LG-5497: chore(time-input) Add TimeInput package

packages/time-input/README.md

@@ -0,0 +1,25 @@
+# Time Input
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/time-input.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/time-input/live-example/)
+
+## Installation
+
+### PNPM
+
+```shell
+pnpm add @leafygreen-ui/time-input
+```
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/time-input
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/time-input
+```

packages/time-input/package.json

@@ -0,0 +1,54 @@
+
+{
+  "name": "@leafygreen-ui/time-input",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Time Input",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "types@<=5.0": "./dist/types/ts4.9/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/umd/index.js"
+    },
+    "./testing": {
+      "types": "./dist/types/testing/index.d.ts",
+      "import": "./dist/esm/testing/index.js",
+      "require": "./dist/umd/testing/index.js"
+    }
+  },
+  "scripts": {
+    "build": "lg-build bundle",
+    "tsc": "lg-build tsc",
+    "docs": "lg-build docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/date-utils": "workspace:^",
+    "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/form-field": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/palette": "workspace:^",
+    "@leafygreen-ui/select": "workspace:^",
+    "@lg-tools/test-harnesses": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "workspace:^"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/time-input",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  }
+}

packages/time-input/src/TimeInput.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryFn } from '@storybook/react';
+
+import { TimeInput } from '.';
+
+const meta: StoryMetaType<typeof TimeInput> = {
+  title: 'Components/Inputs/TimeInput',
+  component: TimeInput,
+  parameters: {
+    default: 'LiveExample',
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof TimeInput> = props => <TimeInput {...props} />;
+
+export const LiveExample = Template.bind({});

packages/time-input/src/TimeInput/TimeInput.spec.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { TimeInput } from '.';
+
+describe('packages/time-input', () => {
+  test('condition', () => {});
+});

packages/time-input/src/TimeInput/TimeInput.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { TimeInputContent } from '../TimeInputContent';
+
+import { TimeInputProps } from './TimeInput.types';
+
+/**
+ * @internal
+ */
+export const TimeInput = ({
+  darkMode: darkModeProp,
+  ...props
+}: TimeInputProps) => {
+  const { darkMode } = useDarkMode(darkModeProp);
+
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      {/* TODO: Add Providers*/}
+      <TimeInputContent {...props} />
+    </LeafyGreenProvider>
+  );
+};
+
+TimeInput.displayName = 'TimeInput';

packages/time-input/src/TimeInput/TimeInput.types.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent } from 'react';
+import omit from 'lodash/omit';
+
+import { FormFieldState } from '@leafygreen-ui/form-field';
+import { DarkModeProps, LgIdProps } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+export const TimeInputState = omit(FormFieldState, 'Valid');
+export type TimeInputState =
+  (typeof TimeInputState)[keyof typeof TimeInputState];
+
+export { Size };
+
+export interface BaseTimeInputProps extends DarkModeProps, LgIdProps {
+  state?: TimeInputState;
+  label?: React.ReactNode;
+  description?: string;
+  size?: Size;
+  disabled?: boolean;
+  className?: string;
+}
+
+export type TimeInputProps = {
+  value?: string;
+  onTimeChange?: (value: string) => void;
+  handleValidation?: (value: string) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & BaseTimeInputProps;

packages/time-input/src/TimeInput/index.ts

@@ -0,0 +1,2 @@
+export { TimeInput } from './TimeInput';
+export { type TimeInputProps } from './TimeInput.types';

packages/time-input/src/TimeInputContent/TimeInputContent.spec.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { TimeInputContent } from '.';
+
+describe('packages/time-input-content', () => {
+  test('condition', () => {});
+});

packages/time-input/src/TimeInputContent/TimeInputContent.styles.ts

@@ -0,0 +1,7 @@
+import { css } from '@leafygreen-ui/emotion';
+
+export const wrapperBaseStyles = css`
+  display: flex;
+  position: relative;
+  z-index: 0; // Establish new stacking context
+`;

packages/time-input/src/TimeInputContent/TimeInputContent.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { FormField, FormFieldInputContainer } from '@leafygreen-ui/form-field';
+
+import { unitOptions } from '../constants';
+import { TimeInputInput } from '../TimeInputInput';
+import { TimeInputSelect } from '../TimeInputSelect';
+import { UnitOption } from '../TimeInputSelect/TimeInputSelect.types';
+
+import { wrapperBaseStyles } from './TimeInputContent.styles';
+import { TimeInputContentProps } from './TimeInputContent.types';
+
+/**
+ * @internal
+ */
+export const TimeInputContent = ({ className }: TimeInputContentProps) => {
+  const [selectUnit, setSelectUnit] = useState<UnitOption>(unitOptions[0]);
+
+  const handleSelectChange = (unit: UnitOption) => {
+    setSelectUnit(unit);
+  };
+
+  return (
+    <div className={className}>
+      <FormField aria-labelledby="temp" label="Time Input">
+        <div className={cx(wrapperBaseStyles)}>
+          <FormFieldInputContainer>
+            <TimeInputInput />
+          </FormFieldInputContainer>
+          <TimeInputSelect
+            unit={selectUnit.displayName}
+            onChange={unit => {
+              handleSelectChange(unit);
+            }}
+          />
+        </div>
+      </FormField>
+    </div>
+  );
+};
+
+TimeInputContent.displayName = 'TimeInputContent';

packages/time-input/src/TimeInputContent/TimeInputContent.types.ts

@@ -0,0 +1,3 @@
+import { TimeInputProps } from '../TimeInput/TimeInput.types';
+
+export type TimeInputContentProps = TimeInputProps;

packages/time-input/src/TimeInputContent/index.ts

@@ -0,0 +1,2 @@
+export { TimeInputContent } from './TimeInputContent';
+export { type TimeInputContentProps } from './TimeInputContent.types';

packages/time-input/src/TimeInputContext/TimeInputContext.spec.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { TimeInputContext } from '.';
+
+describe('packages/time-input-context', () => {
+  test('condition', () => {});
+});

packages/time-input/src/TimeInputContext/TimeInputContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { TimeInputContextProps } from './TimeInputContext.types';
+
+export const TimeInputContext = createContext<TimeInputContextProps>({});

packages/time-input/src/TimeInputContext/TimeInputContext.types.ts

@@ -0,0 +1 @@
+export interface TimeInputContextProps {}

packages/time-input/src/TimeInputContext/index.ts

@@ -0,0 +1,2 @@
+export { TimeInputContext } from './TimeInputContext';
+export { type TimeInputContextProps } from './TimeInputContext.types';

packages/time-input/src/TimeInputInput/TimeInputInput.spec.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { TimeInputInput } from '.';
+
+describe('packages/time-input-input', () => {
+  test('condition', () => {});
+});

packages/time-input/src/TimeInputInput/TimeInputInput.styles.ts

@@ -0,0 +1,8 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+
+export const getBaseStyles = () =>
+  cx(
+    css`
+      min-width: 100px;
+    `,
+  );

packages/time-input/src/TimeInputInput/TimeInputInput.tsx

@@ -0,0 +1,18 @@
+import React, { useRef } from 'react';
+
+import { getBaseStyles } from './TimeInputInput.styles';
+
+/**
+ * @internal
+ */
+export const TimeInputInput = () => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <div ref={containerRef} className={getBaseStyles()}>
+      {/* TODO: Input segments go here */}
+    </div>
+  );
+};
+
+TimeInputInput.displayName = 'TimeInputInput';

packages/time-input/src/TimeInputInput/TimeInputInput.types.ts

@@ -0,0 +1,3 @@
+export interface TimeInputInputProps {
+  className?: string;
+}

packages/time-input/src/TimeInputInput/index.ts

@@ -0,0 +1,2 @@
+export { TimeInputInput } from './TimeInputInput';
+export { type TimeInputInputProps } from './TimeInputInput.types';

packages/time-input/src/TimeInputSelect/TimeInputSelect.spec.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { TimeInputSelect } from '.';
+
+describe('packages/time-input-select', () => {
+  test('condition', () => {});
+});

packages/time-input/src/TimeInputSelect/TimeInputSelect.styles.ts

@@ -0,0 +1,38 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { color, fontWeights, typeScales } from '@leafygreen-ui/tokens';
+
+export const wrapperBaseStyles = css`
+  margin-left: -1px;
+
+  // TODO: temp
+  min-width: 70px;
+
+  &:hover,
+  &:focus-within {
+    z-index: 2;
+  }
+`;
+
+export const getSelectDisabledStyles = (theme: Theme) => css`
+  button {
+    background-color: ${color[theme].background.disabled.default};
+    border-color: ${color[theme].border.disabled.default};
+  }
+`;
+
+export const selectStyles = css`
+  > div {
+    display: flex;
+  }
+
+  button {
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    font-weight: ${fontWeights.medium};
+  }
+`;