Added a getting started page

apps/docs/.eslintrc.json

@@ -12,6 +12,8 @@
     },
     "globals": {
         "Card": true,
+        "Callout": true,
+        "Collapsible": true,
         "Table": true,
         "MotionPreview": true,
         "Footnote": true,

apps/docs/app/pages/getting-started/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { allPages } from "contentlayer/generated";
+import Mdx from "@/components/mdx/Mdx";
+import { notFound } from "next/navigation";
+import Aside from "@/app/ui/layout/aside/Aside.tsx";
+import getSectionLinks from "@/app/lib/getSectionLinks";
+
+export default function GettingStartedPage() {
+    const page = allPages.find(gettingStartedPage => gettingStartedPage._id === "pages/getting-started.mdx");
+
+    if (!page) {
+        notFound();
+    }
+
+    const sectionLinks = getSectionLinks(page);
+
+    return (
+        <div className="hd-wrapper hd-flex">
+            <Aside title="On this page" links={sectionLinks} />
+            <main>
+                <article className="hd-content" key={page._id}>
+                    <h1 className="hd-title hd-title--level1">{page.title}</h1>
+                    {page.body && <Mdx code={page.body.code} />}
+                </article>
+            </main>
+        </div>
+    );
+}

apps/docs/app/tokens.css

@@ -77,6 +77,7 @@
     --hd-color-neutral-border: var(--hd-neutral-75);
     --hd-color-neutral-border-weak: var(--hd-neutral-20);
     --hd-color-accent-text: var(--hd-accent-700);
+    --hd-color-accent-border: var(--hd-accent-700);
     --hd-color-accent-surface: var(--hd-accent-100);
     --hd-color-surface-neutral-gradient: linear-gradient(0deg, #151515 0%, #353434 100%);
     --hd-color-surface-neutral-gradient-hover: linear-gradient(0deg, #353434 0%, #151515 100%);
@@ -110,6 +111,7 @@
     --hd-color-neutral-icon-weak-hover: var(--hd-neutral-0);
     --hd-color-neutral-border: var(--hd-neutral-700);
     --hd-color-accent-text: var(--hd-accent-300);
+    --hd-color-accent-border: var(--hd-accent-700);
     --hd-color-accent-surface: var(--hd-accent-900);
     --hd-color-surface-neutral-gradient: linear-gradient(0deg, #F4F3EE 0%, var(--hd-neutral-0) 100%);
     --hd-color-surface-neutral-gradient-hover: linear-gradient(0deg, var(--hd-neutral-0) 0%, #F4F3EE 100%);

apps/docs/components/callout/Callout.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Callout from "./Callout.tsx";
+
+
+const meta = {
+    title: "components/Callout",
+    component: Callout
+} satisfies Meta<typeof Callout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: "Content of the callout"
+    }
+};

apps/docs/components/callout/Callout.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+import "./callout.css";
+
+export interface CalloutProps {
+    children: ReactNode;
+}
+
+const Callout = ({ children }: CalloutProps) => {
+    return (
+        <div className="hd-callout">
+            {children}
+        </div>
+    );
+};
+
+export default Callout;

apps/docs/components/callout/callout.css

@@ -0,0 +1,6 @@
+.hd-callout {
+    background-color: var(--hd-color-accent-surface);
+    border-radius: 0.25rem;
+    border-left: 0.25rem solid var(--hd-color-accent-border);
+    padding: 1rem;
+}

apps/docs/components/mdx/components.tsx

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from "react";
 import dynamic from "next/dynamic";
 
 import Card from "@/components/card/Card.tsx";
+import Callout from "@/components/callout/Callout.tsx";
 import NextImage from "@/components/image/Image.tsx";
 import Pre from "@/components/pre/Pre.tsx";
 import InlineCode from "@/components/code/InlineCode.tsx";
@@ -32,6 +33,7 @@ const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.
 export const components = {
     Card,
     code: InlineCode,
+    Callout: Callout,
     Image: NextImage,
     pre: Pre,
     MotionPreview: MotionPreview,

apps/docs/components/title/title.css

@@ -22,12 +22,12 @@
 }
 
 .hd-title--level4 {
-    font-size: 1em;
+    font-size: 1.125em;
     margin-block: 1.5rem 0.75rem;
 }
 
 .hd-title--level5 {
-    font-size: 0.825em;
+    font-size: 1rem;
     margin-block: 1rem 0.625rem;
 }
 

apps/docs/content/pages/getting-started.mdx

@@ -0,0 +1,187 @@
+---
+title: Getting started
+description: Getting started with Workleap Design Tokens
+---
+
+This guide will help you get started with Hopper UI. Hopper UI is a Design System that provides a collection of components, tokens, and icons to help you build applications.
+
+## Quick Install
+
+To use Hopper in your project, run one of these commands in your terminal.
+
+<PackageInstallation library="components @hopper-ui/icons @hopper-ui/tokens @hopper-ui/styled-system" mod="prod" />
+
+After installing Hopper UI packages, you must setup a Provider at the root of your application. This is typically in your _index.tsx_ or _app.tsx_, but can vary based on your specific setup.
+
+```jsx
+import { HopperProvider } from "@hopper-ui/components";
+
+<HopperProvider colorScheme="light">
+    <Button>Hello World</Button>
+</HopperProvider>
+```
+
+<Callout>Hopper is compatible with React 18. Not using React, or using an older version than 18? You can still benefit from Hopper, read on to discover how.</Callout>
+
+## Detailed Installation
+
+### Components
+
+Hopper Components are React Comtponents, uf you are using another framework, or React Native, you should use the [components tokens](/tokens/getting-started/introduction) directly when developping your own components.
+
+#### Installation
+
+Run one of the following commands in your terminal to install the Hopper Components package.
+
+<PackageInstallation library="components" mod="prod" />
+
+#### Usage
+
+A Provider is required to use Hopper Components. Wrap your application with the HopperProvider component to use our components.
+
+```jsx
+import { Button } from "@hopper-ui/components";
+
+<HopperProvider theme="dark">
+    <Button>Hello World</Button>
+</HopperProvider>
+```
+
+### Tokens
+
+Hopper Tokens are a collection of design tokens that should be used to style your application. [Semantic tokens](#) are available for everyone, where [components tokens](#) are designed with non React users in mind.
+
+#### Installation
+
+<PackageInstallation library="tokens" mod="prod" />
+
+#### Usage
+
+##### CSS
+
+Import the tokens in your project by doing the following:
+
+```css
+@import "@hopper-ui/tokens/tokens.css";
+```
+
+If your application supports a dark mode, import dark mode tokens as well:
+
+```css
+@import "@hopper-ui/tokens/dark/tokens.css";
+```
+
+You can now use Hopper tokens in your project by using the following syntax:
+
+```css
+.my-class {
+    background-color: var(--hop-primary-surface-weak);
+}
+```
+
+##### Fonts
+
+In order to use Hopper fonts in your project, import the following:
+
+```css
+@import "@hopper-ui/tokens/fonts.css";
+```
+
+All the necessary font-face declarations are now imported in your project.
+
+### Icons
+
+#### Installation
+
+<PackageInstallation library="icons" mod="prod" />
+
+#### Usage
+
+You can now use [icons](/icons/react-icons/icon-library) and [rich icons](/icons/react-icons/rich-icon-library) in your project by using the following syntax:
+
+```tsx
+import { AddIcon } from "@hopper-ui/icons";
+import { ConversationRichIcon } from "@hopper-ui/icons";
+
+<AddIcon />
+<ConversationRichIcon />
+```
+
+#### Non-standard installations
+
+##### SVG Icons
+
+If your project is not using the React framework, you can use the SVG icons directly. You can find the SVG icons in the `@hopper-ui/svg-icons` package.
+
+<PackageInstallation library="svg-icons" mod="prod" />
+
+You can import the SVG directly into your JavaScript file. Keep in mind that if you plan to use SVG icons as components, you'll need to ensure that your bundler is configured to handle SVG parsing appropriately.
+
+```tsx
+import alertIcon from "@hopper-ui/svg-icons/alert-24.svg";
+```
+
+Alternatively, you can utilize SVG icons within your CSS in the following manner:
+
+```css
+.myComponent {
+    background-image: url("@hopper-ui/svg-icons/alert-24.svg");
+}
+```
+
+##### React Icons Standalone Installation
+
+It is recommended to use `@hopper-ui/icons` with `@hopper-ui/components`. The standalone installation procedure is detailed in case you only need the icons, and not the components. This is also the installation process until the components are released.
+
+<PackageInstallation library="icons @hopper-ui/styled-system react-aria-components" mod="prod" />
+
+Import the styles in your project:
+
+```css
+@import "@hopper-ui/icons/index.css";
+@import "@hopper-ui/styled-system/index.css";
+```
+
+Configuring your application it a little different:
+
+```tsx
+import { StyledSystemProvider } from "@hopper-ui/styled-system";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
+    <StyledSystemProvider withBodyStyle colorScheme="light">
+        <App />
+    </StyledSystemProvider>
+);
+```
+
+Using the icon is the exact same way as with the default package.
+
+```tsx
+import { AddIcon } from "@hopper-ui/icons";
+
+<AddIcon />
+```
+
+##### React 16 Installation
+
+If your'e still using React 16, you need to use the `@hopper-ui/icons-react16` package.
+
+<PackageInstallation library="icons-react16" mod="prod" />
+
+The usage is the same as the default package, you only need to import the icons from a different package.
+
+```tsx
+import { AddIcon } from "@hopper-ui/icons-react16";
+import { ConversationRichIcon } from "@hopper-ui/icons-react16";
+
+<AddIcon />
+<ConversationRichIcon />
+```
+
+## Contribute
+
+Pull requests are welcome. For major changes, please open a [discussion](https://github.com/gsoft-inc/wl-hopper/discussions/new/choose) first to discuss what you would like to change. If you're interested in contributing, check out our [Contributing Guide](https://github.com/gsoft-inc/wl-hopper/blob/main/CONTRIBUTING.md)!

apps/docs/package.json

@@ -21,6 +21,7 @@
         "next-contentlayer": "0.3.4",
         "next-mdx-remote": "^4.4.1",
         "react": "18.3.1",
+        "react-aria": "3.33.0",
         "react-aria-components": "1.2.0",
         "react-dom": "18.3.1",
         "react-toggle": "4.1.3",