polpo 0.1.0

package/src/components/form/textarea/textarea.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { TextareaStyle } from './textarea.style';
+
+import { useInputHandlers } from '@polpo/hooks';
+
+type TextareaProps = InputFieldProps<{
+  rows?: number;
+  resize?: React.CSSProperties['resize'];
+  leftIcon?: never;
+  rightIcon?: never;
+}>;
+
+export const Textarea = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  rows = 4,
+  resize = 'vertical',
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}: UnControlledComponentProps<TextareaProps, string>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers, isFocus } = useInputHandlers({
+    onBlur: onBlur,
+    onChange: e => setValue(e.target.value),
+    onFocus: onFocus,
+  });
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <TextareaStyle
+        id={id}
+        name={name}
+        className={className}
+        style={{
+          resize: resize,
+          ...style,
+        }}
+        value={value}
+        rows={rows}
+        {...handlers}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+    </Field>
+  );
+};
+
+const TextareaController = ({ rules, ...props }: ControllerGeneratorProps<TextareaProps, string>) => {
+  return <Controller Component={Textarea} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+Textarea.Controller = TextareaController;

package/src/components/icon/icon.stories.tsx

@@ -0,0 +1,63 @@
+import { fn } from '@storybook/test';
+
+import { Grid } from '../../layouts';
+import { ClickToCopy } from '../tooltips';
+import { Typography } from '../typography';
+
+import { Icon } from './icon';
+
+import { IconNames } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Icon',
+  component: Icon,
+  argTypes: {
+    name: { options: [undefined, ...IconNames.toSorted()] },
+    fill: { control: 'color' },
+    size: { control: { type: 'range', min: 10, max: 100 } },
+    scale: { control: { type: 'range', min: 1, max: 5 } },
+    inCircle: { control: 'boolean' },
+  },
+  args: {
+    size: 32,
+    fill: 'currentColor',
+    name: 'camera',
+    scale: 3,
+    inCircle: false,
+    onClick: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const All: Story = {
+  args: {},
+  argTypes: {
+    ...meta.argTypes,
+    name: { control: false },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+  render: args => (
+    <Grid gtc='repeat(auto-fit, 100px)' gtr='auto auto' pc='center' gap='3em'>
+      {IconNames.toSorted().map(name => (
+        <ClickToCopy key={name} value={name} tooltipText='Click to copy' tooltipCopiedText='Copied!'>
+          <Grid gap='0.6em' gtr='subgrid' row='span 2' jc='center' ji='center'>
+            <Icon {...args} name={name} />
+            <Typography variant='small' align='center' family='code' noPadding>
+              {name}
+            </Typography>
+          </Grid>
+        </ClickToCopy>
+      ))}
+    </Grid>
+  ),
+};

package/src/components/icon/icon.tsx

@@ -0,0 +1,64 @@
+import { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from 'react';
+
+import { IconCollectionT, IconT, Icons } from './icons';
+
+export type IconNameT = keyof IconCollectionT;
+
+const useIcon = (name: IconNameT): IconT => {
+  return useMemo(() => Icons[name] ?? Icons['warning'], [name]);
+};
+
+type IconProps = HTMLAttributes<SVGSVGElement> & {
+  size?: number | `${number}em` | `${number}px`;
+  fill?: string;
+  onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
+  name: IconNameT;
+  inCircle?: boolean;
+  scale?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+};
+
+const IconComponent = (
+  {
+    style,
+    className,
+    size = '1em',
+    fill = 'currentColor',
+    onClick,
+    name,
+    inCircle = false,
+    scale: scaleProp = 3,
+  }: IconProps,
+  ref: ForwardedRef<unknown>,
+): React.ReactElement => {
+  const { viewBox, svg } = useIcon(name);
+
+  const scale = (parseInt(`${scaleProp}`) + 2) / 10;
+
+  const translate = 16 * ((1 - scale * 2) / 2);
+
+  return (
+    <svg
+      ref={ref as ForwardedRef<SVGSVGElement>}
+      height={size}
+      width={size}
+      viewBox={viewBox}
+      className={className}
+      style={style}
+      onClick={onClick}
+      fill='none'
+    >
+      {inCircle ? (
+        <>
+          <circle cx={16} cy={16} r={15} stroke={fill} strokeWidth={1} />
+          <g transform={`translate(${8 + translate}, ${8 + translate})`}>
+            <g transform={`scale(${scale})`}>{svg(fill)}</g>
+          </g>
+        </>
+      ) : (
+        svg(fill)
+      )}
+    </svg>
+  );
+};
+
+export const Icon = forwardRef(IconComponent);

package/src/components/icon/icons/index.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { ObjectIcons, ObjectIconsT } from './object';
+import { SocialIcons, SocialIconsT } from './social';
+import { SymbolIcons, SymbolIconsT } from './symbol';
+
+export type IconT = {
+  viewBox: string;
+  svg: (fill: string) => React.ReactNode;
+};
+
+export type IconCollectionT = ObjectIconsT & SocialIconsT & SymbolIconsT;
+
+export const Icons: IconCollectionT = {
+  ...ObjectIcons,
+  ...SocialIcons,
+  ...SymbolIcons,
+};