@koide-labs/ui 0.0.0

package/src/integrations/react-markdown/react-markdown.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { View } from "~/components/view";
+
+import { Markdown } from "./index.tsx";
+
+const meta = {
+  title: "Integrations/Markdown",
+  component: Markdown,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Markdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: `# Introduction
+
+My initial portfolio (v1) was built completely with React and Tailwind. v1.5 is somewhat of a misnomer, considering it is less of a simple upgrade and more an entire rewrite with Remix for routing and serving markdown files.
+
+![Portfolio home page](https://npham.dev/images/portfolio-home.png)
+`,
+  },
+  render: (args) => (
+    <View style={{ maxWidth: "30rem", width: "100%" }}>
+      <Markdown {...args} />
+    </View>
+  ),
+};

package/src/integrations/remix.ts

@@ -0,0 +1,12 @@
+export const fonts = [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;500;600&display=swap",
+  },
+];

package/src/integrations/tailwind.css

@@ -0,0 +1,173 @@
+@theme {
+  --font-sans: var(--font-family-default);
+  --font-mono: var(--font-family-code);
+
+  --text-small: var(--font-size-small);
+  --text-default: var(--font-size-default);
+  --text-subhead-default: var(--font-size-subhead-default);
+  --text-subhead-big: var(--font-size-subhead-big);
+  --text-header-default: var(--font-size-header-default);
+  --text-header-big: var(--font-size-header-big);
+
+  --leading-none: 1;
+  --leading-small: var(--line-height-small);
+  --leading-default: var(--line-height-default);
+  --leading-subhead-default: var(--line-height-subhead-default);
+  --leading-subhead-big: var(--line-height-subhead-big);
+  --leading-header-default: var(--line-height-header-default);
+  --leading-header-big: var(--line-height-header-big);
+
+  --shadow-1: var(--shadow-1);
+  --shadow-2: var(--shadow-2);
+  --shadow-3: var(--shadow-3);
+  --shadow-focus: inset 0 0 0 2px var(--primary-default);
+  --shadow-default: var(--shadow-default);
+  --shadow-none: "";
+
+  --color-transparent: transparent;
+  --color-white: #fcfcfc;
+  --color-black: #0e1525;
+
+  --color-background-root: var(--background-root);
+  --color-background-default: var(--background-default);
+  --color-background-higher: var(--background-higher);
+  --color-background-highest: var(--background-highest);
+  --color-background-overlay: var(--background-overlay);
+  --color-foreground-default: var(--foreground-default);
+  --color-foreground-dimmer: var(--foreground-dimmer);
+  --color-foreground-dimmest: var(--foreground-dimmest);
+  --color-outline-dimmest: var(--outline-dimmest);
+  --color-outline-dimmer: var(--outline-dimmer);
+  --color-outline-default: var(--outline-default);
+  --color-outline-stronger: var(--outline-stronger);
+  --color-outline-strongest: var(--outline-strongest);
+  --color-red-dimmest: var(--red-dimmest);
+  --color-red-dimmer: var(--red-dimmer);
+  --color-red-default: var(--red-default);
+  --color-red-stronger: var(--red-stronger);
+  --color-red-strongest: var(--red-strongest);
+  --color-orange-dimmest: var(--orange-dimmest);
+  --color-orange-dimmer: var(--orange-dimmer);
+  --color-orange-default: var(--orange-default);
+  --color-orange-stronger: var(--orange-stronger);
+  --color-orange-strongest: var(--orange-strongest);
+  --color-yellow-dimmest: var(--yellow-dimmest);
+  --color-yellow-dimmer: var(--yellow-dimmer);
+  --color-yellow-default: var(--yellow-default);
+  --color-yellow-stronger: var(--yellow-stronger);
+  --color-yellow-strongest: var(--yellow-strongest);
+  --color-lime-dimmest: var(--lime-dimmest);
+  --color-lime-dimmer: var(--lime-dimmer);
+  --color-lime-default: var(--lime-default);
+  --color-lime-stronger: var(--lime-stronger);
+  --color-lime-strongest: var(--lime-strongest);
+  --color-green-dimmest: var(--green-dimmest);
+  --color-green-dimmer: var(--green-dimmer);
+  --color-green-default: var(--green-default);
+  --color-green-stronger: var(--green-stronger);
+  --color-green-strongest: var(--green-strongest);
+  --color-teal-dimmest: var(--teal-dimmest);
+  --color-teal-dimmer: var(--teal-dimmer);
+  --color-teal-default: var(--teal-default);
+  --color-teal-stronger: var(--teal-stronger);
+  --color-teal-strongest: var(--teal-strongest);
+  --color-blue-dimmest: var(--blue-dimmest);
+  --color-blue-dimmer: var(--blue-dimmer);
+  --color-blue-default: var(--blue-default);
+  --color-blue-stronger: var(--blue-stronger);
+  --color-blue-strongest: var(--blue-strongest);
+  --color-blurple-dimmest: var(--blurple-dimmest);
+  --color-blurple-dimmer: var(--blurple-dimmer);
+  --color-blurple-default: var(--blurple-default);
+  --color-blurple-stronger: var(--blurple-stronger);
+  --color-blurple-strongest: var(--blurple-strongest);
+  --color-purple-dimmest: var(--purple-dimmest);
+  --color-purple-dimmer: var(--purple-dimmer);
+  --color-purple-default: var(--purple-default);
+  --color-purple-stronger: var(--purple-stronger);
+  --color-purple-strongest: var(--purple-strongest);
+  --color-magenta-dimmest: var(--magenta-dimmest);
+  --color-magenta-dimmer: var(--magenta-dimmer);
+  --color-magenta-default: var(--magenta-default);
+  --color-magenta-stronger: var(--magenta-stronger);
+  --color-magenta-strongest: var(--magenta-strongest);
+  --color-pink-dimmest: var(--pink-dimmest);
+  --color-pink-dimmer: var(--pink-dimmer);
+  --color-pink-default: var(--pink-default);
+  --color-pink-stronger: var(--pink-stronger);
+  --color-pink-strongest: var(--pink-strongest);
+  --color-grey-dimmest: var(--grey-dimmest);
+  --color-grey-dimmer: var(--grey-dimmer);
+  --color-grey-default: var(--grey-default);
+  --color-grey-stronger: var(--grey-stronger);
+  --color-grey-strongest: var(--grey-strongest);
+  --color-brown-dimmest: var(--brown-dimmest);
+  --color-brown-dimmer: var(--brown-dimmer);
+  --color-brown-default: var(--brown-default);
+  --color-brown-stronger: var(--brown-stronger);
+  --color-brown-strongest: var(--brown-strongest);
+
+  /* Primary Aliases */
+  --color-primary-dimmest: var(--primary-dimmest);
+  --color-primary-dimmer: var(--primary-dimmer);
+  --color-primary-default: var(--primary-default);
+  --color-primary-stronger: var(--primary-stronger);
+  --color-primary-strongest: var(--primary-strongest);
+
+  /* Positive Aliases */
+  --color-positive-dimmest: var(--positive-dimmest);
+  --color-positive-dimmer: var(--positive-dimmer);
+  --color-positive-default: var(--positive-default);
+  --color-positive-stronger: var(--positive-stronger);
+  --color-positive-strongest: var(--positive-strongest);
+
+  /* Negative Aliases */
+  --color-negative-dimmest: var(--negative-dimmest);
+  --color-negative-dimmer: var(--negative-dimmer);
+  --color-negative-default: var(--negative-default);
+  --color-negative-stronger: var(--negative-stronger);
+  --color-negative-strongest: var(--negative-strongest);
+
+  /* Warning Aliases */
+  --color-warning-dimmest: var(--warning-dimmest);
+  --color-warning-dimmer: var(--warning-dimmer);
+  --color-warning-default: var(--warning-default);
+  --color-warning-stronger: var(--warning-stronger);
+  --color-warning-strongest: var(--warning-strongest);
+
+  /* View Colorway Aliases */
+  --color-view-colorway-dimmest: var(--view-colorway-dimmest);
+  --color-view-colorway-dimmer: var(--view-colorway-dimmer);
+  --color-view-colorway-default: var(--view-colorway-default);
+  --color-view-colorway-stronger: var(--view-colorway-stronger);
+  --color-view-colorway-strongest: var(--view-colorway-strongest);
+
+  /* Surface Aliases */
+  --color-surface-background: var(--surface-background);
+  --color-surface-interactive-background: var(--surface-interactive-background);
+  --color-surface-interactive-background-active: var(
+    --surface-interactive-background-active
+  );
+  --color-surface-interactive-border: var(--surface-interactive-border);
+  --color-surface-interactive-border-hover: var(
+    --surface-interactive-border-hover
+  );
+
+  --default-transition-duration: var(--transition-duration-snappy);
+  --default-transition-timing-function: var(
+    --transition-timing-function-snappy
+  );
+
+  --ease-snappy: var(--transition-timing-function-snappy);
+  --ease-chill: var(--transition-timing-function-chill);
+
+  --radius-none: 0px;
+  --radius-sm: var(--border-radius-2);
+  --radius-md: var(--border-radius-4);
+  --radius-lg: var(--border-radius-6);
+  --radius-xl: var(--border-radius-8);
+  --radius-2xl: var(--border-radius-12);
+  --radius-3xl: var(--border-radius-16);
+  --radius-full: var(--border-radius-round);
+  --radius-default: var(--border-radius-default);
+}

package/src/integrations/twemoij/index.tsx

@@ -0,0 +1,13 @@
+import styles from "./twemoji.module.css";
+
+export function Twemoji(props: { value: string }) {
+  const img = props.value.codePointAt(0)?.toString(16);
+
+  return (
+    <img
+      src={`https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/svg/${img}.svg`}
+      className={styles["twemoji"]}
+      alt={props.value}
+    />
+  );
+}

package/src/integrations/twemoij/twemoji.module.css

@@ -0,0 +1,7 @@
+.twemoji {
+  display: inline-block;
+  vertical-align: -0.1em;
+  margin: 0 0.05em 0 0.1em;
+  width: 1em;
+  height: 1em;
+}

package/src/integrations/twemoij/twemoji.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Anchor } from "~/components/anchor";
+import { tokens } from "~/styles/tokens";
+
+import { Twemoji } from ".";
+import { Surface } from "../../components/surface";
+import { Text } from "../../components/text";
+
+const meta = {
+  title: "Integrations/Twemoji",
+  component: Twemoji,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Twemoji>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: "✨",
+  },
+  render: (args) => (
+    <Surface
+      style={{ padding: tokens.space16, width: tokens.space256 }}
+      elevated
+    >
+      <Text className="mt-2" multiline>
+        Building apps that shine <Twemoji {...args} /> with React and Tailwind.
+        Currently using Typescript, but attempting to learn Go. In my spare time
+        I do{" "}
+        <Anchor href="https://art.natmf.at/" external>
+          generative art
+        </Anchor>
+        , make origami dragons, or vibe to Lo-Fi.
+      </Text>
+    </Surface>
+  ),
+};

package/src/stories/components/all-variants.tsx

@@ -0,0 +1,40 @@
+import { cloneElement, type CSSProperties, type ReactElement } from "react";
+
+import { Surface } from "~/components/surface";
+import { Text } from "~/components/text";
+import { View } from "~/components/view";
+import { tokens } from "~/styles/tokens";
+
+export function AllVariants(props: {
+  /** What's the variant actually called. */
+  variantName: string;
+  /** Possible values for the variant. */
+  variants: string[];
+  /** Element that we'll clone with different variants. */
+  element: ReactElement;
+  /** Override styles on wrapper. */
+  style?: CSSProperties;
+}) {
+  return (
+    <Surface
+      elevated
+      style={{
+        flexDirection: "column",
+        gap: tokens.space16,
+        padding: tokens.space16,
+        ...props.style,
+      }}
+    >
+      {props.variants.map((variant) => (
+        <View key={variant} style={{ gap: tokens.space2 }}>
+          <Text color="dimmest" size="sm">
+            {variant}
+          </Text>
+          {cloneElement(props.element, {
+            [props.variantName]: variant,
+          })}
+        </View>
+      ))}
+    </Surface>
+  );
+}

package/src/stories/data.ts

@@ -0,0 +1,72 @@
+import type { Background } from "~/components/surface";
+import type { TextProps } from "~/components/text";
+import type {
+  Color,
+  ColorStyle,
+  ColorVariant,
+  InteractiveStyle,
+} from "~/components/view";
+
+import { type Size } from "../styles/tokens";
+
+export const textColors: Array<NonNullable<TextProps["color"]>> = [
+  "inherit",
+  "default",
+  "dimmer",
+  "dimmest",
+];
+
+export const surfaceBackgrounds: Background[] = [
+  "root",
+  "default",
+  "higher",
+  "highest",
+];
+
+export const sizes: Size[] = ["sm", "md", "lg", "xl", "2xl", "3xl"];
+
+export const interactiveStyles: InteractiveStyle[] = [
+  "fill",
+  "no-fill",
+  "outline",
+  "fill-outline",
+  "list-item",
+];
+
+export const colors: Color[] = [
+  "primary",
+  "positive",
+  "negative",
+  "warning",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "teal",
+  "blue",
+  "blurple",
+  "purple",
+  "magenta",
+  "pink",
+  "grey",
+];
+
+export const colorVariants: ColorStyle[] = [
+  "outline",
+  "outline-static",
+  "mute-static",
+  "fill",
+  "no-fill",
+  "fill-static",
+  "fill-outline",
+];
+
+export const colorway: ColorVariant[] = (() => {
+  const result: ColorVariant[] = [];
+  for (const color of colors) {
+    for (const variant of colorVariants) {
+      result.push(`${color}_${variant}`);
+    }
+  }
+  return result;
+})();

package/src/stories/utils.ts

@@ -0,0 +1,20 @@
+/**
+ * Shorthand to disable many properties in a story
+ * @param keys List of controls to disable
+ * @returns
+ *
+ * @example
+ * { argTypes: { message: { table: { disable: true } } } }
+ * disable(["message"])
+ */
+export function disable<T extends string>(keys: T[]) {
+  const result = {} as Record<T, { table: { disable: true } }>;
+  for (const key of keys) {
+    result[key] = {
+      table: {
+        disable: true,
+      },
+    };
+  }
+  return result;
+}

package/src/styles/core.css

@@ -0,0 +1,153 @@
+@import "modern-normalize/modern-normalize.css";
+
+@import "./themes/light.css";
+@import "./themes/dark.css";
+
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  border: 0 solid; /* 3 */
+  padding: 0; /* 2 */
+}
+
+/*
+  TODO maybe revisit to add custom animations (just fade)
+  @media (prefers-reduced-motion: reduce)
+*/
+
+:root {
+  --black: #0e1525;
+  --white: #fcfcfc;
+
+  --shadow-default: var(--shadow-1);
+
+  --border-radius-1: 1px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
+  --border-radius-12: 12px;
+  --border-radius-16: 16px;
+  --border-radius-default: var(--border-radius-8);
+  --border-radius-round: 1028px;
+
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-28: 28px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --space-96: 96px;
+  --space-128: 128px;
+  --space-256: 256px;
+  --space-default: var(--space-8);
+
+  --font-family-default: "IBM Plex Sans", sans-serif;
+  --font-family-code: "IBM Plex Mono", monospace;
+
+  --font-size-small: 12px;
+  --font-size-default: 14px;
+  --font-size-subhead-default: 16px;
+  --font-size-subhead-big: 20px;
+  --font-size-header-default: 24px;
+  --font-size-header-big: 32px;
+
+  --line-height-small: 1.5;
+  --line-height-default: 1.6;
+  --line-height-subhead-default: 1.375;
+  --line-height-subhead-big: 1.4;
+  --line-height-header-default: 1.333;
+  --line-height-header-big: 1.25;
+  --line-height-input: 22px;
+  --line-height-single: 1;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+
+  --transition-duration-snappy: 120ms;
+  --transition-timing-function-snappy: ease-out;
+
+  --transition-duration-chill: 300ms;
+  --transition-timing-function-chill: ease-in-out;
+
+  --border-width-default: 1px;
+}
+
+body {
+  /* https://base-ui.com/react/overview/quick-start */
+  position: relative;
+  overflow-x: hidden;
+  font-size: var(--font-size-default);
+  line-height: var(--line-height-default);
+  font-family: var(--font-family-default);
+}
+
+.root {
+  isolation: isolate;
+}
+
+[data-theme] {
+  --shadow-focus: inset 0 0 0 1.5px var(--primary-default);
+
+  /* Colorway aliases */
+  --primary-dimmest: var(--blue-dimmest);
+  --primary-dimmer: var(--blue-dimmer);
+  --primary-default: var(--blue-default);
+  --primary-stronger: var(--blue-stronger);
+  --primary-strongest: var(--blue-strongest);
+
+  --positive-dimmest: var(--green-dimmest);
+  --positive-dimmer: var(--green-dimmer);
+  --positive-default: var(--green-default);
+  --positive-stronger: var(--green-stronger);
+  --positive-strongest: var(--green-strongest);
+
+  --negative-dimmest: var(--red-dimmest);
+  --negative-dimmer: var(--red-dimmer);
+  --negative-default: var(--red-default);
+  --negative-stronger: var(--red-stronger);
+  --negative-strongest: var(--red-strongest);
+
+  --warning-dimmest: var(--yellow-dimmest);
+  --warning-dimmer: var(--yellow-dimmer);
+  --warning-default: var(--yellow-default);
+  --warning-stronger: var(--yellow-stronger);
+  --warning-strongest: var(--yellow-strongest);
+
+  /* Default colorway styles */
+  --view-colorway-dimmest: var(--primary-dimmest);
+  --view-colorway-dimmer: var(--primary-dimmer);
+  --view-colorway-default: var(--primary-default);
+  --view-colorway-stronger: var(--primary-stronger);
+  --view-colorway-strongest: var(--primary-strongest);
+
+  /* Default interactive styles  */
+  --surface-background: var(--background-root);
+  --surface-interactive-background: var(--background-default);
+  --surface-interactive-background-active: var(--background-higher);
+  --surface-interactive-border: var(--outline-dimmest);
+  --surface-interactive-border-hover: var(--outline-default);
+
+  background-color: var(--background-root);
+  color: var(--foreground-default);
+}

package/src/styles/themes/dark.css

@@ -0,0 +1,86 @@
+[data-theme="dark"] {
+  @nested-import "prismjs/themes/prism-tomorrow.css";
+
+  --shadow-1: 0px 4px 8px 0px rgba(2, 2, 3, 0.16);
+  --shadow-2: 0px 8px 16px 0px rgba(2, 2, 3, 0.32);
+  --shadow-3: 0px 16px 32px 0px rgba(2, 2, 3, 0.48);
+
+  --background-root: #0e1525;
+  --background-default: #1c2333;
+  --background-higher: #2b3245;
+  --background-highest: #3c445c;
+  --background-overlay: #0e1525a0;
+  --foreground-default: #f5f9fc;
+  --foreground-dimmer: #c2c8cc;
+  --foreground-dimmest: #9da2a6;
+  --outline-dimmest: #2b3245;
+  --outline-dimmer: #3c445c;
+  --outline-default: #4e5569;
+  --outline-stronger: #5f677a;
+  --outline-strongest: #70788c;
+  --red-dimmest: #660000;
+  --red-dimmer: #a60808;
+  --red-default: #e52222;
+  --red-stronger: #ff6666;
+  --red-strongest: #ffcfcf;
+  --orange-dimmest: #542a00;
+  --orange-dimmer: #703800;
+  --orange-default: #ad5700;
+  --orange-stronger: #d4781c;
+  --orange-strongest: #ffbd7a;
+  --yellow-dimmest: #4d4000;
+  --yellow-dimmer: #635300;
+  --yellow-default: #967d00;
+  --yellow-stronger: #bfa730;
+  --yellow-strongest: #f2e088;
+  --lime-dimmest: #314a00;
+  --lime-dimmer: #3d5c00;
+  --lime-default: #5a8700;
+  --lime-stronger: #87b825;
+  --lime-strongest: #c4e581;
+  --green-dimmest: #044a10;
+  --green-dimmer: #046113;
+  --green-default: #009118;
+  --green-stronger: #6cd97e;
+  --green-strongest: #7aeb8d;
+  --teal-dimmest: #004452;
+  --teal-dimmer: #006073;
+  --teal-default: #0093b0;
+  --teal-stronger: #27b9d6;
+  --teal-strongest: #69d9f0;
+  --blue-dimmest: #004182;
+  --blue-dimmer: #0053a6;
+  --blue-default: #0079f2;
+  --blue-stronger: #57abff;
+  --blue-strongest: #b2d9ff;
+  --blurple-dimmest: #39298a;
+  --blurple-dimmer: #5239cc;
+  --blurple-default: #795eff;
+  --blurple-stronger: #a694ff;
+  --blurple-strongest: #cec4ff;
+  --purple-dimmest: #582987;
+  --purple-dimmer: #7633b8;
+  --purple-default: #a64dff;
+  --purple-stronger: #c78fff;
+  --purple-strongest: #e2c4ff;
+  --magenta-dimmest: #6b1a6b;
+  --magenta-dimmer: #8a218a;
+  --magenta-default: #c73ac7;
+  --magenta-stronger: #f562f5;
+  --magenta-strongest: #ffbfff;
+  --pink-dimmest: #6e1b52;
+  --pink-dimmer: #8f226b;
+  --pink-default: #d4359f;
+  --pink-stronger: #ff70cf;
+  --pink-strongest: #ffbae8;
+  --grey-dimmest: #404040;
+  --grey-dimmer: #545454;
+  --grey-default: #808080;
+  --grey-stronger: #a6a6a6;
+  --grey-strongest: #d4d4d4;
+  --brown-dimmest: #594031;
+  --brown-dimmer: #75503b;
+  --brown-default: #a3765c;
+  --brown-stronger: #d49877;
+  --brown-strongest: #ffc8a8;
+}