20.0.0 • Published 5 months ago

scoobie v20.0.0

Weekly downloads
175
License
MIT
Repository
github
Last release
5 months ago

🧶 Scoobie

GitHub Release GitHub Validate npm package

Component library for SEEK documentation sites.

We use this to build developer.seek.com, among other things.

yarn add --exact scoobie

Setup

sku.config.ts

Compile Scoobie:

module.exports = {
  // ...
  compilePackages: ['scoobie'],
};

src/render.tsx

Fetch our favourite fonts from our Google overlords, Roboto and Roboto Mono:

import { robotoHtml, robotoMonoHtml } from 'scoobie/typography';

const skuRender: Render<RenderContext> = {
  renderDocument: ({ app, bodyTags, headTags }) => `
    <!DOCTYPE html>
    <html>
      <head>
        <!-- ... -->
        ${robotoHtml}
        ${robotoMonoHtml}
        <!-- ... -->
  `,
};

If you manually manage the Content Security Policy of your site, you can specify the following sources along with the script hashes from typography.ts:

Content-Security-Policy: font-src https://fonts.gstatic.com; script-src 'sha256-...' 'sha256-...'; style-src https://fonts.googleapis.com

Components

Blockquote

Renders rich quoted content.

import { List, Text } from 'braid-design-system';
import React from 'react';
import { Blockquote } from 'scoobie';

export const MyFirstBlockquote = () => (
  <Blockquote>
    <Text>This is a paragraph.</Text>

    <List>
      <Text>This is a bullet point.</Text>
    </List>
  </Blockquote>
);

CodeBlock

Render a rich CodeContainer with interactive copy & GraphQL playground link buttons.

import React from 'react';
import { CodeBlock } from 'scoobie';

export const MyFirstCodeBlock = () => (
  <CodeBlock language="javascript" label="Here is the code">
    console.log('hello, world');
  </CodeBlock>
);

CodeContainer

Render code with Prism syntax highlighting, with optional lineNumbers.

import React from 'react';
import { CodeContainer } from 'scoobie';

export const MyFirstCodeContainer = () => (
  <CodeContainer language="javascript">
    console.log('hello, world');
  </CodeContainer>
);

CopyableText

Render a Text component that copies the children string to clipboard on click.

import React from 'react';
import { CodeBlock } from 'scoobie';

export const MyFirstCopyableText = () => (
  <CopyableText>This gets copied to clipboard.</CopyableText>
);

InlineCode

Render code inline with text.

import { Text } from 'braid-design-system';
import React from 'react';
import { InlineCode } from 'scoobie';

export const MyFirstInlineCode = () => (
  <Text>
    Some text with <InlineCode>InlineCode</InlineCode>!
  </Text>
);

InternalLink

Render an internal link. Internal links pass through the v or ScoobieLinkProvider URL parameters for UI version switching.

Unlike SmartTextLink, this is not bound to a parent Text as it has no underlying TextLink. It can be used to make complex components navigable rather than just sections of text.

import { Stack, Text } from 'braid-design-system';
import React from 'react';
import { InternalLink } from 'scoobie';

export const SomeComplexLinkElement = () => (
  <InternalLink href="/page#id" reset>
    <Stack space="medium">
      <Text>InternalLink supports complex children.</Text>

      <Text size="small">It is not bound to a parent Text component.</Text>
    </Stack>
  </InternalLink>
);

ScoobieLink

Render all underlying links as follows:

  • Internal links pass through the v or ScoobieLinkProvider URL parameters for UI version switching
  • External links open in a new tab
  • Links with a download attribute prompt the user with a file download

This should be supplied to BraidProvider as the custom linkComponent:

import { BraidProvider, TextLink } from 'braid-design-system';
import apacTheme from 'braid-design-system/themes/apac';
import React from 'react';
import { ScoobieLink } from 'scoobie';

export const Component = () => (
  <BraidProvider linkComponent={ScoobieLink} theme={apacTheme}>
    <TextLink href="/root-relative">Internal link</TextLink>
  </BraidProvider>
);

ScoobieLinkProvider

Propagate a custom set of URL parameters on internal links.

import { BraidProvider, TextLink } from 'braid-design-system';
import apacTheme from 'braid-design-system/themes/apac';
import React from 'react';
import { ScoobieLink } from 'scoobie';

export const Component = () => (
  <ScoobieLinkProvider propagateSearchParams={['debug', 'v']}>
    <BraidProvider linkComponent={ScoobieLink} theme={apacTheme}>
      <TextLink href="/root-relative">Internal link</TextLink>
    </BraidProvider>
  </ScoobieLinkProvider>
);

SmartTextLink

Render a text link. External links open in a new tab and have an IconNewWindow suffix.

import { Stack, Text } from 'braid-design-system';
import React from 'react';
import { SmartTextLink } from 'scoobie';

export const SomeLinks = () => (
  <Text>
    <Stack space="medium">
      <SmartTextLink href="/page#id">Scrolls smoothly</SmartTextLink>

      <SmartTextLink href="https://developer.seek.com/schema">
        Opens in new tab
      </SmartTextLink>
    </Stack>
  </Text>
);

Webpack reference

Scoobie distributes its Webpack config via a scoobie/webpack submodule:

const { ScoobieWebpackPlugin } = require('scoobie/webpack');

Compatibility notes:

  • SVGs cannot be directly imported into JSX as components.

    Consider inlining the SVGs in your JSX instead.

19.0.1

6 months ago

19.0.0

6 months ago

19.0.3

5 months ago

19.0.2

5 months ago

18.2.0

6 months ago

18.1.2

7 months ago

20.0.0

5 months ago

19.1.0

5 months ago

18.1.1

9 months ago

18.1.0

9 months ago

18.0.1

9 months ago

18.0.0

9 months ago

17.1.2

10 months ago

17.1.1

10 months ago

17.1.4

10 months ago

17.1.3

10 months ago

17.1.0

10 months ago

17.1.6

10 months ago

17.1.5

10 months ago

17.1.7

10 months ago

17.2.1

10 months ago

17.2.0

10 months ago

17.2.2

10 months ago

17.0.0

11 months ago

16.0.0

12 months ago

15.3.0

1 year ago

15.2.0

1 year ago

15.1.0

1 year ago

14.5.6

2 years ago

15.0.0

2 years ago

14.5.4

2 years ago

14.5.5

2 years ago

14.5.0

2 years ago

14.5.1

2 years ago

14.5.2

2 years ago

14.5.3

2 years ago

14.3.6

2 years ago

14.3.7

2 years ago

14.3.4

2 years ago

14.3.5

2 years ago

14.4.0

2 years ago

14.4.1

2 years ago

14.1.3

2 years ago

14.1.4

2 years ago

14.1.5

2 years ago

14.2.0

2 years ago

14.2.1

2 years ago

14.1.5-beta.1

2 years ago

14.3.0

2 years ago

14.3.1

2 years ago

14.3.2

2 years ago

14.3.3

2 years ago

14.2.0-beta.1

2 years ago

14.1.0

3 years ago

14.1.1

3 years ago

13.0.11

3 years ago

13.0.12

3 years ago

14.0.0

3 years ago

14.0.1

3 years ago

13.0.8

3 years ago

13.0.9

3 years ago

13.0.6

3 years ago

13.0.7

3 years ago

13.0.10

3 years ago

13.0.5

3 years ago

13.0.4

3 years ago

12.0.0

4 years ago

12.0.1

4 years ago

13.0.2

3 years ago

13.0.3

3 years ago

13.0.0

4 years ago

13.0.1

3 years ago

12.1.0

4 years ago

12.1.1

4 years ago

10.0.2

4 years ago

11.0.0

4 years ago

10.1.0

4 years ago

10.0.0

4 years ago

10.0.1

4 years ago

9.1.1

4 years ago

10.0.0-beta.1

4 years ago

9.1.0

4 years ago

8.2.9

4 years ago

9.0.0

4 years ago

8.4.0

4 years ago

8.3.0

4 years ago

8.2.7

4 years ago

8.2.6

4 years ago

8.2.8

4 years ago

8.2.5

4 years ago

8.2.8-beta.2

4 years ago

8.2.8-beta.1

4 years ago

8.2.9-beta.1

4 years ago

8.2.3

4 years ago

8.2.2

4 years ago

8.2.4

4 years ago

8.2.1

4 years ago

8.2.0

4 years ago

8.1.1

4 years ago

8.1.0

4 years ago

8.0.5

4 years ago

8.0.4

4 years ago

8.0.3

4 years ago

8.0.2

4 years ago

8.0.1

4 years ago

8.0.0

4 years ago

6.2.0

4 years ago

7.0.0

4 years ago

6.1.0

4 years ago

6.0.6

4 years ago

6.0.5

4 years ago

6.0.0-beta.7

4 years ago

6.0.0-beta.8

4 years ago

6.0.4-beta.4

4 years ago

6.0.0-beta.9

4 years ago

6.0.4-beta.3

4 years ago

6.0.4-beta.2

4 years ago

6.0.0-beta.3

4 years ago

6.0.4-beta.1

4 years ago

6.0.0-beta.4

4 years ago

6.0.0-beta.5

4 years ago

6.0.0-beta.6

4 years ago

6.0.0-beta.1

4 years ago

6.0.0-beta.2

4 years ago

6.0.2-beta.1

4 years ago

5.2.1

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

6.0.3

4 years ago

6.0.2

4 years ago

6.0.4

4 years ago

5.2.0

4 years ago

5.1.1

4 years ago

5.1.0

4 years ago

5.0.4

4 years ago

5.0.3

4 years ago

5.0.2

4 years ago

5.0.1

4 years ago

5.0.0

4 years ago

5.0.0-beta.1

4 years ago

4.7.0

5 years ago

4.6.1

5 years ago

4.6.0

5 years ago

4.5.7

5 years ago

4.5.6

5 years ago

4.5.5

5 years ago

4.5.4

5 years ago

4.5.3

5 years ago

4.5.2

5 years ago

4.5.1

5 years ago

4.5.0

5 years ago

4.4.1

5 years ago

4.4.0

5 years ago

4.3.0

5 years ago

4.2.0

5 years ago

4.1.1

5 years ago

4.1.0

5 years ago

4.0.2

5 years ago

3.15.0

5 years ago

3.14.0

5 years ago

3.15.1

5 years ago

4.0.1

5 years ago

4.0.0

5 years ago

3.13.0

5 years ago

3.12.0

5 years ago

3.12.0-beta.4

5 years ago

3.12.0-beta.3

5 years ago

3.12.0-beta.2

5 years ago

3.12.0-beta.1

5 years ago

3.11.0

5 years ago

3.10.1

5 years ago

3.10.0

5 years ago

3.9.5

5 years ago

3.9.4

5 years ago

3.9.3

5 years ago

3.9.2

5 years ago

3.9.1

5 years ago

3.9.0

5 years ago

3.8.2

5 years ago

3.8.0

5 years ago

3.8.1

5 years ago

3.7.2

5 years ago

3.7.1

5 years ago

3.7.0

5 years ago

3.6.0

5 years ago

3.5.3

5 years ago

3.5.2

5 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.2

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.0

5 years ago

3.3.0-beta.1

5 years ago

3.2.1

5 years ago

3.2.0

5 years ago

3.1.3

5 years ago

3.1.3-beta.1

5 years ago