paris 0.0.1 → 0.2.0

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "extends": [
+        "@ssh",
+        "plugin:storybook/recommended",
+        "plugin:css/recommended"
+    ],
+    "plugins": [
+        "css"
+    ],
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    },
+    "ignorePatterns": [
+        "dist/",
+        "node_modules/"
+    ],
+    "rules": {
+        "react/button-has-type": "off",
+        "react/jsx-props-no-spreading": "off"
+    }
+}

package/.github/workflows/publish.yml

@@ -0,0 +1,54 @@
+name: Publish
+on:
+  push:
+    branches:
+      - "main"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: ^8.x
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+          title: "chore(release): publish"
+          commit: "chore(release): publish"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,7 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="JSLastCommaInObjectLiteral" enabled="false" level="WARNING" enabled_by_default="false" />
+  </profile>
+</component>

package/.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

package/.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/paris.iml" filepath="$PROJECT_DIR$/.idea/paris.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/paris.iml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/storybook-static" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

package/.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+        "storybook-dark-mode",
+    ],
+    framework: {
+        name: "@storybook/nextjs",
+        options: {},
+    },
+    docs: {
+        autodocs: "tag",
+    },
+    staticDirs: [
+        '../public'
+    ],
+    previewHead: (head) => (
+        `${head}
+<style>
+    body {
+        color: var(--pte-colors-contentPrimary);
+        background-color: var(--pte-colors-backgroundPrimary);
+        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    }
+    
+    h2#stories {
+        letter-spacing: var(--pte-typography-styles-labelMedium-letterSpacing);
+    }
+</style>`
+    ),
+    webpackFinal: async (config) => {
+        config.resolve.plugins = [
+            new TsconfigPathsPlugin()
+        ];
+        return config;
+    }
+};
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1,16 @@
+<link rel="stylesheet" href="/graphik/graphik.css" />
+<link rel="stylesheet" href="/fira/fira_code.css" />
+
+<style>
+    .sidebar-subheading button {
+        letter-spacing: 0.1rem !important;
+    }
+    
+    * {
+        transition: color 0.2s ease, background-color 0.2s ease;
+    }
+    
+    #storybook-explorer-searchfield {
+        border-radius: 0;
+    }
+</style>

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { Light, Dark } from './themes';
+
+addons.setConfig({
+    theme: Light,
+});

package/.storybook/preview.ts

@@ -0,0 +1,74 @@
+import type {  Preview } from '@storybook/react';
+import { Dark, Light } from './themes';
+import { DocsContainer } from '@storybook/blocks';
+import { useDarkMode } from 'storybook-dark-mode';
+import { createElement, useEffect } from 'react';
+import { injectTheme, LightTheme, DarkTheme } from '../src/stories/theme';
+
+import '../public/graphik/graphik.css';
+import '../public/fira/fira_code.css';
+import '../src/styles/globals.css';
+import '../src/styles/tw-preflight.css';
+
+const Wrapper = (props: any) => {
+    const isDark = useDarkMode();
+
+    useEffect(() => {
+        injectTheme(!isDark ? LightTheme : DarkTheme);
+    }, [isDark]);
+
+    return props.children;
+}
+
+export const decorators = [
+    (renderStory) => createElement(Wrapper, {}, renderStory()),
+];
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        backgrounds: { disable: true },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+        docs: {
+            container: (context: any) => {
+                const isDark = useDarkMode();
+
+                const props = {
+                    ...context,
+                    theme: isDark ? Dark : Light,
+                };
+
+                useEffect(() => {
+                    injectTheme(!isDark ? LightTheme : DarkTheme);
+                }, [isDark]);
+
+                return createElement(DocsContainer, props);
+            },
+        },
+        options: {
+            storySort: {
+                order: [
+                    'Welcome',
+                    'Tokens',
+                    'Inputs',
+                    'Content',
+                    'Uncategorized'
+                ],
+            }
+        },
+        darkMode: {
+            stylePreview: true,
+            // Override the default dark theme
+            dark: Dark,
+            // Override the default light theme
+            light: Light
+        }
+    },
+};
+
+export default preview;

package/.storybook/themes.ts

@@ -0,0 +1,30 @@
+import { create, ThemeVars } from '@storybook/theming';
+import { LightTheme, DarkTheme, pvar } from '../src/stories/theme';
+
+/**
+ * Shared theme variables across light and dark themes.
+ */
+const sharedConfig: Partial<ThemeVars> = {
+    brandTitle: 'Paris',
+    brandUrl: 'https://slingshot.fm',
+    brandTarget: '_blank',
+    colorSecondary: '#FB46BE',
+    fontBase: '"Graphik Web", sans-serif',
+    fontCode: '"Fira Code VF", monospace',
+    inputBorderRadius: 0,
+};
+
+export const Light = create({
+    ...sharedConfig,
+    base: 'light',
+    brandImage: 'https://fast.slingshot.fm/sling/logo/paris-sb.png',
+    appBg: LightTheme.colors.backgroundPrimary,
+});
+
+export const Dark = create({
+    ...sharedConfig,
+    base: 'dark',
+    brandImage: 'https://fast.slingshot.fm/sling/logo/paris-sb-white.png',
+    appBg: DarkTheme.colors.backgroundPrimary,
+    appContentBg: DarkTheme.colors.backgroundPrimary,
+});

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# paris
+
+## 0.2.0
+
+### Minor Changes
+
+- 7b3a5fc: `Button` component
+- d1630ec: `Text` component for typography and script for auto-generating typography CSS module + Storybook stories
+
+### Patch Changes
+
+- 4a3ecb1: Document tokens, update README and auto-import it to Welcome
+- 6d358a4: Update proof-of-concept `Button` with `pte` theming
+- 952ee38: Add `pte` for theming
+- 3b46865: Circular colors on Tokens page
+- 2059fea: Proper theme injection and updates across stories and docs
+- 72875c5: Set up changesets & husky

package/README.md

@@ -1,3 +1,43 @@
-# paris
+# Paris
 
-Coming Soon...
+Paris is Slingshot's React design system, meant to work universally across server and client components. It's a collection of reusable components, design tokens, and guidelines for building consistent, accessible, and performant user interfaces.
+
+Currently, Paris is provided as a set of *unbundled* `.tsx` components styled with SCSS modules. This means that you can import only the components you need, and you can use your own bundler to optimize your bundle size. As a result, Paris works best with frameworks like Next.js that have built-in support for TypeScript and SCSS modules.
+
+Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris because to move away from Styletron and CSS-in-JS, since we're now largely working with React 18, RSC, and the Next.js `app` directory.
+
+<br />
+
+## Getting started
+
+First, install Paris and SASS in your project:
+
+```bash
+pnpm i paris sass
+# or
+yarn add paris sass
+# or
+npm i paris sass
+```
+
+Map our types in your `.tsconfig.json` file (this is a temporary workaround that we'll fix soon):
+
+```json
+{
+    "paths": {
+        "paris/*": ["./node_modules/paris/src/stories/*"]
+    }
+}
+```
+
+That's it! You can now import any component from Paris:
+
+```tsx
+import { Button } from 'paris/button';
+
+const App = () => (
+    <Button>Click me</Button>
+);
+```
+
+This should work out of the box with Next.js, since it has built-in support for TypeScript and SCSS modules. If you're using another framework or bundler, you may need to configure it for generic SCSS support.

package/cat

@@ -0,0 +1,2 @@
+/Users/sanil/Projects/Slingshot/paris/node_modules/.bin/pte
+/Users/sanil/Projects/Slingshot/paris/node_modules/.bin/pte

package/global.d.ts

@@ -0,0 +1,2 @@
+declare module '*.module.css';
+declare module '*.module.scss';

package/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+};
+
+module.exports = nextConfig;

package/package.json

@@ -1,12 +1,74 @@
 {
   "name": "paris",
-  "version": "0.0.1",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
+  "version": "0.2.0",
+  "engines": {
+    "pnpm": "^8.x"
+  },
+  "exports": {
+    "./*": "./src/stories/*"
+  },
+  "peerDependencies": {
+    "react": "^18.x || ^17.x",
+    "react-dom": "^18.x || ^17.x",
+    "sass": "^1.x",
+    "typescript": "^5.0 || ^4.9"
   },
-  "keywords": [],
-  "author": "danielkalen",
-  "license": "ISC"
-}
+  "devDependencies": {
+    "@changesets/cli": "^2.26.1",
+    "@ssh/csstypes": "^1.1.0",
+    "@ssh/eslint-config": "^1.0.0",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-interactions": "^7.0.12",
+    "@storybook/addon-links": "^7.0.12",
+    "@storybook/blocks": "^7.0.12",
+    "@storybook/manager-api": "^7.0.12",
+    "@storybook/nextjs": "^7.0.12",
+    "@storybook/react": "^7.0.12",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.12",
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.31",
+    "@types/react-dom": "18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "change-case": "^4.1.2",
+    "csstype": "^3.1.2",
+    "esbuild-scss-modules-plugin": "^1.1.1",
+    "eslint": "^8.2.0",
+    "eslint-config-next": "13.4.2",
+    "eslint-plugin-css": "^0.8.0",
+    "eslint-plugin-storybook": "^0.6.12",
+    "husky": "^8.0.0",
+    "jss": "^10.10.0",
+    "jss-preset-default": "^10.10.0",
+    "next": "^13.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.62.1",
+    "storybook": "^7.0.12",
+    "storybook-dark-mode": "^3.0.0",
+    "title-case": "^3.0.3",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "tsup": "^6.7.0",
+    "type-fest": "^3.10.0",
+    "typescript": "^5.0.2"
+  },
+  "dependencies": {
+    "pte": "^0.4.7"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "create:component": "node ./scripts/createComponent.js",
+    "generate:entry": "node ./scripts/generateEntry.js",
+    "generate:theme": "pte export ./src/stories/theme/themes.ts LightTheme -o ./public/pte.css",
+    "generate:text": "ts-node --esm ./scripts/text.ts",
+    "release": "pnpm changeset publish"
+  }
+}

package/public/fira/fira_code.css

@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Light.woff2') format('woff2'),
+    url("woff/FiraCode-Light.woff") format("woff");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Regular.woff2') format('woff2'),
+    url("woff/FiraCode-Regular.woff") format("woff");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Medium.woff2') format('woff2'),
+    url("woff/FiraCode-Medium.woff") format("woff");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-SemiBold.woff2') format('woff2'),
+    url("woff/FiraCode-SemiBold.woff") format("woff");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('woff2/FiraCode-Bold.woff2') format('woff2'),
+    url("woff/FiraCode-Bold.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code VF';
+    src: url('woff2/FiraCode-VF.woff2') format('woff2-variations'),
+    url('woff/FiraCode-VF.woff') format('woff-variations');
+    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+    font-weight: 300 700;
+    font-style: normal;
+}