gsoft-inc · franckgaudin · May 8, 2023 · Apr 28, 2023 · May 2, 2023 · May 2, 2023
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 4
+
+[*.{js,sass,tsx,md,mdx}]
+max_line_length = 80
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,6 @@ next-env.d.ts
 # IDE
 /.idea
 /.vscode
+
+# Project
+.contentlayer
diff --git a/.npmrc b/.npmrc
@@ -1 +1 @@
-auto-install-peers=true
+strict-peer-dependencies=false
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+<div align="center">
+  <h1>Untitled Design System</h1>
+</div>
+
+## Getting Started
+
+Before starting make sure [node](https://nodejs.org/en/) and [pnpm](https://pnpm.io) is installed.
+
+### Install
+
+After cloning the source code, run `pnpm` to install dependencies.
+
+```bash
+git clone https://github.com/workleap/wl-untitled.git
+cd wl-untitled
+pnpm i
+```
+
+### Scripts
+
+- `pnpm doc:start`: run documentation application
+- `pnpm doc:storybook`: run Storybook
+- `pnpm test`: run tests
+- `pnpm lint`: check if the JS, TS and style correspond on standard
+
+## 🤝 Contributing
+
+Pull requests are welcome. For major changes, please open a [discussions](https://github.com/workleap/wl-untitled/discussions/new/choose) first to discuss what you would like to change. If you're interested, definitely check out our Contributing Guide!
+
+## License
+
+Copyright © 2023, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.
diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
@@ -12,12 +12,11 @@
 
 html,
 body {
-  font-family: var(--default-font-family);
-  font-size: var(--default-font-size);
+  font-family: var(--hd-default-font-family);
 }
 
 body {
-  font-size: var(--step-0);
+  font-size: var(--hd-step-0);
 }
 
 a {

diff --git a/apps/docs/app/intro/page.tsx b/apps/docs/app/intro/page.tsx
@@ -0,0 +1,13 @@
+import { allPages } from "@/.contentlayer/generated";
+import { Mdx } from "@/components/Mdx/MdxComponent";
+
+export default function Page() {
+    return <main>
+        {allPages.map(page => (
+            <article key={page._id}>
+                <h2>{page.title}</h2>
+                {page.body && <Mdx code={page.body.code} />}
+            </article>
+        ))}
+    </main>;
+}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -1,3 +1,5 @@
+import { Header } from "@/components/Header/Header";
+
 import "./globals.css";
 
 export const metadata = {
@@ -12,7 +14,10 @@ export default function RootLayout({
 }) {
     return (
         <html lang="en">
-            <body>{children}</body>
+            <body>
+                <Header />
+                {children}
+            </body>
         </html>
     );
 }
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -1,4 +1,4 @@
-import { Title } from "@/components/title/Title";
+import { Title } from "@/components/Title/Title";
 
 export default function Home() {
     return (

diff --git a/apps/docs/app/tokens.css b/apps/docs/app/tokens.css
@@ -1,13 +1,39 @@
 :root {
-  --default-font-size: 16px;
-  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-  --step--1: clamp(0.84rem, calc(0.90rem + -0.08vw), 0.89rem);
-  --step-0: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
-  --step-1: clamp(1.13rem, calc(0.99rem + 0.65vw), 1.50rem);
-  --step-2: clamp(1.27rem, calc(1.01rem + 1.28vw), 2.00rem);
-  --step-3: clamp(1.42rem, calc(0.99rem + 2.16vw), 2.66rem);
-  --step-4: clamp(1.60rem, calc(0.92rem + 3.39vw), 3.55rem);
-  --step-5: clamp(1.80rem, calc(0.78rem + 5.10vw), 4.74rem);
+    --hd-default-font-size: 1rem;
+    --hd-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+    --hd-opacity: 1;
+
+    --hd-step--1: clamp(0.84rem, calc(0.90rem + -0.08vw), 0.89rem);
+    --hd-step-0: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
+    --hd-step-1: clamp(1.13rem, calc(0.99rem + 0.65vw), 1.50rem);
+    --hd-step-2: clamp(1.27rem, calc(1.01rem + 1.28vw), 2.00rem);
+    --hd-step-3: clamp(1.42rem, calc(0.99rem + 2.16vw), 2.66rem);
+    --hd-step-4: clamp(1.60rem, calc(0.92rem + 3.39vw), 3.55rem);
+    --hd-step-5: clamp(1.80rem, calc(0.78rem + 5.10vw), 4.74rem);
+
+    --hd-primary-0: rgba(255, 255, 255, var(--hd-opacity, 1));
+    --hd-primary-100: rgba(245, 245, 254, var(--hd-opacity, 1));
+    --hd-primary-200: rgba(237, 236, 251, var(--hd-opacity, 1));
+    --hd-primary-300: rgba(224, 225, 243, var(--hd-opacity, 1));
+    --hd-primary-400: rgba(186, 188, 208, var(--hd-opacity, 1));
+    --hd-primary-500: rgba(160, 162, 183, var(--hd-opacity, 1));
+    --hd-primary-600: rgba(94, 96, 117, var(--hd-opacity, 1));
+    --hd-primary-700: rgba(57, 58, 76, var(--hd-opacity, 1));
+    --hd-primary-800: rgba(41, 43, 57, var(--hd-opacity, 1));
+    --hd-primary-900: rgba(22, 24, 36, var(--hd-opacity, 1));
+    --hd-primary-950: rgba(17, 18, 27, 1 var(--hd-opacity, 1));
+
+    --hd-space-05: 0.25rem;
+    --hd-space-1: 0.5rem;
+    --hd-space-2: 1rem;
+    --hd-space-3: 1.5rem;
+    --hd-space-4: 2rem;
+    --hd-space-5: 2.5rem;
+    --hd-space-6: 3rem;
+    --hd-space-7: 3.5rem;
+    --hd-space-8: 4rem;
+    --hd-space-9: 4.5rem;
+    --hd-space-10: 5rem;
 }
diff --git a/apps/docs/components/Header/Header.tsx b/apps/docs/components/Header/Header.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+
+import { IconButton } from "@/components/IconButton/IconButton";
+import { navigation } from "@/configs/navigation";
+
+import "./header.css";
+
+export const Header = () => {
+    const navigationItems = navigation.map(item => {
+        return (
+            <NavigationMenu.Item key={item.toString()}>
+                <NavigationMenu.Link href={item.path}>
+                    {item.label}
+                </NavigationMenu.Link>
+            </NavigationMenu.Item>
+        );
+    });
+
+    return (
+        <header className="hd-header">
+            <div className="hd-header__nav">
+                <div className="hd-brand">
+                    <svg width="115" height="24" viewBox="0 0 115 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="12" fill="currentColor"/>
+                        {/* eslint-disable-next-line max-len */}
+                        <path d="M46.2486 4.45455H49.3239V13.9006C49.3239 14.9612 49.0705 15.8892 48.5639 16.6847C48.062 17.4801 47.3589 18.1004 46.4545 18.5455C45.5502 18.9858 44.4967 19.206 43.294 19.206C42.0866 19.206 41.0308 18.9858 40.1264 18.5455C39.2221 18.1004 38.5189 17.4801 38.017 16.6847C37.5152 15.8892 37.2642 14.9612 37.2642 13.9006V4.45455H40.3395V13.6378C40.3395 14.1918 40.4602 14.6842 40.7017 15.1151C40.9479 15.5459 41.2936 15.8845 41.7386 16.1307C42.1837 16.3769 42.7022 16.5 43.294 16.5C43.8906 16.5 44.4091 16.3769 44.8494 16.1307C45.2945 15.8845 45.6378 15.5459 45.8793 15.1151C46.1255 14.6842 46.2486 14.1918 46.2486 13.6378V4.45455ZM54.8228 12.6932V19H51.7972V8.09091H54.6808V10.0156H54.8086C55.0501 9.38116 55.4549 8.87926 56.0231 8.50994C56.5913 8.13589 57.2802 7.94886 58.0898 7.94886C58.8474 7.94886 59.5079 8.11458 60.0714 8.44602C60.6348 8.77746 61.0728 9.25095 61.3853 9.86648C61.6978 10.4773 61.854 11.2064 61.854 12.054V19H58.8285V12.5938C58.8332 11.9261 58.6628 11.4053 58.3171 11.0312C57.9715 10.6525 57.4956 10.4631 56.8896 10.4631C56.4824 10.4631 56.1225 10.5507 55.81 10.7259C55.5022 10.901 55.2608 11.1567 55.0856 11.4929C54.9151 11.8243 54.8275 12.2244 54.8228 12.6932ZM70.0412 8.09091V10.3636H63.4716V8.09091H70.0412ZM64.9631 5.47727H67.9886V15.6477C67.9886 15.9271 68.0313 16.1449 68.1165 16.3011C68.2017 16.4527 68.3201 16.5592 68.4716 16.6207C68.6278 16.6823 68.8078 16.7131 69.0114 16.7131C69.1534 16.7131 69.2955 16.7012 69.4375 16.6776C69.5795 16.6491 69.6884 16.6278 69.7642 16.6136L70.2401 18.8651C70.0885 18.9124 69.8755 18.9669 69.6009 19.0284C69.3262 19.0947 68.9924 19.1349 68.5994 19.1491C67.8703 19.1776 67.2311 19.0805 66.6818 18.858C66.1373 18.6354 65.7135 18.2898 65.4105 17.821C65.1075 17.3523 64.9583 16.7604 64.9631 16.0455V5.47727ZM72.0121 19V8.09091H75.0376V19H72.0121ZM73.532 6.68466C73.0821 6.68466 72.6963 6.53551 72.3743 6.23722C72.0571 5.93419 71.8984 5.57197 71.8984 5.15057C71.8984 4.7339 72.0571 4.37642 72.3743 4.07812C72.6963 3.77509 73.0821 3.62358 73.532 3.62358C73.9818 3.62358 74.3653 3.77509 74.6825 4.07812C75.0045 4.37642 75.1655 4.7339 75.1655 5.15057C75.1655 5.57197 75.0045 5.93419 74.6825 6.23722C74.3653 6.53551 73.9818 6.68466 73.532 6.68466ZM83.2638 8.09091V10.3636H76.6942V8.09091H83.2638ZM78.1857 5.47727H81.2113V15.6477C81.2113 15.9271 81.2539 16.1449 81.3391 16.3011C81.4244 16.4527 81.5427 16.5592 81.6942 16.6207C81.8505 16.6823 82.0304 16.7131 82.234 16.7131C82.3761 16.7131 82.5181 16.7012 82.6602 16.6776C82.8022 16.6491 82.9111 16.6278 82.9869 16.6136L83.4627 18.8651C83.3112 18.9124 83.0981 18.9669 82.8235 19.0284C82.5489 19.0947 82.2151 19.1349 81.8221 19.1491C81.0929 19.1776 80.4537 19.0805 79.9045 18.858C79.36 18.6354 78.9362 18.2898 78.6332 17.821C78.3301 17.3523 78.181 16.7604 78.1857 16.0455V5.47727ZM88.4947 4.45455V19H85.4691V4.45455H88.4947ZM95.8899 19.2131C94.7678 19.2131 93.8018 18.9858 92.9922 18.5312C92.1873 18.072 91.567 17.4233 91.1314 16.5852C90.6958 15.7424 90.478 14.7457 90.478 13.5952C90.478 12.473 90.6958 11.4882 91.1314 10.6406C91.567 9.79309 92.1802 9.13258 92.9709 8.65909C93.7663 8.18561 94.6991 7.94886 95.7692 7.94886C96.4889 7.94886 97.1589 8.06487 97.7791 8.29688C98.4041 8.52415 98.9486 8.86742 99.4126 9.3267C99.8814 9.78598 100.246 10.3636 100.506 11.0597C100.767 11.7509 100.897 12.5606 100.897 13.4886V14.3196H91.6854V12.4446H98.049C98.049 12.009 97.9543 11.6231 97.7649 11.2869C97.5755 10.9508 97.3127 10.688 96.9766 10.4986C96.6451 10.3045 96.2592 10.2074 95.8189 10.2074C95.3596 10.2074 94.9524 10.3139 94.5973 10.527C94.2469 10.7353 93.9723 11.017 93.7734 11.3722C93.5746 11.7225 93.4728 12.1132 93.468 12.544V14.3267C93.468 14.8665 93.5675 15.3329 93.7663 15.7259C93.9699 16.1188 94.2564 16.4219 94.6257 16.6349C94.995 16.848 95.433 16.9545 95.9396 16.9545C96.2758 16.9545 96.5836 16.9072 96.8629 16.8125C97.1423 16.7178 97.3814 16.5758 97.5803 16.3864C97.7791 16.197 97.9306 15.965 98.0348 15.6903L100.833 15.875C100.691 16.5473 100.4 17.1345 99.9595 17.6364C99.5239 18.1335 98.9605 18.5218 98.2692 18.8011C97.5826 19.0758 96.7895 19.2131 95.8899 19.2131ZM106.891 19.1776C106.063 19.1776 105.312 18.9645 104.64 18.5384C103.972 18.1075 103.442 17.4754 103.049 16.642C102.661 15.804 102.467 14.7765 102.467 13.5597C102.467 12.3097 102.668 11.2704 103.07 10.4418C103.473 9.60843 104.008 8.9858 104.675 8.57386C105.348 8.1572 106.084 7.94886 106.884 7.94886C107.495 7.94886 108.004 8.05303 108.411 8.26136C108.823 8.46496 109.155 8.72064 109.406 9.02841C109.661 9.33144 109.855 9.62973 109.988 9.9233H110.08V4.45455H113.099V19H110.116V17.2528H109.988C109.846 17.5559 109.645 17.8565 109.384 18.1548C109.129 18.4484 108.795 18.6922 108.383 18.8864C107.976 19.0805 107.478 19.1776 106.891 19.1776ZM107.85 16.7699C108.338 16.7699 108.75 16.6373 109.086 16.3722C109.427 16.1023 109.687 15.7259 109.867 15.2429C110.052 14.7599 110.144 14.1941 110.144 13.5455C110.144 12.8968 110.054 12.3333 109.874 11.8551C109.694 11.3769 109.434 11.0076 109.093 10.7472C108.752 10.4867 108.338 10.3565 107.85 10.3565C107.353 10.3565 106.934 10.4915 106.593 10.7614C106.252 11.0312 105.994 11.4053 105.819 11.8835C105.644 12.3617 105.556 12.9157 105.556 13.5455C105.556 14.1799 105.644 14.741 105.819 15.2287C105.999 15.7116 106.257 16.0904 106.593 16.3651C106.934 16.6349 107.353 16.7699 107.85 16.7699Z" fill="currentColor"></path>
+                    </svg>
+                </div>
+                <NavigationMenu.Root className="hd-nav">
+                    <NavigationMenu.List className="hd-nav__list">
+                        {navigationItems}
+                    </NavigationMenu.List>
+                </NavigationMenu.Root>
+            </div>
+
+            <div>
+                {/*<input type="search" placeholder="Search" />*/}
+                {/*<button>Github</button>*/}
+                <IconButton />
+            </div>
+        </header>
+    );
+};
diff --git a/apps/docs/components/Header/header.css b/apps/docs/components/Header/header.css
@@ -0,0 +1,29 @@
+.hd-header {
+    display: flex;
+    height: var(--hd-space-8);
+    align-items: center;
+    border-bottom: 1px solid var(--hd-primary-200);
+    padding-inline: var(--hd-space-4);
+}
+
+.hd-header__nav {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--hd-space-5);
+}
+
+.hd-nav {
+    font-size: 0.875rem;
+    line-height: 1.25;
+}
+
+.hd-nav__list {
+    display: flex;
+    list-style: none;
+    gap: var(--hd-space-2);
+}
+
+.hd-brand {
+    display: flex;
+}
diff --git a/apps/docs/components/IconButton/IconButton.tsx b/apps/docs/components/IconButton/IconButton.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Toggle from "@radix-ui/react-toggle";
+
+import { Icon } from "@/components/Icons/Icons";
+
+import "./iconButton.css";
+
+export const IconButton = () => {
+    const [ theme, setTheme ] = React.useState("light");
+
+    return (
+        <Toggle.Root
+            defaultPressed={theme === "light"}
+            onPressedChange={() => setTheme(theme === "light" ? "dark" : "light")}
+            aria-label="Toggle dark/light mode"
+            className="hd-iconButton"
+        >
+            <Icon icon={ theme === "light" ? "moon" : "sun"} />
+        </Toggle.Root>
+    );
+};
diff --git a/apps/docs/components/IconButton/iconButton.css b/apps/docs/components/IconButton/iconButton.css
@@ -0,0 +1,13 @@
+.hd-iconButton {
+    width: var(--hd-space-4);
+    aspect-ratio: 1/1;
+    background-color: var(--hd-primary-0);
+    color: var(--hd-primary-800);
+    border-width: 0;
+    border-radius: var(--hd-space-05);
+}
+
+.hd-iconButton:hover {
+    background-color: var(--hd-primary-200);
+    cursor: pointer;
+}
diff --git a/apps/docs/components/Icons/Icons.tsx b/apps/docs/components/Icons/Icons.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import "./icons.css";
+
+export interface IconTypes {
+    iconProps?: React.SVGProps<SVGSVGElement>;
+    icon?: "sun" | "moon";
+}
+
+const icons = {
+    "sun": <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.333}
+        d="M8 11.333a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666ZM8 .667V2M8 14v1.333M2.813 2.813l.947.947M12.24 12.24l.947.947M.667 8H2M14 8h1.333M2.813 13.187l.947-.947M12.24 3.76l.947-.947"
+    />,
+    "moon": <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.333}
+        d="M13.975 8.527A6 6 0 1 1 7.448 2a4.667 4.667 0 0 0 6.527 6.527Z"
+    />
+};
+
+export const Icon = ({ iconProps, icon = "sun" }: IconTypes) => (
+    <svg
+        {...iconProps}
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        fill="none"
+        className="hd-icon"
+    >
+        {icons[icon]}
+    </svg>
+);
diff --git a/apps/docs/components/Icons/icons.css b/apps/docs/components/Icons/icons.css
@@ -0,0 +1,7 @@
+.hd-icon {
+    display: inline-block;
+    width: var(--hd-space-2);
+    height: var(--hd-space-2);
+    vertical-align: center;
+    overflow: hidden;
+}
diff --git a/apps/docs/components/Mdx/MdxComponent.tsx b/apps/docs/components/Mdx/MdxComponent.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image";
+import { useMDXComponent } from "next-contentlayer/hooks";
+
+const components = {
+    Image
+};
+
+interface MdxProps {
+    code: string;
+}
+
+export const Mdx = ({ code }: MdxProps) => {
+    const Component = useMDXComponent(code);
+
+    return <Component components={components} />;
+};
diff --git a/apps/docs/components/title/Title.stories.ts → apps/docs/components/Title/Title.stories.ts b/apps/docs/components/title/Title.stories.ts → apps/docs/components/Title/Title.stories.ts
diff --git a/apps/docs/components/title/Title.tsx → apps/docs/components/Title/Title.tsx b/apps/docs/components/title/Title.tsx → apps/docs/components/Title/Title.tsx
diff --git a/apps/docs/components/Title/title.css b/apps/docs/components/Title/title.css
@@ -0,0 +1,27 @@
+.hd-title {
+  --hd-title-font-family: var(--hd-default-font-family);
+
+  font-family: var(--hd-title-font-family);
+  line-height: 1.35;
+  margin: 0;
+}
+
+.hd-title--level1 {
+  font-size: var(--hd-step-5);
+}
+
+.hd-title--level2 {
+  font-size: var(--hd-step-4);
+}
+
+.hd-title--level3 {
+  font-size: var(--hd-step-3);
+}
+
+.hd-title--level4 {
+  font-size: var(--hd-step-2);
+}
+
+.hd-title--level5 {
+  font-size: var(--hd-step-1);
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		auto-install-peers=true
		strict-peer-dependencies=false