@xyd-js/components 0.1.0-dev.0

package/rollup.config.js

@@ -0,0 +1,154 @@
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import {terser} from 'rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import wyw from '@wyw-in-js/rollup';
+
+import {createRequire} from 'module';
+
+const require = createRequire(import.meta.url);
+const {
+    dependencies,
+    peerDependencies,
+    devDependencies
+} = require('./package.json', {assert: {type: 'json'}});
+
+const external = [
+    ...Object.keys(dependencies),
+    ...Object.keys(peerDependencies),
+    ...Object.keys(devDependencies),
+];
+
+export default [
+    {
+        input: {
+            index: 'index.ts',
+            brand: 'src/brand/index.ts',
+            coder: 'coder.ts',
+            content: 'content.ts',
+            layouts: 'layouts.ts',
+            pages: 'src/pages/index.ts',
+            views: 'src/views/index.ts',
+            writer: 'writer.ts',
+        },
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+                sourcemap: true,
+                entryFileNames: '[name].js'
+            }
+        ],
+        plugins: [
+            wyw({
+                include: ['**/*.{ts,tsx}'],
+                babelOptions: {
+                    presets: [
+                        '@babel/preset-typescript',
+                        '@babel/preset-react'
+                    ],
+                },
+            }),
+            postcss({
+                extract: true,
+                plugins: [
+                    require('postcss-import'),
+                    require('autoprefixer')
+                ]
+            }),
+            resolve(),
+            commonjs(),
+            typescript({
+                tsconfig: './tsconfig.json',
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                presets: [
+                    '@babel/preset-env',
+                    '@babel/preset-react'
+                ],
+            }),
+            terser(),
+        ],
+        external
+    },
+    {
+        input: 'index.ts',
+        output: {
+            file: 'dist/index.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'src/brand/index.ts',
+        output: {
+            file: 'dist/brand.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'coder.ts',
+        output: {
+            file: 'dist/coder.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'content.ts',
+        output: {
+            file: 'dist/content.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'layouts.ts',
+        output: {
+            file: 'dist/layouts.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'src/pages/index.ts',
+        output: {
+            file: 'dist/pages.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'src/views/index.ts',
+        output: {
+            file: 'dist/views.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'writer.ts',
+        output: {
+            file: 'dist/writer.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }
+];

package/src/brand/Button/Button.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {css} from "@linaria/core";
+
+const $button = {
+    host: css`
+        display: inline-block;
+        border: 1px solid transparent;
+        text-align: center;
+        font-weight: 600;
+        white-space: nowrap;
+        border-radius: 20px;
+        padding: 0 20px;
+        line-height: 38px;
+        font-size: 14px;
+        border-color: transparent;
+        color: #3c3c43;
+        background-color: #f7f7f8;
+
+        transition: color .25s, border-color .25s, background-color .25s;
+
+        &:hover {
+            background: #e3e3e6;
+        }
+    `,
+
+    host$$secondary: css`
+        color: #fff;
+        background-color: rgb(112, 81, 212);
+
+        &:hover {
+            background-color: rgb(95, 59, 211)
+        }
+    `
+}
+
+export interface ButtonProps {
+    children: React.ReactNode
+    kind?: "secondary"
+}
+
+export function Button({children, kind}: ButtonProps) {
+    return <button className={`
+        ${$button.host}
+        ${kind === "secondary" && $button.host$$secondary}
+    `}>
+        {children}
+    </button>
+}

package/src/brand/Button/index.ts

@@ -0,0 +1,7 @@
+export type {
+    ButtonProps
+} from "./Button";
+
+export {
+    Button
+} from "./Button";

package/src/brand/CTABanner/CTABanner.tsx

@@ -0,0 +1,127 @@
+import React from "react"
+import {css} from "@linaria/core";
+
+const $banner = {
+    host: css`
+        padding: 20px;
+    `,
+    container: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 80px;
+    `,
+    hero: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 40px;
+    `,
+    headingEffect: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        background: -webkit-linear-gradient(
+                120deg,
+                var(--headingEffect-color-tertiary) 20%,
+                var(--headingEffect-color-tertiary) 30%,
+                var(--headingEffect-color-secondary) 60%,
+                var(--headingEffect-color-primary) 75%,
+                var(--headingEffect-color-primary) 85%
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: wave 5s infinite;
+        background-size: 200% 200%;
+        background-position: 50% 50%; // Start with all colors visible
+
+        @keyframes wave {
+            0% {
+                background-position: 50% 50%;
+            }
+            50% {
+                background-position: 0% 50%;
+            }
+            100% {
+                background-position: 50% 50%;
+            }
+        }
+    `
+}
+
+export interface CTABannerProps {
+    children: React.ReactNode
+}
+
+export function CTABanner({children}: CTABannerProps) {
+    return <div className={$banner.host}>
+        <div className={$banner.container}>
+            <div className={$banner.hero}>
+                {children}
+            </div>
+        </div>
+    </div>
+}
+
+const $heading = {
+    host: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    `,
+    title: css`
+        font-size: 76px;
+        font-weight: 900;
+        text-align: center;
+        letter-spacing: 3px;
+        margin: 0;
+    `,
+    subtitle: css`
+        color: #3c3c43;
+        font-size: 46px;
+        font-weight: 600;
+        text-align: center;
+    `
+}
+
+export interface CTABannerHeadingProps {
+    title: string
+    subtitle: string | React.ReactNode
+    headingEffect?: boolean
+}
+
+CTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {
+    return <div className={$heading.host}>
+        <h1 className={$heading.title}>
+            {
+                headingEffect
+                    ? <span className={$banner.headingEffect}>
+                        {title}
+                      </span>
+                    : title
+            }
+        </h1>
+        <p className={$heading.subtitle}>
+            {subtitle}
+        </p>
+    </div>
+}
+
+const $btnGroup = {
+    host: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+    `
+}
+
+CTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {
+    return <div className={$btnGroup.host}>
+        {children}
+    </div>
+}

package/src/brand/CTABanner/index.ts

@@ -0,0 +1,8 @@
+export type {
+    CTABannerProps,
+    CTABannerHeadingProps
+} from './CTABanner';
+
+export {
+    CTABanner
+} from './CTABanner';

package/src/brand/Footer/Footer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {css} from "@linaria/core";
+
+const $footer = {
+    host: css`
+        position: relative;
+        border-top: 1px solid #f0f0f0;
+        padding: 32px;
+        background-color: #fff;
+    `,
+    container: css`
+        margin: 0 auto;
+        max-width: 1200px;
+        text-align: center;
+    `,
+    textContainer: css`
+        line-height: 24px;
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(60, 60, 67, .78);
+    `
+}
+
+export interface FooterProps {
+    children?: React.ReactNode
+}
+
+export function Footer({children}: FooterProps) {
+    return <footer className={$footer.host}>
+        <div className={$footer.container}>
+            <div className={$footer.textContainer}>
+                {children}
+            </div>
+        </div>
+    </footer>
+}

package/src/brand/Footer/index.ts

@@ -0,0 +1,3 @@
+export type {FooterProps} from "./Footer";
+
+export {Footer} from "./Footer";

package/src/brand/index.ts

@@ -0,0 +1,5 @@
+export * from "./Button"
+
+export * from "./CTABanner"
+
+export * from "./Footer"

package/src/coder/Code/Code.styles.tsx

@@ -0,0 +1,50 @@
+import {css} from "@linaria/core";
+
+export const $mark = {
+    host: css`
+        display: flex;
+        border-left-width: 4px;
+        border-color: transparent;
+        margin: 4px 0;
+    `,
+    line: css`
+        flex: 1 1 0%;
+    `,
+    $$annotated: css`
+        border-color: #60A5FA;
+        background-color: #EEF2FF;
+    `
+}
+
+export const $lineNumber = {
+    host: css`
+        margin: 0 4px;
+        //text-align: right;
+        user-select: none;
+        opacity: 0.5;
+    `
+}
+
+export const $code = {
+    host: css`
+        max-height: 400px;
+        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+
+        margin: 0;
+        padding: 8px 16px;
+
+        border-top: 1px solid rgb(236, 236, 241);
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+
+        font-size: 12px;
+        line-height: 20px;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        overflow-y: scroll;
+    `,
+    host$$full: css`
+        max-height: 100%;   
+    `
+}

package/src/coder/Code/Code.tsx

@@ -0,0 +1,76 @@
+import React, {Suspense} from "react";
+import type {HighlightedCode, AnnotationHandler} from "codehike/code";
+import {InnerLine, Pre} from "codehike/code";
+import {Theme} from "@code-hike/lighter";
+
+import {CodeTheme, type CodeThemeBlockProps} from "../CodeTheme";
+import {$lineNumber, $mark, $code} from "./Code.styles.tsx";
+
+export interface CodeProps {
+    codeblocks: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode
+}
+
+export function Code(props: CodeProps) {
+    return <Suspense fallback={<$Loading/>}>
+        <CodeTheme codeblocks={props.codeblocks} theme={props.theme}>
+            {props.children}
+        </CodeTheme>
+    </Suspense>
+}
+
+function $Loading() {
+    return <>
+        loading...
+    </>
+}
+
+// TODO: fix any
+Code.LineNumber = function LineNumber(props: any) {
+    return (
+        <>
+        <span
+            style={{minWidth: `${props.width}ch`}}
+            className={$lineNumber.host}
+        >
+          {props.lineNumber}
+        </span>
+            <InnerLine merge={props}/>
+        </>
+    )
+}
+
+// TODO: fix any
+Code.Mark = function Mark(props: any) {
+    return <div className={`${$mark.host} ${props.annotation && $mark.$$annotated}`}>
+        <InnerLine
+            merge={props}
+            className={$mark.line}
+        />
+    </div>
+}
+
+// TODO: fix any
+Code.Bg = function CodeLine(props: any) {
+    return <span className={`${props.annotation && $mark.$$annotated}`}>
+        {props.children}
+    </span>
+}
+
+Code.Pre = function CodePre(props: {
+                                codeblock: HighlightedCode,
+                                size?: "full",
+                                handlers: AnnotationHandler[]
+                            }
+) {
+    return <Pre
+        className={`
+            ${$code.host}
+            ${props?.size === "full" && $code.host$$full}
+        `}
+        style={props.codeblock?.style || props.codeblock?.style}
+        code={props.codeblock}
+        handlers={props.handlers}
+    />
+}

package/src/coder/Code/annotations.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {AnnotationHandler} from "codehike/code";
+
+import {Code} from "./Code.tsx";
+
+const markAnnotation: AnnotationHandler = {
+    name: "mark",
+    Line: (props) => {
+        return <Code.Mark {...props}/>
+    }
+}
+
+const bgAnnotation: AnnotationHandler = {
+    name: "bg",
+    Inline: (props) => {
+        return <Code.Bg {...props}/>
+    }
+}
+
+const lineNumberAnnotation: AnnotationHandler = {
+    name: "line-numbers",
+    Line: ({annotation, ...props}) => {
+        return <Code.LineNumber {...props}/>
+    },
+}
+
+export const annotations = {
+    mark: markAnnotation,
+    bg: bgAnnotation,
+    lineNumbers: lineNumberAnnotation
+}

package/src/coder/Code/index.ts

@@ -0,0 +1,9 @@
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code
+} from "./Code"
+export {
+    annotations
+} from "./annotations"

package/src/coder/CodeCopy/CodeCopy.style.tsx

@@ -0,0 +1,21 @@
+import {css} from "@linaria/core";
+
+export const $copy = {
+    host: css`
+        all: unset;
+        
+        cursor: pointer;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        border-radius: 6px;
+        padding: 6px;
+
+        &:hover {
+            transition: ease-in 0.1s;
+            background: #e3e3eb;
+        }
+    `
+}

package/src/coder/CodeCopy/CodeCopy.tsx

@@ -0,0 +1,32 @@
+import React, {useState} from "react"
+import {Copy, CheckCheck} from "lucide-react"
+
+import {
+    $copy
+} from "./CodeCopy.style"
+
+export interface CodeCopyProps {
+    text: string
+}
+
+export function CodeCopy({text}: CodeCopyProps) {
+    const [copied, setCopied] = useState(false)
+
+    function onClick() {
+        navigator.clipboard.writeText(text)
+        setCopied(true)
+        setTimeout(() => {
+            setCopied(false)
+        }, 1200)
+    }
+
+    return (
+        <button
+            aria-label="Copy to clipboard"
+            onClick={onClick}
+            className={$copy.host}
+        >
+            {copied ? <CheckCheck size={16}/> : <Copy size={16}/>}
+        </button>
+    )
+}

package/src/coder/CodeCopy/index.ts

@@ -0,0 +1,7 @@
+export {
+    CodeCopy
+} from "./CodeCopy"
+
+export type {
+    CodeCopyProps
+} from "./CodeCopy"

package/src/coder/CodeSample/CodeSample.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {Theme} from "@code-hike/lighter";
+
+import type {CodeThemeBlockProps} from "../CodeTheme";
+
+import {
+    Code,
+    annotations,
+} from "../Code"
+import {
+    withCodeTabs
+} from "../CodeTabs";
+import {useCodeTheme} from "../CodeTheme";
+
+export interface CodeSampleProps {
+    name: string;
+    description: string;
+    codeblocks: CodeThemeBlockProps[];
+    size?: "full"
+    theme?: Theme
+}
+
+export function CodeSample(props: CodeSampleProps) {
+    return <Code codeblocks={props.codeblocks} theme={props.theme}>
+        <$ThemedCodeSample {...props}/>
+    </Code>
+}
+
+function $ThemedCodeSample(props: CodeSampleProps) {
+    const {highlighted} = useCodeTheme()
+
+    return <$CodeSampleTabs
+        description={props.description}
+        highlighted={highlighted}
+        size={props.size}
+    />
+}
+
+const $CodeSampleTabs = withCodeTabs((props) => <Code.Pre
+    {...props}
+    handlers={[
+        annotations.mark,
+        annotations.bg,
+        annotations.lineNumbers
+    ]}
+/>)
+

package/src/coder/CodeSample/index.ts

@@ -0,0 +1,11 @@
+export {
+    CodeSample,
+} from './CodeSample';
+
+export {
+    withLocalStored,
+} from './withLocalStored';
+
+export type {
+    CodeSampleProps,
+} from "./CodeSample";