UNPKG

@hypothesis/frontend-shared

Version:

Shared components, styles and utilities for Hypothesis projects

199 lines (198 loc) 6.59 kB
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/GettingStarted.js"; import Library from '../Library'; import Next from '../LibraryNext'; import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime"; export default function GettingStartedPage() { return _jsxDEV(Library.Page, { title: "Getting started", intro: _jsxDEV("p", { children: ["The ", _jsxDEV("code", { children: "@hypothesis/frontend-shared" }, void 0, false, { fileName: _jsxFileName, lineNumber: 10, columnNumber: 15 }, this), " package provides reusable UI components for Hypothesis front-end applications."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 9 }, this), children: [_jsxDEV("div", { className: "space-y-8", children: [_jsxDEV("p", { children: "This package provides two sets of components:" }, void 0, false, { fileName: _jsxFileName, lineNumber: 16, columnNumber: 9 }, this), _jsxDEV("ul", { children: [_jsxDEV("li", { children: [_jsxDEV("strong", { children: "Updated, standalone components" }, void 0, false, { fileName: _jsxFileName, lineNumber: 19, columnNumber: 13 }, this), ". These components require ", _jsxDEV("code", { children: "tailwindcss" }, void 0, false, { fileName: _jsxFileName, lineNumber: 20, columnNumber: 21 }, this), ". Use of these components is preferred."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 18, columnNumber: 11 }, this), _jsxDEV("li", { children: [_jsxDEV("strong", { children: "Legacy components" }, void 0, false, { fileName: _jsxFileName, lineNumber: 24, columnNumber: 13 }, this), " with external assets (SASS and SVG source, e.g.). These are being deprecated as their updated counterparts are implemented, and are slated for removal in v6.0 of this package."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 23, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 17, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 15, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "Installation", children: _jsxDEV(Next.Code, { content: `$ yarn add tailwindcss @hypothesis/frontend-shared` }, void 0, false, { fileName: _jsxFileName, lineNumber: 32, columnNumber: 9 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 31, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "Configuring and using updated components", children: [_jsxDEV(Library.Example, { title: "Configure tailwindcss", children: [_jsxDEV("p", { children: ["Configure your ", "project's", " tailwind configuration object:"] }, void 0, true, { fileName: _jsxFileName, lineNumber: 38, columnNumber: 11 }, this), _jsxDEV("ul", { children: [_jsxDEV("li", { children: ["Use this ", "package's", " tailwind preset"] }, void 0, true, { fileName: _jsxFileName, lineNumber: 40, columnNumber: 13 }, this), _jsxDEV("li", { children: ["Add this ", "package's", " JS source to the ", "configuration's", ' ', _jsxDEV("code", { children: "content" }, void 0, false, { fileName: _jsxFileName, lineNumber: 43, columnNumber: 15 }, this), " globs"] }, void 0, true, { fileName: _jsxFileName, lineNumber: 41, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 39, columnNumber: 11 }, this), _jsxDEV(Next.Code, { size: "sm", title: "Your project's tailwind config", content: `import tailwindConfig from '@hypothesis/frontend-shared/lib/tailwind.preset.js'; export default { presets: [tailwindConfig], content: [ './node_modules/@hypothesis/frontend-shared/lib/**/*.js', // ... ], // ...` }, void 0, false, { fileName: _jsxFileName, lineNumber: 46, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 37, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Usage", children: _jsxDEV(Next.Usage, { componentName: "Card, Link" }, void 0, false, { fileName: _jsxFileName, lineNumber: 61, columnNumber: 11 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 60, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 36, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "Configuring and using legacy components", children: [_jsxDEV(Library.Example, { title: "Import SASS", children: _jsxDEV(Next.Code, { size: "sm", title: "Your project's SASS entry point", content: `@use '@hypothesis/frontend-shared/styles';` }, void 0, false, { fileName: _jsxFileName, lineNumber: 67, columnNumber: 11 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 66, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Usage", children: _jsxDEV(Next.Usage, { generation: "legacy", componentName: "Card, Link" }, void 0, false, { fileName: _jsxFileName, lineNumber: 74, columnNumber: 11 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 73, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 65, columnNumber: 7 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 6, columnNumber: 5 }, this); } //# sourceMappingURL=GettingStarted.js.map