Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit 7258925

Browse files
hussedevhussedev
committed
chore: format codebase with prettier
1 parent e7dcd37 commit 7258925

16 files changed

+450
-77
lines changed

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export default tseslint.config({
1818
languageOptions: {
1919
// other options...
2020
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
21+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
2222
tsconfigRootDir: import.meta.dirname,
2323
},
2424
},
25-
})
25+
});
2626
```
2727

2828
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,11 +31,11 @@ export default tseslint.config({
3131

3232
```js
3333
// eslint.config.js
34-
import react from 'eslint-plugin-react'
34+
import react from "eslint-plugin-react";
3535

3636
export default tseslint.config({
3737
// Set the react version
38-
settings: { react: { version: '18.3' } },
38+
settings: { react: { version: "18.3" } },
3939
plugins: {
4040
// Add the react plugin
4141
react,
@@ -44,7 +44,7 @@ export default tseslint.config({
4444
// other rules...
4545
// Enable its recommended rules
4646
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
47+
...react.configs["jsx-runtime"].rules,
4848
},
49-
})
49+
});
5050
```

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />

‎lib/examples/Button.stories.ts

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import type { Meta, StoryObj } from '@storybook/react';
2-
import { fn } from '@storybook/test';
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { fn } from "@storybook/test";
33

4-
import { Button } from './Button';
4+
import { Button } from "./Button";
55

66
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
77
const meta = {
8-
title: 'Example/Button',
8+
title: "Example/Button",
99
component: Button,
1010
parameters: {
1111
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
12-
layout: 'centered',
12+
layout: "centered",
1313
},
1414
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
15-
tags: ['autodocs'],
15+
tags: ["autodocs"],
1616
// More on argTypes: https://storybook.js.org/docs/api/argtypes
1717
argTypes: {
18-
backgroundColor: { control: 'color' },
18+
backgroundColor: { control: "color" },
1919
},
2020
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
2121
args: { onClick: fn() },
@@ -28,26 +28,26 @@ type Story = StoryObj<typeof meta>;
2828
export const Primary: Story = {
2929
args: {
3030
primary: true,
31-
label: 'Button',
31+
label: "Button",
3232
},
3333
};
3434

3535
export const Secondary: Story = {
3636
args: {
37-
label: 'Button',
37+
label: "Button",
3838
},
3939
};
4040

4141
export const Large: Story = {
4242
args: {
43-
size: 'large',
44-
label: 'Button',
43+
size: "large",
44+
label: "Button",
4545
},
4646
};
4747

4848
export const Small: Story = {
4949
args: {
50-
size: 'small',
51-
label: 'Button',
50+
size: "small",
51+
label: "Button",
5252
},
5353
};

‎lib/examples/Button.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,14 @@ export const Button = ({
2323
label,
2424
...props
2525
}: ButtonProps) => {
26-
const mode = primary
27-
? "storybook-button--primary"
28-
: "storybook-button--secondary";
26+
const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
2927
return (
3028
<button
3129
type="button"
32-
className={["storybook-button", `storybook-button--${size}`, mode].join(
33-
" "
34-
)}
30+
className={["storybook-button", `storybook-button--${size}`, mode].join(" ")}
3531
style={{ backgroundColor }}
36-
{...props}>
32+
{...props}
33+
>
3734
{label}
3835
</button>
3936
);

‎lib/examples/Configure.mdx

+19-14
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,23 @@ import Accessibility from "./assets/accessibility.png";
1515
import Theming from "./assets/theming.png";
1616
import AddonLibrary from "./assets/addon-library.png";
1717

18-
export const RightArrow = () => <svg
19-
viewBox="0 0 14 14"
20-
width="8px"
21-
height="14px"
22-
style={{
23-
marginLeft: '4px',
24-
display: 'inline-block',
25-
shapeRendering: 'inherit',
26-
verticalAlign: 'middle',
27-
fill: 'currentColor',
28-
'path fill': 'currentColor'
18+
export const RightArrow = () => (
19+
<svg
20+
viewBox="0 0 14 14"
21+
width="8px"
22+
height="14px"
23+
style={{
24+
marginLeft: "4px",
25+
display: "inline-block",
26+
shapeRendering: "inherit",
27+
verticalAlign: "middle",
28+
fill: "currentColor",
29+
"path fill": "currentColor",
2930
}}
30-
>
31-
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
32-
</svg>
31+
>
32+
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
33+
</svg>
34+
);
3335

3436
<Meta title="Configure your project" />
3537

@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
3840
# Configure your project
3941

4042
Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
43+
4144
</div>
4245
<div className="sb-section">
4346
<div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
8487
# Do more with Storybook
8588

8689
Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
90+
8791
</div>
8892

8993
<div className="sb-section">
@@ -203,6 +207,7 @@ export const RightArrow = () => <svg
203207
target="_blank"
204208
>Discover tutorials<RightArrow /></a>
205209
</div>
210+
206211
</div>
207212

208213
<style>

‎lib/examples/Header.stories.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import type { Meta, StoryObj } from '@storybook/react';
2-
import { fn } from '@storybook/test';
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { fn } from "@storybook/test";
33

4-
import { Header } from './Header';
4+
import { Header } from "./Header";
55

66
const meta = {
7-
title: 'Example/Header',
7+
title: "Example/Header",
88
component: Header,
99
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
10-
tags: ['autodocs'],
10+
tags: ["autodocs"],
1111
parameters: {
1212
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
13-
layout: 'fullscreen',
13+
layout: "fullscreen",
1414
},
1515
args: {
1616
onLogin: fn(),
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
2525
export const LoggedIn: Story = {
2626
args: {
2727
user: {
28-
name: 'Jane Doe',
28+
name: "Jane Doe",
2929
},
3030
},
3131
};

‎lib/examples/Header.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
1+
import React from "react";
22

3-
import { Button } from './Button';
4-
import './header.css';
3+
import { Button } from "./Button";
4+
import "./header.css";
55

66
type User = {
77
name: string;

‎lib/examples/Page.stories.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import type { Meta, StoryObj } from '@storybook/react';
2-
import { expect, userEvent, within } from '@storybook/test';
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { expect, userEvent, within } from "@storybook/test";
33

4-
import { Page } from './Page';
4+
import { Page } from "./Page";
55

66
const meta = {
7-
title: 'Example/Page',
7+
title: "Example/Page",
88
component: Page,
99
parameters: {
1010
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
11-
layout: 'fullscreen',
11+
layout: "fullscreen",
1212
},
1313
} satisfies Meta<typeof Page>;
1414

@@ -21,12 +21,12 @@ export const LoggedOut: Story = {};
2121
export const LoggedIn: Story = {
2222
play: async ({ canvasElement }) => {
2323
const canvas = within(canvasElement);
24-
const loginButton = canvas.getByRole('button', { name: /Log in/i });
24+
const loginButton = canvas.getByRole("button", { name: /Log in/i });
2525
await expect(loginButton).toBeInTheDocument();
2626
await userEvent.click(loginButton);
2727
await expect(loginButton).not.toBeInTheDocument();
2828

29-
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
29+
const logoutButton = canvas.getByRole("button", { name: /Log out/i });
3030
await expect(logoutButton).toBeInTheDocument();
3131
},
3232
};

‎lib/examples/Page.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
1+
import React from "react";
22

3-
import { Header } from './Header';
4-
import './page.css';
3+
import { Header } from "./Header";
4+
import "./page.css";
55

66
type User = {
77
name: string;
@@ -14,18 +14,18 @@ export const Page: React.FC = () => {
1414
<article>
1515
<Header
1616
user={user}
17-
onLogin={() => setUser({ name: 'Jane Doe' })}
17+
onLogin={() => setUser({ name: "Jane Doe" })}
1818
onLogout={() => setUser(undefined)}
19-
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
19+
onCreateAccount={() => setUser({ name: "Jane Doe" })}
2020
/>
2121

2222
<section className="storybook-page">
2323
<h2>Pages in Storybook</h2>
2424
<p>
25-
We recommend building UIs with a{' '}
25+
We recommend building UIs with a{" "}
2626
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
2727
<strong>component-driven</strong>
28-
</a>{' '}
28+
</a>{" "}
2929
process starting with atomic components and ending with pages.
3030
</p>
3131
<p>
@@ -44,18 +44,18 @@ export const Page: React.FC = () => {
4444
</li>
4545
</ul>
4646
<p>
47-
Get a guided tutorial on component-driven development at{' '}
47+
Get a guided tutorial on component-driven development at{" "}
4848
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
4949
Storybook tutorials
5050
</a>
51-
. Read more in the{' '}
51+
. Read more in the{" "}
5252
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
5353
docs
5454
</a>
5555
.
5656
</p>
5757
<div className="tip-wrapper">
58-
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
58+
<span className="tip">Tip</span> Adjust the width of the canvas with the{" "}
5959
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
6060
<g fill="none" fillRule="evenodd">
6161
<path

‎lib/examples/button.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
border-radius: 3em;
66
font-weight: 700;
77
line-height: 1;
8-
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
8+
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
99
}
1010
.storybook-button--primary {
1111
background-color: #1ea7fd;

‎lib/examples/header.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
align-items: center;
55
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
66
padding: 15px 20px;
7-
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
7+
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
88
}
99

1010
.storybook-header svg {

‎lib/examples/page.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
color: #333;
66
font-size: 14px;
77
line-height: 24px;
8-
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
8+
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
99
}
1010

1111
.storybook-page h2 {

0 commit comments

Comments
 (0)