feat: input width (#85)

.npmignore

@@ -1,7 +1,6 @@
 *
 !package.json
 !dist/**/*
-!src/**/*
 !LICENSE
 !README.md
 !*tailwind.config.ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e-krebs/react-library",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "A collection of components to be reused across personal projects",
   "repository": "github.com/e-krebs/react-library",
   "author": "Emmanuel Krebs <[email protected]>",

src/Inputs/NumberInput.tsx

@@ -10,7 +10,7 @@ import {
   Text,
 } from 'react-aria-components';
 
-import { InputBorder, InputFlow } from '../types';
+import type { InputBorder, InputFlow, InputWidth } from '../types';
 import { Icon } from '../assets/Icon';
 
 interface NumberInputProps extends NumberFieldProps, RefAttributes<HTMLDivElement> {
@@ -20,6 +20,7 @@ interface NumberInputProps extends NumberFieldProps, RefAttributes<HTMLDivElemen
   errorMessage?: string;
   flow?: InputFlow;
   border?: InputBorder;
+  width?: InputWidth;
 }
 
 interface NumberInputButtonProps
@@ -50,13 +51,15 @@ export const NumberInput = ({
   label,
   flow = 'col',
   border = 'bottom',
+  width,
   description,
   errorMessage,
   ...numberFieldProps
 }: NumberInputProps) => (
   <NumberField
     data-flow={flow}
     data-border={border}
+    data-width={width}
     className="group flex flex-col data-[flow=row]:flex-row
       data-[flow=row]:space-x-2 data-[flow=col]:w-fit"
     {...numberFieldProps}
@@ -88,6 +91,11 @@ export const NumberInput = ({
       </NumberInputButton>
       <Input
         className="px-3 py-1
+            group-data-[width=xs]:w-12
+            group-data-[width=s]:w-20
+            group-data-[width=m]:w-28
+            group-data-[width=l]:w-44
+            group-data-[width=xl]:w-60
             border-x rounded-none
             bg-th-light
             border-th-bg

src/Inputs/TextInput.tsx

@@ -1,7 +1,7 @@
 import { FC, type RefAttributes } from 'react';
 import { Input, Label, Text, TextField, type TextFieldProps } from 'react-aria-components';
 
-import type { InputBorder, InputFlow } from '../types';
+import type { InputBorder, InputFlow, InputWidth } from '../types';
 
 export interface TextInputProps extends TextFieldProps, RefAttributes<HTMLDivElement> {
   label?: string;
@@ -10,12 +10,14 @@ export interface TextInputProps extends TextFieldProps, RefAttributes<HTMLDivEle
   errorMessage?: string;
   flow?: InputFlow;
   border?: InputBorder;
+  width?: InputWidth;
 }
 
 export const TextInput: FC<TextInputProps> = ({
   label,
   flow = 'col',
   border = 'bottom',
+  width,
   description,
   errorMessage,
   ...textFieldProps
@@ -27,13 +29,19 @@ export const TextInput: FC<TextInputProps> = ({
     {...textFieldProps}
     data-flow={flow}
     data-border={border}
+    data-width={width}
     isInvalid={textFieldProps.isInvalid || !!errorMessage}
   >
     <Label className="leading-th group-invalid:selection:bg-error">{label}</Label>
     <Input
       // rounded-none is necessary for iPad
       className="
         bg-th-light p-1
+        group-data-[width=xs]:w-12
+        group-data-[width=s]:w-20
+        group-data-[width=m]:w-28
+        group-data-[width=l]:w-44
+        group-data-[width=xl]:w-60
         disabled:cursor-not-allowed disabled:opacity-disabled
         group-data-[border=rounded]:border
         group-data-[border=bottom]:border-b

src/Inputs/inputs-uncontrolled.stories.tsx

@@ -2,7 +2,7 @@ import type { Story } from '@ladle/react';
 import { Section } from 'utils';
 
 import { TextInput } from './TextInput';
-import type { InputBorder, InputFlow } from '../types';
+import type { InputBorder, InputFlow, InputWidth } from '../types';
 
 export default {
   title: 'Components > Text Input',
@@ -15,6 +15,7 @@ interface StoryParams {
   error?: string;
   border?: InputBorder;
   flow?: InputFlow;
+  width?: InputWidth;
 }
 
 export const CheckboxStory: Story<StoryParams> = ({
@@ -24,6 +25,7 @@ export const CheckboxStory: Story<StoryParams> = ({
   error,
   border,
   flow,
+  width,
 }) => (
   <Section title="Text Input: Basics" showInfoControls>
     <TextInput
@@ -33,6 +35,7 @@ export const CheckboxStory: Story<StoryParams> = ({
       errorMessage={error}
       border={border}
       flow={flow}
+      width={width}
     />
   </Section>
 );
@@ -54,4 +57,9 @@ CheckboxStory.argTypes = {
     control: { type: 'radio' },
     defaultValue: 'col',
   },
+  width: {
+    options: ['xs', 's', 'm', 'l', 'xl', undefined],
+    control: { type: 'select' },
+    defaultValue: undefined,
+  },
 };

src/Inputs/number-input-uncontrolled.stories.tsx

@@ -2,7 +2,7 @@ import type { Story } from '@ladle/react';
 import { Section } from 'utils';
 
 import { NumberInput } from './NumberInput';
-import type { InputBorder, InputFlow } from '../types';
+import type { InputBorder, InputFlow, InputWidth } from '../types';
 
 export default {
   title: 'Components > Number Input',
@@ -15,9 +15,18 @@ interface StoryParams {
   border?: InputBorder;
   flow?: InputFlow;
   step?: string;
+  width?: InputWidth;
 }
 
-export const CheckboxStory: Story<StoryParams> = ({ label, description, error, border, flow, step }) => (
+export const CheckboxStory: Story<StoryParams> = ({
+  label,
+  description,
+  error,
+  border,
+  flow,
+  step,
+  width,
+}) => (
   <Section title="Text Input: Basics" showInfoControls>
     <NumberInput
       label={label}
@@ -26,6 +35,7 @@ export const CheckboxStory: Story<StoryParams> = ({ label, description, error, b
       border={border}
       flow={flow}
       step={parseInt(step ?? '1')}
+      width={width}
       aria-label="fallback label"
       defaultValue={0}
     />
@@ -54,4 +64,9 @@ CheckboxStory.argTypes = {
     control: { type: 'select' },
     defaultValue: '1',
   },
+  width: {
+    options: ['xs', 's', 'm', 'l', 'xl', undefined],
+    control: { type: 'select' },
+    defaultValue: undefined,
+  },
 };

src/types.ts

@@ -2,5 +2,6 @@ import { FC, SVGAttributes } from 'react';
 
 export type InputBorder = 'none' | 'bottom' | 'rounded';
 export type InputFlow = 'col' | 'row';
+export type InputWidth = 'xs' | 's' | 'm' | 'l' | 'xl';
 
 export type IconComponent = FC<SVGAttributes<SVGElement>>;