@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
199 lines (198 loc) • 6.59 kB
JavaScript
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