@returnless/focus-ui 0.0.5 → 0.0.7

package/src/components/Feed/README.md

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-import {
-  Feed,
-  FeedItem,
-  FeedItemSimple,
-  FeedItemBlock,
-  FeedItemDateIndicator,
-  FeedItemIcon,
-  TextStyle,
-} from '../../src/components'; 
-import api from '../component-meta/Feed.json';
-import { CheckIcon, ChatBubbleBottomCenterIcon } from '@heroicons/vue/16/solid';
-</script>
-
-# Feed
-
-Use this component to display a feed of notes, posts, or other content.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Feed>
-    <FeedItem>
-      <FeedItemIcon color="indigo">
-        <CheckIcon />
-      </FeedItemIcon>
-      <FeedItemSimple>
-        <TextStyle variant="strong">Application user</TextStyle> created the return order.
-        <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
-      </FeedItemSimple>
-    </FeedItem>
-    <FeedItem>
-    <FeedItemSimple>
-      <TextStyle variant="strong">Application user</TextStyle> edited the return order.
-      <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
-    </FeedItemSimple>
-    </FeedItem>
-    <FeedItem>
-      <FeedItemIcon color="slate">
-        <ChatBubbleBottomCenterIcon />
-      </FeedItemIcon>
-      <FeedItemBlock>
-        <TextStyle variant="strong">Application user</TextStyle> commented
-        <p>Called client, they reassured me the invoice would be paid by the 25th.</p>
-        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
-      </FeedItemBlock>
-    </FeedItem>
-    <FeedItem>
-      <FeedItemSimple>
-        <TextStyle variant="strong">Application user</TextStyle> sent the return order.
-        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
-      </FeedItemSimple>
-    </FeedItem>
-  </Feed>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Feed,
-  FeedItem,
-  FeedItemSimple,
-  FeedItemBlock,
-  FeedItemDateIndicator,
-  FeedItemIcon,
-  TextStyle,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Feed>
-    <FeedItem>
-      <FeedItemIcon color="indigo">
-        <CheckIcon />
-      </FeedItemIcon>
-      <FeedItemSimple>
-        <TextStyle variant="strong">Application user</TextStyle> created the return order.
-        <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
-      </FeedItemSimple>
-    </FeedItem>
-    <FeedItem>
-    <FeedItemSimple>
-      <TextStyle variant="strong">Application user</TextStyle> edited the return order.
-      <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
-    </FeedItemSimple>
-    </FeedItem>
-    <FeedItem>
-      <FeedItemIcon color="slate">
-        <ChatBubbleBottomCenterIcon />
-      </FeedItemIcon>
-      <FeedItemBlock>
-        <TextStyle variant="strong">Application user</TextStyle> commented
-        <p>Called client, they reassured me the invoice would be paid by the 25th.</p>
-        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
-      </FeedItemBlock>
-    </FeedItem>
-    <FeedItem>
-      <FeedItemSimple>
-        <TextStyle variant="strong">Application user</TextStyle> sent the return order.
-        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
-      </FeedItemSimple>
-    </FeedItem>
-  </Feed>
-</template>
-```
-
-## Best practices
-
-todo
-
-## Content guidelines
-
-todo

package/src/components/Feed/index.ts

@@ -1,6 +0,0 @@
-export { default as Feed } from './Feed.vue';
-export { default as FeedItem } from './FeedItem.vue';
-export { default as FeedItemBlock } from './FeedItemBlock.vue';
-export { default as FeedItemDateIndicator } from './FeedItemDateIndicator.vue';
-export { default as FeedItemIcon } from './FeedItemIcon.vue';
-export { default as FeedItemSimple } from './FeedItemSimple.vue';

package/src/components/FileUploadButton/FileUploadButton.vue

@@ -1,62 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useFileDialog } from '@vueuse/core';
-import { Button, ButtonProps } from '../Button';
-import { FileAccepts } from '../types';
-
-const props = withDefaults(defineProps<ButtonProps & {
-  /** The file types to accept. */
-  accepts: FileAccepts;
-
-  /** Whether to accept multiple files. */
-  multiple?: boolean;
-}>(), {
-  accepts: '*',
-  multiple: false,
-});
-
-const model = defineModel<File[]>({
-  default: [],
-});
-
-const acceptTypes = computed(() => {
-  switch (props.accepts) {
-    case 'image':
-      return 'image/*';
-    case 'pdf':
-      return 'application/pdf';
-    default:
-      return '*';
-  }
-});
-
-const { open, onChange } = useFileDialog({
-  accept: acceptTypes.value,
-  multiple: props.multiple,
-});
-
-onChange((files: FileList | null): void => {
-  const listOfFiles: File[] = Array.from(files || []);
-
-  onFileUpload(listOfFiles);
-});
-
-function onFileUpload(files: File[] | null): void {
-  if (files === null) {
-    return;
-  }
-
-  model.value = props.multiple
-    ? [...model.value, ...files]
-    : [files[0]];
-}
-</script>
-
-<template>
-  <Button
-    v-bind="$props"
-    @click="open"
-  >
-    <slot />
-  </Button>
-</template>

package/src/components/FileUploadButton/index.ts

@@ -1 +0,0 @@
-export { default as FileUploadButton } from './FileUploadButton.vue';

package/src/components/Form/Form.vue

@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import { useUniqueId } from '../../composables';
-
-const props = withDefaults(defineProps<{
-  /** The aria-label attribute to be applied to the link */
-  accessibilityLabel?: string;
-
-  /** The encoding type for the form. */
-  enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-
-  /** The ID of the form. */
-  id?: string | null;
-}>(), {
-  accessibilityLabel: undefined,
-  enctype: undefined,
-  id: null,
-});
-
-defineEmits<{
-  submit: [];
-}>();
-
-const elementId = props.id || useUniqueId('form');
-</script>
-
-<template>
-  <form
-    :id="elementId"
-    :aria-label="accessibilityLabel"
-    :enctype="enctype"
-    @submit.prevent="$emit('submit')"
-  >
-    <slot />
-  </form>
-</template>

package/src/components/Form/README.md

@@ -1,52 +0,0 @@
-<script lang="ts" setup>
-import { Form, FormLayout, TextField, Button } from '../../src/components'; 
-import api from '../component-meta/Form.json';
-</script>
-
-# Form
-
-A wrapper component that handles the submission of forms.
-
-## Usage
-
-<ComponentWrapper>
-  <Form>
-    <FormLayout>
-      <TextField label="Name" />
-      <TextField label="Email" help-text="We’ll use this email address to inform you on future changes." />
-      <Button>Submit</Button>
-    </FormLayout>
-  </Form>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Form, FormLayout, TextField, Button } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Form>
-    <FormLayout>
-      <TextField label="Name" />
-      <TextField label="Email" type="email" help-text="We’ll use this email address to inform you on future changes." />
-      <Button>Submit</Button>
-    </FormLayout>
-  </Form>
-</template>
-```
-
-## Best practices
-
-The form component should be used to:
-
-- Wrap around all form input elements.
-- Emulate the native HTML `form` element behavior with a custom `onSubmit` callback.
-
-## Accessibility
-
-The form component wraps content in an HTML `<form>` element. This helps to support assistive technologies that use
-different interaction and browse modes.
-
-Forms can have only one submit button, and it must be at the end of the form. By default, buttons added to the form
-are given a `type` attribute set to `button` to avoid conflicts. To make a button the submit button instead
-(`type="submit"`), set the `submit` prop on the button.

package/src/components/Form/index.ts

@@ -1 +0,0 @@
-export { default as Form } from './Form.vue';

package/src/components/FormLayout/FormLayout.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  columns: number;
-}>(), {
-  columns: 1,
-});
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'md:grid-cols-1': props.columns === 1 },
-    { 'md:grid-cols-2': props.columns === 2 },
-  ];
-});
-</script>
-
-<template>
-  <div
-    class="grid grid-cols-1 gap-4"
-    :class="classList"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/FormLayout/README.md

@@ -1,97 +0,0 @@
-<script lang="ts" setup>
-import { FormLayout, TextField } from '../../src/components'; 
-import api from '../component-meta/Form.json';
-</script>
-
-# Form layout
-
-Use form layout to arrange fields with a form using standard spacing. By default, it stacks fields vertically but also
-support horizontal groups of fields.
-
-## Usage
-
-<ComponentWrapper>
-  <FormLayout>
-    <TextField label="Name" />
-    <TextField label="Email" />
-  </FormLayout>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { FormLayout, TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <FormLayout>
-    <TextField label="Name" />
-    <TextField label="Email" type="email" />
-  </FormLayout>
-</template>
-```
-
-### Horizontal form layout
-
-<ComponentWrapper>
-  <FormLayout :columns="2">
-    <TextField label="Company name" />
-    <TextField label="Invoice email" />
-    <TextField label="Street + house number" />
-    <FormLayout :columns="2">
-      <TextField label="Postcode" />
-      <TextField label="City" />
-    </FormLayout>
-    <TextField label="Country" />
-    <TextField label="VAT number" />
-    <TextField label="P.O. number / reference" />
-  </FormLayout>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { FormLayout, TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <FormLayout :columns="2">
-    <TextField label="Company name" />
-    <TextField label="Invoice email" />
-    <TextField label="Street + house number" />
-    <FormLayout :columns="2">
-      <TextField label="Postcode" />
-      <TextField label="City" />
-    </FormLayout>
-    <TextField label="Country" />
-    <TextField label="VAT number" />
-    <TextField label="P.O. number / reference" />
-  </FormLayout>
-</template>
-```
-
-## Best practices
-
-Forms should:
-
-- Be considerate of users’ time and privacy by only asking for information that’s required
-- Group related tasks under section titles to provide more context and make the interface easier to scan
-- Follow a logical, predictable order—for example, always ask for first-name first, and last-name second on forms
-
-## Content guidelines
-
-### Form section title
-
-Form section titles should follow the content guidelines for headings and subheadings.
-
-### Field label
-
-A label is a short description of a field. Labels are not help text, and they shouldn’t be used to provide instruction,
-but they should be meaningful and clearly indicate what is expected. Labels should be:
-
-- Placed above or beside the form field
-- Short and succinct (1–3 words)
-- Written in sentence case (the first word capitalized, the rest lowercase)
-
-### Help text
-
-Help text provides extra guidance to people filling out a form field. This text is easy for people to ignore, so users
-should not need to depend on it to fill out a form. As with all forms, help text should be succinct and easy to read.

package/src/components/FormLayout/index.ts

@@ -1 +0,0 @@
-export { default as FormLayout } from './FormLayout.vue';

package/src/components/Heading/Heading.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { HeadingLevel, HeadingSize } from './types';
-
-const props = withDefaults(defineProps<{
-  /** The heading level. */
-  level?: HeadingLevel;
-
-  /** The heading size. */
-  size?: HeadingSize;
-}>(), {
-  level: 'h2',
-  size: 'xl',
-});
-
-const classList = computed((): Record<string, boolean> => {
-  return {
-    'text-xl': props.size === 'xl',
-    'text-2xl': props.size === '2xl',
-  };
-});
-</script>
-
-<template>
-  <component
-    :is="level"
-    :class="classList"
-    class="font-semibold leading-none"
-  >
-    <slot />
-  </component>
-</template>

package/src/components/Heading/index.ts

@@ -1,3 +0,0 @@
-export { type HeadingLevel, type HeadingSize } from './types';
-
-export { default as Heading } from './Heading.vue';

package/src/components/Heading/types.ts

@@ -1,3 +0,0 @@
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-export type HeadingSize = 'xl' | '2xl';

package/src/components/Image/Image.vue

@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-withDefaults(defineProps<{
-  /** The alt text for the image. */
-  alt: string;
-
-  /** The source URL of the image. */
-  source: string;
-
-  /** The cross-origin attribute of the image. */
-  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
-}>(), {
-  crossOrigin: undefined,
-});
-
-defineEmits<{
-  load: [];
-  error: [];
-}>();
-</script>
-
-<template>
-  <img
-    :alt="alt"
-    :crossorigin="crossOrigin"
-    :src="source"
-    v-bind="$attrs"
-    @error="$emit('error')"
-    @load="$emit('load')"
-  >
-</template>

package/src/components/Image/index.ts

@@ -1 +0,0 @@
-export { default as Image } from './Image.vue';

package/src/components/InertiaLink/InertiaLink.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { type InertiaLinkProps } from '@inertiajs/vue3';
-
-defineProps<InertiaLinkProps>();
-</script>
-
-<template>
-  <InertiaLink v-bind="$props">
-    <slot />
-  </InertiaLink>
-</template>

package/src/components/InertiaLink/index.ts

@@ -1 +0,0 @@
-export { default as InertiaLink } from './InertiaLink.vue';

package/src/components/InlineError/InlineError.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { ExclamationCircleIcon } from '@heroicons/vue/24/outline';
-
-defineProps<{
-  /** The id of the element */
-  id: string;
-
-  /** The message to display */
-  message: string;
-}>();
-</script>
-
-<template>
-  <div
-    :id="id"
-    class="flex items-center text-red-600 space-x-2"
-  >
-    <ExclamationCircleIcon class="h-4 w-4" />
-    <span>{{ message }}</span>
-  </div>
-</template>

package/src/components/InlineError/README.md

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { FormLayout, TextField, InlineError } from '../../src/components'; 
-import api from '../component-meta/InlineError.json';
-</script>
-
-# Inline error
-
-Inline errors are brief, in-context messages that tell users something went wrong with a single or group of inputs in a
-form. Use inline errors to help users understand why a form input may not be valid en how to fix it.
-
-## Usage
-
-<ComponentWrapper>
-  <InlineError
-    message="Store name is required"
-    field-id="my-field-id"
-  />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { InlineError } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <InlineError
-    message="Store name is required"
-    field-id="my-field-id"
-  />
-</template>
-```
-
-## Best practices
-
-Inline errors should:
-
-- Be brief.
-- Be written in sentence case.
-- Be visible immediately upon a form input that is not valid.
-- Be removed as soon as the input is valid so users can immediately tell they fixed the issue.
-- Describe specific solutions so users can successfully complete their task in the form.
-- Not be placed out of context of the input or group of inputs they describe.
-
-## Content guidelines
-
-### Inline error messages
-
-Since the error message is directly below the source of the problem, the copy only needs to explain why the error
-happened. Optionally, the message can clarify what to do next or offer a one-click fix.
-
-Inline error messages should:
-
-- Clearly explain what went wrong, give a next step, or offer a one-click fix.
-- Be short and concise, no more than a single sentence.
-- Use passive voice so users don't feel like they're being blamed for the error.
-
-## Accessibility
-
-- Use the required `fieldId` prop to give the inline error a unique `id`. This ties the error to a form field using
-  `aria-describedby` so that it's conveyed to screen reader users.
-- Use the required `message` prop to provide the text that describes the error.
-- The inline error icon helps visually identify the error message for users who have difficulty seeing colors or who
-  use settings that remove color from the page.

package/src/components/InlineError/index.ts

@@ -1 +0,0 @@
-export { default as InlineError } from './InlineError.vue';

package/src/components/InputLabel/InputLabel.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { VisuallyHidden } from '../VisuallyHidden';
-import { TextStyle } from '../TextStyle';
-
-const props = withDefaults(defineProps<{
-  /** The label text. */
-  label: string;
-
-  /** The ID of the input the label is associated with. */
-  labelFor: string;
-
-  /** Whether the label should be hidden. */
-  labelHidden?: boolean;
-}>(), {
-  labelHidden: false,
-});
-
-const componentType = computed(() => props.labelHidden ? VisuallyHidden : 'label');
-</script>
-
-<template>
-  <component
-    :is="componentType"
-    :for="labelFor"
-    class="block w-fit cursor-pointer truncate text-sm leading-0 align-baseline"
-  >
-    <TextStyle variant="strong">
-      {{ label }}
-    </TextStyle>
-  </component>
-</template>

package/src/components/InputLabel/index.ts

@@ -1 +0,0 @@
-export { default as InputLabel } from './InputLabel.vue';

package/src/components/KPICard/KPICard.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { Card } from '../Card';
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  orientation?: 'horizontal' | 'vertical';
-}>(), {
-  orientation: 'horizontal',
-});
-
-const classList = computed(() => {
-  return {
-    'flex flex-col divide-y': props.orientation === 'vertical',
-    'flex flex-row divide-x': props.orientation === 'horizontal',
-  };
-});
-</script>
-
-<template>
-  <Card>
-    <div
-      :class="classList"
-      class="[&>*]:flex-1"
-    >
-      <slot />
-    </div>
-  </Card>
-</template>