UI: Create new form elements in the new Core UI (Input, TextArea, Select)

code/ui/components/src/new/Input/Input.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Input',
+  component: Input,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Base: Story = {
+  args: {
+    placeholder: 'Hello World',
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    ...Base.args,
+    value: 'Hello World',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Base.args,
+    disabled: true,
+  },
+};

code/ui/components/src/new/Input/Input.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import { styled } from '@storybook/theming';
+
+interface InputProps {
+  disabled?: boolean;
+  placeholder?: string;
+  value?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ ...props }, ref) => {
+  return <StyledInput ref={ref} {...props} />;
+});
+
+Input.displayName = 'Input';
+
+const StyledInput = styled.input(({ theme }) => ({
+  // resets
+  appearance: 'none',
+  border: '0 none',
+  display: 'block',
+  margin: ' 0',
+  position: 'relative',
+
+  // styles
+  width: '100%',
+  height: '32px',
+  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
+  color: theme.input.color,
+  background: theme.input.background,
+  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+  borderRadius: theme.input.borderRadius,
+  fontSize: theme.typography.size.s2 - 1,
+  padding: '6px 10px',
+  boxSizing: 'border-box',
+  lineHeight: '20px',
+
+  '&:focus': {
+    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
+    outline: 'none',
+  },
+
+  '&[disabled]': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+
+  '&:-webkit-autofill': {
+    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`,
+  },
+
+  '&::placeholder': {
+    color: theme.textMutedColor,
+    opacity: 1,
+  },
+}));

code/ui/components/src/new/Textarea/Textarea.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Textarea } from './Textarea';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Base: Story = {
+  args: {
+    placeholder: 'Hello World',
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    ...Base.args,
+    value:
+      'Self ocean ultimate reason faith virtues evil eternal-return moral strong superiority. Society will christian god holiest evil virtues ultimate salvation aversion victorious strong eternal-return. Ascetic pious hope selfish battle pinnacle revaluation passion ocean passion chaos reason intentions. Hope hatred pious superiority ascetic chaos ultimate mountains ideal. Superiority good abstract hatred holiest passion ultimate evil inexpedient joy. Salvation war salvation ideal decieve good law ascetic hatred transvaluation horror good. Zarathustra aversion pious truth burying evil inexpedient spirit virtues virtues hope salvation transvaluation. Enlightenment chaos ascetic salvation god holiest play marvelous oneself ocean. Enlightenment faithful dead truth insofar fearful madness love.Inexpedient war hatred superiority disgust justice superiority. Chaos justice contradict christian decieve god. Revaluation suicide hope enlightenment decrepit truth hatred insofar gains sexuality merciful ocean revaluation depths. Revaluation ocean superiority endless of evil horror. Ultimate salvation joy good good endless will horror aversion superiority depths. Evil hatred ideal pious joy reason.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Base.args,
+    disabled: true,
+  },
+};

code/ui/components/src/new/Textarea/Textarea.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import { styled } from '@storybook/theming';
+import TextareaAutoResize from 'react-textarea-autosize';
+
+interface TextareaProps {
+  disabled?: boolean;
+  placeholder?: string;
+  value?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ ...props }, ref) => {
+  return <StyledTextarea ref={ref} {...props} />;
+});
+
+Textarea.displayName = 'Textarea';
+
+const StyledTextarea = styled(TextareaAutoResize)(({ theme }) => ({
+  // resets
+  appearance: 'none',
+  border: '0 none',
+  margin: ' 0',
+  position: 'relative',
+
+  // styles
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '32px',
+  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
+  color: theme.input.color,
+  background: theme.input.background,
+  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+  borderRadius: theme.input.borderRadius,
+  fontSize: theme.typography.size.s2 - 1,
+  padding: '6px 10px',
+  boxSizing: 'border-box',
+  minHeight: 32,
+  lineHeight: '20px',
+
+  '&:focus': {
+    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
+    outline: 'none',
+  },
+
+  '&[disabled]': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+
+  '&:-webkit-autofill': {
+    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`,
+  },
+
+  '&::placeholder': {
+    color: theme.textMutedColor,
+    opacity: 1,
+  },
+}));