├── .prettierignore ├── .husky ├── pre-commit └── pre-push ├── public ├── founder.webp ├── styple-og.png ├── favicon │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── mstile-70x70.png │ ├── apple-touch-icon.png │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── browserconfig.xml │ ├── site.webmanifest │ └── safari-pinned-tab.svg └── fonts │ └── inter-var-latin.woff2 ├── next-env.d.ts ├── vercel.json ├── packages ├── hooks │ ├── index.ts │ ├── __tests__ │ │ ├── useMounted.test.tsx │ │ ├── useInterval.test.tsx │ │ ├── useDebounce.test.tsx │ │ ├── useActiveElement.test.tsx │ │ ├── useOnScreen.test.tsx │ │ └── useCopy.test.tsx │ ├── src │ │ ├── useMounted.ts │ │ ├── useCopy.ts │ │ ├── useOnScreen.ts │ │ ├── useActiveElement.ts │ │ ├── useDebounce.ts │ │ └── useInterval.ts │ └── package.json └── design-system │ ├── components │ ├── Label.tsx │ ├── Overlay.tsx │ ├── Panel.tsx │ ├── Code.tsx │ ├── Status.tsx │ ├── Toggle.tsx │ ├── Card.tsx │ ├── Separator.tsx │ ├── Containers.tsx │ ├── TextArea.tsx │ ├── Link.tsx │ ├── Popover.tsx │ ├── Heading.tsx │ ├── TextField.tsx │ ├── Radio.tsx │ ├── Checkbox.tsx │ ├── Text.tsx │ ├── Tabs.tsx │ ├── Switch.tsx │ ├── SearchField.tsx │ ├── Skeleton.tsx │ ├── DialogUtils.tsx │ ├── AlertDialog.tsx │ ├── Table.tsx │ ├── Slider.tsx │ └── ScrollArea.tsx │ ├── __tests__ │ ├── Badge.test.tsx │ ├── Code.test.tsx │ ├── Slider.test.tsx │ ├── Status.test.tsx │ ├── Switch.test.tsx │ ├── Text.test.tsx │ ├── Link.test.tsx │ ├── Card.test.tsx │ ├── Checkbox.test.tsx │ ├── Label.test.tsx │ ├── Separator.test.tsx │ ├── Skeleton.test.tsx │ ├── TextArea.test.tsx │ ├── TextField.test.tsx │ ├── Toggle.test.tsx │ ├── Button.test.tsx │ ├── NavItem.test.tsx │ ├── Heading.test.tsx │ ├── Index.test.tsx │ ├── ScrollArea.test.tsx │ ├── ScrollShadow.test.tsx │ ├── Popover.test.tsx │ ├── Tooltip.test.tsx │ ├── Radio.test.tsx │ ├── Spinner.test.tsx │ ├── Select.test.tsx │ ├── Sheet.test.tsx │ ├── Dialog.test.tsx │ ├── Tabs.test.tsx │ ├── AlertDialog.test.tsx │ ├── Table.test.tsx │ ├── Navigation.test.tsx │ ├── Containers.test.tsx │ ├── SearchField.test.tsx │ ├── Accordion.test.tsx │ ├── DropdownMenu.test.tsx │ └── __snapshots__ │ │ ├── TextArea.test.tsx.snap │ │ ├── TextField.test.tsx.snap │ │ ├── Skeleton.test.tsx.snap │ │ ├── Card.test.tsx.snap │ │ ├── Badge.test.tsx.snap │ │ ├── Status.test.tsx.snap │ │ ├── Code.test.tsx.snap │ │ ├── Link.test.tsx.snap │ │ ├── Text.test.tsx.snap │ │ ├── Button.test.tsx.snap │ │ ├── Separator.test.tsx.snap │ │ ├── NavItem.test.tsx.snap │ │ ├── DropdownMenu.test.tsx.snap │ │ ├── Heading.test.tsx.snap │ │ ├── Tooltip.test.tsx.snap │ │ ├── Toggle.test.tsx.snap │ │ ├── Checkbox.test.tsx.snap │ │ ├── Label.test.tsx.snap │ │ ├── Sheet.test.tsx.snap │ │ ├── Dialog.test.tsx.snap │ │ └── AlertDialog.test.tsx.snap │ └── package.json ├── lib ├── utils.ts ├── rehype │ ├── rehypeHighlightWord.js │ ├── rehypeMetaAttr.js │ └── rehypeHighlightCode.js ├── mdx.ts └── animations.ts ├── next.config.js ├── .github ├── pull_request_template.md ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── workflows │ ├── ci.yml │ └── publish.yml ├── test ├── helpers.ts └── setup-tests.ts ├── data ├── hooks │ ├── useMounted.mdx │ ├── useCopy.mdx │ ├── useOnScreen.mdx │ ├── useActiveElement.mdx │ ├── useDebounce.mdx │ └── useInterval.mdx ├── overview │ ├── releases.mdx │ ├── introduction.mdx │ └── getting-started.mdx └── components │ ├── switch.mdx │ ├── checkbox.mdx │ ├── container.mdx │ ├── flex.mdx │ ├── label.mdx │ ├── grid.mdx │ ├── slider.mdx │ ├── radio.mdx │ ├── scrollarea.mdx │ ├── textarea.mdx │ ├── toggle.mdx │ ├── tabs.mdx │ ├── code.mdx │ ├── section.mdx │ ├── searchfield.mdx │ ├── separator.mdx │ ├── textfield.mdx │ ├── spinner.mdx │ ├── popover.mdx │ └── link.mdx ├── components ├── Footer.tsx ├── Preview.tsx ├── Link.tsx ├── Release.tsx ├── Searchbar.tsx ├── Layout.tsx ├── NavLinkItem.tsx ├── MetaData.tsx ├── ThemeButton.tsx └── QuickNav.tsx ├── jest.config.js ├── tsconfig.json ├── .gitignore ├── README.md ├── .eslintrc.json ├── LICENSE ├── pages ├── _app.tsx ├── _document.tsx └── docs │ ├── hooks │ └── [slug].tsx │ └── overview │ └── [slug].tsx └── package.json /.prettierignore: -------------------------------------------------------------------------------- 1 | data 2 | node_modules 3 | coverage 4 | .next -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run precommit -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run typecheck 5 | -------------------------------------------------------------------------------- /public/founder.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/founder.webp -------------------------------------------------------------------------------- /public/styple-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/styple-og.png -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/favicon.ico -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/mstile-70x70.png -------------------------------------------------------------------------------- /public/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/mstile-144x144.png -------------------------------------------------------------------------------- /public/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /public/favicon/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/mstile-310x150.png -------------------------------------------------------------------------------- /public/favicon/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/mstile-310x310.png -------------------------------------------------------------------------------- /public/fonts/inter-var-latin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/fonts/inter-var-latin.woff2 -------------------------------------------------------------------------------- /public/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hrbengtsen/styple/HEAD/public/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "headers": [ 3 | { 4 | "source": "/fonts/inter-var-latin.woff2", 5 | "headers": [ 6 | { 7 | "key": "Cache-Control", 8 | "value": "public, max-age=31536000, immutable" 9 | } 10 | ] 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /public/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2d89ef 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/hooks/index.ts: -------------------------------------------------------------------------------- 1 | // Hooks 2 | export { useMounted } from "./src/useMounted"; 3 | export { useInterval } from "./src/useInterval"; 4 | export { useActiveElement } from "./src/useActiveElement"; 5 | export { useOnScreen } from "./src/useOnScreen"; 6 | export { useDebounce } from "./src/useDebounce"; 7 | export { useCopy } from "./src/useCopy"; 8 | -------------------------------------------------------------------------------- /packages/hooks/__tests__/useMounted.test.tsx: -------------------------------------------------------------------------------- 1 | import { renderHook } from "@testing-library/react-hooks"; 2 | import { useMounted } from ".."; 3 | 4 | describe("Test useMounted", () => { 5 | it("should work as expected", () => { 6 | const { result } = renderHook(() => useMounted()); 7 | expect(result.current).toBe(true); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | export const randomInInterval = (min: number, max: number) => 2 | Math.floor(Math.random() * (max - min)) + min; 3 | 4 | export const rangeAsArray = (start: number, end: number, step = 1) => { 5 | let output = []; 6 | 7 | for (let i = start; i < end; i += step) { 8 | output.push(i); 9 | } 10 | 11 | return output; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/design-system/components/Label.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from "../stitches.config"; 2 | import * as LabelPrimitive from "@radix-ui/react-label"; 3 | import { textStyles } from ".."; 4 | 5 | export const Label = styled(LabelPrimitive.Root, textStyles, { 6 | display: "inline-block", 7 | verticalAlign: "middle", 8 | cursor: "default", 9 | }); 10 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Badge.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Badge } from ".."; 4 | 5 | describe("Test Badge", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Code.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Code } from ".."; 4 | 5 | describe("Test Code", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(code); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Slider.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Slider } from ".."; 4 | 5 | describe("Test Slider", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Status.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Status } from ".."; 4 | 5 | describe("Test Status", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Switch.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Switch } from ".."; 4 | 5 | describe("Test Switch", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Text.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Text } from ".."; 4 | 5 | describe("Test Text", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(text); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Link.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Link } from ".."; 4 | 5 | describe("Test Link", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(Test Link); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/hooks/src/useMounted.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | /** 4 | * Custom hook to get mounted state of component 5 | * @returns Mounted boolean 6 | */ 7 | export const useMounted = () => { 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | setMounted(true); 12 | }, []); 13 | 14 | return mounted; 15 | }; 16 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Card.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Card } from ".."; 4 | 5 | describe("Test Card", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(Card contents); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Checkbox.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Checkbox } from ".."; 4 | 5 | describe("Test Checkbox", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Label.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Label } from ".."; 4 | 5 | describe("Test Label", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Separator.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Separator } from ".."; 4 | 5 | describe("Test Separator", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/Skeleton.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { Skeleton } from ".."; 4 | 5 | describe("Test Skeleton", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(); 8 | 9 | expect(view).toMatchSnapshot(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/design-system/__tests__/TextArea.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, RenderResult } from "@testing-library/react"; 3 | import { TextArea } from ".."; 4 | 5 | describe("Test TextArea", () => { 6 | it("should render as expected", () => { 7 | const view: RenderResult = render(