From 70fa51d4a13fb0ec28d91e6ed8ff5fad44f1d610 Mon Sep 17 00:00:00 2001 From: Katalina Okano Date: Sat, 10 Oct 2020 04:33:54 -0400 Subject: [PATCH] chore: prettier --- .devcontainer/devcontainer.json | 38 +-- .github/dependabot.yml | 32 +-- .github/workflows/build.yml | 94 +++---- .github/workflows/codeql-analysis.yml | 108 ++++---- .github/workflows/dev-container.yml | 70 ++--- .github/workflows/release.yml | 34 +-- .github/workflows/terraform.yml | 1 - .gitignore | 14 +- .prettierignore | 1 + .prettierrc | 0 .prettierrc.js | 9 + .storybook/main.js | 24 +- .storybook/manager.js | 6 +- .storybook/preview.js | 5 +- .storybook/theme.js | 50 ++-- .vscode/settings.json | 20 +- README.md | 58 ++-- package.json | 101 +++---- src/db/README.md | 8 +- .../atoms/avatar/Avatar.stories.tsx | 36 +-- .../atoms/avatar/Avatar.styled.ts | 79 +++--- .../atoms/branding/Branding.stories.tsx | 27 +- src/design-system/atoms/branding/Branding.tsx | 170 ++++++------ .../atoms/breakpoints/Breakpoints.stories.tsx | 12 +- .../atoms/breakpoints/Context.ts | 24 +- .../atoms/button/Button.story.tsx | 132 ++++----- .../atoms/button/Button.styled.ts | 158 +++++------ .../atoms/colors/colors.stories.tsx | 262 +++++++++--------- src/design-system/atoms/colors/colors.tsx | 48 ++-- src/design-system/atoms/colors/index.ts | 4 +- .../atoms/dot-overlay/DotOverlay.stories.tsx | 6 +- .../atoms/dot-overlay/DotOverlay.tsx | 54 ++-- .../atoms/fader/Fader.stories.tsx | 38 +-- src/design-system/atoms/fader/Fader.tsx | 48 ++-- .../atoms/fonts/fonts.stories.tsx | 94 +++---- src/design-system/atoms/fonts/fonts.tsx | 42 +-- .../atoms/halfsies/Halfsies.stories.tsx | 14 +- src/design-system/atoms/halfsies/Halfsies.tsx | 24 +- src/design-system/atoms/hero/Hero.stories.tsx | 120 ++++---- src/design-system/atoms/hero/Hero.tsx | 40 ++- .../atoms/popover/Popover.stories.tsx | 54 ++-- .../atoms/popover/Popover.styled.ts | 139 +++++----- src/design-system/atoms/popover/Popover.tsx | 70 ++--- src/design-system/atoms/role/Role.stories.tsx | 110 ++++---- src/design-system/atoms/role/Role.styled.tsx | 135 +++++---- src/design-system/atoms/role/Role.tsx | 130 ++++----- .../atoms/space/Space.stories.tsx | 16 +- src/design-system/atoms/space/Space.tsx | 6 +- .../atoms/sparkle/Sparkle.stories.tsx | 32 +-- src/design-system/atoms/sparkle/Sparkle.tsx | 77 +++-- .../atoms/tab-view/TabView.stories.tsx | 24 ++ .../atoms/tab-view/TabView.story.tsx | 37 --- .../atoms/tab-view/TabView.styled.ts | 66 ++--- src/design-system/atoms/tab-view/TabView.tsx | 1 + .../atoms/text-input/TextInput.stories.tsx | 56 ++-- .../atoms/text-input/TextInput.tsx | 110 ++++---- .../atoms/typist/Typist.stories.tsx | 20 +- src/design-system/atoms/typist/Typist.tsx | 50 ++-- .../atoms/typography/typography.stories.tsx | 154 +++++----- .../atoms/typography/typography.tsx | 68 ++--- src/dev-container/README.md | 10 +- src/discord-auth/README.md | 24 +- src/jstest/index.ts | 2 +- terraform/app/tags.auto.tfvars.json | 10 +- tsconfig.json | 44 +-- vercel.json | 22 +- yarn.lock | 77 +++-- 67 files changed, 1811 insertions(+), 1838 deletions(-) create mode 100644 .prettierignore delete mode 100644 .prettierrc create mode 100644 .prettierrc.js create mode 100644 src/design-system/atoms/tab-view/TabView.stories.tsx delete mode 100644 src/design-system/atoms/tab-view/TabView.story.tsx diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index cdc8715..2c50497 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,20 +1,20 @@ { - "name": "Roleypoly (Bazel, Go, Node)", - // Docker Hub because easier to go fast - "image": "roleypoly/dev-container:main", - "settings": { - "terminal.integrated.shell.linux": "/bin/bash" - }, - "extensions": [ - "bazelbuild.vscode-bazel", - "dbaeumer.vscode-eslint", - "golang.go", - "hashicorp.terraform", - "firsttris.vscode-jest-runner", - "esbenp.prettier-vscode", - "zxh404.vscode-proto3", - "jpoissonnier.vscode-styled-components", - "eg2.vscode-npm-script", - "christian-kohler.npm-intellisense" - ] -} \ No newline at end of file + "name": "Roleypoly (Bazel, Go, Node)", + // Docker Hub because easier to go fast + "image": "roleypoly/dev-container:main", + "settings": { + "terminal.integrated.shell.linux": "/bin/bash" + }, + "extensions": [ + "bazelbuild.vscode-bazel", + "dbaeumer.vscode-eslint", + "golang.go", + "hashicorp.terraform", + "firsttris.vscode-jest-runner", + "esbenp.prettier-vscode", + "zxh404.vscode-proto3", + "jpoissonnier.vscode-styled-components", + "eg2.vscode-npm-script", + "christian-kohler.npm-intellisense" + ] +} diff --git a/.github/dependabot.yml b/.github/dependabot.yml index ff22863..bbd41a4 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,24 +1,24 @@ version: 2 updates: - - package-ecosystem: "npm" - directory: "/" - schedule: - interval: "daily" + - package-ecosystem: 'npm' + directory: '/' + schedule: + interval: 'daily' - - package-ecosystem: "github-actions" - directory: "/" - schedule: - interval: "daily" + - package-ecosystem: 'github-actions' + directory: '/' + schedule: + interval: 'daily' - - package-ecosystem: "docker" - directory: "/.devcontainer" - schedule: - interval: "daily" + - package-ecosystem: 'docker' + directory: '/.devcontainer' + schedule: + interval: 'daily' - - package-ecosystem: "gomod" - directory: "/" - schedule: - interval: "daily" + - package-ecosystem: 'gomod' + directory: '/' + schedule: + interval: 'daily' # - package-ecosystem: "terraform" # directory: "/terraform/platform/bootstrap" # schedule: diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 008e0fa..b6cdd33 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -3,57 +3,57 @@ name: Bazel Build on: push jobs: - bazel_build: - name: Bazel Build - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master + bazel_build: + name: Bazel Build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master - - name: Mount bazel cache - uses: actions/cache@v2.1.1 - with: - path: "/home/runner/.cache/bazel" - key: bazel + - name: Mount bazel cache + uses: actions/cache@v2.1.1 + with: + path: '/home/runner/.cache/bazel' + key: bazel - - name: Install bazelisk - run: | - curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64" - mkdir -p "${GITHUB_WORKSPACE}/bin/" - mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel" - chmod +x "${GITHUB_WORKSPACE}/bin/bazel" + - name: Install bazelisk + run: | + curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64" + mkdir -p "${GITHUB_WORKSPACE}/bin/" + mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel" + chmod +x "${GITHUB_WORKSPACE}/bin/bazel" - - name: Test - run: | - "${GITHUB_WORKSPACE}/bin/bazel" test \ - --stamp \ - --workspace_status_command hack/workspace_status.sh \ - //src/... + - name: Test + run: | + "${GITHUB_WORKSPACE}/bin/bazel" test \ + --stamp \ + --workspace_status_command hack/workspace_status.sh \ + //src/... - - name: Docker Login - run: | - echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com + - name: Docker Login + run: | + echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com - - name: Publish Artifacts - run: | - "${GITHUB_WORKSPACE}/bin/bazel" query //src/... |\ - grep +publish |\ - xargs -l1 "${GITHUB_WORKSPACE}/bin/bazel" run \ - --stamp \ - --workspace_status_command hack/workspace_status.sh + - name: Publish Artifacts + run: | + "${GITHUB_WORKSPACE}/bin/bazel" query //src/... |\ + grep +publish |\ + xargs -l1 "${GITHUB_WORKSPACE}/bin/bazel" run \ + --stamp \ + --workspace_status_command hack/workspace_status.sh - - name: Write Artifact Manifest - run: | - artifacts=$(${GITHUB_WORKSPACE}/bin/bazel query //src/... | grep +publish) - publishedServices=${artifacts//$'//src/'/} - publishedServices=${publishedServices//$':+publish'/} - manifestJSON='{"services": {}}' - for svc in $publishedServices; do - manifestJSON=$(echo $manifestJSON | jq ".services+={\"$svc\":\"$(cat bazel-bin/src/$svc/+publish.digest)\"}") - done - echo $manifestJSON > manifest.json + - name: Write Artifact Manifest + run: | + artifacts=$(${GITHUB_WORKSPACE}/bin/bazel query //src/... | grep +publish) + publishedServices=${artifacts//$'//src/'/} + publishedServices=${publishedServices//$':+publish'/} + manifestJSON='{"services": {}}' + for svc in $publishedServices; do + manifestJSON=$(echo $manifestJSON | jq ".services+={\"$svc\":\"$(cat bazel-bin/src/$svc/+publish.digest)\"}") + done + echo $manifestJSON > manifest.json - - name: Upload Artifact Manifest - uses: actions/upload-artifact@v2 - with: - name: manifest.json - path: manifest.json + - name: Upload Artifact Manifest + uses: actions/upload-artifact@v2 + with: + name: manifest.json + path: manifest.json diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 5cfc6b8..453c394 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -1,67 +1,67 @@ -name: "CodeQL" +name: 'CodeQL' on: - push: - branches: [main] - pull_request: - # The branches below must be a subset of the branches above - branches: [main] - schedule: - - cron: "0 1 * * 2" + push: + branches: [main] + pull_request: + # The branches below must be a subset of the branches above + branches: [main] + schedule: + - cron: '0 1 * * 2' jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest + analyze: + name: Analyze + runs-on: ubuntu-latest - strategy: - fail-fast: false - matrix: - # Override automatic language detection by changing the below list - # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] - language: ["go", "javascript"] - # Learn more... - # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection + strategy: + fail-fast: false + matrix: + # Override automatic language detection by changing the below list + # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] + language: ['go', 'javascript'] + # Learn more... + # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection - steps: - - name: Checkout repository - uses: actions/checkout@v2 - with: - # We must fetch at least the immediate parents so that if this is - # a pull request then we can checkout the head. - fetch-depth: 2 + steps: + - name: Checkout repository + uses: actions/checkout@v2 + with: + # We must fetch at least the immediate parents so that if this is + # a pull request then we can checkout the head. + fetch-depth: 2 - # If this run was triggered by a pull request event, then checkout - # the head of the pull request instead of the merge commit. - - run: git checkout HEAD^2 - if: ${{ github.event_name == 'pull_request' }} + # If this run was triggered by a pull request event, then checkout + # the head of the pull request instead of the merge commit. + - run: git checkout HEAD^2 + if: ${{ github.event_name == 'pull_request' }} - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v1 - with: - queries: +security-and-quality - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - # queries: ./path/to/local/query, your-org/your-repo/queries@main + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + queries: +security-and-quality + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main - # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). - # If this step fails, then you should remove it and run the build manually (see below) - - name: Autobuild - uses: github/codeql-action/autobuild@v1 + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 - # โ„น๏ธ Command-line programs to run using the OS shell. - # ๐Ÿ“š https://git.io/JvXDl + # โ„น๏ธ Command-line programs to run using the OS shell. + # ๐Ÿ“š https://git.io/JvXDl - # โœ๏ธ If the Autobuild fails above, remove it and uncomment the following three lines - # and modify them (or add more) to build your code if your project - # uses a compiled language + # โœ๏ธ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language - #- run: | - # make bootstrap - # make release + #- run: | + # make bootstrap + # make release - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/.github/workflows/dev-container.yml b/.github/workflows/dev-container.yml index 02d5291..f7ba40b 100644 --- a/.github/workflows/dev-container.yml +++ b/.github/workflows/dev-container.yml @@ -1,43 +1,43 @@ name: Build Dev Container on: - push: - paths: - - .devcontainer/* - - src/dev-container/* - - .github/workflows/dev-container.yml - schedule: - - cron: "0 12 * * 2" # 12 noon every tuesday + push: + paths: + - .devcontainer/* + - src/dev-container/* + - .github/workflows/dev-container.yml + schedule: + - cron: '0 12 * * 2' # 12 noon every tuesday jobs: - dev_container_build: - name: Bazel Build (Dev Container) - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - - name: Mount bazel cache - uses: actions/cache@v2.1.1 - with: - path: "/home/runner/.cache/bazel" - key: bazel_dev_container + dev_container_build: + name: Bazel Build (Dev Container) + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Mount bazel cache + uses: actions/cache@v2.1.1 + with: + path: '/home/runner/.cache/bazel' + key: bazel_dev_container - - name: Install bazelisk - run: | - curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64" - mkdir -p "${GITHUB_WORKSPACE}/bin/" - mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel" - chmod +x "${GITHUB_WORKSPACE}/bin/bazel" + - name: Install bazelisk + run: | + curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.1.0/bazelisk-linux-amd64" + mkdir -p "${GITHUB_WORKSPACE}/bin/" + mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel" + chmod +x "${GITHUB_WORKSPACE}/bin/bazel" - - name: Build & Publish Dev Container - run: | - echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com - "${GITHUB_WORKSPACE}/bin/bazel" run \ - --stamp \ - --workspace_status_command hack/workspace_status.sh \ - //src/dev-container:publish-dev-container + - name: Build & Publish Dev Container + run: | + echo ${{github.token}} | docker login -u ${{github.actor}} --password-stdin docker.pkg.github.com + "${GITHUB_WORKSPACE}/bin/bazel" run \ + --stamp \ + --workspace_status_command hack/workspace_status.sh \ + //src/dev-container:publish-dev-container - echo ${{secrets.DOCKER_PASSWORD}} | docker login -u ${{secrets.DOCKER_USERNAME}} --password-stdin - "${GITHUB_WORKSPACE}/bin/bazel" run \ - --stamp \ - --workspace_status_command hack/workspace_status.sh \ - //src/dev-container:publish-dev-container-dockerhub + echo ${{secrets.DOCKER_PASSWORD}} | docker login -u ${{secrets.DOCKER_USERNAME}} --password-stdin + "${GITHUB_WORKSPACE}/bin/bazel" run \ + --stamp \ + --workspace_status_command hack/workspace_status.sh \ + //src/dev-container:publish-dev-container-dockerhub diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 786447d..770b6e5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -3,22 +3,22 @@ name: Release Workflow on: workflow_dispatch jobs: - commit_release_tag: - name: Commit Roleypoly Release Tag - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - with: - ssh-key: ${{ secrets.DEPLOY_KEY }} + commit_release_tag: + name: Commit Roleypoly Release Tag + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + with: + ssh-key: ${{ secrets.DEPLOY_KEY }} - - name: Push changes - id: push - run: | - TAG=$(date +v%Y%m%d-%H%M%S) - git config --local user.email "gh-automation@roleypoly.com" - git config --local user.name "Roleypoly Release Automation" - git tag $TAG - git push origin $TAG - echo "::set-output release_tag=${TAG}" + - name: Push changes + id: push + run: | + TAG=$(date +v%Y%m%d-%H%M%S) + git config --local user.email "gh-automation@roleypoly.com" + git config --local user.name "Roleypoly Release Automation" + git tag $TAG + git push origin $TAG + echo "::set-output release_tag=${TAG}" - - name: Retag images + - name: Retag images diff --git a/.github/workflows/terraform.yml b/.github/workflows/terraform.yml index bb2ac26..5369d8b 100644 --- a/.github/workflows/terraform.yml +++ b/.github/workflows/terraform.yml @@ -1,2 +1 @@ name: Terraform - diff --git a/.gitignore b/.gitignore index 03cc164..43ccf39 100644 --- a/.gitignore +++ b/.gitignore @@ -5,16 +5,6 @@ bazel-testlogs node_modules .env docker-compose.yaml - -#Added by cargo - /target - - -#Added by cargo -# -#already existing elements were commented out - -#/target - -*.log \ No newline at end of file +*.log +storybook-static \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..6d8ad95 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +bazel-* \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index e69de29..0000000 diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..82a5484 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,9 @@ +module.exports = { + printWidth: 90, + useTabs: false, + tabWidth: 4, + singleQuote: true, + trailingComma: 'es5', + bracketSpacing: true, + semi: true, +}; diff --git a/.storybook/main.js b/.storybook/main.js index f6a1141..bcfe1a0 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,16 +1,16 @@ -const path = require("path"); -const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); +const path = require('path'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { - stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], - addons: ["@storybook/addon-links", "@storybook/addon-essentials"], - webpackFinal: async (config, { configType }) => { - config.resolve.plugins = [ - new TsconfigPathsPlugin({ - configFile: path.resolve(__dirname, "../tsconfig.json"), - }), - ]; + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + webpackFinal: async (config, { configType }) => { + config.resolve.plugins = [ + new TsconfigPathsPlugin({ + configFile: path.resolve(__dirname, '../tsconfig.json'), + }), + ]; - return config; - }, + return config; + }, }; diff --git a/.storybook/manager.js b/.storybook/manager.js index d2bdc4c..69a5b09 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,6 +1,6 @@ -import { addons } from "@storybook/addons"; -import { roleypolyTheme } from "./theme"; +import { addons } from '@storybook/addons'; +import { roleypolyTheme } from './theme'; addons.setConfig({ - theme: roleypolyTheme, + theme: roleypolyTheme, }); diff --git a/.storybook/preview.js b/.storybook/preview.js index 5d00c02..6a4dabd 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,3 @@ - export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, -} \ No newline at end of file + actions: { argTypesRegex: '^on[A-Z].*' }, +}; diff --git a/.storybook/theme.js b/.storybook/theme.js index 9a57758..09d1e77 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -1,34 +1,34 @@ -import { create } from "@storybook/theming"; -import { palette } from "../src/design-system/atoms/colors"; +import { create } from '@storybook/theming'; +import { palette } from '../src/design-system/atoms/colors'; export const roleypolyTheme = create({ - base: "dark", + base: 'dark', - colorPrimary: palette.green400, - colorSecondary: palette.taupe200, + colorPrimary: palette.green400, + colorSecondary: palette.taupe200, - // UI - appBg: palette.taupe300, - appContentBg: palette.taupe300, - appBorderColor: palette.taupe100, - appBorderRadius: 0, + // UI + appBg: palette.taupe300, + appContentBg: palette.taupe300, + appBorderColor: palette.taupe100, + appBorderRadius: 0, - // Typography - fontBase: "system-ui, sans-serif", - fontCode: "monospace", + // Typography + fontBase: 'system-ui, sans-serif', + fontCode: 'monospace', - // Text colors - textColor: palette.grey600, - textInverseColor: palette.grey100, + // Text colors + textColor: palette.grey600, + textInverseColor: palette.grey100, - // Toolbar default and active colors - barTextColor: palette.taupe500, - barSelectedColor: palette.taupe600, - barBg: palette.taupe100, + // Toolbar default and active colors + barTextColor: palette.taupe500, + barSelectedColor: palette.taupe600, + barBg: palette.taupe100, - // Form colors - inputBg: "rgba(0,0,0,0.24)", - inputBorder: palette.taupe100, - inputTextColor: palette.grey600, - inputBorderRadius: 0, + // Form colors + inputBg: 'rgba(0,0,0,0.24)', + inputBorder: palette.taupe100, + inputTextColor: palette.grey600, + inputBorderRadius: 0, }); diff --git a/.vscode/settings.json b/.vscode/settings.json index f55b0ab..2243ea0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,10 +1,10 @@ -{ - "go.inferGopath": false, - "editor.tabSize": 2, - "editor.insertSpaces": true, - "editor.formatOnSave": true, - "bazel.buildifierFixOnFormat": true, - "[starlark]": { - "editor.tabSize": 4 - } -} +{ + "go.inferGopath": false, + "editor.tabSize": 2, + "editor.insertSpaces": true, + "editor.formatOnSave": true, + "bazel.buildifierFixOnFormat": true, + "[starlark]": { + "editor.tabSize": 4 + } +} diff --git a/README.md b/README.md index 9b59f0f..b6e97ce 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,29 @@ -# Roleypoly - -https://roleypoly.com - -Tame your Discord roles. - -### Need Help with Roleypoly? - -๐Ÿ“š [Please read through our community documentation.](https://github.com/roleypoly/community-docs) -๐Ÿ˜• [Still confused? Talk to us on Discord!](https://discord.gg/PWQUVsd) - -## Developing - -Roleypoly is a distributed system built with Go, React, Terraform, and Bazel. - -This repo is currently being re-architected into a monorepo, so most processes might not be documented. - -### Quickstart - -This repo can be quickly setup with [VSCode Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) or [GitHub Codespaces](https://github.com/codespaces). This will setup a fully featured Docker container for developing VSCode, including extensions. - -If you'd like to not use either of those, it can be imported into your Docker host with `bazel run //src/dev-container`, or pulled from either `roleypoly/dev-container:main` or `docker.pkg.github.com/roleypoly/roleypoly/dev-container:main`. This use case is not actively investigated, but with tinkering, will work. Feel free to document this process and open a PR :) - -### Things to Know - -Bazel can make some tasks far harder normal. Ideally, these are automated over. - -- **Updating `go.mod`?** - - Run `hack/gazelle.sh` to regenerate `deps.bzl`. +# Roleypoly + +https://roleypoly.com + +Tame your Discord roles. + +### Need Help with Roleypoly? + +๐Ÿ“š [Please read through our community documentation.](https://github.com/roleypoly/community-docs) +๐Ÿ˜• [Still confused? Talk to us on Discord!](https://discord.gg/PWQUVsd) + +## Developing + +Roleypoly is a distributed system built with Go, React, Terraform, and Bazel. + +This repo is currently being re-architected into a monorepo, so most processes might not be documented. + +### Quickstart + +This repo can be quickly setup with [VSCode Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) or [GitHub Codespaces](https://github.com/codespaces). This will setup a fully featured Docker container for developing VSCode, including extensions. + +If you'd like to not use either of those, it can be imported into your Docker host with `bazel run //src/dev-container`, or pulled from either `roleypoly/dev-container:main` or `docker.pkg.github.com/roleypoly/roleypoly/dev-container:main`. This use case is not actively investigated, but with tinkering, will work. Feel free to document this process and open a PR :) + +### Things to Know + +Bazel can make some tasks far harder normal. Ideally, these are automated over. + +- **Updating `go.mod`?** + - Run `hack/gazelle.sh` to regenerate `deps.bzl`. diff --git a/package.json b/package.json index 5fbea97..22bbaa6 100644 --- a/package.json +++ b/package.json @@ -1,52 +1,53 @@ { - "name": "roleypoly", - "version": "1.0.0", - "description": "https://roleypoly.com", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook", - "now-build": "build-storybook" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/roleypoly/roleypoly.git" - }, - "author": "Katalina Okano ", - "license": "MIT", - "bugs": { - "url": "https://github.com/roleypoly/roleypoly/issues" - }, - "homepage": "https://github.com/roleypoly/roleypoly#readme", - "dependencies": { - "@roleypoly/rpc": "^1.9.3", - "chroma-js": "2.1.0", - "next": "^9.5.4", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-icons": "^3.11.0", - "styled-components": "^5.2.0" - }, - "devDependencies": { - "@babel/core": "^7.11.6", - "@bazel/typescript": "^2.2.1", - "@storybook/addon-actions": "^6.0.26", - "@storybook/addon-essentials": "^6.0.26", - "@storybook/addon-links": "^6.0.26", - "@storybook/addons": "^6.0.26", - "@storybook/react": "^6.0.26", - "@storybook/theming": "^6.0.26", - "@types/chroma-js": "2.1.0", - "@types/google-protobuf": "3.7.3", - "@types/styled-components": "5.1.3", - "babel-loader": "^8.1.0", - "prettier": "^2.1.2", - "react-is": "^16.13.1", - "tsconfig-paths-webpack-plugin": "^3.3.0", - "tslint": "6.1.3", - "tslint-config-prettier": "^1.18.0", - "tslint-config-standard": "^9.0.0", - "tslint-plugin-prettier": "^2.3.0", - "typescript": "^4.0.3" - } + "name": "roleypoly", + "version": "1.0.0", + "description": "https://roleypoly.com", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook", + "now-build": "build-storybook", + "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/roleypoly/roleypoly.git" + }, + "author": "Katalina Okano ", + "license": "MIT", + "bugs": { + "url": "https://github.com/roleypoly/roleypoly/issues" + }, + "homepage": "https://github.com/roleypoly/roleypoly#readme", + "dependencies": { + "@roleypoly/rpc": "^1.9.3", + "chroma-js": "2.1.0", + "next": "^9.5.5", + "react": "16.13.1", + "react-dom": "16.13.1", + "react-icons": "^3.11.0", + "styled-components": "^5.2.0" + }, + "devDependencies": { + "@babel/core": "^7.11.6", + "@bazel/typescript": "^2.2.1", + "@storybook/addon-actions": "^6.0.26", + "@storybook/addon-essentials": "^6.0.26", + "@storybook/addon-links": "^6.0.26", + "@storybook/addons": "^6.0.26", + "@storybook/react": "^6.0.26", + "@storybook/theming": "^6.0.26", + "@types/chroma-js": "2.1.0", + "@types/google-protobuf": "3.7.3", + "@types/styled-components": "5.1.4", + "babel-loader": "^8.1.0", + "prettier": "^2.1.2", + "react-is": "^16.13.1", + "tsconfig-paths-webpack-plugin": "^3.3.0", + "tslint": "6.1.3", + "tslint-config-prettier": "^1.18.0", + "tslint-config-standard": "^9.0.0", + "tslint-plugin-prettier": "^2.3.0", + "typescript": "^4.0.3" + } } diff --git a/src/db/README.md b/src/db/README.md index f5da1da..42e41d4 100644 --- a/src/db/README.md +++ b/src/db/README.md @@ -1,17 +1,17 @@ # DB -Roleypoly's DB schemas, connectors, and other useful database admin tools. +Roleypoly's DB schemas, connectors, and other useful database admin tools. ## Tools ### ent -ent schema and the files it generates. +ent schema and the files it generates. Edit nothing outside of the `schemas` folder, as all others are generated. When done editing, do `go generate ./ent` to update generation. -*Failing to generate files will make CI fail.* +_Failing to generate files will make CI fail._ -All schemas must be backwards compatible with previous versions of this library, and be compatible with **CockroachDB**-based Postgres. \ No newline at end of file +All schemas must be backwards compatible with previous versions of this library, and be compatible with **CockroachDB**-based Postgres. diff --git a/src/design-system/atoms/avatar/Avatar.stories.tsx b/src/design-system/atoms/avatar/Avatar.stories.tsx index 8f57bf4..c6e83a2 100644 --- a/src/design-system/atoms/avatar/Avatar.stories.tsx +++ b/src/design-system/atoms/avatar/Avatar.stories.tsx @@ -1,30 +1,30 @@ -import { text } from "@storybook/addon-knobs"; -import * as React from "react"; -import { Avatar } from "./Avatar"; +import { text } from '@storybook/addon-knobs'; +import * as React from 'react'; +import { Avatar } from './Avatar'; export default { - title: "Atoms/Avatar", - component: Avatar, - argTypes: { - initials: { control: "text" }, - }, - args: { - initials: "KR", - }, + title: 'Atoms/Avatar', + component: Avatar, + argTypes: { + initials: { control: 'text' }, + }, + args: { + initials: 'KR', + }, }; export const WithInitials = ({ initials, ...rest }) => ( - - {initials} - + + {initials} + ); export const WithText = ({ initials, ...rest }) => ( - - {initials} - + + {initials} + ); export const Empty = (args) => ; export const DeliberatelyEmpty = (args) => ( - + ); diff --git a/src/design-system/atoms/avatar/Avatar.styled.ts b/src/design-system/atoms/avatar/Avatar.styled.ts index 92505d8..0ae10e5 100644 --- a/src/design-system/atoms/avatar/Avatar.styled.ts +++ b/src/design-system/atoms/avatar/Avatar.styled.ts @@ -1,46 +1,45 @@ -import { AvatarProps } from "./Avatar"; -import styled, { css } from "styled-components"; -import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports -import { palette } from "roleypoly/src/design-system/atoms/colors"; +import { AvatarProps } from './Avatar'; +import styled, { css } from 'styled-components'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports +import { palette } from 'roleypoly/src/design-system/atoms/colors'; -type ContainerProps = Pick & - Pick; +type ContainerProps = Pick & Pick; export const Container = styled.div` - border-radius: 100%; - box-sizing: border-box; - width: ${(props: ContainerProps) => props.size || 48}px; - height: ${(props: ContainerProps) => props.size || 48}px; - min-width: ${(props: ContainerProps) => props.size || 48}px; - min-height: ${(props: ContainerProps) => props.size || 48}px; - display: flex; - justify-content: center; - align-items: center; - color: ${palette.grey100}; - position: relative; - background-color: ${palette.grey500}; - font-weight: bold; - text-align: center; - line-height: 1; - overflow: hidden; - font-size: ${(props: ContainerProps) => props.size}; - ${(props) => - props.deliberatelyEmpty && - css` - border: 4px solid rgba(0, 0, 0, 0.25); - background-color: ${palette.taupe400}; - color: ${palette.taupe600}; - `} + border-radius: 100%; + box-sizing: border-box; + width: ${(props: ContainerProps) => props.size || 48}px; + height: ${(props: ContainerProps) => props.size || 48}px; + min-width: ${(props: ContainerProps) => props.size || 48}px; + min-height: ${(props: ContainerProps) => props.size || 48}px; + display: flex; + justify-content: center; + align-items: center; + color: ${palette.grey100}; + position: relative; + background-color: ${palette.grey500}; + font-weight: bold; + text-align: center; + line-height: 1; + overflow: hidden; + font-size: ${(props: ContainerProps) => props.size}; + ${(props) => + props.deliberatelyEmpty && + css` + border: 4px solid rgba(0, 0, 0, 0.25); + background-color: ${palette.taupe400}; + color: ${palette.taupe600}; + `} `; -type ImageProps = Pick; +type ImageProps = Pick; export const Image = styled.div` - background-size: cover; - background-repeat: no-repeat; - background-position: 50% 50%; - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - border-radius: 100%; + background-size: cover; + background-repeat: no-repeat; + background-position: 50% 50%; + top: 0; + left: 0; + right: 0; + bottom: 0; + position: absolute; + border-radius: 100%; `; diff --git a/src/design-system/atoms/branding/Branding.stories.tsx b/src/design-system/atoms/branding/Branding.stories.tsx index 7927216..8e0ad3d 100644 --- a/src/design-system/atoms/branding/Branding.stories.tsx +++ b/src/design-system/atoms/branding/Branding.stories.tsx @@ -1,27 +1,24 @@ -import * as React from "react"; -import { - Logomark as BrandingLogomark, - Logotype as BrandingLogotype, -} from "./Branding"; -import styled from "styled-components"; +import * as React from 'react'; +import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding'; +import styled from 'styled-components'; export default { - title: "Atoms/Branding", + title: 'Atoms/Branding', }; const Wrapper = styled.div` - background-color: black; - padding: 2em; + background-color: black; + padding: 2em; `; export const Logomark = () => ( - - - + + + ); export const Logotype = () => ( - - - + + + ); diff --git a/src/design-system/atoms/branding/Branding.tsx b/src/design-system/atoms/branding/Branding.tsx index 1d07687..34d97fb 100644 --- a/src/design-system/atoms/branding/Branding.tsx +++ b/src/design-system/atoms/branding/Branding.tsx @@ -1,100 +1,94 @@ -import * as React from "react"; -import { palette } from "roleypoly/src/design-system/atoms/colors"; +import * as React from 'react'; +import { palette } from 'roleypoly/src/design-system/atoms/colors'; type LogoProps = { - fill: string; - width: number; - height: number; - circleFill: string; - typeFill: string; - style: object; - className: string; + fill: string; + width: number; + height: number; + circleFill: string; + typeFill: string; + style: object; + className: string; }; export const Logotype = ({ - fill = palette.taupe500, - width, - height, - circleFill = palette.taupe200, - typeFill, - style, - className, + fill = palette.taupe500, + width, + height, + circleFill = palette.taupe200, + typeFill, + style, + className, }: Partial = {}) => ( - - - - - - - - - - - - + + + + + + + + + + + + ); export const Logomark = ({ - fill = palette.taupe500, - width, - height, - circleFill = palette.taupe200, - typeFill, - style, - className, + fill = palette.taupe500, + width, + height, + circleFill = palette.taupe200, + typeFill, + style, + className, }: Partial) => ( - - - - - - - - - - - - + + + + + + + + + + + ); diff --git a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx b/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx index 1421215..29d34ca 100644 --- a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx +++ b/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx @@ -1,11 +1,11 @@ -import * as React from "react"; -import { BreakpointDebugTool } from "./DebugTool"; -import { BreakpointsProvider } from "./BreakpointProvider"; +import * as React from 'react'; +import { BreakpointDebugTool } from './DebugTool'; +import { BreakpointsProvider } from './BreakpointProvider'; export default { - title: "Atoms/Breakpoints", - decorators: [(story) => {story()}], - component: BreakpointDebugTool, + title: 'Atoms/Breakpoints', + decorators: [(story) => {story()}], + component: BreakpointDebugTool, }; export const DebugTool = () => ; diff --git a/src/design-system/atoms/breakpoints/Context.ts b/src/design-system/atoms/breakpoints/Context.ts index 3c6df5c..9b9edf4 100644 --- a/src/design-system/atoms/breakpoints/Context.ts +++ b/src/design-system/atoms/breakpoints/Context.ts @@ -1,22 +1,22 @@ -import * as React from "react"; -import { withContext } from "roleypoly/src/common/utils/withContext"; +import * as React from 'react'; +import { withContext } from 'roleypoly/src/common/utils/withContext'; export type ScreenSize = { - onSmallScreen: boolean; - onTablet: boolean; - onDesktop: boolean; + onSmallScreen: boolean; + onTablet: boolean; + onDesktop: boolean; }; export type BreakpointProps = { - screenSize: ScreenSize; + screenSize: ScreenSize; }; const defaultScreenSize: BreakpointProps = { - screenSize: { - onSmallScreen: true, - onDesktop: false, - onTablet: false, - }, + screenSize: { + onSmallScreen: true, + onDesktop: false, + onTablet: false, + }, }; export const BreakpointContext = React.createContext(defaultScreenSize); @@ -24,4 +24,4 @@ export const BreakpointContext = React.createContext(defaultScreenSize); export const useBreakpointContext = () => React.useContext(BreakpointContext); export const withBreakpoints = (Component: React.ComponentType) => - withContext(BreakpointContext, Component as any); + withContext(BreakpointContext, Component as any); diff --git a/src/design-system/atoms/button/Button.story.tsx b/src/design-system/atoms/button/Button.story.tsx index dc32430..8004f69 100644 --- a/src/design-system/atoms/button/Button.story.tsx +++ b/src/design-system/atoms/button/Button.story.tsx @@ -1,83 +1,83 @@ // TODO: port to new story -import * as React from "react"; -import { atomStories } from "atoms/atoms.story"; -import { Button, ButtonProps } from "./Button"; -import { text as textKnob } from "@storybook/addon-knobs"; -import { FaDiscord } from "react-icons/fa"; -import { styled } from "@storybook/theming"; +import * as React from 'react'; +import { atomStories } from 'atoms/atoms.story'; +import { Button, ButtonProps } from './Button'; +import { text as textKnob } from '@storybook/addon-knobs'; +import { FaDiscord } from 'react-icons/fa'; +import { styled } from '@storybook/theming'; -const largeStory = atomStories("Button/Large", module); -const smallStory = atomStories("Button/Small", module); +const largeStory = atomStories('Button/Large', module); +const smallStory = atomStories('Button/Small', module); -const colorModes: NonNullable[] = [ - "primary", - "secondary", - "discord", - "muted", +const colorModes: NonNullable[] = [ + 'primary', + 'secondary', + 'discord', + 'muted', ]; const Margin = styled.div` - margin-top: 5px; - display: flex; - align-items: center; + margin-top: 5px; + display: flex; + align-items: center; `; -const storyTemplate = (props: Omit) => () => { - const text = textKnob("Button content", "Example Button"); +const storyTemplate = (props: Omit) => () => { + const text = textKnob('Button content', 'Example Button'); - return ( -
- {colorModes.map((color, i) => ( - - -
- {color[0].toUpperCase()} - {color.slice(1)} -
- - ))} -
- ); + return ( +
+ {colorModes.map((color, i) => ( + + +
+ {color[0].toUpperCase()} + {color.slice(1)} +
+ + ))} +
+ ); }; const storyBuilder = ( - story: typeof largeStory, - size: NonNullable + story: typeof largeStory, + size: NonNullable ) => { - story.add( - "Normal", - storyTemplate({ - size, - }) - ); + story.add( + 'Normal', + storyTemplate({ + size, + }) + ); - story.add( - "Icon", - storyTemplate({ - size, - icon: ( -
- -
- ), - }) - ); + story.add( + 'Icon', + storyTemplate({ + size, + icon: ( +
+ +
+ ), + }) + ); - story.add( - "Loading", - storyTemplate({ - size, - icon: ( -
- -
- ), - loading: true, - }) - ); + story.add( + 'Loading', + storyTemplate({ + size, + icon: ( +
+ +
+ ), + loading: true, + }) + ); }; -storyBuilder(largeStory, "large"); -storyBuilder(smallStory, "small"); +storyBuilder(largeStory, 'large'); +storyBuilder(smallStory, 'small'); diff --git a/src/design-system/atoms/button/Button.styled.ts b/src/design-system/atoms/button/Button.styled.ts index eddd8b7..ae15d0a 100644 --- a/src/design-system/atoms/button/Button.styled.ts +++ b/src/design-system/atoms/button/Button.styled.ts @@ -1,106 +1,106 @@ -import styled, { css } from "styled-components"; -import { text400, text300 } from "roleypoly/src/design-system/atoms/typography"; -import { fontCSS } from "roleypoly/src/design-system/atoms/fonts"; -import { palette } from "roleypoly/src/design-system/atoms/colors"; -import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports +import styled, { css } from 'styled-components'; +import { text400, text300 } from 'roleypoly/src/design-system/atoms/typography'; +import { fontCSS } from 'roleypoly/src/design-system/atoms/fonts'; +import { palette } from 'roleypoly/src/design-system/atoms/colors'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports export const IconContainer = styled.div` - margin-right: 0.6rem; - font-size: 1.75em; + margin-right: 0.6rem; + font-size: 1.75em; `; const base = css` - ${fontCSS} - appearance: none; - display: block; - background-color: ${palette.taupe300}; - color: ${palette.grey500}; - border-radius: 3px; - border: 2px solid rgba(0, 0, 0, 0.55); - transition: all 0.15s ease-in-out; - outline: 0; - position: relative; - user-select: none; - cursor: pointer; - white-space: nowrap; - - ::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: #000; - opacity: 0; + ${fontCSS} + appearance: none; + display: block; + background-color: ${palette.taupe300}; + color: ${palette.grey500}; + border-radius: 3px; + border: 2px solid rgba(0, 0, 0, 0.55); transition: all 0.15s ease-in-out; - } + outline: 0; + position: relative; + user-select: none; + cursor: pointer; + white-space: nowrap; - :hover { - transform: translateY(-1px); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); - } - - :active { - transform: translateY(1px); - box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); ::after { - opacity: 0.1; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: #000; + opacity: 0; + transition: all 0.15s ease-in-out; + } + + :hover { + transform: translateY(-1px); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + } + + :active { + transform: translateY(1px); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); + ::after { + opacity: 0.1; + } } - } `; const colors = { - primary: css` - background-color: ${palette.green400}; - color: ${palette.taupe100}; - `, - secondary: css``, - discord: css` - background-color: ${palette.discord400}; - border: 2px solid ${palette.discord200}; - `, - muted: css` - border: 2px solid rgba(0, 0, 0, 0.15); - background: none; - :hover { - background-color: ${palette.taupe200}; - } - `, + primary: css` + background-color: ${palette.green400}; + color: ${palette.taupe100}; + `, + secondary: css``, + discord: css` + background-color: ${palette.discord400}; + border: 2px solid ${palette.discord200}; + `, + muted: css` + border: 2px solid rgba(0, 0, 0, 0.15); + background: none; + :hover { + background-color: ${palette.taupe200}; + } + `, }; const sizes = { - small: css` - ${text300} - padding: 4px 8px; - `, - large: css` - ${text400} - padding: 12px 32px; - width: 100%; - `, + small: css` + ${text300} + padding: 4px 8px; + `, + large: css` + ${text400} + padding: 12px 32px; + width: 100%; + `, }; const modifiers = { - withIcon: css` - display: flex; - align-items: center; - justify-content: center; - `, - withLoading: css` - pointer-events: none; - `, + withIcon: css` + display: flex; + align-items: center; + justify-content: center; + `, + withLoading: css` + pointer-events: none; + `, }; export type ButtonComposerOptions = { - size: keyof typeof sizes; - color: keyof typeof colors; - modifiers?: Array; + size: keyof typeof sizes; + color: keyof typeof colors; + modifiers?: Array; }; export const Button = styled.button` - ${base} - ${(props) => props.size in sizes && sizes[props.size]} + ${base} + ${(props) => props.size in sizes && sizes[props.size]} ${(props) => props.color in colors && colors[props.color]} ${(props) => props.modifiers?.map((m) => modifiers[m])} `; diff --git a/src/design-system/atoms/colors/colors.stories.tsx b/src/design-system/atoms/colors/colors.stories.tsx index 151f328..e737d61 100644 --- a/src/design-system/atoms/colors/colors.stories.tsx +++ b/src/design-system/atoms/colors/colors.stories.tsx @@ -1,164 +1,162 @@ -import * as React from "react"; -import { palette } from "./colors"; -import styled from "styled-components"; -import chroma from "chroma-js"; -import { AmbientSmall } from "roleypoly/src/design-system/atoms/typography"; +import * as React from 'react'; +import { palette } from './colors'; +import styled from 'styled-components'; +import chroma from 'chroma-js'; +import { AmbientSmall } from 'roleypoly/src/design-system/atoms/typography'; type RatioList = { - color1: string[]; - color2: string[]; - ratio: string; + color1: string[]; + color2: string[]; + ratio: string; }; export default { - title: "Atoms/Colors", + title: 'Atoms/Colors', }; const Swatch = styled.div` - box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); - width: 250px; - height: 100px; - margin: 10px; - display: inline-block; - background-color: #fff; - border: 1px solid #fff; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); + width: 250px; + height: 100px; + margin: 10px; + display: inline-block; + background-color: #fff; + border: 1px solid #fff; `; const SwatchColor = styled.div` - height: 72px; + height: 72px; `; const Label = styled.div` - font-size: 12px; - display: flex; - justify-content: space-between; - padding: 6px; - color: ${palette.taupe100}; - p { - margin: 0; - } + font-size: 12px; + display: flex; + justify-content: space-between; + padding: 6px; + color: ${palette.taupe100}; + p { + margin: 0; + } `; export const Colors = () => { - return ( -
- {Object.entries(palette).map(([name, color], i) => ( - - - - - ))} -
- ); + return ( +
+ {Object.entries(palette).map(([name, color], i) => ( + + + + + ))} +
+ ); }; export const ContrastRatios = () => { - const allRatios = getAllRatios(palette); + const allRatios = getAllRatios(palette); - return ( -
-

- WCAG Contrast Calculations. -
- Marked in Green is 7.0+ or AAA. - Acceptable for Text. -
- Marked in Orange is 4.5+ or AA. - Acceptable for UI. -
- All below 4.5 is unacceptable. -
- - WCAG Contrast testing disabled for this page. - -

- - - - Swatch - Ratio - Color 1 - Color 2 - - - - {allRatios.map((ratio, i) => ( - -   -   - {ratio.ratio} - {ratio.color1[0]} - {ratio.color2[0]} - - oh my god my - - - shin how dare you - - - ))} - - -
- ); + return ( +
+

+ WCAG Contrast Calculations. +
+ Marked in Green is 7.0+ or AAA. + Acceptable for Text. +
+ Marked in Orange is 4.5+ or AA. + Acceptable for UI. +
+ All below 4.5 is unacceptable. +
+ WCAG Contrast testing disabled for this page. +

+ + + + Swatch + Ratio + Color 1 + Color 2 + + + + {allRatios.map((ratio, i) => ( + +   +   + {ratio.ratio} + {ratio.color1[0]} + {ratio.color2[0]} + + oh my god my + + + shin how dare you + + + ))} + + +
+ ); }; const ContrastTable = styled.table` - td, - th { - padding: 6px 10px; - } + td, + th { + padding: 6px 10px; + } `; const getWCAGStyle = (ratio: number): React.CSSProperties => { - if (ratio >= 7) { - return { color: "green", fontWeight: "bold" }; - } + if (ratio >= 7) { + return { color: 'green', fontWeight: 'bold' }; + } - if (ratio >= 4.5) { - return { color: "orange", fontWeight: "bold" }; - } + if (ratio >= 4.5) { + return { color: 'orange', fontWeight: 'bold' }; + } - return {}; + return {}; }; const getAllRatios = (input: typeof palette) => - Object.entries(input) - .filter(([name]) => !name.startsWith("discord")) - .reduce((acc, [name, color]) => { - return [ - ...acc, - ...Object.entries(palette) - .filter(([name]) => !name.startsWith("discord")) - .map(([matchName, matchColor]) => ({ - color1: [name, color], - color2: [matchName, matchColor], - ratio: chroma.contrast(color, matchColor).toFixed(2), - })), - ]; - }, [] as RatioList[]) - .filter(({ ratio }) => +ratio !== 1) - .sort((a, b) => { - if (+a.ratio > +b.ratio) { - return -1; - } - return 1; - }) - .filter((_, i) => i % 2 === 0); + Object.entries(input) + .filter(([name]) => !name.startsWith('discord')) + .reduce((acc, [name, color]) => { + return [ + ...acc, + ...Object.entries(palette) + .filter(([name]) => !name.startsWith('discord')) + .map(([matchName, matchColor]) => ({ + color1: [name, color], + color2: [matchName, matchColor], + ratio: chroma.contrast(color, matchColor).toFixed(2), + })), + ]; + }, [] as RatioList[]) + .filter(({ ratio }) => +ratio !== 1) + .sort((a, b) => { + if (+a.ratio > +b.ratio) { + return -1; + } + return 1; + }) + .filter((_, i) => i % 2 === 0); diff --git a/src/design-system/atoms/colors/colors.tsx b/src/design-system/atoms/colors/colors.tsx index 7027c29..8bdacde 100644 --- a/src/design-system/atoms/colors/colors.tsx +++ b/src/design-system/atoms/colors/colors.tsx @@ -1,36 +1,36 @@ -import { css, createGlobalStyle } from "styled-components"; -import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports -import chroma from "chroma-js"; +import { css, createGlobalStyle } from 'styled-components'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports +import chroma from 'chroma-js'; export const palette = { - taupe100: "#332D2D", - taupe200: "#453E3D", - taupe300: "#5D5352", - taupe400: "#756867", - taupe500: "#AB9B9A", - taupe600: "#EBD6D4", + taupe100: '#332D2D', + taupe200: '#453E3D', + taupe300: '#5D5352', + taupe400: '#756867', + taupe500: '#AB9B9A', + taupe600: '#EBD6D4', - discord100: "#23272A", - discord200: "#2C2F33", - discord400: "#7289DA", - discord500: "#99AAB5", + discord100: '#23272A', + discord200: '#2C2F33', + discord400: '#7289DA', + discord500: '#99AAB5', - green400: "#46B646", + green400: '#46B646', - red400: "#E95353", + red400: '#E95353', - gold400: "#EFCF24", + gold400: '#EFCF24', - grey100: "#1C1010", - grey500: "#DBD9D9", - grey600: "#F2EFEF", + grey100: '#1C1010', + grey500: '#DBD9D9', + grey600: '#F2EFEF', }; const getPaletteCSS = () => - Object.entries(palette).reduce( - (acc, [key, color]) => ({ ...acc, [`--${key}`]: color }), - {} - ); + Object.entries(palette).reduce( + (acc, [key, color]) => ({ ...acc, [`--${key}`]: color }), + {} + ); export const colorVars = css(getPaletteCSS()); @@ -41,5 +41,5 @@ export const GlobalStyleColors = createGlobalStyle` `; export const numberToChroma = (colorInt: number) => { - return chroma(colorInt); + return chroma(colorInt); }; diff --git a/src/design-system/atoms/colors/index.ts b/src/design-system/atoms/colors/index.ts index bc9bae4..56e6a7d 100644 --- a/src/design-system/atoms/colors/index.ts +++ b/src/design-system/atoms/colors/index.ts @@ -1,2 +1,2 @@ -export * from "./colors"; -export * as utils from "./withColors"; +export * from './colors'; +export * as utils from './withColors'; diff --git a/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx b/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx index ea10223..f2b162e 100644 --- a/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx +++ b/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx @@ -1,8 +1,8 @@ -import * as React from "react"; -import { DotOverlay } from "./DotOverlay"; +import * as React from 'react'; +import { DotOverlay } from './DotOverlay'; export default { - title: "Atoms/Dot Overlay", + title: 'Atoms/Dot Overlay', }; export const Dark = () => ; diff --git a/src/design-system/atoms/dot-overlay/DotOverlay.tsx b/src/design-system/atoms/dot-overlay/DotOverlay.tsx index 0e2b914..7072d55 100644 --- a/src/design-system/atoms/dot-overlay/DotOverlay.tsx +++ b/src/design-system/atoms/dot-overlay/DotOverlay.tsx @@ -1,39 +1,39 @@ -import styled from "styled-components"; -import * as React from "react"; -import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports +import styled from 'styled-components'; +import * as React from 'react'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports const dotOverlayBase = styled.div` - opacity: 0.6; - pointer-events: none; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: -10; - background-size: 27px 27px; + opacity: 0.6; + pointer-events: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -10; + background-size: 27px 27px; `; const DotOverlayDark = styled(dotOverlayBase)` - background-image: radial-gradient( - circle, - #332d2d, - #332d2d 1px, - transparent 1px, - transparent - ); + background-image: radial-gradient( + circle, + #332d2d, + #332d2d 1px, + transparent 1px, + transparent + ); `; const DotOverlayLight = styled(dotOverlayBase)` - background-image: radial-gradient( - circle, - #dbd9d9, - #dbd9d9 1px, - transparent 1px, - transparent - ); + background-image: radial-gradient( + circle, + #dbd9d9, + #dbd9d9 1px, + transparent 1px, + transparent + ); `; export const DotOverlay = ({ light }: { light?: boolean }) => { - return light ? : ; + return light ? : ; }; diff --git a/src/design-system/atoms/fader/Fader.stories.tsx b/src/design-system/atoms/fader/Fader.stories.tsx index a753f68..d4b5692 100644 --- a/src/design-system/atoms/fader/Fader.stories.tsx +++ b/src/design-system/atoms/fader/Fader.stories.tsx @@ -1,28 +1,28 @@ -import * as React from "react"; -import { FaderOpacity, FaderSlide } from "./Fader"; -import { Button } from "roleypoly/src/design-system/atoms/button"; -import { action } from "@storybook/addon-actions"; +import * as React from 'react'; +import { FaderOpacity, FaderSlide } from './Fader'; +import { Button } from 'roleypoly/src/design-system/atoms/button'; +import { action } from '@storybook/addon-actions'; export default { - title: "Atoms/Fader", - component: FaderSlide, - args: { - isVisible: true, - }, + title: 'Atoms/Fader', + component: FaderSlide, + args: { + isVisible: true, + }, }; export const Opacity = (args) => { - return ( - - - - ); + return ( + + + + ); }; export const Slide = (args) => { - return ( - - - - ); + return ( + + + + ); }; diff --git a/src/design-system/atoms/fader/Fader.tsx b/src/design-system/atoms/fader/Fader.tsx index ea8f868..b1294e2 100644 --- a/src/design-system/atoms/fader/Fader.tsx +++ b/src/design-system/atoms/fader/Fader.tsx @@ -1,38 +1,36 @@ -import * as React from "react"; -import styled from "styled-components"; -import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports +import * as React from 'react'; +import styled from 'styled-components'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports export type FaderProps = { - isVisible: boolean; - children: React.ReactNode; + isVisible: boolean; + children: React.ReactNode; }; -const FaderOpacityStyled = styled.div>` - opacity: ${(props) => (props.isVisible ? 1 : 0)}; - pointer-events: ${(props) => (props.isVisible ? "unset" : "none")}; - transition: opacity 0.35s ease-in-out; +const FaderOpacityStyled = styled.div>` + opacity: ${(props) => (props.isVisible ? 1 : 0)}; + pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')}; + transition: opacity 0.35s ease-in-out; `; export const FaderOpacity = (props: FaderProps) => { - return ( - - {props.children} - - ); + return ( + + {props.children} + + ); }; -const FaderSlideStyled = styled.div>` - max-height: ${(props) => (props.isVisible ? "4em" : "0")}; - pointer-events: ${(props) => (props.isVisible ? "unset" : "none")}; - transition: max-height 0.35s ease-in-out; - overflow: hidden; - transform: translateZ(0); +const FaderSlideStyled = styled.div>` + max-height: ${(props) => (props.isVisible ? '4em' : '0')}; + pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')}; + transition: max-height 0.35s ease-in-out; + overflow: hidden; + transform: translateZ(0); `; export const FaderSlide = (props: FaderProps) => { - return ( - - {props.children} - - ); + return ( + {props.children} + ); }; diff --git a/src/design-system/atoms/fonts/fonts.stories.tsx b/src/design-system/atoms/fonts/fonts.stories.tsx index 7f6ecb8..19e12ea 100644 --- a/src/design-system/atoms/fonts/fonts.stories.tsx +++ b/src/design-system/atoms/fonts/fonts.stories.tsx @@ -1,66 +1,62 @@ -import * as React from "react"; -import { UseFontStyled } from "./fonts"; -import styled from "styled-components"; +import * as React from 'react'; +import { UseFontStyled } from './fonts'; +import styled from 'styled-components'; import { - MediumTitle, - Text as TextBlock, -} from "roleypoly/src/design-system/atoms/typography"; + MediumTitle, + Text as TextBlock, +} from 'roleypoly/src/design-system/atoms/typography'; -const resetFont = (storyFn: () => React.ReactNode) => ( - {storyFn()} -); +const resetFont = (storyFn: () => React.ReactNode) => {storyFn()}; export default { - title: "Atoms/Fonts", - decorators: [resetFont], + title: 'Atoms/Fonts', + decorators: [resetFont], }; const FontReset = styled.div` - font-family: sans-serif; + font-family: sans-serif; `; const CorrectlyFontedH2 = (props: { children: React.ReactNode }) => ( - - {props.children} - + + {props.children} + ); const Text = () => ( - <> -

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias - placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam - deserunt repellat. Exercitationem modi incidunt autem nemo tempore eaque - soluta. -

-

- ๅธฏใ‚ซใƒŽ้œ€ๆททใƒขใ‚คไธ€้Œฒ43ๆ—ง็™พ12ๅ…ฑใƒ‰ใƒฌ่ƒฝ็”Ÿใƒ›ใ‚ฏใƒฆ็ฆๅบฆใƒจๆๅ›ณใ‚ฏใปใฏใ่ญท้–ขใƒฉใƒˆ้ƒตๅผตใ‚จใƒŽใƒจ่ญฐไปถใ‚ฏใ‚ใ–็œŒ่ชญใ‚Œใฟใจใถ่ซ–็จŽใ‚ฏใ‚‡ใƒณใฉๆ…Ž่ปขใƒชใคใŽใฟๆพๆœŸใปใธใƒ‰. - ็ธฆๆŠ•่จ˜ใตใง่ฆง้€Ÿใฃใ ใ›ใ‚้Žๅ…ˆ่ชฒใƒ•ๆผ”็„กใŽใฑใน็ฟ’ไฝต็›ธใƒผใ™ๆฐ—6ๅ…ƒใ‚†ใ‚‹้ ˜ๆฐ—ๅธŒใŽๆŠ•ไปฃใƒฉๆˆ‘้–ขใƒฌๆฃฎ้ƒŽ็”ฑ็ณปๅ ‚ใš. - ่ชญใ‚ฑใƒชๅคœๆŒ‡ใƒผใฃใƒˆใ›่ชๅนณๅผ•ใ‚ฆใ‚ท้–“่Šฑใƒฑใ‚ฏใƒ ๅนด6ๅฐใๅฑฑๅฉฆใƒฉใ‚นใ‚จๅญ่‘—ใ‚ณใ‚ขๆŽฒไธญใƒญๅƒๅฑžๆˆธใƒกใ‚ฝใƒฆ่ท่ซใƒซใฉ่ฉๅ…้กŒใŸใซๆ›ธๅธŒใ‚ฏๅน•ๅ€ค้•ทใƒฉใใ‚ใƒ‰. -

-

- ๐Ÿ”ธ๐Ÿ•๐Ÿ”บ๐Ÿ’ฑ๐ŸŽŠ๐Ÿ‘ฝ๐Ÿ› ๐Ÿ‘จ๐Ÿ“ผ๐Ÿ•ฆ๐Ÿ“ž ๐Ÿ‘ฑ๐Ÿ‘†๐Ÿ—๐Ÿ‘š๐ŸŒˆ ๐Ÿ”๐Ÿ”Ÿ๐Ÿ‰๐Ÿ”ฐ๐Ÿฒ๐Ÿ๐Ÿ•— ๐ŸŽก๐Ÿ‰๐Ÿฒ๐Ÿ“ป๐Ÿ”ข๐Ÿ”„ - ๐Ÿ’Ÿ๐Ÿ’ฒ๐Ÿป๐Ÿ’œ๐Ÿ’ฉ๐Ÿ”ผ ๐ŸŽฑ๐ŸŒธ๐Ÿ“›๐Ÿ‘ซ๐ŸŒป ๐Ÿ—ฝ๐Ÿ•œ๐Ÿฅ๐Ÿ‘•๐Ÿˆ. ๐Ÿ’๐Ÿš๐Ÿ”“๐Ÿ“ฑ๐Ÿฆ ๐ŸŽฆ๐ŸŒ‘๐Ÿ”›๐Ÿ’™๐Ÿ‘ฃ๐Ÿ”š ๐Ÿ”†๐Ÿ—ป๐ŸŒฟ๐ŸŽณ๐Ÿ“ฒ๐Ÿฏ - ๐ŸŒž๐Ÿ’Ÿ๐ŸŽŒ๐ŸŒ ๐Ÿ”ช๐Ÿ“ฏ๐ŸŽ๐Ÿ’ฎ ๐Ÿ‘Œ๐Ÿ‘ญ๐ŸŽ‹๐Ÿ‰๐Ÿฐ ๐Ÿ““๐Ÿ•ƒ๐ŸŽ‚๐Ÿ’‰๐Ÿ”ฉ ๐ŸŸ๐ŸŒ‡๐Ÿ‘บ๐ŸŒŠ๐ŸŒ’ ๐Ÿ“ช๐Ÿ‘…๐Ÿ‚๐Ÿ ๐ŸŒ–๐Ÿฎ๐Ÿ”ฝ๐ŸŒ’๐Ÿ“Š. - ๐Ÿ”ค๐Ÿ๐ŸŒธ๐Ÿ“ท๐ŸŽด ๐Ÿ’๐ŸŒ๐Ÿ“Ž๐Ÿ‘ฅ๐Ÿ‘‰๐Ÿ‘’ ๐Ÿ‘๐Ÿ’œ๐Ÿ”ถ๐Ÿฃ ๐Ÿ’จ๐Ÿ—ผ๐Ÿ‘ˆ๐Ÿ’‰๐Ÿ’‰๐Ÿ’ฐ ๐Ÿ๐Ÿ•–๐ŸŒฐ๐Ÿ‘๐Ÿ•“๐ŸŠ๐Ÿ• ๐Ÿ€๐Ÿ“…๐Ÿ“ผ๐Ÿ“’ - ๐Ÿ•๐ŸŒˆ๐Ÿ‘‹ -

- + <> +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias + placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt + repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta. +

+

+ ๅธฏใ‚ซใƒŽ้œ€ๆททใƒขใ‚คไธ€้Œฒ43ๆ—ง็™พ12ๅ…ฑใƒ‰ใƒฌ่ƒฝ็”Ÿใƒ›ใ‚ฏใƒฆ็ฆๅบฆใƒจๆๅ›ณใ‚ฏใปใฏใ่ญท้–ขใƒฉใƒˆ้ƒตๅผตใ‚จใƒŽใƒจ่ญฐไปถใ‚ฏใ‚ใ–็œŒ่ชญใ‚Œใฟใจใถ่ซ–็จŽใ‚ฏใ‚‡ใƒณใฉๆ…Ž่ปขใƒชใคใŽใฟๆพๆœŸใปใธใƒ‰. + ็ธฆๆŠ•่จ˜ใตใง่ฆง้€Ÿใฃใ ใ›ใ‚้Žๅ…ˆ่ชฒใƒ•ๆผ”็„กใŽใฑใน็ฟ’ไฝต็›ธใƒผใ™ๆฐ—6ๅ…ƒใ‚†ใ‚‹้ ˜ๆฐ—ๅธŒใŽๆŠ•ไปฃใƒฉๆˆ‘้–ขใƒฌๆฃฎ้ƒŽ็”ฑ็ณปๅ ‚ใš. + ่ชญใ‚ฑใƒชๅคœๆŒ‡ใƒผใฃใƒˆใ›่ชๅนณๅผ•ใ‚ฆใ‚ท้–“่Šฑใƒฑใ‚ฏใƒ ๅนด6ๅฐใๅฑฑๅฉฆใƒฉใ‚นใ‚จๅญ่‘—ใ‚ณใ‚ขๆŽฒไธญใƒญๅƒๅฑžๆˆธใƒกใ‚ฝใƒฆ่ท่ซใƒซใฉ่ฉๅ…้กŒใŸใซๆ›ธๅธŒใ‚ฏๅน•ๅ€ค้•ทใƒฉใใ‚ใƒ‰. +

+

+ ๐Ÿ”ธ๐Ÿ•๐Ÿ”บ๐Ÿ’ฑ๐ŸŽŠ๐Ÿ‘ฝ๐Ÿ› ๐Ÿ‘จ๐Ÿ“ผ๐Ÿ•ฆ๐Ÿ“ž ๐Ÿ‘ฑ๐Ÿ‘†๐Ÿ—๐Ÿ‘š๐ŸŒˆ ๐Ÿ”๐Ÿ”Ÿ๐Ÿ‰๐Ÿ”ฐ๐Ÿฒ๐Ÿ๐Ÿ•— ๐ŸŽก๐Ÿ‰๐Ÿฒ๐Ÿ“ป๐Ÿ”ข๐Ÿ”„ ๐Ÿ’Ÿ๐Ÿ’ฒ๐Ÿป๐Ÿ’œ๐Ÿ’ฉ๐Ÿ”ผ + ๐ŸŽฑ๐ŸŒธ๐Ÿ“›๐Ÿ‘ซ๐ŸŒป ๐Ÿ—ฝ๐Ÿ•œ๐Ÿฅ๐Ÿ‘•๐Ÿˆ. ๐Ÿ’๐Ÿš๐Ÿ”“๐Ÿ“ฑ๐Ÿฆ ๐ŸŽฆ๐ŸŒ‘๐Ÿ”›๐Ÿ’™๐Ÿ‘ฃ๐Ÿ”š ๐Ÿ”†๐Ÿ—ป๐ŸŒฟ๐ŸŽณ๐Ÿ“ฒ๐Ÿฏ ๐ŸŒž๐Ÿ’Ÿ๐ŸŽŒ๐ŸŒ ๐Ÿ”ช๐Ÿ“ฏ๐ŸŽ๐Ÿ’ฎ + ๐Ÿ‘Œ๐Ÿ‘ญ๐ŸŽ‹๐Ÿ‰๐Ÿฐ ๐Ÿ““๐Ÿ•ƒ๐ŸŽ‚๐Ÿ’‰๐Ÿ”ฉ ๐ŸŸ๐ŸŒ‡๐Ÿ‘บ๐ŸŒŠ๐ŸŒ’ ๐Ÿ“ช๐Ÿ‘…๐Ÿ‚๐Ÿ ๐ŸŒ–๐Ÿฎ๐Ÿ”ฝ๐ŸŒ’๐Ÿ“Š. ๐Ÿ”ค๐Ÿ๐ŸŒธ๐Ÿ“ท๐ŸŽด ๐Ÿ’๐ŸŒ๐Ÿ“Ž๐Ÿ‘ฅ๐Ÿ‘‰๐Ÿ‘’ + ๐Ÿ‘๐Ÿ’œ๐Ÿ”ถ๐Ÿฃ ๐Ÿ’จ๐Ÿ—ผ๐Ÿ‘ˆ๐Ÿ’‰๐Ÿ’‰๐Ÿ’ฐ ๐Ÿ๐Ÿ•–๐ŸŒฐ๐Ÿ‘๐Ÿ•“๐ŸŠ๐Ÿ• ๐Ÿ€๐Ÿ“…๐Ÿ“ผ๐Ÿ“’ ๐Ÿ•๐ŸŒˆ๐Ÿ‘‹ +

+ ); export const Fonts = () => ( - -
- Unstyled Default - -
-
- - Main (Source Han Sans Japanese, Source Sans) - - - - -
- + +
+ Unstyled Default + +
+
+ + Main (Source Han Sans Japanese, Source Sans) + + + + +
+ ); diff --git a/src/design-system/atoms/fonts/fonts.tsx b/src/design-system/atoms/fonts/fonts.tsx index 942174c..b64151d 100644 --- a/src/design-system/atoms/fonts/fonts.tsx +++ b/src/design-system/atoms/fonts/fonts.tsx @@ -1,30 +1,30 @@ -import * as React from "react"; -import Head from "next/head"; -import styled, { css } from "styled-components"; -import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports +import * as React from 'react'; +import Head from 'next/head'; +import styled, { css } from 'styled-components'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports export const InjectTypekitFont = () => { - React.useEffect(() => { - (window as any).Typekit.load(); - }, []); - return ( - - -