Merge pull request #1 from Enterwell/feature/initial

Feature/initial

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# vercel
+.vercel

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

README.md

@@ -1,2 +1,50 @@
-# ui
-Enterwell UI library
+# @enterwell/ui
+
+Official Enterwell UI library.
+
+## What's inside?
+
+This library includes the following packages/apps:
+
+### Apps and Packages
+
+- `docs`: Documentatino app (built with [nextra](https://nextra.site/))
+- `ui`: a React component library documented in `docs` and published on npm
+- `hooks`: a React hooks library documented in `docs` and published on npm
+- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next`)
+- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+
+## Development
+
+### Build
+
+To build all apps and packages, run the following command:
+
+```bash
+cd ui
+pnpm i
+pnpm build
+```
+
+### Develop
+
+To develop all apps and packages, run the following command:
+
+```bash
+cd ui
+pnpm i
+pnpm dev
+```
+
+#### Create new component
+
+Run following command and select appropriate generator and modify generated files.
+
+```bash
+pnpm turbo gen
+```
+
+Available generators:
+
+- component
+- hook

apps/docs/.eslintrc.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ["custom/next"],
+};

apps/docs/.gitignore

@@ -0,0 +1,2 @@
+.next
+node_modules

apps/docs/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

apps/docs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Shu Ding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/docs/README.md

@@ -0,0 +1,23 @@
+# Nextra Docs Template 
+
+This is a template for creating documentation with [Nextra](https://nextra.site).
+
+[**Live Demo →**](https://nextra-docs-template.vercel.app)
+
+[![](.github/screenshot.png)](https://nextra-docs-template.vercel.app)
+
+## Quick Start
+
+Click the button to clone this repository and deploy it on Vercel:
+
+[![](https://vercel.com/button)](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra-docs-template&showOptionalTeamCreation=false)
+
+## Local Development
+
+First, run `pnpm i` to install the dependencies.
+
+Then, run `pnpm dev` to start the development server and visit localhost:3000.
+
+## License
+
+This project is licensed under the MIT License.

apps/docs/components/ExampleDropdownButton.tsx

@@ -0,0 +1,25 @@
+import { DropdownButton } from '@enterwell/ui';
+import { Save } from '@mui/icons-material';
+
+export function ExampleDropdownButton() {
+    return (
+        <>
+            <DropdownButton
+                icon={<Save />}
+                options={[
+                    { label: 'Option 1', value: 'option1' },
+                    { label: 'Option 2', value: 'option2' },
+                ]} />
+
+            <hr className='h-4 border-r' />
+
+            <DropdownButton
+                options={[
+                    { label: 'Option 1', value: 'option1' },
+                    { label: 'Option 2', value: 'option2' },
+                ]}>
+                Export
+            </DropdownButton>
+        </>
+    )
+}

apps/docs/components/ExamplePageDrawer.tsx

@@ -0,0 +1,17 @@
+import { PageDrawer } from '@enterwell/ui';
+import { useState } from 'react';
+
+export function ExamplePageDrawer() {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+        <div className="flex flex-col items-center justify-center relative h-72 overflow-hidden rounded-lg">
+            <span>Page content</span>
+            <PageDrawer
+                expanded={expanded}
+                onChange={() => setExpanded((curr) => !curr)}>
+                <span>Drawer content</span>
+            </PageDrawer>
+        </div>
+    )
+}

apps/docs/components/docs/Callout.tsx

@@ -0,0 +1,45 @@
+import cx from 'classix';
+import type { ReactElement, ReactNode } from 'react'
+
+const TypeToEmoji = {
+    default: '💡',
+    error: '🚫',
+    info: 'ℹ️',
+    warning: '⚠️'
+}
+
+type CalloutType = keyof typeof TypeToEmoji
+
+const classes: Record<CalloutType, string> = {
+    default: 'border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300',
+    error: 'border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200',
+    info: 'border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200',
+    warning: 'border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200'
+}
+
+type CalloutProps = {
+    type?: CalloutType
+    emoji?: string | ReactNode
+    children: ReactNode
+}
+
+export function Callout({
+    children,
+    type = 'default',
+    emoji = TypeToEmoji[type]
+}: CalloutProps): ReactElement {
+    return (
+        <div
+            className={cx(
+                'overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4',
+                'contrast-more:border-current contrast-more:dark:border-current',
+                classes[type]
+            )}
+        >
+            <div className="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2">
+                {emoji}
+            </div>
+            <div className="w-full min-w-0 leading-7">{children}</div>
+        </div>
+    )
+}

apps/docs/components/docs/Card.tsx

@@ -0,0 +1,9 @@
+import { cx } from "classix";
+
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function Card({ className, ...rest }: CardProps) {
+    return (
+        <div className={cx("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...rest}></div>
+    );
+}

apps/docs/components/docs/ComponentWithSource.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { Box, Tab } from "@mui/material";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Card } from "./Card";
+import cx from "classix";
+
+type ComponentWithSourceProps = React.HTMLAttributes<HTMLDivElement> & {
+  component: React.FunctionComponent;
+  centered?: boolean;
+}
+
+export function ComponentWithSource({
+  children,
+  component,
+  centered,
+  ...rest
+}: ComponentWithSourceProps) {
+  const Component = component;
+
+  const [tabValue, setTabValue] = useState('preview');
+  const handleTabChange = (_: React.SyntheticEvent, newValue: string) => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <TabContext value={tabValue}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }} {...rest}>
+        <TabList onChange={handleTabChange} aria-label="Component Preview and Code">
+          <Tab label="Preview" value="preview" />
+          <Tab label="Code" value="code" />
+        </TabList>
+      </Box>
+      <TabPanel value="preview">
+        <Card className={cx(
+          centered && "p-2 min-h-[280px] flex gap-2 items-center justify-center"
+        )}>
+          <Component />
+        </Card>
+      </TabPanel>
+      <TabPanel value="code">
+        {children}
+      </TabPanel>
+    </TabContext>
+  )
+}

apps/docs/components/internal/DocsHeader.tsx

@@ -0,0 +1,17 @@
+type DocsHeaderProps = {
+    header: string;
+    subHeader?: string;
+};
+
+export function DocsHeader({ header, subHeader }: DocsHeaderProps) {
+    return (
+        <div className="flex flex-col gap-1">
+            <h1 className="mt-12 lg:!mt-20 mx-6 w-[300px] md:!w-full font-extrabold text-5xl lg:text-6xl leading-tight xl:leading-snug text-center mb-4 bg-clip-text text-transparent bg-gradient-to-b from-black/80 to-black dark:from-white dark:to-[#AAAAAA]">
+                {header}
+            </h1>
+            <p className="mx-6 text-xl md:text-2xl text-center text-[#666666] dark:text-[#888888]">
+                {subHeader}
+            </p>
+        </div>
+    );
+}

apps/docs/components/internal/PackagesList.tsx

@@ -0,0 +1,31 @@
+import { Card, CardActionArea, CardContent } from "@mui/material";
+import Image from "next/image";
+
+const availablePackages = [
+    { name: "UI", description: "React component library.", href: '/ui/about', library: 'react' },
+    { name: "Hooks", description: "React hooks library.", href: '/hooks/about', library: 'react' },
+];
+
+export function PackagesList() {
+    return (
+        <div className="flex flex-col items-center">
+            <div className="grid grid-cols-2 gap-4 py-20">
+                {availablePackages.map((pkg) => (
+                    <Card key={pkg.name} className="rounded-lg border bg-card shadow-xl">
+                        <CardActionArea href={pkg.href}>
+                            <CardContent className="flex items-center justify-center aspect-square">
+                                <div className="flex flex-col items-center gap-2">
+                                    <div className="text-4xl font-extrabold drop-shadow-[0_0_32px_hsl(var(--foreground))]">{pkg.name}</div>
+                                    <div className="text-muted-foreground text-center">{pkg.description}</div>
+                                </div>
+                                <div className="absolute right-2 bottom-2 opacity-20">
+                                    <Image alt="React" width={32} height={32} src="/assets/react.svg" />
+                                </div>
+                            </CardContent>
+                        </CardActionArea>
+                    </Card>
+                ))}
+            </div>
+        </div>
+    );
+}

apps/docs/components/theme.ts

@@ -0,0 +1,13 @@
+import { createTheme } from "@mui/material";
+
+export const theme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#ffffff',
+        },
+        secondary: {
+            main: '#b5b5b5',
+        },
+    },
+});