@returnless/focus-ui 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Returnless.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# Returnless Focus-UI
+
+A clean, opinionated, and functional UI library for Vue3.
+
+https://returnless-com.github.io/focus-ui/
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install @returnless/focus-ui
+```
+
+### Run the docs
+
+```bash
+npm run docs:dev
+```
+
+## License
+
+Source code is licensed under the [MIT license](https://github.com/Returnless-com/focus-ui/blob/main/LICENSE.md).

package/dist/focus-ui.es.js

@@ -0,0 +1,33 @@
+import { defineComponent as i, openBlock as c, createElementBlock as r } from "vue";
+const a = { class: "bg-red-500" }, l = /* @__PURE__ */ i({
+  __name: "Accordion",
+  props: {
+    orientation: { default: "vertical" }
+  },
+  setup(t) {
+    return (e, o) => (c(), r("div", a, " testgaaf "));
+  }
+}), d = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [s, _] of e)
+    o[s] = _;
+  return o;
+}, f = {};
+function p(t, e) {
+  return c(), r("div", null, " test ");
+}
+const u = /* @__PURE__ */ d(f, [["render", p]]), n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Accordion: l,
+  AccordionItem: u
+}, Symbol.toStringTag, { value: "Module" }));
+function m(t) {
+  for (const e in n)
+    t.component(e, n[e]);
+}
+const g = { install: m };
+export {
+  l as Accordion,
+  u as AccordionItem,
+  g as default
+};

package/dist/types/components/Accordion/Accordion.vue.d.ts

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    /** The orientation of the accordion. */
+    orientation: "horizontal" | "vertical";
+}>, {
+    orientation: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    /** The orientation of the accordion. */
+    orientation: "horizontal" | "vertical";
+}>, {
+    orientation: string;
+}>>>, {
+    orientation: "horizontal" | "vertical";
+}, {}>;
+export default _default;
+
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/Accordion/AccordionItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/components/Accordion/index.d.ts

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

package/dist/types/components/index.d.ts

@@ -0,0 +1 @@
+export { Accordion, AccordionItem } from './Accordion';

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+declare function install(app: App): void;
+declare const _default: {
+    install: typeof install;
+};
+export default _default;
+export * from './components';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@returnless/focus-ui",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "rimraf dist && vue-tsc && vite build",
+    "docs:dev": "npm run docs:generate-component-list && npm run docs:generate-component-meta && vitepress dev docs",
+    "docs:generate-component-list": "npx tsx ./src/build-utils/update-component-list.ts",
+    "docs:generate-component-meta": "npx tsx ./src/build-utils/generate-component-meta.ts",
+    "docs:build": "npm run docs:generate-component-list && npm run docs:generate-component-meta && vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@floating-ui/vue": "^1.0.6",
+    "@heroicons/vue": "^2.1.3",
+    "@inertiajs/vue3": "^1.1.0",
+    "@stylistic/eslint-plugin": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/node": "^20.13.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vueuse/core": "^10.11.0",
+    "autoprefixer": "^10.4.19",
+    "dayjs": "^1.11.11",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "postcss": "^8.4.38",
+    "rimraf": "^5.0.7",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vitepress": "^1.2.3",
+    "vue-component-meta": "^2.0.19",
+    "vue-tsc": "^2.0.19"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "module": "./dist/focus-ui.es.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/focus-ui.es.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wuruoyun/vue-component-lib-starter.git"
+  }
+}

package/src/build-utils/generate-component-meta.ts

@@ -0,0 +1,76 @@
+import fs, { existsSync, mkdirSync } from 'fs';
+import { join, parse, resolve } from 'path';
+import fg from 'fast-glob';
+import type { ComponentMeta, MetaCheckerOptions } from 'vue-component-meta';
+import { createComponentMetaChecker } from 'vue-component-meta';
+
+export interface ComponentApiProps {
+  name: ComponentMeta['props'][number]['name'];
+  description: ComponentMeta['props'][number]['description'];
+
+  // required: ComponentMeta['props'][number]['required']
+  type: ComponentMeta['props'][number]['type'];
+  default: ComponentMeta['props'][number]['default'];
+}
+
+export interface ComponentApi {
+  props: ComponentApiProps[];
+  events: ComponentMeta['events'];
+  slots: ComponentMeta['slots'];
+}
+
+const checkerOptions: MetaCheckerOptions = {
+  forceUseTs: true,
+  schema: { ignore: ['MyIgnoredNestedProps'] },
+  printer: { newLine: 1 },
+};
+
+const tsconfigChecker = createComponentMetaChecker(
+  resolve(__dirname, '../../tsconfig.json'),
+  checkerOptions,
+);
+
+function filterMeta(meta: ComponentMeta): ComponentApi {
+  const props: ComponentApiProps[] = [];
+
+  meta.props.forEach((prop) => {
+    if (prop.global) {
+      return;
+    }
+
+    const { name, description, required, type, default: defaultValue } = prop;
+
+    props.push({
+      name: `${name}${required ? '' : '?'}`,
+      description: description,
+      type,
+      default: defaultValue || 'unknown',
+    });
+  });
+
+  return {
+    props,
+    events: meta.events,
+    slots: meta.slots.map((s) => ({ ...s, description: s.description })),
+  };
+}
+
+const components = fg.sync(['src/components/**/*.vue'], {
+  cwd: resolve(__dirname, '../../'),
+  absolute: true,
+});
+
+components.forEach((componentPath: string) => {
+  const componentName = parse(componentPath).name;
+
+  const metaDirPath = resolve(__dirname, '../../docs/component-meta');
+
+  if (!existsSync(metaDirPath)) {
+    mkdirSync(metaDirPath);
+  }
+
+  const metaJsonFilePath = join(metaDirPath, `${componentName}.json`);
+  const meta = filterMeta(tsconfigChecker.getComponentMeta(componentPath));
+
+  fs.writeFileSync(metaJsonFilePath, JSON.stringify(meta, null, 2));
+});

package/src/build-utils/update-component-list.js

@@ -0,0 +1,31 @@
+console.log('gaaf');
+// import { readdirSync, existsSync, copyFileSync, writeFileSync } from 'fs';
+// import { resolve, dirname } from 'path';
+//
+// const __dirname = resolve(dirname(''));
+//
+// const componentList = readdirSync(resolve(__dirname, '../components'))
+//   .filter((component: string) => existsSync(resolve(__dirname, `../components/${component}/README.md`)));
+//
+// // Copy the readme files.
+// componentList.forEach((component: string) => {
+//   copyFileSync(
+//     resolve(__dirname, `../components/${component}/README.md`),
+//     resolve(__dirname, `../../docs/components/${component}.md`),
+//   );
+// });
+//
+// const componentsFileContent = `\
+// /**
+//  * Generated by: src/build-utils/update-comoonent-list.js
+//  * Generated on: ${new Date().toDateString()}
+//  */
+//
+// module.exports = [
+// ${componentList
+//     .map((component: string) => `  '/components/${component}',`)
+//     .join('\n')}
+// ];
+// `;
+//
+// writeFileSync(resolve(__dirname, '../../docs/.vuepress/component-list.js'), componentsFileContent);

package/src/build-utils/update-component-list.ts

@@ -0,0 +1,32 @@
+import { readdirSync, existsSync, copyFileSync, writeFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const componentList = readdirSync(resolve(__dirname, '../components'))
+  .filter((component: string) => existsSync(resolve(__dirname, `../components/${component}/README.md`)));
+
+// Copy the readme files.
+componentList.forEach((component: string) => {
+  copyFileSync(
+    resolve(__dirname, `../components/${component}/README.md`),
+    resolve(__dirname, `../../docs/components/${component}.md`),
+  );
+});
+
+const componentsFileContent = `\
+/**
+ * Generated by: src/build-utils/update-component-list.js
+ * Generated on: ${new Date().toDateString()}
+ */
+
+module.exports = [
+${componentList
+    .map((component: string) => `  { text: '${component}', link: 'components/${component}' },`)
+    .join('\n')}
+];
+`;
+
+writeFileSync(resolve(__dirname, '../../docs/component-list.ts'), componentsFileContent);

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { provide, ref } from 'vue';
+
+withDefaults(defineProps<{
+  /** The orientation of the accordion. */
+  orientation?: 'horizontal' | 'vertical';
+}>(), {
+  orientation: 'vertical',
+});
+
+const activeAccordionItem = ref<string | null>(null);
+
+provide('activeAccordionItem', activeAccordionItem);
+</script>
+
+<template>
+  <div class="w-full">
+    <slot />
+  </div>
+</template>

package/src/components/Accordion/AccordionContent.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+const accordionItemActive = inject<boolean>('accordionItemActive');
+</script>
+
+<template>
+  <div
+    :class="{ 'hidden': !accordionItemActive }"
+    class="py-3"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { computed, inject, provide, Ref } from 'vue';
+import { useUniqueId } from '../../composables';
+
+const accordionItemId = useUniqueId('accordion-item');
+const activeAccordionItem = inject<Ref<string>>('activeAccordionItem')!;
+
+const accordionItemActive = computed((): boolean => activeAccordionItem.value === accordionItemId);
+
+provide('accordionItemId', accordionItemId);
+provide('accordionItemActive', accordionItemActive);
+</script>
+
+<template>
+  <div class="border-b">
+    <slot />
+  </div>
+</template>

package/src/components/Accordion/AccordionTrigger.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { inject, Ref } from 'vue';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
+import { TextStyle } from '../TextStyle';
+
+const activeAccordionItem = inject<Ref<string>>('activeAccordionItem')!;
+const accordionItemId = inject<string>('accordionItemId')!;
+const accordionItemActive = inject<boolean>('accordionItemActive');
+
+function toggleAccordionItem(): void {
+  activeAccordionItem.value = accordionItemId;
+}
+</script>
+
+<template>
+  <button
+    class="w-full flex flex-1 items-center justify-between group"
+    @click="toggleAccordionItem"
+  >
+    <span class="py-3 group-hover:underline">
+      <TextStyle variant="strong">
+        <slot />
+      </TextStyle>
+    </span>
+
+    <ChevronDownIcon
+      v-if="!accordionItemActive"
+      class="w-4 h-4"
+    />
+    <ChevronUpIcon
+      v-if="accordionItemActive"
+      class="w-4 h-4"
+    />
+  </button>
+</template>

package/src/components/Accordion/README.md

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../src/components'; 
+import api from '../component-meta/Accordion.json';
+</script>
+
+# Accordion
+
+A vertically stacked set of interactive headings that each reveal a section of content.
+
+<ComponentApi :api="api" />
+
+## Variants
+
+### Default
+
+Use to display a list of questions and answers. The user can click on a question to reveal the answer.
+
+<ComponentWrapper>
+  <Accordion>
+    <AccordionItem>
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>Yes. It adheres to the AI-ARIA design system</AccordionContent>
+    </AccordionItem>
+    <AccordionItem>
+      <AccordionTrigger>Is it styled?</AccordionTrigger>
+      <AccordionContent>Yes. It comes with default styles that matches the other components' aesthetic.</AccordionContent>
+    </AccordionItem>
+    <AccordionItem>
+      <AccordionTrigger>Is it animated?</AccordionTrigger>
+      <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'focus-ui';
+</script>
+
+<template>
+  <Accordion>
+    <AccordionItem>
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>Yes. It adheres to the AI-ARIA design system</AccordionContent>
+    </AccordionItem>
+    <AccordionItem>
+      <AccordionTrigger>Is it styled?</AccordionTrigger>
+      <AccordionContent>Yes. It comes with default styles that matches the other components' aesthetic.</AccordionContent>
+    </AccordionItem>
+    <AccordionItem>
+      <AccordionTrigger>Is it animated?</AccordionTrigger>
+      <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>
+```

package/src/components/Accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';

package/src/components/Alert/Alert.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import DismissableAlertButton from './DismissableAlertButton.vue';
+
+const props = withDefaults(defineProps<{
+  /** Whether the alert can be dismissed. */
+  dismissible?: boolean;
+
+  /** The variant of the alert. */
+  variant?: 'default' | 'destructive';
+}>(), {
+  dismissible: true,
+  variant: 'default',
+});
+
+const emits = defineEmits<{
+  /** Emitted when the alert is dismissed. */
+  dismiss: [];
+}>();
+
+const alertDismissed = ref(false);
+
+const classList = computed(() => {
+  return {
+    'border-red-500 text-red-900': props.variant === 'destructive',
+    'text-gray-900': props.variant === 'default',
+  };
+});
+
+const role = computed(() => props.variant === 'destructive' ? 'alert' : 'status');
+
+function dismissAlert(): void {
+  emits('dismiss');
+
+  alertDismissed.value = true;
+}
+</script>
+
+<template>
+  <div
+    v-if="! alertDismissed"
+    :class="classList"
+    :role="role"
+    class="relative rounded border bg-white px-4 py-3 shadow-sm"
+    tabindex="0"
+  >
+    <slot />
+
+    <DismissableAlertButton
+      v-if="dismissible"
+      :variant="variant"
+      @dismiss="dismissAlert"
+    />
+  </div>
+</template>

package/src/components/Alert/AlertDescription.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

package/src/components/Alert/AlertTitle.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TextStyle } from '../TextStyle';
+</script>
+
+<template>
+  <h5 class="mb-1 leading-none">
+    <TextStyle variant="strong">
+      <slot />
+    </TextStyle>
+  </h5>
+</template>

package/src/components/Alert/DismissableAlertButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/16/solid';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  /** The variant of the alert. */
+  variant?: 'default' | 'destructive';
+}>(), {
+  variant: 'default',
+});
+
+defineEmits<{
+  dismiss: [];
+}>();
+
+const classList = computed(() => {
+  return {
+    'hover:bg-red-200': props.variant === 'destructive',
+    'hover:bg-slate-200': props.variant === 'default',
+  };
+});
+</script>
+
+<template>
+  <button
+    aria-label="Dismiss notification"
+    class="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded"
+    :class="classList"
+    type="button"
+    @click="$emit('dismiss')"
+  >
+    <XMarkIcon class="h-4 w-4" />
+  </button>
+</template>