From 1b5ee25c3cdbcea6fc56f5bdbbf7b452adaeb4eb Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sat, 29 Jul 2023 20:22:52 +0800 Subject: [PATCH] Define showcase structure Allow showcase for other frameworks and platforms. --- README.md | 9 + categories/action/react/typedoc.json | 8 + .../src/components/FileSelectBox/index.tsx | 17 + categories/blob/react/typedoc.json | 8 + categories/choice/react/typedoc.json | 8 + .../src/components/ColorPicker/index.tsx | 9 + .../react/src/components/Swatch/index.tsx | 9 + categories/color/react/typedoc.json | 8 + categories/formatted/react/typedoc.json | 8 + categories/freeform/react/typedoc.json | 8 + categories/information/react/typedoc.json | 8 + .../react/src/components/TagInput/index.tsx | 23 +- categories/multichoice/react/typedoc.json | 8 + .../react/src/components/LinkButton/index.tsx | 3 + categories/navigation/react/typedoc.json | 8 + categories/number/react/typedoc.json | 8 + .../src/components/TimeSpinner/index.tsx | 10 +- categories/temporal/react/typedoc.json | 8 + docs/00-philosophy.md | 2 +- pnpm-lock.yaml | 61 + .../web-kitchensink-reactnext/.gitignore | 2 + .../web-kitchensink-reactnext/package.json | 4 +- .../src/components/Brand/index.tsx | 4 +- .../src/components/DocsLayout.tsx | 203 ++ .../src/pages/[...url].tsx | 249 +++ .../src/pages/api/hello.ts | 13 - .../src/pages/categories/action/index.tsx | 242 --- .../src/pages/categories/blob/index.tsx | 61 - .../src/pages/categories/color/index.tsx | 90 - .../src/pages/categories/formatted/index.tsx | 128 -- .../src/pages/categories/freeform/index.tsx | 601 ------ .../src/pages/categories/navigation/index.tsx | 469 ----- .../src/pages/categories/number/index.tsx | 128 -- .../src/pages/categories/option/index.tsx | 1663 ----------------- .../pages/categories/presentation/index.tsx | 35 - .../src/pages/categories/temporal/index.tsx | 66 - .../src/pages/index.tsx | 227 +-- .../react}/examples/blog-post/index.tsx | 0 .../examples/registration-form/index.tsx | 0 .../web-kitchensink-reactnext/typedoc.json | 8 + tsconfig.json | 6 +- typedoc.base.json | 4 + 42 files changed, 706 insertions(+), 3728 deletions(-) create mode 100644 README.md create mode 100644 categories/action/react/typedoc.json create mode 100644 categories/blob/react/typedoc.json create mode 100644 categories/choice/react/typedoc.json create mode 100644 categories/color/react/typedoc.json create mode 100644 categories/formatted/react/typedoc.json create mode 100644 categories/freeform/react/typedoc.json create mode 100644 categories/information/react/typedoc.json create mode 100644 categories/multichoice/react/typedoc.json create mode 100644 categories/navigation/react/typedoc.json create mode 100644 categories/number/react/typedoc.json create mode 100644 categories/temporal/react/typedoc.json create mode 100644 showcases/web-kitchensink-reactnext/src/components/DocsLayout.tsx create mode 100644 showcases/web-kitchensink-reactnext/src/pages/[...url].tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/api/hello.ts delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/action/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/color/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/freeform/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/navigation/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/number/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/option/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/presentation/index.tsx delete mode 100644 showcases/web-kitchensink-reactnext/src/pages/categories/temporal/index.tsx rename showcases/web-kitchensink-reactnext/src/pages/{ => web/react}/examples/blog-post/index.tsx (100%) rename showcases/web-kitchensink-reactnext/src/pages/{ => web/react}/examples/registration-form/index.tsx (100%) create mode 100644 showcases/web-kitchensink-reactnext/typedoc.json create mode 100644 typedoc.base.json diff --git a/README.md b/README.md new file mode 100644 index 0000000..8929029 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# tesseract + +Simple, accessible, and robust Web components for data-driven documents and apps. + +Tesseract supports the following frameworks: + +- [React](/web/react) +- [Vue](/web/vue) (TODO) +- [Solid](/web/solid) (TODO) diff --git a/categories/action/react/typedoc.json b/categories/action/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/action/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/blob/react/src/components/FileSelectBox/index.tsx b/categories/blob/react/src/components/FileSelectBox/index.tsx index 2d228d3..1c961b0 100644 --- a/categories/blob/react/src/components/FileSelectBox/index.tsx +++ b/categories/blob/react/src/components/FileSelectBox/index.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-utils'; import clsx from 'clsx'; +/** + * Common props for the {@link FileSelectBoxProps.previewComponent|previewComponent prop} of the + * {@link FileSelectBox} component. + */ export interface CommonPreviewComponentProps = Partial> { /** * The file to preview. @@ -21,8 +25,14 @@ export interface CommonPreviewComponentProps = Partial = Partial, P extends CommonPreviewComponentProps = CommonPreviewComponentProps @@ -57,6 +67,10 @@ export interface FileSelectBoxProps< previewComponent?: React.ElementType

, } +/** + * Default component for the {@link FileSelectBoxProps.previewComponent|previewComponent prop} + * of the {@link FileSelectBox} component. + */ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef< HTMLDivElement, CommonPreviewComponentProps @@ -113,6 +127,9 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef< )); +/** + * Component for selecting files. + */ export const FileSelectBox = React.forwardRef(( { label = '', diff --git a/categories/blob/react/typedoc.json b/categories/blob/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/blob/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/choice/react/typedoc.json b/categories/choice/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/choice/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/color/react/src/components/ColorPicker/index.tsx b/categories/color/react/src/components/ColorPicker/index.tsx index c2be7aa..69801f3 100644 --- a/categories/color/react/src/components/ColorPicker/index.tsx +++ b/categories/color/react/src/components/ColorPicker/index.tsx @@ -2,8 +2,14 @@ import * as React from 'react'; import clsx from 'clsx'; import plugin from 'tailwindcss/plugin'; +/** + * Derived HTML element of the {@link ColorPicker} component. + */ export type ColorPickerDerivedElement = HTMLInputElement; +/** + * Props of the {@link ColorPicker} component. + */ export interface ColorPickerProps extends Omit, 'size' | 'type' | 'label'> { square?: boolean; size?: 'small' | 'medium' | 'large'; @@ -25,6 +31,9 @@ export const colorPickerPlugin = plugin(({ addComponents }) => { }); }); +/** + * Component for picking a color. + */ export const ColorPicker = React.forwardRef< ColorPickerDerivedElement, ColorPickerProps diff --git a/categories/color/react/src/components/Swatch/index.tsx b/categories/color/react/src/components/Swatch/index.tsx index 3c3bd7c..43a65cc 100644 --- a/categories/color/react/src/components/Swatch/index.tsx +++ b/categories/color/react/src/components/Swatch/index.tsx @@ -3,12 +3,18 @@ import clsx from 'clsx'; import Color from 'color'; import * as convert from 'color-convert'; +/** + * Derived HTML element of the {@link Swatch} component. + */ export type SwatchDerivedElement = HTMLInputElement; type ColorValue = ConstructorParameters[0]; type ColorMode = keyof typeof convert; +/** + * Props of the {@link Swatch} component. + */ export interface SwatchProps extends Omit, 'color'> { color: NonNullable; mode?: ColorMode; @@ -26,6 +32,9 @@ export const useSwatchControls = () => { }), [id, copyColor]); }; +/** + * Component for displaying a color. + */ export const Swatch = React.forwardRef(({ // todo unify color and mode into one "value" attribute color, diff --git a/categories/color/react/typedoc.json b/categories/color/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/color/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/formatted/react/typedoc.json b/categories/formatted/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/formatted/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/freeform/react/typedoc.json b/categories/freeform/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/freeform/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/information/react/typedoc.json b/categories/information/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/information/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/multichoice/react/src/components/TagInput/index.tsx b/categories/multichoice/react/src/components/TagInput/index.tsx index 2cf598c..78375df 100644 --- a/categories/multichoice/react/src/components/TagInput/index.tsx +++ b/categories/multichoice/react/src/components/TagInput/index.tsx @@ -5,23 +5,23 @@ import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-uti import { TextControl } from '@tesseract-design/web-base'; import plugin from 'tailwindcss/plugin'; -const TAG_INPUT_SEPARATOR_MAP = { +/** + * Separator for splitting the input value into multiple tags. + */ +export type TagInputSeparator = 'comma' | 'newline' | 'semicolon'; + +const TAG_INPUT_SEPARATOR_MAP: Record = { 'comma': ',', 'newline': 'Enter', 'semicolon': ';', } as const; -const TAG_INPUT_VALUE_SEPARATOR_MAP = { +const TAG_INPUT_VALUE_SEPARATOR_MAP: Record = { 'comma': ',', 'newline': '\n', 'semicolon': ';', } as const; -/** - * Separator for splitting the input value into multiple tags. - */ -export type TagInputSeparator = keyof typeof TAG_INPUT_SEPARATOR_MAP - /** * Derived HTML element of the {@link TagInput} component. */ @@ -263,12 +263,9 @@ export const TagInput = React.forwardRef( valueSetterFn: (v) => { setTags(v); }, - transformChangeHandlerArgs: (newTags) => { - const thisNewTags = newTags as string[]; - return ( - thisNewTags.map((t) => t.trim()).join(TAG_INPUT_VALUE_SEPARATOR_MAP[valueSeparator]) - ); - }, + transformChangeHandlerArgs: (newTags) => ( + newTags.map((t) => t.trim()).join(TAG_INPUT_VALUE_SEPARATOR_MAP[valueSeparator]) + ), }); const ref = forwardedRef ?? defaultRef; const labelId = React.useId(); diff --git a/categories/multichoice/react/typedoc.json b/categories/multichoice/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/multichoice/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/navigation/react/src/components/LinkButton/index.tsx b/categories/navigation/react/src/components/LinkButton/index.tsx index 3205cda..f09f440 100644 --- a/categories/navigation/react/src/components/LinkButton/index.tsx +++ b/categories/navigation/react/src/components/LinkButton/index.tsx @@ -49,6 +49,9 @@ export interface LinkButtonProps extends Omit(( { variant = 'bare' as const, diff --git a/categories/navigation/react/typedoc.json b/categories/navigation/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/navigation/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/number/react/typedoc.json b/categories/number/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/number/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/categories/temporal/react/src/components/TimeSpinner/index.tsx b/categories/temporal/react/src/components/TimeSpinner/index.tsx index c18f195..221e688 100644 --- a/categories/temporal/react/src/components/TimeSpinner/index.tsx +++ b/categories/temporal/react/src/components/TimeSpinner/index.tsx @@ -15,7 +15,11 @@ type Segment = `${Digit}${Digit}`; type StepHhMm = `${Segment}:${Segment}`; -type StepHhMmSs = `${StepHhMm}:${Segment}`; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +// type StepHhMmSs = `${StepHhMm}:${Segment}`; + +type StepHhMmSs = string; type Step = StepHhMm | StepHhMmSs; @@ -58,7 +62,7 @@ export interface TimeSpinnerProps extends Omit { @@ -114,7 +118,7 @@ export const TimeSpinner = React.forwardRef< const labelId = React.useId(); const id = useFallbackId(idProp); - const [hh, mm, ss = 0] = step.split(':').map((s: string) => parseInt(s, 10)) as number[]; + const [hh, mm, ss = 0] = step.split(':').map((s: string) => parseInt(s, 10)); const stepValue = ss + (mm * 60) + (hh * 3600); return ( diff --git a/categories/temporal/react/typedoc.json b/categories/temporal/react/typedoc.json new file mode 100644 index 0000000..c164df4 --- /dev/null +++ b/categories/temporal/react/typedoc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../../typedoc.base.json"], + "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"], + "entryPoints": ["src/index.ts"], + "excludeNotDocumented": true, + "includeVersion": true, + "tsconfig": "../../../tsconfig.json" +} diff --git a/docs/00-philosophy.md b/docs/00-philosophy.md index c4bd8b2..f44bfd4 100644 --- a/docs/00-philosophy.md +++ b/docs/00-philosophy.md @@ -1,4 +1,4 @@ -# Tesseract +# Philosophy ## Design - Tesseract components follow a strict and simple design philosophy. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26cc0df..8675254 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1238,6 +1238,9 @@ importers: tailwindcss: specifier: 0.0.0-insiders.7f31ac1 version: 0.0.0-insiders.7f31ac1 + typedoc: + specifier: ^0.24.8 + version: 0.24.8(typescript@5.1.3) packages: @@ -2634,6 +2637,10 @@ packages: engines: {node: '>=12'} dev: true + /ansi-sequence-parser@1.1.1: + resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==} + dev: true + /ansi-styles@3.2.1: resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} engines: {node: '>=4'} @@ -2843,6 +2850,12 @@ packages: balanced-match: 1.0.2 concat-map: 0.0.1 + /brace-expansion@2.0.1: + resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} + dependencies: + balanced-match: 1.0.2 + dev: true + /braces@3.0.2: resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} engines: {node: '>=8'} @@ -5446,6 +5459,10 @@ packages: dependencies: yallist: 4.0.0 + /lunr@2.3.9: + resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==} + dev: true + /lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true @@ -5465,6 +5482,12 @@ packages: semver: 6.3.0 dev: true + /marked@4.3.0: + resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==} + engines: {node: '>= 12'} + hasBin: true + dev: true + /mdast-util-definitions@5.1.2: resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==} dependencies: @@ -5728,6 +5751,13 @@ packages: dependencies: brace-expansion: 1.1.11 + /minimatch@9.0.3: + resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} + engines: {node: '>=16 || 14 >=14.17'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} @@ -6763,6 +6793,15 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + /shiki@0.14.3: + resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==} + dependencies: + ansi-sequence-parser: 1.1.1 + jsonc-parser: 3.2.0 + vscode-oniguruma: 1.7.0 + vscode-textmate: 8.0.0 + dev: true + /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: @@ -7330,6 +7369,20 @@ packages: is-typedarray: 1.0.0 dev: true + /typedoc@0.24.8(typescript@5.1.3): + resolution: {integrity: sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==} + engines: {node: '>= 14.14'} + hasBin: true + peerDependencies: + typescript: 4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x + dependencies: + lunr: 2.3.9 + marked: 4.3.0 + minimatch: 9.0.3 + shiki: 0.14.3 + typescript: 5.1.3 + dev: true + /typescript@4.9.5: resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==} engines: {node: '>=4.2.0'} @@ -7713,6 +7766,14 @@ packages: - terser dev: true + /vscode-oniguruma@1.7.0: + resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==} + dev: true + + /vscode-textmate@8.0.0: + resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==} + dev: true + /vue-eslint-parser@9.3.1(eslint@8.43.0): resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==} engines: {node: ^14.17.0 || >=16.0.0} diff --git a/showcases/web-kitchensink-reactnext/.gitignore b/showcases/web-kitchensink-reactnext/.gitignore index 8f322f0..dc4f46c 100644 --- a/showcases/web-kitchensink-reactnext/.gitignore +++ b/showcases/web-kitchensink-reactnext/.gitignore @@ -33,3 +33,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +typedoc.data.json diff --git a/showcases/web-kitchensink-reactnext/package.json b/showcases/web-kitchensink-reactnext/package.json index 49a5ddb..3ee896f 100644 --- a/showcases/web-kitchensink-reactnext/package.json +++ b/showcases/web-kitchensink-reactnext/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { + "typedoc": "", "dev": "next dev", "build": "next build", "start": "next start", @@ -47,6 +48,7 @@ "typescript": "5.1.3" }, "devDependencies": { - "tailwindcss": "0.0.0-insiders.7f31ac1" + "tailwindcss": "0.0.0-insiders.7f31ac1", + "typedoc": "^0.24.8" } } diff --git a/showcases/web-kitchensink-reactnext/src/components/Brand/index.tsx b/showcases/web-kitchensink-reactnext/src/components/Brand/index.tsx index 888448f..b62f4ee 100644 --- a/showcases/web-kitchensink-reactnext/src/components/Brand/index.tsx +++ b/showcases/web-kitchensink-reactnext/src/components/Brand/index.tsx @@ -7,7 +7,7 @@ export const Brand = () => { Tesseract {' '} - + Web {' '} @@ -17,7 +17,7 @@ export const Brand = () => { ) {' '} - + v.0.1.0 diff --git a/showcases/web-kitchensink-reactnext/src/components/DocsLayout.tsx b/showcases/web-kitchensink-reactnext/src/components/DocsLayout.tsx new file mode 100644 index 0000000..7a8f721 --- /dev/null +++ b/showcases/web-kitchensink-reactnext/src/components/DocsLayout.tsx @@ -0,0 +1,203 @@ +import * as React from 'react'; +import {Layouts, Widgets} from '@tesseract-design/viewfinder-react'; +import Link from 'next/link'; +import {Brand} from '@/components/Brand'; +import {DropdownSelect} from '@tesseract-design/web-choice-react'; + +export interface Page { + id: string; + href: string; + label: string; +} + +export interface DocsLayoutProps { + componentPages?: { name: string; components: Page[] }[]; + docsPages?: Page[]; + examplePages?: Page[]; + sidebarOpen?: boolean; + children?: React.ReactNode; +} + +const createSidebarPageLink = (p: Page) => ( +

+ + + {p.label} + + +
+); + +export const DocsLayout: React.FC = ({ + sidebarOpen = false, + componentPages = [], + docsPages = [], + examplePages = [], + children, +}) => { + return ( + + + + } + menuLink={ + + + + + + + + } + /> + } + sidebarBaseWidget={ + +
+
+ + + {/*
*/} + {/* */} + {/*

*/} + {/* Categories*/} + {/*

*/} + {/* */} + {/* {componentPages.map(({name, components}) => (*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/**/} +
+
+ +
+ + Repo + + + Website + + + Issues + +
+ +
+
+ + } + > + + {children} + + + ) +}; diff --git a/showcases/web-kitchensink-reactnext/src/pages/[...url].tsx b/showcases/web-kitchensink-reactnext/src/pages/[...url].tsx new file mode 100644 index 0000000..7c9cc5f --- /dev/null +++ b/showcases/web-kitchensink-reactnext/src/pages/[...url].tsx @@ -0,0 +1,249 @@ +import type {GetStaticPaths, GetStaticProps, NextPage} from 'next'; +import * as fs from 'fs/promises'; +import * as path from 'path'; +import * as React from 'react' +import {useRouter} from 'next/router'; +import ReactMarkdown from 'react-markdown'; +import {DocsLayout, Page} from '@/components/DocsLayout'; + +export interface Props { + componentPages: { name: string; components: Page[] }[], + docsPages: Page[], + examplePages: Page[], + markdown: string, +} + +const InnerPage: NextPage = ({ + componentPages, + examplePages, + docsPages, + markdown, +}) => { + const router = useRouter(); + const sidebarOpen = router.query.open === 'sidebar'; + + return ( + + {markdown && ( + ( +
    + ), + li: ({node, ...props}) => ( +
  • + ), + }} + > + {markdown} + + )} + 
    +        
+          {JSON.stringify(componentPages, null, 2)}
+        
+
    + + ) +} + +export const getStaticProps: GetStaticProps = async (ctx) => { + const { params } = ctx; + const { url } = params as { url: string[] }; + const [platform, framework, ...etcUrl] = url; + + const props = {} as Record; + + const docsPath = path.resolve('../../docs'); + const docs = await fs.readdir(docsPath); + props.docsPages = docs.map((d) => ({ + id: d, + href: `/docs/${d}`, + label: d + .split('-') + .slice(1) + .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1)) + .join(' ') + .replace(/\.md/i, '') + })); + + // const categoriesPath = path.resolve('../../categories'); + // const categories = await fs.readdir(categoriesPath); + // props.componentPages = categories.map((c) => ({ + // id: c, + // href: `/categories/${c}`, + // label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '), + // })); + + // const pagesPath = path.resolve('src/pages'); + // const examplesPath = path.resolve(pagesPath, 'examples'); + // const examplesRaw = await fs.readdir(examplesPath); + // const examplesIndexPage = await Promise.all( + // examplesRaw.map(async (c) => { + // const indexPath = await path.resolve(examplesPath, c, 'index.tsx'); + // try { + // const statResult = await fs.stat(indexPath); + // return [c, statResult.isFile()]; + // } catch { + // // noop + // } + // + // return [c, false]; + // }) + // ) as [string, boolean][]; + // const examples = examplesIndexPage + // .filter(([, hasIndexPage]) => hasIndexPage) + // .map(([key]) => key); + // props.examplePages = examples.map((e) => ({ + // id: e, + // href: `/examples/${e}`, + // label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '), + // })); + + const isHome = !Array.isArray(params.url); + if (isHome) { + const readmePath = path.resolve('../../README.md'); + props.markdown = await fs.readFile(readmePath, 'utf-8'); + } + + const theParamsUrl = params.url as string[]; + const isDocs = Array.isArray(theParamsUrl) && theParamsUrl[0] === 'docs'; + if (isDocs) { + const docsPath = path.resolve('../../docs', theParamsUrl[1] as string); + props.markdown = await fs.readFile(docsPath, 'utf-8'); + } + + const typedocData = await fs.readFile('typedoc.data.json', 'utf-8'); + const project = JSON.parse(typedocData) as any; + + props.componentPages = project.children.reduce( + (theComponents, pkg) => { + const packageNameFragments = pkg.name.split('-'); + const packageFramework = packageNameFragments.pop(); + const categoryBaseName = packageNameFragments.pop(); + + console.log(packageFramework, categoryBaseName); + + if (theComponents.some((c) => c.name === categoryBaseName)) { + return theComponents.map((cc) => { + if (cc.name !== categoryBaseName) { + return cc; + } + + let components = []; + if (packageFramework === 'react') { + components = pkg.children + .filter((exported) => { + return exported.kind === 64; // Function, these are react components + }) + .map((component) => { + return { + ...component, + id: component.name, + href: `/categories/${categoryBaseName}/${component.name}`, + label: component.name, + descriptionMarkdown: component.signatures[0].comment.summary.reduce( + (theText, t) => { + if (t.kind === 'text') { + return `${theText}${t.text}`; + } + if (t.kind === 'inline-tag' && t.tag === '@link') { + return `${theText}[${t.text}](#)` // TODO set URL + } + return theText; + }, + '' + ), + }; + }); + } + + return { + ...cc, + name: categoryBaseName, + packages: { + ...(cc.packages ?? {}), + [packageFramework]: { + components, + }, + }, + }; + }) + } + + let components = []; + if (packageFramework === 'react') { + components = pkg.children + .filter((exported) => { + return exported.kind === 64; // Function, these are react components + }) + .map((component) => { + return { + ...component, + id: component.name, + href: `/categories/${categoryBaseName}/${component.name}`, + label: component.name, + descriptionMarkdown: component.signatures[0].comment.summary.reduce( + (theText, t) => { + if (t.kind === 'text') { + return `${theText}${t.text}`; + } + if (t.kind === 'inline-tag' && t.tag === '@link') { + return `${theText}[${t.text}](#)` // TODO set URL + } + return theText; + }, + '' + ), + }; + }); + } + + return [ + ...theComponents, + { + name: categoryBaseName, + packages: { + [packageFramework]: { + components, + } + } + } + ] + }, + [], + ); + + return { + props, + }; +}; + +export default InnerPage; + +export const getStaticPaths: GetStaticPaths = async () => { + const docsPath = path.resolve('../../docs'); + const docs = await fs.readdir(docsPath); + + const categoriesPath = path.resolve('../../categories'); + const categories = await fs.readdir(categoriesPath); + + return { + paths: [ + ...docs.map((d) => `/docs/${d}`), + ], + fallback: true, + }; +}; diff --git a/showcases/web-kitchensink-reactnext/src/pages/api/hello.ts b/showcases/web-kitchensink-reactnext/src/pages/api/hello.ts deleted file mode 100644 index f8bcc7e..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/action/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/action/index.tsx deleted file mode 100644 index 0d2f9a8..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/action/index.tsx +++ /dev/null @@ -1,242 +0,0 @@ -import { NextPage } from 'next'; -import * as Action from '@tesseract-design/web-action-react'; -import { DefaultLayout } from '@/components/DefaultLayout'; - -const ActionPage: NextPage = () => { - return ( - -
    -
    -

    - ActionButton -

    -
    -
    -

    Variants

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Sizes

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Compact

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow - - } - > - Very Long Line of Text That Spans More Than The Component Width For Testing Overflow - -
    -
    -
    -
    -
    -
    -
    -     - ) -} - -export default ActionPage diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx deleted file mode 100644 index 96ccf9c..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import {NextPage} from 'next'; -import {DefaultLayout} from '@/components/DefaultLayout'; -import {Section, Subsection} from '@/components/Section'; -import * as TesseractBlob from '@tesseract-design/web-blob-react'; - -const BlobPage: NextPage = () => { - return ( - -
    - - { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}} - /> - - - { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}} - /> - - - { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}} - /> - - - { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}} - /> - -
    -     - ) -} - -export default BlobPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/color/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/color/index.tsx deleted file mode 100644 index a02333f..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/color/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import {NextPage} from 'next'; -import {DefaultLayout} from '@/components/DefaultLayout'; -import {Section, Subsection} from '@/components/Section'; -import * as Color from '@tesseract-design/web-color-react'; -import { TextInput } from '@tesseract-design/web-freeform-react'; - -const ColorPage: NextPage = () => { - return ( - -
    - - - - - - - - - - - - - - - - - - - -
    - -
    -     -
    -     - ) -} - -export default ColorPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx deleted file mode 100644 index 52c624b..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import {NextPage} from 'next'; -import {DefaultLayout} from '@/components/DefaultLayout'; -import {Section, Subsection} from '@/components/Section'; -import * as Formatted from '@tesseract-design/web-formatted-react'; -import {useRef} from 'react'; -import {ActionButton} from '@tesseract-design/web-action-react'; - -const TemporalPage: NextPage = () => { - const phoneNumberRef = useRef(null); - return ( - -
    - - { console.log('focus', e.currentTarget)}} - onBlur={(e) => { console.log('blur', e.currentTarget)}} - onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}} - /> - - - { console.log('focus', e.currentTarget)}} - onBlur={(e) => { console.log('blur', e.currentTarget)}} - onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}} - /> - - - - - -
    -
    - { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}} - /> -
    -
    - { - if (phoneNumberRef.current) { - phoneNumberRef.current.value = '+639123456789'; - } - }} - > - Set Value - -
    -
    - { - if (phoneNumberRef.current) { - phoneNumberRef.current.value = '+63465123456'; - } - }} - > - Set Other Value - -
    -
    - { - if (phoneNumberRef.current) { - phoneNumberRef.current.value = '+63288888888'; - } - }} - > - Set Yet Other Value - -
    -
    -     -
    -
    - - - - - - -
    -
    - - - -
    -     - ) -} - -export default TemporalPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/freeform/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/freeform/index.tsx deleted file mode 100644 index 3cb6882..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/freeform/index.tsx +++ /dev/null @@ -1,601 +0,0 @@ -import { NextPage } from 'next'; -import * as Freeform from '@tesseract-design/web-freeform-react'; -import { DefaultLayout } from '@/components/DefaultLayout'; -import { Section, Subsection } from '@/components/Section'; - -const FreeformPage: NextPage = () => { - return ( - -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - Fieldset Test -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - Disabled Test -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - Hi, my name is - {' '} - - {' '} - but you can call me - {' '} - - . -
    -
    -     - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -     -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -     - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -     -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -     - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -     -
    -     - ); -}; - -export default FreeformPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/navigation/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/navigation/index.tsx deleted file mode 100644 index 02516a5..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/navigation/index.tsx +++ /dev/null @@ -1,469 +0,0 @@ -import { NextPage } from 'next'; -import * as Navigation from '@tesseract-design/web-navigation-react'; -import * as Info from '@tesseract-design/web-information-react'; - -const ActionPage: NextPage = () => { - return ( -
    -
    -
    -

    - Navigation -

    -
    -
    -

    - LinkButton -

    -
    -
    -

    Variants

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Sizes

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Compact

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Subtext - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Subtext - - } - badge={ - - 69 - - } - href="#" - > - Button - -
    -
    - - Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow - - } - badge={ - - 69 - - } - href="#" - > - Very Long Line of Text That Spans More Than The Component Width For Testing Overflow - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - ) -} - -export default ActionPage diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/number/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/number/index.tsx deleted file mode 100644 index ded534c..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/number/index.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import * as React from 'react'; -import { NextPage } from 'next'; -import * as TesseractNumber from '@tesseract-design/web-number-react'; -import {Section, Subsection} from '@/components/Section'; - -const NumberPage: NextPage = () => { - return ( -
    -
    - - - - - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - A - -
    -
    -

    - Matrix -

    -
    - TODO - - -
    -
    -
    - ) -} - -export default NumberPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/option/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/option/index.tsx deleted file mode 100644 index 5674d08..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/option/index.tsx +++ /dev/null @@ -1,1663 +0,0 @@ -import { NextPage } from 'next'; -import * as Choice from '@tesseract-design/web-choice-react'; -import * as MultiChoice from '@tesseract-design/web-multichoice-react'; -import { DefaultLayout } from '@/components/DefaultLayout'; -import {ReactNode} from 'react'; - -type Props = { - options: ReactNode, -} - -const OptionPage: NextPage = ({ - options = ( - <> - - - - - - - - - - - - - ) -}) => { - return ( - -
    -
    -
    -

    - DropdownSelect -

    -
    -
    -

    - Default -

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    - Disabled Test -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - Hi, my name is - {' '} - - {' '} - but you can call me - {' '} - - . -
    -
    -
    -
    -
    -

    Alternate

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - MenuSelect -

    -
    -
    -

    - Default -

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    -
    -

    Alternate

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    -
    -

    - Multiple -

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - RadioButton -

    -
    -
    -

    Variants

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Sizes

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Compact

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - RadioTickBox -

    -
    -
    -
    - - RadioButton - -
    -
    -
    -
    - -
    - This is a very long text that may span a couple of lines. -
    -
    - The subtext should not be included with the click area of the component. -
    - - } - name="RadioButton" - > - RadioButton -     -
    -
    -
    -
    -
    -
    -
    -

    - ToggleButton -

    -
    -
    -

    Variants

    -
    -
    -
    - { console.log(el); }} - block - > - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Sizes

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Button - -
    -
    -
    -
    -
    -

    Compact

    -
    -
    -
    - - Button - -
    -
    - - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    - - Subtext - - } - > - Button - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - ToggleSwitch -

    -
    -
    -

    Default

    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -

    With Unchecked Label

    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - ToggleTickBox -

    -
    -
    -

    Default

    -
    -
    -
    - - Checkbox - -
    -
    - - Checkbox - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - ComboBox -

    -
    -
    -

    - Default -

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    -
    -

    Alternate

    -
    -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    - - {options} - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - TagInput -

    -
    -
    -

    - Default -

    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - { - console.log('focus', e.currentTarget); - }} - onBlur={(e) => { - console.log('blur', e.currentTarget); - }} - onChange={(e) => { - console.log('change', e.currentTarget.value); - }} - /> -
    -
    - { - console.log('focus', e.currentTarget); - }} - onBlur={(e) => { - console.log('blur', e.currentTarget); - }} - onChange={(e) => { - console.log('change', e.currentTarget.value); - }} - /> -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -

    Alternate

    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -     - ); -}; - -export default OptionPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/presentation/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/presentation/index.tsx deleted file mode 100644 index 0b4d0b5..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/presentation/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { NextPage } from 'next'; -import { DefaultLayout } from '@/components/DefaultLayout'; - -const PresentationPage: NextPage = () => { - return ( - -
    -
    -
    -

    - Tabs -

    -
    - TODO -
    -
    -
    -
    -
    -

    - Accordion -

    -
    - TODO -
    -
    -
    -
    -     - ) -} - -export default PresentationPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/temporal/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/temporal/index.tsx deleted file mode 100644 index cb6c846..0000000 --- a/showcases/web-kitchensink-reactnext/src/pages/categories/temporal/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import {NextPage} from 'next'; -import {DefaultLayout} from '@/components/DefaultLayout'; -import {Section, Subsection} from '@/components/Section'; -import * as Temporal from '@tesseract-design/web-temporal-react'; -import * as TemporalWip from '@/components/temporal'; - -const TemporalPage: NextPage = () => { - return ( - -
    - - - -
    -
    - - - - - - - - - -
    -
    - - - -
    -
    - - - -
    -     - ) -} - -export default TemporalPage; diff --git a/showcases/web-kitchensink-reactnext/src/pages/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/index.tsx index 4f2c248..ea4af9a 100644 --- a/showcases/web-kitchensink-reactnext/src/pages/index.tsx +++ b/showcases/web-kitchensink-reactnext/src/pages/index.tsx @@ -1,136 +1,24 @@ import type {GetStaticProps, NextPage} from 'next'; -import Link from 'next/link'; import * as fs from 'fs/promises'; import * as path from 'path'; -import { Layouts, Widgets } from '@tesseract-design/viewfinder-react'; import * as React from 'react' import {useRouter} from 'next/router'; -import {Brand} from '@/components/Brand'; import ReactMarkdown from 'react-markdown'; +import {Layouts} from '@tesseract-design/viewfinder-react'; -type Page = { - id: string, - href: string, - label: string, +export interface Props { + markdown: string, } -type Props = { - componentPages: Page[], - examplePages: Page[], -} - -const createSidebarPageLink = (p: Page) => ( -
    - - - {p.label} - - -
    -); - const IndexPage: NextPage = ({ - componentPages, - examplePages, + markdown, }) => { const router = useRouter(); + const sidebarOpen = router.query.open === 'sidebar'; return ( - - - - } - menuLink={ - - - - - - - - } - /> - } - sidebarBaseWidget={ - -
    -
    - - -
    -
    - -
    - - Repo - - - Website - - - Issues - -
    -     -
    -
    -     - } - > - + + = ({ ), }} > - {`# Tesseract - -## Design -- Tesseract components follow a strict and simple design philosophy. -- The aesthetics of the elements are rigid--any element which users can - interact with should be easily recognizable--they are determined by the - usage of the chosen accent color. -- The look and feel of the elements are designed to be less opinionated - as possible. - -## Engineering -- Every component is a derivative of an existing HTML element, - thus any Tesseract component can substitute for any HTML element - with added capabilities like improved user experience and consistency. -- In case of overloaded HTML elements such as \`\`, Tesseract - dissects the element into multiple components each having a single - defined behavior. -- Tesseract components gracefully degrade to their native counterparts, - allowing user agents without client-side JavaScript to still use the - components with minimal loss of functionality. -- Tesseract components render Web-compliant HTML and CSS, thus - making it resilient to future changes in the HTML/CSS specifications. -- Tesseract components are designed to be used with popular JavaScript - frameworks like React. Consumption of the components using the framework - of choice should be seamless, even with the use of form-handling libraries. -- Terminal-based browsers such as Lynx are used to test the components - for accessibility and graceful degradation. - -## Accessibility -- Components are made to be accessible according to Web standards (WAI-ARIA). -- Focus handling is managed sensibly to facilitate functional - keyboard navigation. -- In cases where there are improvements in user experience, some - elements may have different markup and appearance. Tesseract - ensures components are still usable on most assistive technologies given - both versions of the user interface. -- All components are named in order to depict the purpose, the nature of data - being operated, and UX expectations. -`} + {markdown} - -     - ) + + + ); } -export const getStaticProps: GetStaticProps = async () => { - const pagesPath = path.resolve('src/pages'); - const categoriesPath = path.resolve(pagesPath, 'categories'); - const categoriesRaw = await fs.readdir(categoriesPath); - const categoriesIndexPage = await Promise.all( - categoriesRaw.map(async (c) => { - const indexPath = await path.resolve(categoriesPath, c, 'index.tsx'); - try { - const statResult = await fs.stat(indexPath); - return [c, statResult.isFile()]; - } catch { - // noop - } - - return [c, false]; - }) - ) as [string, boolean][]; - const categories = categoriesIndexPage - .filter(([, hasIndexPage]) => hasIndexPage) - .map(([key]) => key); - - const examplesPath = path.resolve(pagesPath, 'examples'); - const examplesRaw = await fs.readdir(examplesPath); - const examplesIndexPage = await Promise.all( - examplesRaw.map(async (c) => { - const indexPath = await path.resolve(examplesPath, c, 'index.tsx'); - try { - const statResult = await fs.stat(indexPath); - return [c, statResult.isFile()]; - } catch { - // noop - } +export const getStaticProps: GetStaticProps = async (ctx) => { + const props = {} as Record; - return [c, false]; - }) - ) as [string, boolean][]; - const examples = examplesIndexPage - .filter(([, hasIndexPage]) => hasIndexPage) - .map(([key]) => key); + const readmePath = path.resolve('../../README.md'); + props.markdown = await fs.readFile(readmePath, 'utf-8'); return { - props: { - componentPages: categories.map((c) => ({ - id: c, - href: `/categories/${c}`, - label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '), - })), - examplePages: examples.map((e) => ({ - id: e, - href: `/examples/${e}`, - label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '), - })), - }, + props, }; }; diff --git a/showcases/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/web/react/examples/blog-post/index.tsx similarity index 100% rename from showcases/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx rename to showcases/web-kitchensink-reactnext/src/pages/web/react/examples/blog-post/index.tsx diff --git a/showcases/web-kitchensink-reactnext/src/pages/examples/registration-form/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/web/react/examples/registration-form/index.tsx similarity index 100% rename from showcases/web-kitchensink-reactnext/src/pages/examples/registration-form/index.tsx rename to showcases/web-kitchensink-reactnext/src/pages/web/react/examples/registration-form/index.tsx diff --git a/showcases/web-kitchensink-reactnext/typedoc.json b/showcases/web-kitchensink-reactnext/typedoc.json new file mode 100644 index 0000000..29c3347 --- /dev/null +++ b/showcases/web-kitchensink-reactnext/typedoc.json @@ -0,0 +1,8 @@ +{ + "entryPoints": ["../../categories/**"], + "entryPointStrategy": "packages", + "name": "@tesseract-design/tesseract-web-react", + "json": "typedoc.data.json", + "pretty": true, + "tsconfig": "../../tsconfig.json" +} diff --git a/tsconfig.json b/tsconfig.json index 5a42ae0..5180ac8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,9 @@ { - "exclude": ["node_modules"], + "include": ["categories/**/src/*"], + "exclude": [ + "node_modules", + "**/*.test.{ts,js,tsx,jsx}" + ], "compilerOptions": { "module": "ESNext", "lib": ["ESNext", "DOM"], diff --git a/typedoc.base.json b/typedoc.base.json new file mode 100644 index 0000000..daa58cb --- /dev/null +++ b/typedoc.base.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://typedoc.org/schema.json", + "includeVersion": true +}