@coldsurf/ocean-road 1.13.2

package/native/index.d.ts

@@ -0,0 +1,7 @@
+// This file is needed for projects that have `moduleResolution` set to `node`
+// in their tsconfig.json to be able to `import {} from '@coldsurfers/ocean-road/native'`.
+// Other module resolutions strategies will look for the `exports` in `package.json`,
+// but with `node`, TypeScript will look for a .d.ts file with that name at the
+// root of the package.
+
+export * from '../dist/native';

package/next/index.d.ts

@@ -0,0 +1,7 @@
+// This file is needed for projects that have `moduleResolution` set to `node`
+// in their tsconfig.json to be able to `import {} from '@coldsurfers/ocean-road/next'`.
+// Other module resolutions strategies will look for the `exports` in `package.json`,
+// but with `node`, TypeScript will look for a .d.ts file with that name at the
+// root of the package.
+
+export * from '../dist/next';

package/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "@coldsurf/ocean-road",
+  "author": {
+    "name": "Dong-Ho Choi",
+    "email": "imcoldsurf@gmail.com",
+    "url": "https://coldsurf.io"
+  },
+  "version": "1.13.2",
+  "bugs": {
+    "url": "https://github.com/coldsurfers/ocean-road/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coldsurfers/ocean-road",
+    "directory": "packages/ocean-road"
+  },
+  "homepage": "https://storybook.ocean-road.coldsurf.io",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "default": "./dist/next.cjs"
+    },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "default": "./dist/native.cjs"
+    }
+  },
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/index.js",
+  "source": "src/",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "next",
+    "native",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "pnpm build:core",
+    "build:core": "tsdown",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "format": "biome format .",
+    "format:fix": "biome format --write .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "check:type": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@coldsurf/shared-utils": "1.1.15",
+    "ts-pattern": "5.8.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@biomejs/biome": "1.9.4",
+    "@coldsurfers/ocean-road-design-tokens": "1.10.8",
+    "@emotion/css": "11.10.6",
+    "@emotion/native": "11.11.0",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "19.0.3",
+    "framer-motion": "11.11.13",
+    "lucide-react": "0.469.0",
+    "lucide-react-native": "0.468.0",
+    "next": "15.5.9",
+    "overlay-kit": "^1.8.6",
+    "prettier": "*",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.81.4",
+    "react-native-reanimated": "4.1.2",
+    "react-native-svg": "15.13.0",
+    "react-native-worklets": "0.6.0",
+    "tsdown": "^0.11.9"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.10.6",
+    "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "lucide-react-native": "^0.468.0",
+    "react": ">= 19.1.0",
+    "react-dom": ">= 19.1.4",
+    "react-native-reanimated": ">= 3.17.1",
+    "react-native-svg": "^15.11.1",
+    "react-native-worklets": "^0.6.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "lucide-react-native": {
+      "optional": true
+    },
+    "overlay-kit": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}

package/src/GlobalStyle.tsx

@@ -0,0 +1,111 @@
+import { Global, css } from '@emotion/react';
+import { darkModeTheme, lightModeTheme, themeToStyles } from './contexts/ColorSchemeProvider';
+import { colors, semantics } from './tokens';
+
+type Props = {
+  themeStorageItem?: string;
+};
+
+const SAFE_STORAGE_KEY_PATTERN = /^[A-Za-z0-9._:@/-]+$/;
+const DEFAULT_THEME_STORAGE_KEY = 'ocean-road-theme';
+
+export default function GlobalStyle({ themeStorageItem }: Props) {
+  const safeThemeStorageItem =
+    themeStorageItem && SAFE_STORAGE_KEY_PATTERN.test(themeStorageItem)
+      ? themeStorageItem
+      : DEFAULT_THEME_STORAGE_KEY;
+
+  return (
+    <>
+      <Global
+        styles={css`
+        html,
+        body {
+          padding: 0;
+          margin: 0;
+        }
+
+        html {
+          ${themeToStyles(lightModeTheme)}
+        }
+        html.dark {
+          ${themeToStyles(darkModeTheme)}
+        }
+
+        body {
+          background-color: ${semantics.color.background[2]};
+          color: ${semantics.color.foreground[1]};
+          white-space: pre-wrap;
+        }
+
+        a {
+          color: ${colors.oc.blue[5].value};
+          text-decoration: none;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+      `}
+      />
+      {themeStorageItem && (
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+          dangerouslySetInnerHTML={{
+            __html: `
+          (function () {
+              var themeStorage = ${JSON.stringify(safeThemeStorageItem)};
+
+              function setTheme(newTheme) {
+                window.__theme = newTheme;
+                if (newTheme === 'dark') {
+                  document.documentElement.classList.add('dark');
+                } else if (newTheme === 'light') {
+                  document.documentElement.classList.remove('dark');
+                }
+              }
+
+              var preferredTheme;
+              try {
+                preferredTheme = localStorage.getItem(themeStorage);
+              } catch (err) { }
+
+              window.__setPreferredTheme = function(newTheme) {
+                preferredTheme = newTheme;
+                setTheme(newTheme);
+                try {
+                  localStorage.setItem(themeStorage, newTheme);
+                } catch (err) {
+                  console.error(err);
+                }
+              };
+
+              var initialTheme = preferredTheme;
+              var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+              if (!initialTheme) {
+                initialTheme = darkQuery.matches ? 'dark' : 'light';
+              }
+              setTheme(initialTheme);
+
+              darkQuery.addEventListener('change', function (e) {
+                if (!preferredTheme) {
+                  setTheme(e.matches ? 'dark' : 'light');
+                }
+              });
+
+              // Detect whether the browser is Mac to display platform specific content
+              // An example of such content can be the keyboard shortcut displayed in the search bar
+              // document.documentElement.classList.add(
+              //     window.navigator.platform.includes('Mac')
+              //     ? "platform-mac"
+              //     : "platform-win"
+              // );
+          })();
+      `,
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/base/badge/badge.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import type { icons as Icons } from 'lucide-react';
+import { type ReactElement, forwardRef } from 'react';
+import { semantics } from '../../tokens';
+import { createStyledIcon } from '../button/button.styled';
+import { Text } from '../text';
+
+const StyledFeedNavigationItem = styled.div<{ $isHighlighted?: boolean }>`
+    display: flex;
+    border-radius: 999px;
+    background-color: ${({ $isHighlighted }) => ($isHighlighted ? semantics.color.background[4] : semantics.color.background[3])};
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    user-select: none;
+`;
+
+const StyledFeedNavigationItemText = styled(Text)`
+    font-size: 1rem;
+    font-weight: 600;
+    color: ${semantics.color.foreground[1]};
+`;
+
+type Props = {
+  leftIcon?: keyof typeof Icons;
+  onClick?: () => void;
+  isHighlighted?: boolean;
+  children?: string | ReactElement;
+};
+
+export const Badge = forwardRef<HTMLDivElement, Props>(
+  ({ children, leftIcon, isHighlighted, onClick, ...otherProps }, ref) => {
+    return (
+      <StyledFeedNavigationItem
+        ref={ref}
+        $isHighlighted={isHighlighted}
+        onClick={onClick}
+        {...otherProps}
+      >
+        {leftIcon && createStyledIcon(leftIcon, 'lg', 'left', 'transparent')}
+        {typeof children === 'string' ? (
+          <StyledFeedNavigationItemText>{children}</StyledFeedNavigationItemText>
+        ) : (
+          children
+        )}
+      </StyledFeedNavigationItem>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/src/base/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge';

package/src/base/button/button.styled.tsx

@@ -0,0 +1,123 @@
+import styled from '@emotion/styled';
+import { icons as Icons } from 'lucide-react';
+import { Text } from '../text';
+import type { ButtonTheme } from './button.types';
+import { getButtonBackgroundColor, getButtonForegroundColor } from './button.utils';
+
+export const StyledButton = styled.button<{
+  colorTheme: ButtonTheme;
+  size: 'lg' | 'md' | 'sm';
+}>`
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ colorTheme }) => getButtonBackgroundColor(colorTheme)};
+  border: none;
+  font-family: inherit;
+
+  padding: ${(props) => {
+    switch (props.size) {
+      case 'lg':
+        return '18px';
+      case 'md':
+        return '14px';
+      default:
+        return '10px';
+    }
+  }};
+
+  border-radius: ${(props) => {
+    switch (props.size) {
+      case 'lg':
+        return '24px';
+      case 'md':
+        return '22px';
+      default:
+        return '20px';
+    }
+  }};
+
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+  opacity: ${(props) => (props.colorTheme === 'transparentDarkGray' ? 0.5 : 1.0)};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    opacity: ${({ disabled }) => (disabled ? 1.0 : 0.75)};
+  }
+
+  &:active {
+    opacity: ${({ disabled }) => (disabled ? 1.0 : 0.5)};
+  }
+`;
+
+export const StyledButtonText = styled(Text)<{
+  colorTheme: ButtonTheme;
+  size: 'lg' | 'md' | 'sm';
+  textWeight: 'light' | 'medium' | 'bold';
+}>`
+  font-weight: ${({ textWeight }) => {
+    switch (textWeight) {
+      case 'light':
+        return '300';
+      case 'medium':
+        return '500';
+      default:
+        return '700';
+    }
+  }};
+  color: ${({ colorTheme }) => getButtonForegroundColor(colorTheme)};
+  font-family: inherit;
+  margin: unset;
+
+  font-size: ${(props) => {
+    switch (props.size) {
+      case 'lg':
+        return '16px';
+      case 'md':
+        return '14px';
+      default:
+        return '12px';
+    }
+  }};
+`;
+
+const iconSize = (size: 'lg' | 'md' | 'sm') => {
+  switch (size) {
+    case 'lg':
+      return '18px';
+    case 'md':
+      return '16px';
+    default:
+      return '14px';
+  }
+};
+
+export const createStyledIcon = (
+  icon: keyof typeof Icons,
+  size: 'lg' | 'md' | 'sm',
+  position: 'left' | 'right',
+  colorTheme: ButtonTheme
+) => {
+  const TargetIcon = styled(Icons[icon])`
+    color: ${getButtonForegroundColor(colorTheme)};
+  `;
+
+  return (
+    <TargetIcon
+      size={iconSize(size)}
+      // strokeWidth={2.5}
+      style={{
+        marginLeft: position === 'right' ? 4 : undefined,
+        marginRight: position === 'left' ? 4 : undefined,
+      }}
+    />
+  );
+};
+
+export const StyledIconWrapper = styled.div<{ $position: 'left' | 'right' }>`
+  margin-right: ${({ $position }) => ($position === 'left' ? '4px' : '0px')};
+  margin-left: ${({ $position }) => ($position === 'right' ? '4px' : '0px')};
+`;

package/src/base/button/button.tsx

@@ -0,0 +1,60 @@
+import type { icons as Icons } from 'lucide-react';
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+import {
+  StyledButton,
+  StyledButtonText,
+  StyledIconWrapper,
+  createStyledIcon,
+} from './button.styled';
+import type { ButtonProps } from './button.types';
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
+>(
+  (
+    {
+      variant = 'indigo',
+      leftIcon,
+      rightIcon,
+      textWeight = 'medium',
+      size = 'md',
+      children,
+      className,
+      ...otherProps
+    },
+    ref
+  ) => {
+    return (
+      <StyledButton
+        ref={ref}
+        colorTheme={variant}
+        size={size}
+        className={className}
+        {...otherProps}
+      >
+        {typeof children === 'string' ? (
+          <>
+            {typeof leftIcon === 'string' ? (
+              createStyledIcon(leftIcon as keyof typeof Icons, size, 'left', variant)
+            ) : (
+              <StyledIconWrapper $position="left">{leftIcon}</StyledIconWrapper>
+            )}
+            <StyledButtonText size={size} textWeight={textWeight} colorTheme={variant}>
+              {children}
+            </StyledButtonText>
+            {typeof rightIcon === 'string' ? (
+              createStyledIcon(rightIcon as keyof typeof Icons, size, 'right', variant)
+            ) : (
+              <StyledIconWrapper $position="right">{rightIcon}</StyledIconWrapper>
+            )}
+          </>
+        ) : (
+          children
+        )}
+      </StyledButton>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/base/button/button.types.ts

@@ -0,0 +1,20 @@
+import type { icons } from 'lucide-react';
+import type { PropsWithChildren, ReactElement } from 'react';
+
+export type ButtonProps = PropsWithChildren<{
+  // @TODO: remove theme prop
+  theme?: ButtonTheme;
+  variant?: ButtonTheme;
+  size?: 'lg' | 'md' | 'sm';
+  leftIcon?: keyof typeof icons | ReactElement;
+  rightIcon?: keyof typeof icons | ReactElement;
+  textWeight?: 'light' | 'medium' | 'bold';
+}>;
+
+export type ButtonTheme =
+  | 'transparent'
+  | 'transparentDarkGray'
+  | 'white'
+  | 'pink'
+  | 'indigo'
+  | 'border';

package/src/base/button/button.utils.ts

@@ -0,0 +1,36 @@
+import { colors, semantics } from '../../tokens';
+import type { ButtonTheme } from './button.types';
+
+export const getButtonBackgroundColor = (colorTheme: ButtonTheme) => {
+  switch (colorTheme) {
+    case 'indigo':
+      return colors.oc.indigo[9].value;
+    case 'pink':
+      return colors.oc.pink[9].value;
+    case 'transparent':
+      return 'transparent';
+    case 'transparentDarkGray':
+      return colors.oc.black.value;
+    case 'white':
+      return colors.oc.white.value;
+    // @todo: for now, border type only supports react native, (do not support dark mode)
+    case 'border':
+      return colors.oc.white.value;
+    default:
+      return colors.oc.indigo[9].value;
+  }
+};
+
+export const getButtonForegroundColor = (colorTheme: ButtonTheme) => {
+  switch (colorTheme) {
+    case 'transparent':
+    case 'transparentDarkGray':
+    case 'white':
+      return semantics.color.foreground[1];
+    // @todo: for now, border type only supports react native
+    case 'border':
+      return colors.oc.black.value;
+    default:
+      return colors.oc.white.value;
+  }
+};

package/src/base/button/index.tsx

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button.types';

package/src/base/checkbox/checkbox.styled.ts

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { Check } from 'lucide-react';
+import { semantics } from '../../tokens';
+
+const sizesStringify = (size: 'lg' | 'md' | 'sm') => {
+  switch (size) {
+    case 'lg':
+      return '32px';
+    case 'md':
+      return '24px';
+    case 'sm':
+      return '16px';
+  }
+};
+
+export const StyledCheckboxLabel = styled.label`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  position: relative;
+`;
+
+export const StyledCheckboxInput = styled.input<{ $size: 'lg' | 'md' | 'sm' }>`
+  appearance: none;
+  width: ${({ $size }) => sizesStringify($size)};
+  height: ${({ $size }) => sizesStringify($size)};
+  border: 2px solid #333;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-right: 8px;
+  position: relative;
+
+  &:checked {
+    background-color: ${semantics.color.background[4]};
+    border-color: ${semantics.color.background[4]};
+  }
+
+  &:checked + svg {
+    display: block;
+  }
+`;
+
+export const StyledCheckboxIcon = styled(Check)<{ size: 'lg' | 'md' | 'sm' }>`
+  position: absolute;
+  top: 6px;
+  left: 6px;
+
+  width: ${({ size }) => `calc(${sizesStringify(size)} - 4px)`};
+  height: ${({ size }) => `calc(${sizesStringify(size)} - 4px)`};
+  display: none; /* Hidden by default */
+`;

package/src/base/checkbox/checkbox.tsx

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes, forwardRef, memo } from 'react';
+import { Text } from '../text';
+import { StyledCheckboxIcon, StyledCheckboxInput, StyledCheckboxLabel } from './checkbox.styled';
+
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'formAction'> & {
+  size?: 'lg' | 'md' | 'sm';
+  labelText?: string;
+};
+
+export const Checkbox = memo(
+  forwardRef<HTMLInputElement, CheckboxProps>(
+    ({ size = 'md', labelText, style, ...otherProps }, ref) => {
+      return (
+        <StyledCheckboxLabel style={style}>
+          <StyledCheckboxInput ref={ref} type="checkbox" $size={size} {...otherProps} />
+          <StyledCheckboxIcon size={size} width={undefined} height={undefined} />
+          <Text as="p" style={{ margin: 'unset' }}>
+            {labelText}
+          </Text>
+        </StyledCheckboxLabel>
+      );
+    }
+  )
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/base/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/src/base/icon-button/icon-button.styled.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const StyledIconButton = styled.button`
+  background: initial;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+`;

package/src/base/icon-button/icon-button.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { StyledIconButton } from './icon-button.styled';
+import type { IconButtonProps } from './icon-button.types';
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, ...otherProps }, ref) => {
+    return (
+      <StyledIconButton ref={ref} {...otherProps}>
+        {children}
+      </StyledIconButton>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';

package/src/base/icon-button/icon-button.types.ts

@@ -0,0 +1,3 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+export type IconButtonProps = {} & ButtonHTMLAttributes<HTMLButtonElement>;

package/src/base/icon-button/index.ts

@@ -0,0 +1,2 @@
+export * from './icon-button';
+export * from './icon-button.types';

package/src/base/index.ts

@@ -0,0 +1,11 @@
+export { Button } from './button';
+export * from './checkbox';
+export * from './icon-button';
+export * from './modal';
+export * from './spinner';
+export * from './text';
+export * from './text-area';
+export * from './text-input';
+export * from './toast';
+export * from './switch';
+export * from './badge';

package/src/base/label/index.ts

@@ -0,0 +1 @@
+export * from './label';