react-github-permalink/src/library/GithubPermalink/GithubPermalink.stories.tsx at 89a57043a34cceae6372cd8cacf032b00b153c68 · dwjohnston/react-github-permalink · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import type { Meta, StoryObj } from "@storybook/react";

import { GithubPermalink } from "./GithubPermalink";
import { GithubPermalinkProvider } from "../config/GithubPermalinkContext";
import "./github-permalink.css";

const meta: Meta<typeof GithubPermalink> = {
  component: GithubPermalink,
};

export default meta;

type Story = StoryObj<typeof GithubPermalink>;

/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/react/api/csf
 * to learn how to use render functions.
 */
export const Primary: Story = {
  render: () => (
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />
  ),
};

export const DifferentLanguages: Story = {
  render: () => (<div>
    <p>Go</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />

    <p>JavaScript</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bc75e8fe2d1c0395c9443afe1837f453c05a7698/sample_files/sample1.js#L3-L17" />

    <p>SQL</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bc75e8fe2d1c0395c9443afe1837f453c05a7698/sample_files/sample1.sql#L11-L21" />

    <p>TSX</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/242681a9df549adcc9a7fca0d8421d98b7e312c4/sample_files/sample1.tsx#L1-L11" />

    <p>TSX2</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-renders/blob/b91494bff90774073c10ba7a2a362d37c8d083ef/src/react-renders/ReactRenders3.tsx#L8-L32" />


    <p>Docker file</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.dockerfile#L1-L20" />

    <p>XML</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.xml#L1-L15" />

    <p>HTML</p>
    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.html#L1-L19" />

  </div>
  ),
};

export const WithBackground: Story = {
  render: () => (
    <div style={{ backgroundColor: "pink", padding: "1em" }}>
      <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />
    </div>
  ),
};

export const CustomDataFn: Story = {
  render: () => (
    <GithubPermalinkProvider
      getDataFn={(permalink) => {
        return Promise.resolve({
          lines: ["a", "b"],
          lineFrom: 1,
          lineTo: 2,
          commit: "123",
          path: "something",
          owner: "fooby",
          repo: "repo",
          commitUrl: "https://example.com",
          status: "ok",
        });
      }}
    >
      <GithubPermalink permalink="https://github.com/djohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />
    </GithubPermalinkProvider>
  ),
};

export const ErrorReporting: Story = {
  render: () => (
    <GithubPermalinkProvider onError={(err) => console.error(err)}>
      <GithubPermalink permalink="https://github.com/djohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />
    </GithubPermalinkProvider>
  ),
};

export const WithToken: Story = {
  render: () => (
    <GithubPermalinkProvider githubToken={process.env.STORYBOOK_GITHUB_TOKEN}>
      {" "}
      <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />
    </GithubPermalinkProvider>
  ),
};

export const LongPath: Story = {
  render: () => (
    <div style={{ width: 410, color: "solid 1px red" }}>
      <GithubPermalinkProvider githubToken={process.env.STORYBOOK_GITHUB_TOKEN}>
        {" "}
        <GithubPermalink permalink="https://github.com/dwjohnston/blacksheepcode/blob/24c6f3ef9d09f9e061226e19e78a4c8d1ee03710/app/routes/posts/adding_msw_bundler_to_remix_app_2.mdx#L1-L11" />
      </GithubPermalinkProvider>
    </div>
  ),
};

export const SingleLine: Story = {
  render: () => (
    <GithubPermalink permalink="https://github.com/dwjohnston/blacksheepcode/blob/72ee472bfa896df255ae42ef017ad0cca96b2333/app/components/PostComments/PostComments.tsx#L28" />
  ),
};