diff --git a/.babelrc.js b/.babelrc.js
index ae078bb..0a1cd16 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -1,4 +1,3 @@
module.exports = {
- presets: ['next/babel'],
- plugins: [['styled-components', { ssr: true }]],
+ plugins: ['styled-components'],
};
diff --git a/.gitignore b/.gitignore
index aa9032d..c3e292c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ storybook-static
worker
wrangler.toml
.devdbs
+dist
diff --git a/package.json b/package.json
index 9bb6c87..f8dc05d 100644
--- a/package.json
+++ b/package.json
@@ -24,111 +24,47 @@
"postinstall": "is-ci || husky install",
"storybook": "start-storybook -p 6006",
"storybook:build": "build-storybook",
+ "build": "run-p -c build:*",
+ "build:design-system": "yarn workspace @roleypoly/design-system run build",
+ "build:web": "yarn workspace @roleypoly/web run build",
"test": "jest",
"ui": "next dev -p 6601",
"ui:build": "next build",
"ui:prod": "cross-env next start -p ${PORT:-3000}",
"worker": "node src/backend-emulator/main.js"
},
- "dependencies": {
- "chroma-js": "^2.1.0",
- "isomorphic-unfetch": "^3.1.0",
- "ksuid": "^2.0.0",
- "lodash": "^4.17.20",
- "next": "^10.0.5",
- "nookies": "^2.5.0",
- "react": "^17.0.1",
- "react-custom-scrollbars": "^4.2.1",
- "react-dom": "^17.0.1",
- "react-icons": "^4.1.0",
- "react-is": "^17.0.1",
- "react-tooltip": "^4.2.15",
- "styled-components": "^5.2.1",
- "styled-normalize": "^8.0.7",
- "swr": "^0.4.0"
- },
"devDependencies": {
- "@babel/core": "^7.12.10",
- "@cloudflare/workers-types": "^2.1.0",
- "@icons/material": "^0.4.1",
- "@peculiar/webcrypto": "^1.1.4",
- "@storybook/addon-actions": "^6.1.14",
- "@storybook/addon-essentials": "^6.1.14",
- "@storybook/addon-links": "^6.1.14",
- "@storybook/addons": "^6.1.14",
- "@storybook/react": "^6.1.14",
- "@storybook/theming": "^6.1.14",
- "@types/chroma-js": "^2.1.3",
- "@types/enzyme": "^3.10.8",
- "@types/enzyme-adapter-react-16": "^1.0.6",
- "@types/express": "^4.17.11",
- "@types/jest": "^26.0.20",
- "@types/lodash": "^4.14.167",
- "@types/minimist": "^1.2.1",
- "@types/node": "^14.14.31",
- "@types/react": "^17.0.0",
- "@types/react-custom-scrollbars": "^4.0.7",
- "@types/react-dom": "^17.0.0",
- "@types/styled-components": "^5.1.7",
- "@types/uuid": "^8.3.0",
- "@typescript-eslint/eslint-plugin": "^4.13.0",
- "@typescript-eslint/eslint-plugin-tslint": "^4.13.0",
- "@typescript-eslint/parser": "^4.13.0",
- "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
- "babel-jest": "^26.6.3",
- "babel-loader": "^8.2.2",
- "babel-plugin-styled-components": "^1.12.0",
- "chokidar": "^3.5.1",
- "dotenv": "^8.2.0",
- "enzyme": "^3.11.0",
- "enzyme-to-json": "^3.6.1",
- "eslint": "^7.20.0",
- "eslint-config-prettier": "^7.1.0",
- "eslint-plugin-import": "^2.22.1",
- "eslint-plugin-jsdoc": "^32.2.0",
- "eslint-plugin-react": "^7.22.0",
- "husky": "^5.0.6",
- "is-ci": "^2.0.0",
- "jest": "^26.6.3",
- "jest-cli": "^26.6.3",
- "jest-environment-enzyme": "^7.1.2",
- "jest-enzyme": "^7.1.2",
- "jest-react-hooks-shallow": "^1.4.2",
- "jest-styled-components": "^7.0.3",
- "level": "^6.0.1",
- "lint-staged": "^10.5.3",
- "minimist": "^1.2.5",
- "node-fetch": "^2.6.1",
+ "husky": "^5.1.3",
+ "lint-staged": "^10.5.4",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"prettier-plugin-organize-imports": "^1.1.1",
"prettier-plugin-pkg": "^0.8.0",
"prettier-plugin-sh": "^0.6.0",
- "stylelint": "^13.8.0",
+ "stylelint": "^13.12.0",
"stylelint-config-prettier": "^8.0.2",
- "stylelint-config-standard": "^20.0.0",
+ "stylelint-config-standard": "^21.0.0",
"stylelint-config-styled-components": "^0.1.1",
- "stylelint-prettier": "^1.1.2",
- "ts-jest": "^26.4.4",
- "ts-loader": "^8.0.14",
- "tsconfig-paths-webpack-plugin": "^3.3.0",
- "tslint": "^6.1.3",
- "typescript": "^4.1.3",
- "webpack": "^4.46.0"
+ "stylelint-prettier": "^1.2.0",
+ "is-ci": "^3.0.0",
+ "typescript": "^4.2.3"
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
- "stylelint --fix",
"prettier --write"
],
"*.go": [
"go fmt"
],
- "*.{json,Dockerfile,sh,md,gitignore,env,mdx,yml,html}": [
+ "*.{json,Dockerfile,sh,md,env,mdx,yml,html}": [
"prettier --write"
],
".husky/pre-commit": [
"prettier --write"
]
- }
+ },
+ "private": true,
+ "workspaces": [
+ "packages/*"
+ ]
}
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
new file mode 100644
index 0000000..9d2ffc3
--- /dev/null
+++ b/packages/design-system/.storybook/main.js
@@ -0,0 +1,8 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { NormalModuleReplacementPlugin } = require('webpack');
+
+module.exports = {
+ stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};
diff --git a/packages/design-system/.storybook/manager.js b/packages/design-system/.storybook/manager.js
new file mode 100644
index 0000000..69a5b09
--- /dev/null
+++ b/packages/design-system/.storybook/manager.js
@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import { roleypolyTheme } from './theme';
+
+addons.setConfig({
+ theme: roleypolyTheme,
+});
diff --git a/packages/design-system/.storybook/mocks/next_link.tsx b/packages/design-system/.storybook/mocks/next_link.tsx
new file mode 100644
index 0000000..b921931
--- /dev/null
+++ b/packages/design-system/.storybook/mocks/next_link.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+type Props = {
+ children: React.ReactNode;
+};
+const Link = (props: Props) => <>{props.children}>;
+
+export default Link;
diff --git a/packages/design-system/.storybook/preview-head.html b/packages/design-system/.storybook/preview-head.html
new file mode 100644
index 0000000..eacccaf
--- /dev/null
+++ b/packages/design-system/.storybook/preview-head.html
@@ -0,0 +1,39 @@
+
+
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
new file mode 100644
index 0000000..d32ed34
--- /dev/null
+++ b/packages/design-system/.storybook/preview.js
@@ -0,0 +1,10 @@
+import { roleypolyTheme } from './theme';
+import { mdxComponents } from '../atoms/typography/mdx';
+
+export const parameters = {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ docs: {
+ theme: roleypolyTheme,
+ components: mdxComponents,
+ },
+};
diff --git a/packages/design-system/.storybook/theme.js b/packages/design-system/.storybook/theme.js
new file mode 100644
index 0000000..4c73525
--- /dev/null
+++ b/packages/design-system/.storybook/theme.js
@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming';
+import { palette } from '../atoms/colors';
+
+export const roleypolyTheme = create({
+ base: 'dark',
+
+ colorPrimary: palette.green400,
+ colorSecondary: palette.taupe200,
+
+ // UI
+ appBg: palette.taupe300,
+ appContentBg: palette.taupe200,
+ appBorderColor: palette.taupe100,
+ appBorderRadius: 0,
+
+ // Typography
+ fontBase: 'system-ui, sans-serif',
+ fontCode: 'monospace',
+
+ // Text colors
+ textColor: palette.grey600,
+ textInverseColor: palette.grey100,
+
+ // 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,
+});
diff --git a/src/design-system/Intro.stories.mdx b/packages/design-system/Intro.stories.mdx
similarity index 78%
rename from src/design-system/Intro.stories.mdx
rename to packages/design-system/Intro.stories.mdx
index ffc9fae..079d8b3 100644
--- a/src/design-system/Intro.stories.mdx
+++ b/packages/design-system/Intro.stories.mdx
@@ -1,7 +1,7 @@
import { Meta } from '@storybook/addon-docs/blocks';
-import { Logotype } from 'roleypoly/design-system/atoms/branding';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { Logotype } from '@roleypoly/design-system/atoms/branding';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { palette } from '@roleypoly/design-system/atoms/colors';
diff --git a/src/design-system/README.md b/packages/design-system/README.md
similarity index 100%
rename from src/design-system/README.md
rename to packages/design-system/README.md
diff --git a/src/design-system/atoms/avatar/Avatar.stories.tsx b/packages/design-system/atoms/avatar/Avatar.stories.tsx
similarity index 100%
rename from src/design-system/atoms/avatar/Avatar.stories.tsx
rename to packages/design-system/atoms/avatar/Avatar.stories.tsx
diff --git a/src/design-system/atoms/avatar/Avatar.styled.ts b/packages/design-system/atoms/avatar/Avatar.styled.ts
similarity index 95%
rename from src/design-system/atoms/avatar/Avatar.styled.ts
rename to packages/design-system/atoms/avatar/Avatar.styled.ts
index 5be8979..2f829e0 100644
--- a/src/design-system/atoms/avatar/Avatar.styled.ts
+++ b/packages/design-system/atoms/avatar/Avatar.styled.ts
@@ -1,4 +1,4 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
import styled, { css } from 'styled-components';
import { AvatarProps } from './Avatar';
diff --git a/src/design-system/atoms/avatar/Avatar.tsx b/packages/design-system/atoms/avatar/Avatar.tsx
similarity index 100%
rename from src/design-system/atoms/avatar/Avatar.tsx
rename to packages/design-system/atoms/avatar/Avatar.tsx
diff --git a/src/design-system/atoms/avatar/avatarUtils.tsx b/packages/design-system/atoms/avatar/avatarUtils.tsx
similarity index 100%
rename from src/design-system/atoms/avatar/avatarUtils.tsx
rename to packages/design-system/atoms/avatar/avatarUtils.tsx
diff --git a/src/design-system/atoms/avatar/index.ts b/packages/design-system/atoms/avatar/index.ts
similarity index 100%
rename from src/design-system/atoms/avatar/index.ts
rename to packages/design-system/atoms/avatar/index.ts
diff --git a/src/design-system/atoms/branding/Branding.stories.tsx b/packages/design-system/atoms/branding/Branding.stories.tsx
similarity index 100%
rename from src/design-system/atoms/branding/Branding.stories.tsx
rename to packages/design-system/atoms/branding/Branding.stories.tsx
diff --git a/src/design-system/atoms/branding/Branding.tsx b/packages/design-system/atoms/branding/Branding.tsx
similarity index 99%
rename from src/design-system/atoms/branding/Branding.tsx
rename to packages/design-system/atoms/branding/Branding.tsx
index 267cc2a..c0db26e 100644
--- a/src/design-system/atoms/branding/Branding.tsx
+++ b/packages/design-system/atoms/branding/Branding.tsx
@@ -1,5 +1,5 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
export type LogoProps = {
fill: string;
diff --git a/src/design-system/atoms/branding/BrandingOld.tsx b/packages/design-system/atoms/branding/BrandingOld.tsx
similarity index 100%
rename from src/design-system/atoms/branding/BrandingOld.tsx
rename to packages/design-system/atoms/branding/BrandingOld.tsx
diff --git a/src/design-system/atoms/branding/DynamicBranding.stories.tsx b/packages/design-system/atoms/branding/DynamicBranding.stories.tsx
similarity index 96%
rename from src/design-system/atoms/branding/DynamicBranding.stories.tsx
rename to packages/design-system/atoms/branding/DynamicBranding.stories.tsx
index 3222899..26a7193 100644
--- a/src/design-system/atoms/branding/DynamicBranding.stories.tsx
+++ b/packages/design-system/atoms/branding/DynamicBranding.stories.tsx
@@ -1,6 +1,6 @@
+import { Text } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import ReactTooltip from 'react-tooltip';
-import { Text } from 'roleypoly/design-system/atoms/typography';
import styled from 'styled-components';
import { palette } from '../colors';
import { Logomark, Logotype } from './Branding';
diff --git a/src/design-system/atoms/branding/DynamicBranding.tsx b/packages/design-system/atoms/branding/DynamicBranding.tsx
similarity index 100%
rename from src/design-system/atoms/branding/DynamicBranding.tsx
rename to packages/design-system/atoms/branding/DynamicBranding.tsx
diff --git a/src/design-system/atoms/branding/FlagBranding.stories.tsx b/packages/design-system/atoms/branding/FlagBranding.stories.tsx
similarity index 100%
rename from src/design-system/atoms/branding/FlagBranding.stories.tsx
rename to packages/design-system/atoms/branding/FlagBranding.stories.tsx
diff --git a/src/design-system/atoms/branding/FlagBranding.tsx b/packages/design-system/atoms/branding/FlagBranding.tsx
similarity index 100%
rename from src/design-system/atoms/branding/FlagBranding.tsx
rename to packages/design-system/atoms/branding/FlagBranding.tsx
diff --git a/src/design-system/atoms/branding/index.ts b/packages/design-system/atoms/branding/index.ts
similarity index 100%
rename from src/design-system/atoms/branding/index.ts
rename to packages/design-system/atoms/branding/index.ts
diff --git a/src/design-system/atoms/breakpoints/BreakpointProvider.tsx b/packages/design-system/atoms/breakpoints/BreakpointProvider.tsx
similarity index 100%
rename from src/design-system/atoms/breakpoints/BreakpointProvider.tsx
rename to packages/design-system/atoms/breakpoints/BreakpointProvider.tsx
diff --git a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx b/packages/design-system/atoms/breakpoints/Breakpoints.stories.tsx
similarity index 100%
rename from src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
rename to packages/design-system/atoms/breakpoints/Breakpoints.stories.tsx
diff --git a/src/design-system/atoms/breakpoints/Breakpoints.ts b/packages/design-system/atoms/breakpoints/Breakpoints.ts
similarity index 100%
rename from src/design-system/atoms/breakpoints/Breakpoints.ts
rename to packages/design-system/atoms/breakpoints/Breakpoints.ts
diff --git a/src/design-system/atoms/breakpoints/Context.ts b/packages/design-system/atoms/breakpoints/Context.ts
similarity index 89%
rename from src/design-system/atoms/breakpoints/Context.ts
rename to packages/design-system/atoms/breakpoints/Context.ts
index 0b6054d..7c04d88 100644
--- a/src/design-system/atoms/breakpoints/Context.ts
+++ b/packages/design-system/atoms/breakpoints/Context.ts
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { withContext } from 'roleypoly/common/utils/withContext';
+import { withContext } from '../../../../src/common/utils/withContext';
export type ScreenSize = {
onSmallScreen: boolean;
diff --git a/src/design-system/atoms/breakpoints/DebugTool.tsx b/packages/design-system/atoms/breakpoints/DebugTool.tsx
similarity index 100%
rename from src/design-system/atoms/breakpoints/DebugTool.tsx
rename to packages/design-system/atoms/breakpoints/DebugTool.tsx
diff --git a/src/design-system/atoms/breakpoints/index.ts b/packages/design-system/atoms/breakpoints/index.ts
similarity index 100%
rename from src/design-system/atoms/breakpoints/index.ts
rename to packages/design-system/atoms/breakpoints/index.ts
diff --git a/src/design-system/atoms/button/Button.spec.tsx b/packages/design-system/atoms/button/Button.spec.tsx
similarity index 100%
rename from src/design-system/atoms/button/Button.spec.tsx
rename to packages/design-system/atoms/button/Button.spec.tsx
diff --git a/src/design-system/atoms/button/Button.stories.tsx b/packages/design-system/atoms/button/Button.stories.tsx
similarity index 100%
rename from src/design-system/atoms/button/Button.stories.tsx
rename to packages/design-system/atoms/button/Button.stories.tsx
diff --git a/src/design-system/atoms/button/Button.styled.ts b/packages/design-system/atoms/button/Button.styled.ts
similarity index 91%
rename from src/design-system/atoms/button/Button.styled.ts
rename to packages/design-system/atoms/button/Button.styled.ts
index d0e7b1c..0b73250 100644
--- a/src/design-system/atoms/button/Button.styled.ts
+++ b/packages/design-system/atoms/button/Button.styled.ts
@@ -1,6 +1,6 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
-import { text300, text400 } from 'roleypoly/design-system/atoms/typography';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
+import { text300, text400 } from '@roleypoly/design-system/atoms/typography';
import styled, { css } from 'styled-components';
export const IconContainer = styled.div`
diff --git a/src/design-system/atoms/button/Button.tsx b/packages/design-system/atoms/button/Button.tsx
similarity index 100%
rename from src/design-system/atoms/button/Button.tsx
rename to packages/design-system/atoms/button/Button.tsx
diff --git a/src/design-system/atoms/button/index.ts b/packages/design-system/atoms/button/index.ts
similarity index 100%
rename from src/design-system/atoms/button/index.ts
rename to packages/design-system/atoms/button/index.ts
diff --git a/src/design-system/atoms/collapse/Collapse.stories.tsx b/packages/design-system/atoms/collapse/Collapse.stories.tsx
similarity index 77%
rename from src/design-system/atoms/collapse/Collapse.stories.tsx
rename to packages/design-system/atoms/collapse/Collapse.stories.tsx
index d99f469..70611b0 100644
--- a/src/design-system/atoms/collapse/Collapse.stories.tsx
+++ b/packages/design-system/atoms/collapse/Collapse.stories.tsx
@@ -1,4 +1,4 @@
-import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
+import { SmallTitle } from '@roleypoly/design-system/atoms/typography';
import { Collapse } from './Collapse';
export default {
diff --git a/src/design-system/atoms/collapse/Collapse.tsx b/packages/design-system/atoms/collapse/Collapse.tsx
similarity index 100%
rename from src/design-system/atoms/collapse/Collapse.tsx
rename to packages/design-system/atoms/collapse/Collapse.tsx
diff --git a/src/design-system/atoms/collapse/index.ts b/packages/design-system/atoms/collapse/index.ts
similarity index 100%
rename from src/design-system/atoms/collapse/index.ts
rename to packages/design-system/atoms/collapse/index.ts
diff --git a/src/design-system/atoms/colors/colors.stories.tsx b/packages/design-system/atoms/colors/colors.stories.tsx
similarity index 98%
rename from src/design-system/atoms/colors/colors.stories.tsx
rename to packages/design-system/atoms/colors/colors.stories.tsx
index 49a21af..3dd591f 100644
--- a/src/design-system/atoms/colors/colors.stories.tsx
+++ b/packages/design-system/atoms/colors/colors.stories.tsx
@@ -1,6 +1,6 @@
+import { AmbientSmall } from '@roleypoly/design-system/atoms/typography';
import chroma from 'chroma-js';
import * as React from 'react';
-import { AmbientSmall } from 'roleypoly/design-system/atoms/typography';
import styled from 'styled-components';
import { palette } from './colors';
diff --git a/src/design-system/atoms/colors/colors.tsx b/packages/design-system/atoms/colors/colors.tsx
similarity index 100%
rename from src/design-system/atoms/colors/colors.tsx
rename to packages/design-system/atoms/colors/colors.tsx
diff --git a/src/design-system/atoms/colors/index.ts b/packages/design-system/atoms/colors/index.ts
similarity index 100%
rename from src/design-system/atoms/colors/index.ts
rename to packages/design-system/atoms/colors/index.ts
diff --git a/src/design-system/atoms/colors/withColors.tsx b/packages/design-system/atoms/colors/withColors.tsx
similarity index 100%
rename from src/design-system/atoms/colors/withColors.tsx
rename to packages/design-system/atoms/colors/withColors.tsx
diff --git a/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx b/packages/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
similarity index 100%
rename from src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
rename to packages/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
diff --git a/src/design-system/atoms/dot-overlay/DotOverlay.tsx b/packages/design-system/atoms/dot-overlay/DotOverlay.tsx
similarity index 100%
rename from src/design-system/atoms/dot-overlay/DotOverlay.tsx
rename to packages/design-system/atoms/dot-overlay/DotOverlay.tsx
diff --git a/src/design-system/atoms/dot-overlay/index.ts b/packages/design-system/atoms/dot-overlay/index.ts
similarity index 100%
rename from src/design-system/atoms/dot-overlay/index.ts
rename to packages/design-system/atoms/dot-overlay/index.ts
diff --git a/src/design-system/atoms/fader/Fader.stories.tsx b/packages/design-system/atoms/fader/Fader.stories.tsx
similarity index 90%
rename from src/design-system/atoms/fader/Fader.stories.tsx
rename to packages/design-system/atoms/fader/Fader.stories.tsx
index c8a4021..b9bd46a 100644
--- a/src/design-system/atoms/fader/Fader.stories.tsx
+++ b/packages/design-system/atoms/fader/Fader.stories.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
import { action } from '@storybook/addon-actions';
import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
import { FaderOpacity, FaderSlide } from './Fader';
export default {
diff --git a/src/design-system/atoms/fader/Fader.tsx b/packages/design-system/atoms/fader/Fader.tsx
similarity index 100%
rename from src/design-system/atoms/fader/Fader.tsx
rename to packages/design-system/atoms/fader/Fader.tsx
diff --git a/src/design-system/atoms/fader/index.ts b/packages/design-system/atoms/fader/index.ts
similarity index 100%
rename from src/design-system/atoms/fader/index.ts
rename to packages/design-system/atoms/fader/index.ts
diff --git a/src/design-system/atoms/feature-gate/FeatureGate.stories.tsx b/packages/design-system/atoms/feature-gate/FeatureGate.stories.tsx
similarity index 80%
rename from src/design-system/atoms/feature-gate/FeatureGate.stories.tsx
rename to packages/design-system/atoms/feature-gate/FeatureGate.stories.tsx
index 9b5cd95..bb911bc 100644
--- a/src/design-system/atoms/feature-gate/FeatureGate.stories.tsx
+++ b/packages/design-system/atoms/feature-gate/FeatureGate.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { FeatureFlagDecorator } from 'roleypoly/common/utils/featureFlags/react/storyDecorator';
+import { FeatureFlagDecorator } from '../../../../src/common/utils/featureFlags/react/storyDecorator';
import { FeatureGate } from './FeatureGate';
export default {
diff --git a/src/design-system/atoms/feature-gate/FeatureGate.tsx b/packages/design-system/atoms/feature-gate/FeatureGate.tsx
similarity index 88%
rename from src/design-system/atoms/feature-gate/FeatureGate.tsx
rename to packages/design-system/atoms/feature-gate/FeatureGate.tsx
index 5e53acb..84ae6e4 100644
--- a/src/design-system/atoms/feature-gate/FeatureGate.tsx
+++ b/packages/design-system/atoms/feature-gate/FeatureGate.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import {
FeatureFlag,
FeatureFlagsContext,
-} from 'roleypoly/common/utils/featureFlags/react';
+} from '../../../../src/common/utils/featureFlags/react';
export type FeatureGateProps = {
featureFlag: FeatureFlag;
diff --git a/src/design-system/atoms/feature-gate/index.ts b/packages/design-system/atoms/feature-gate/index.ts
similarity index 100%
rename from src/design-system/atoms/feature-gate/index.ts
rename to packages/design-system/atoms/feature-gate/index.ts
diff --git a/src/design-system/atoms/fonts/fonts.stories.tsx b/packages/design-system/atoms/fonts/fonts.stories.tsx
similarity index 96%
rename from src/design-system/atoms/fonts/fonts.stories.tsx
rename to packages/design-system/atoms/fonts/fonts.stories.tsx
index 6e491ca..9cc092c 100644
--- a/src/design-system/atoms/fonts/fonts.stories.tsx
+++ b/packages/design-system/atoms/fonts/fonts.stories.tsx
@@ -1,5 +1,8 @@
+import {
+ MediumTitle,
+ Text as TextBlock,
+} from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
-import { MediumTitle, Text as TextBlock } from 'roleypoly/design-system/atoms/typography';
import styled from 'styled-components';
import { UseFontStyled } from './fonts';
diff --git a/src/design-system/atoms/fonts/fonts.tsx b/packages/design-system/atoms/fonts/fonts.tsx
similarity index 92%
rename from src/design-system/atoms/fonts/fonts.tsx
rename to packages/design-system/atoms/fonts/fonts.tsx
index 18e7030..31966ed 100644
--- a/src/design-system/atoms/fonts/fonts.tsx
+++ b/packages/design-system/atoms/fonts/fonts.tsx
@@ -1,4 +1,3 @@
-import Head from 'next/head';
import * as React from 'react';
import styled, { css } from 'styled-components';
@@ -7,7 +6,7 @@ export const InjectTypekitFont = () => {
(window as any).Typekit.load();
}, []);
return (
-
+ <>
{
as="script"
/>
-
+ >
);
};
diff --git a/src/design-system/atoms/fonts/index.ts b/packages/design-system/atoms/fonts/index.ts
similarity index 100%
rename from src/design-system/atoms/fonts/index.ts
rename to packages/design-system/atoms/fonts/index.ts
diff --git a/src/design-system/atoms/halfsies/Halfsies.stories.tsx b/packages/design-system/atoms/halfsies/Halfsies.stories.tsx
similarity index 100%
rename from src/design-system/atoms/halfsies/Halfsies.stories.tsx
rename to packages/design-system/atoms/halfsies/Halfsies.stories.tsx
diff --git a/src/design-system/atoms/halfsies/Halfsies.tsx b/packages/design-system/atoms/halfsies/Halfsies.tsx
similarity index 82%
rename from src/design-system/atoms/halfsies/Halfsies.tsx
rename to packages/design-system/atoms/halfsies/Halfsies.tsx
index e5bba65..385e096 100644
--- a/src/design-system/atoms/halfsies/Halfsies.tsx
+++ b/packages/design-system/atoms/halfsies/Halfsies.tsx
@@ -1,4 +1,4 @@
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
import styled, { css } from 'styled-components';
export const HalfsiesContainer = styled.div`
diff --git a/src/design-system/atoms/halfsies/index.ts b/packages/design-system/atoms/halfsies/index.ts
similarity index 100%
rename from src/design-system/atoms/halfsies/index.ts
rename to packages/design-system/atoms/halfsies/index.ts
diff --git a/src/design-system/atoms/hero/Hero.stories.tsx b/packages/design-system/atoms/hero/Hero.stories.tsx
similarity index 100%
rename from src/design-system/atoms/hero/Hero.stories.tsx
rename to packages/design-system/atoms/hero/Hero.stories.tsx
diff --git a/src/design-system/atoms/hero/Hero.tsx b/packages/design-system/atoms/hero/Hero.tsx
similarity index 100%
rename from src/design-system/atoms/hero/Hero.tsx
rename to packages/design-system/atoms/hero/Hero.tsx
diff --git a/src/design-system/atoms/hero/index.ts b/packages/design-system/atoms/hero/index.ts
similarity index 100%
rename from src/design-system/atoms/hero/index.ts
rename to packages/design-system/atoms/hero/index.ts
diff --git a/src/design-system/atoms/horizontal-switch/BUILD.bazel b/packages/design-system/atoms/horizontal-switch/BUILD.bazel
similarity index 100%
rename from src/design-system/atoms/horizontal-switch/BUILD.bazel
rename to packages/design-system/atoms/horizontal-switch/BUILD.bazel
diff --git a/src/design-system/atoms/horizontal-switch/HorizontalSwitch.stories.tsx b/packages/design-system/atoms/horizontal-switch/HorizontalSwitch.stories.tsx
similarity index 100%
rename from src/design-system/atoms/horizontal-switch/HorizontalSwitch.stories.tsx
rename to packages/design-system/atoms/horizontal-switch/HorizontalSwitch.stories.tsx
diff --git a/src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts b/packages/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
similarity index 80%
rename from src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
rename to packages/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
index 8cc3454..4a5351d 100644
--- a/src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
+++ b/packages/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
export const Item = styled.div<{ selected: boolean }>`
diff --git a/src/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx b/packages/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx
similarity index 100%
rename from src/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx
rename to packages/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx
diff --git a/src/design-system/atoms/horizontal-switch/index.tsx b/packages/design-system/atoms/horizontal-switch/index.tsx
similarity index 100%
rename from src/design-system/atoms/horizontal-switch/index.tsx
rename to packages/design-system/atoms/horizontal-switch/index.tsx
diff --git a/src/design-system/atoms/key-events/KeyEvents.ts b/packages/design-system/atoms/key-events/KeyEvents.ts
similarity index 100%
rename from src/design-system/atoms/key-events/KeyEvents.ts
rename to packages/design-system/atoms/key-events/KeyEvents.ts
diff --git a/src/design-system/atoms/key-events/index.ts b/packages/design-system/atoms/key-events/index.ts
similarity index 100%
rename from src/design-system/atoms/key-events/index.ts
rename to packages/design-system/atoms/key-events/index.ts
diff --git a/src/design-system/atoms/popover/Popover.stories.tsx b/packages/design-system/atoms/popover/Popover.stories.tsx
similarity index 93%
rename from src/design-system/atoms/popover/Popover.stories.tsx
rename to packages/design-system/atoms/popover/Popover.stories.tsx
index b873cf0..c61911c 100644
--- a/src/design-system/atoms/popover/Popover.stories.tsx
+++ b/packages/design-system/atoms/popover/Popover.stories.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
import { Popover as PopoverComponent } from './Popover';
export default {
diff --git a/src/design-system/atoms/popover/Popover.styled.ts b/packages/design-system/atoms/popover/Popover.styled.ts
similarity index 89%
rename from src/design-system/atoms/popover/Popover.styled.ts
rename to packages/design-system/atoms/popover/Popover.styled.ts
index 819593d..8210e46 100644
--- a/src/design-system/atoms/popover/Popover.styled.ts
+++ b/packages/design-system/atoms/popover/Popover.styled.ts
@@ -1,6 +1,6 @@
-import { onSmallScreen, onTablet } from 'roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { onSmallScreen, onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
type PopoverStyledProps = {
diff --git a/src/design-system/atoms/popover/Popover.tsx b/packages/design-system/atoms/popover/Popover.tsx
similarity index 94%
rename from src/design-system/atoms/popover/Popover.tsx
rename to packages/design-system/atoms/popover/Popover.tsx
index 4e50540..579e0e3 100644
--- a/src/design-system/atoms/popover/Popover.tsx
+++ b/packages/design-system/atoms/popover/Popover.tsx
@@ -1,6 +1,6 @@
+import { globalOnKeyUp } from '@roleypoly/design-system/atoms/key-events';
import * as React from 'react';
import { IoMdClose } from 'react-icons/io';
-import { globalOnKeyUp } from 'roleypoly/design-system/atoms/key-events';
import {
DefocusHandler,
PopoverBase,
diff --git a/src/design-system/atoms/popover/index.ts b/packages/design-system/atoms/popover/index.ts
similarity index 100%
rename from src/design-system/atoms/popover/index.ts
rename to packages/design-system/atoms/popover/index.ts
diff --git a/src/design-system/atoms/role/Role.spec.tsx b/packages/design-system/atoms/role/Role.spec.tsx
similarity index 85%
rename from src/design-system/atoms/role/Role.spec.tsx
rename to packages/design-system/atoms/role/Role.spec.tsx
index 0e086c1..f039507 100644
--- a/src/design-system/atoms/role/Role.spec.tsx
+++ b/packages/design-system/atoms/role/Role.spec.tsx
@@ -1,6 +1,6 @@
import { shallow } from 'enzyme';
import * as React from 'react';
-import { roleCategory } from 'roleypoly/common/types/storyData';
+import { roleCategory } from '../../fixtures/storyData';
import { Role } from './Role';
it('fires an OnClick handler when clicked', () => {
diff --git a/src/design-system/atoms/role/Role.stories.tsx b/packages/design-system/atoms/role/Role.stories.tsx
similarity index 92%
rename from src/design-system/atoms/role/Role.stories.tsx
rename to packages/design-system/atoms/role/Role.stories.tsx
index e232b06..ab9b9fe 100644
--- a/src/design-system/atoms/role/Role.stories.tsx
+++ b/packages/design-system/atoms/role/Role.stories.tsx
@@ -1,7 +1,7 @@
+import { withColors } from '@roleypoly/design-system/atoms/colors/withColors';
import * as React from 'react';
-import { roleCategory } from 'roleypoly/common/types/storyData';
-import { withColors } from 'roleypoly/design-system/atoms/colors/withColors';
import styled from 'styled-components';
+import { roleCategory } from '../../fixtures/storyData';
import { Role as RoleComponent } from './Role';
export default {
diff --git a/src/design-system/atoms/role/Role.styled.tsx b/packages/design-system/atoms/role/Role.styled.tsx
similarity index 94%
rename from src/design-system/atoms/role/Role.styled.tsx
rename to packages/design-system/atoms/role/Role.styled.tsx
index cdbc5be..dee7ef2 100644
--- a/src/design-system/atoms/role/Role.styled.tsx
+++ b/packages/design-system/atoms/role/Role.styled.tsx
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
export type StyledProps = {
diff --git a/src/design-system/atoms/role/Role.tsx b/packages/design-system/atoms/role/Role.tsx
similarity index 92%
rename from src/design-system/atoms/role/Role.tsx
rename to packages/design-system/atoms/role/Role.tsx
index a08f979..78affbb 100644
--- a/src/design-system/atoms/role/Role.tsx
+++ b/packages/design-system/atoms/role/Role.tsx
@@ -1,9 +1,12 @@
+import { numberToChroma } from '@roleypoly/design-system/atoms/colors';
import chroma from 'chroma-js';
import * as React from 'react';
import { FaCheck, FaTimes } from 'react-icons/fa';
-import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
-import { evaluatePermission, permissions } from 'roleypoly/common/utils/hasPermission';
-import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
+import { Role as RPCRole, RoleSafety } from '../../../../src/common/types';
+import {
+ evaluatePermission,
+ permissions,
+} from '../../../../src/common/utils/hasPermission';
import * as styled from './Role.styled';
type Props = {
diff --git a/src/design-system/atoms/role/index.ts b/packages/design-system/atoms/role/index.ts
similarity index 100%
rename from src/design-system/atoms/role/index.ts
rename to packages/design-system/atoms/role/index.ts
diff --git a/src/design-system/atoms/space/Space.stories.tsx b/packages/design-system/atoms/space/Space.stories.tsx
similarity index 100%
rename from src/design-system/atoms/space/Space.stories.tsx
rename to packages/design-system/atoms/space/Space.stories.tsx
diff --git a/src/design-system/atoms/space/Space.tsx b/packages/design-system/atoms/space/Space.tsx
similarity index 100%
rename from src/design-system/atoms/space/Space.tsx
rename to packages/design-system/atoms/space/Space.tsx
diff --git a/src/design-system/atoms/space/index.ts b/packages/design-system/atoms/space/index.ts
similarity index 100%
rename from src/design-system/atoms/space/index.ts
rename to packages/design-system/atoms/space/index.ts
diff --git a/src/design-system/atoms/sparkle/Shapes.tsx b/packages/design-system/atoms/sparkle/Shapes.tsx
similarity index 100%
rename from src/design-system/atoms/sparkle/Shapes.tsx
rename to packages/design-system/atoms/sparkle/Shapes.tsx
diff --git a/src/design-system/atoms/sparkle/Sparkle.stories.tsx b/packages/design-system/atoms/sparkle/Sparkle.stories.tsx
similarity index 76%
rename from src/design-system/atoms/sparkle/Sparkle.stories.tsx
rename to packages/design-system/atoms/sparkle/Sparkle.stories.tsx
index a9ea6e0..6eede0d 100644
--- a/src/design-system/atoms/sparkle/Sparkle.stories.tsx
+++ b/packages/design-system/atoms/sparkle/Sparkle.stories.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { Hero } from '@roleypoly/design-system/atoms/hero';
import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
-import { Hero } from 'roleypoly/design-system/atoms/hero';
import { SparkleOverlay } from './Sparkle';
export default {
diff --git a/src/design-system/atoms/sparkle/Sparkle.tsx b/packages/design-system/atoms/sparkle/Sparkle.tsx
similarity index 95%
rename from src/design-system/atoms/sparkle/Sparkle.tsx
rename to packages/design-system/atoms/sparkle/Sparkle.tsx
index c8ceedf..a262005 100644
--- a/src/design-system/atoms/sparkle/Sparkle.tsx
+++ b/packages/design-system/atoms/sparkle/Sparkle.tsx
@@ -1,5 +1,5 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
diff --git a/src/design-system/atoms/sparkle/index.ts b/packages/design-system/atoms/sparkle/index.ts
similarity index 100%
rename from src/design-system/atoms/sparkle/index.ts
rename to packages/design-system/atoms/sparkle/index.ts
diff --git a/src/design-system/atoms/tab-view/TabView.spec.tsx b/packages/design-system/atoms/tab-view/TabView.spec.tsx
similarity index 100%
rename from src/design-system/atoms/tab-view/TabView.spec.tsx
rename to packages/design-system/atoms/tab-view/TabView.spec.tsx
diff --git a/src/design-system/atoms/tab-view/TabView.stories.tsx b/packages/design-system/atoms/tab-view/TabView.stories.tsx
similarity index 100%
rename from src/design-system/atoms/tab-view/TabView.stories.tsx
rename to packages/design-system/atoms/tab-view/TabView.stories.tsx
diff --git a/src/design-system/atoms/tab-view/TabView.styled.ts b/packages/design-system/atoms/tab-view/TabView.styled.ts
similarity index 83%
rename from src/design-system/atoms/tab-view/TabView.styled.ts
rename to packages/design-system/atoms/tab-view/TabView.styled.ts
index 8c5550c..ffc9f3b 100644
--- a/src/design-system/atoms/tab-view/TabView.styled.ts
+++ b/packages/design-system/atoms/tab-view/TabView.styled.ts
@@ -1,6 +1,6 @@
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
export const TabViewStyled = styled.div``;
diff --git a/src/design-system/atoms/tab-view/TabView.tsx b/packages/design-system/atoms/tab-view/TabView.tsx
similarity index 100%
rename from src/design-system/atoms/tab-view/TabView.tsx
rename to packages/design-system/atoms/tab-view/TabView.tsx
diff --git a/src/design-system/atoms/tab-view/index.ts b/packages/design-system/atoms/tab-view/index.ts
similarity index 100%
rename from src/design-system/atoms/tab-view/index.ts
rename to packages/design-system/atoms/tab-view/index.ts
diff --git a/src/design-system/atoms/text-input/TextInput.stories.tsx b/packages/design-system/atoms/text-input/TextInput.stories.tsx
similarity index 92%
rename from src/design-system/atoms/text-input/TextInput.stories.tsx
rename to packages/design-system/atoms/text-input/TextInput.stories.tsx
index 4acc386..15e7404 100644
--- a/src/design-system/atoms/text-input/TextInput.stories.tsx
+++ b/packages/design-system/atoms/text-input/TextInput.stories.tsx
@@ -1,6 +1,6 @@
+import { SmallTitle } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import { FiKey } from 'react-icons/fi';
-import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
import { TextInput, TextInputWithIcon } from './TextInput';
export default {
diff --git a/src/design-system/atoms/text-input/TextInput.tsx b/packages/design-system/atoms/text-input/TextInput.tsx
similarity index 96%
rename from src/design-system/atoms/text-input/TextInput.tsx
rename to packages/design-system/atoms/text-input/TextInput.tsx
index 32a9600..2271081 100644
--- a/src/design-system/atoms/text-input/TextInput.tsx
+++ b/packages/design-system/atoms/text-input/TextInput.tsx
@@ -1,5 +1,5 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
const StyledTextInput = styled.input`
diff --git a/src/design-system/atoms/text-input/index.ts b/packages/design-system/atoms/text-input/index.ts
similarity index 100%
rename from src/design-system/atoms/text-input/index.ts
rename to packages/design-system/atoms/text-input/index.ts
diff --git a/src/design-system/atoms/timings/index.ts b/packages/design-system/atoms/timings/index.ts
similarity index 100%
rename from src/design-system/atoms/timings/index.ts
rename to packages/design-system/atoms/timings/index.ts
diff --git a/src/design-system/atoms/timings/timings.ts b/packages/design-system/atoms/timings/timings.ts
similarity index 100%
rename from src/design-system/atoms/timings/timings.ts
rename to packages/design-system/atoms/timings/timings.ts
diff --git a/src/design-system/atoms/typist/Typist.spec.tsx b/packages/design-system/atoms/typist/Typist.spec.tsx
similarity index 100%
rename from src/design-system/atoms/typist/Typist.spec.tsx
rename to packages/design-system/atoms/typist/Typist.spec.tsx
diff --git a/src/design-system/atoms/typist/Typist.stories.tsx b/packages/design-system/atoms/typist/Typist.stories.tsx
similarity index 100%
rename from src/design-system/atoms/typist/Typist.stories.tsx
rename to packages/design-system/atoms/typist/Typist.stories.tsx
diff --git a/src/design-system/atoms/typist/Typist.tsx b/packages/design-system/atoms/typist/Typist.tsx
similarity index 100%
rename from src/design-system/atoms/typist/Typist.tsx
rename to packages/design-system/atoms/typist/Typist.tsx
diff --git a/src/design-system/atoms/typist/index.ts b/packages/design-system/atoms/typist/index.ts
similarity index 100%
rename from src/design-system/atoms/typist/index.ts
rename to packages/design-system/atoms/typist/index.ts
diff --git a/src/design-system/atoms/typography/index.ts b/packages/design-system/atoms/typography/index.ts
similarity index 100%
rename from src/design-system/atoms/typography/index.ts
rename to packages/design-system/atoms/typography/index.ts
diff --git a/src/design-system/atoms/typography/mdx.tsx b/packages/design-system/atoms/typography/mdx.tsx
similarity index 100%
rename from src/design-system/atoms/typography/mdx.tsx
rename to packages/design-system/atoms/typography/mdx.tsx
diff --git a/src/design-system/atoms/typography/typography.stories.tsx b/packages/design-system/atoms/typography/typography.stories.tsx
similarity index 100%
rename from src/design-system/atoms/typography/typography.stories.tsx
rename to packages/design-system/atoms/typography/typography.stories.tsx
diff --git a/src/design-system/atoms/typography/typography.tsx b/packages/design-system/atoms/typography/typography.tsx
similarity index 92%
rename from src/design-system/atoms/typography/typography.tsx
rename to packages/design-system/atoms/typography/typography.tsx
index efc7669..cdf775c 100644
--- a/src/design-system/atoms/typography/typography.tsx
+++ b/packages/design-system/atoms/typography/typography.tsx
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
const reset = css`
diff --git a/packages/design-system/fixtures/storyData.ts b/packages/design-system/fixtures/storyData.ts
new file mode 100644
index 0000000..6d94c37
--- /dev/null
+++ b/packages/design-system/fixtures/storyData.ts
@@ -0,0 +1,241 @@
+import {
+ Category,
+ CategoryType,
+ DiscordUser,
+ Features,
+ Guild,
+ GuildData,
+ GuildEnumeration,
+ GuildSlug,
+ Member,
+ Role,
+ RoleSafety,
+ RoleypolyUser,
+} from '../../../src/common/types';
+
+export const roleCategory: Role[] = [
+ {
+ id: 'aaa',
+ permissions: '0',
+ name: 'She/Her',
+ color: 0xffc0cb,
+ position: 1,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'bbb',
+ permissions: '0',
+ name: 'He/Him',
+ color: 0xc0ebff,
+ position: 2,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'ccc',
+ permissions: '0',
+ name: 'They/Them',
+ color: 0xc0ffd5,
+ position: 3,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'ddd',
+ permissions: '0',
+ name: 'Reee',
+ color: 0xff0000,
+ position: 4,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'eee',
+ permissions: '0',
+ name: 'black but actually bravely default',
+ color: 0x000000,
+ position: 5,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'fff',
+ permissions: '0',
+ name: 'b̻͌̆̽ͣ̃ͭ̊l͚̥͙̔ͨ̊aͥć͕k͎̟͍͕ͥ̋ͯ̓̈̉̋i͛̄̔͂̚̚҉̳͈͔̖̼̮ṣ̤̗̝͊̌͆h͈̭̰͔̥̯ͅ',
+ color: 0x1,
+ position: 6,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'unsafe1',
+ permissions: '0',
+ name: 'too high',
+ color: 0xff0088,
+ position: 7,
+ managed: false,
+ safety: RoleSafety.HigherThanBot,
+ },
+ {
+ id: 'unsafe2',
+ permissions: String(0x00000008 | 0x10000000),
+ name: 'too strong',
+ color: 0x00ff88,
+ position: 8,
+ managed: false,
+ safety: RoleSafety.DangerousPermissions,
+ },
+];
+
+export const mockCategory: Category = {
+ id: 'aaa',
+ name: 'Mock',
+ roles: roleCategory.map((x) => x.id),
+ hidden: false,
+ type: CategoryType.Multi,
+ position: 0,
+};
+
+export const roleCategory2: Role[] = [
+ {
+ id: 'ddd2',
+ permissions: '0',
+ name: 'red',
+ color: 0xff0000,
+ position: 9,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+ {
+ id: 'eee2',
+ permissions: '0',
+ name: 'green',
+ color: 0x00ff00,
+ position: 10,
+ managed: false,
+ safety: RoleSafety.Safe,
+ },
+];
+
+export const mockCategorySingle: Category = {
+ id: 'bbb',
+ name: 'Mock Single 岡野',
+ roles: roleCategory2.map((x) => x.id),
+ hidden: false,
+ type: CategoryType.Single,
+ position: 0,
+};
+
+export const roleWikiData = {
+ aaa: 'Typically used by feminine-identifying people',
+ bbb: 'Typically used by masculine-identifying people',
+ ccc: 'Typically used to refer to all people as a singular neutral.',
+};
+
+export const guild: Guild = {
+ name: 'emoji megaporium',
+ id: '421896162539470888',
+ icon: '3372fd895ed913b55616c5e49cd50e60',
+ roles: [],
+};
+
+export const roleypolyGuild: GuildSlug = {
+ name: 'Roleypoly',
+ id: '386659935687147521',
+ permissionLevel: 0,
+ icon: 'ffee638c73ff9c972554f64ca34d67ee',
+};
+
+export const guildMap: { [x: string]: GuildSlug } = {
+ 'emoji megaporium': {
+ name: guild.name,
+ id: guild.id,
+ permissionLevel: 0,
+ icon: guild.icon,
+ },
+ Roleypoly: roleypolyGuild,
+ 'chamber of secrets': {
+ name: 'chamber of secrets',
+ id: 'aaa',
+ permissionLevel: 0,
+ icon: '',
+ },
+ Eclipse: {
+ name: 'Eclipse',
+ id: '408821059161423873',
+ permissionLevel: 0,
+ icon: '49dfdd8b2456e2977e80a8b577b19c0d',
+ },
+};
+
+export const guildData: GuildData = {
+ id: 'aaa',
+ message: 'henlo worl!!',
+ categories: [mockCategory, mockCategorySingle],
+ features: Features.None,
+};
+
+export const user: DiscordUser = {
+ id: '62601275618889728',
+ username: 'okano',
+ discriminator: '0001',
+ avatar: 'ca2028bab0fe30e1af4392f3fa3576e2',
+ bot: false,
+};
+
+export const member: Member = {
+ guildid: 'aaa',
+ roles: ['aaa', 'eee', 'unsafe2', 'ddd2'],
+ nick: 'okano cat',
+ user: user,
+};
+
+export const rpUser: RoleypolyUser = {
+ discorduser: user,
+};
+
+export const guildEnum: GuildEnumeration = {
+ guilds: [
+ {
+ id: 'aaa',
+ guild: guildMap['emoji megaporium'],
+ member,
+ data: guildData,
+ roles: [...roleCategory, ...roleCategory2],
+ },
+ {
+ id: 'bbb',
+ guild: guildMap['Roleypoly'],
+ member: {
+ ...member,
+ roles: ['unsafe2'],
+ },
+ data: guildData,
+ roles: [...roleCategory, ...roleCategory2],
+ },
+ {
+ id: 'ccc',
+ guild: guildMap['chamber of secrets'],
+ member,
+ data: guildData,
+ roles: [...roleCategory, ...roleCategory2],
+ },
+ {
+ id: 'ddd',
+ guild: guildMap['Eclipse'],
+ member,
+ data: guildData,
+ roles: [...roleCategory, ...roleCategory2],
+ },
+ ],
+};
+
+export const mastheadSlugs: GuildSlug[] = guildEnum.guilds.map(
+ (guild, idx) => ({
+ id: guild.guild.id,
+ name: guild.guild.name,
+ icon: guild.guild.icon,
+ permissionLevel: 1 << idx % 3,
+ })
+);
diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.stories.tsx b/packages/design-system/molecules/demo-discord/DemoDiscord.stories.tsx
similarity index 100%
rename from src/design-system/molecules/demo-discord/DemoDiscord.stories.tsx
rename to packages/design-system/molecules/demo-discord/DemoDiscord.stories.tsx
diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts b/packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts
similarity index 94%
rename from src/design-system/molecules/demo-discord/DemoDiscord.styled.ts
rename to packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts
index 0e5ffeb..552f009 100644
--- a/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts
+++ b/packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts
@@ -1,4 +1,4 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
import styled, { keyframes } from 'styled-components';
export const Base = styled.div`
diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.tsx b/packages/design-system/molecules/demo-discord/DemoDiscord.tsx
similarity index 92%
rename from src/design-system/molecules/demo-discord/DemoDiscord.tsx
rename to packages/design-system/molecules/demo-discord/DemoDiscord.tsx
index 71c18ec..1856a1a 100644
--- a/src/design-system/molecules/demo-discord/DemoDiscord.tsx
+++ b/packages/design-system/molecules/demo-discord/DemoDiscord.tsx
@@ -1,6 +1,6 @@
+import { Typist } from '@roleypoly/design-system/atoms/typist';
import * as React from 'react';
-import { demoData } from 'roleypoly/common/types/demoData';
-import { Typist } from 'roleypoly/design-system/atoms/typist';
+import { demoData } from '../../../../src/common/types/demoData';
import {
Base,
InputBox,
diff --git a/src/design-system/molecules/demo-discord/index.ts b/packages/design-system/molecules/demo-discord/index.ts
similarity index 100%
rename from src/design-system/molecules/demo-discord/index.ts
rename to packages/design-system/molecules/demo-discord/index.ts
diff --git a/src/design-system/molecules/demo-picker/DemoPicker.stories.tsx b/packages/design-system/molecules/demo-picker/DemoPicker.stories.tsx
similarity index 100%
rename from src/design-system/molecules/demo-picker/DemoPicker.stories.tsx
rename to packages/design-system/molecules/demo-picker/DemoPicker.stories.tsx
diff --git a/src/design-system/molecules/demo-picker/DemoPicker.tsx b/packages/design-system/molecules/demo-picker/DemoPicker.tsx
similarity index 86%
rename from src/design-system/molecules/demo-picker/DemoPicker.tsx
rename to packages/design-system/molecules/demo-picker/DemoPicker.tsx
index 5de52bc..736e71b 100644
--- a/src/design-system/molecules/demo-picker/DemoPicker.tsx
+++ b/packages/design-system/molecules/demo-picker/DemoPicker.tsx
@@ -1,8 +1,8 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
import * as React from 'react';
-import { Role as RPCRole } from 'roleypoly/common/types';
-import { demoData } from 'roleypoly/common/types/demoData';
-import { Role } from 'roleypoly/design-system/atoms/role';
import styled from 'styled-components';
+import { Role as RPCRole } from '../../../../src/common/types';
+import { demoData } from '../../../../src/common/types/demoData';
const Container = styled.div`
display: flex;
diff --git a/src/design-system/molecules/demo-picker/index.ts b/packages/design-system/molecules/demo-picker/index.ts
similarity index 100%
rename from src/design-system/molecules/demo-picker/index.ts
rename to packages/design-system/molecules/demo-picker/index.ts
diff --git a/src/design-system/molecules/editor-category/EditorCategory.stories.tsx b/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
similarity index 82%
rename from src/design-system/molecules/editor-category/EditorCategory.stories.tsx
rename to packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
index 7cca233..9cb0133 100644
--- a/src/design-system/molecules/editor-category/EditorCategory.stories.tsx
+++ b/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
@@ -1,9 +1,5 @@
import * as React from 'react';
-import {
- mockCategory,
- roleCategory,
- roleCategory2,
-} from 'roleypoly/common/types/storyData';
+import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyData';
import { EditorCategory } from './EditorCategory';
export default {
diff --git a/src/design-system/molecules/editor-category/EditorCategory.styled.ts b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
similarity index 100%
rename from src/design-system/molecules/editor-category/EditorCategory.styled.ts
rename to packages/design-system/molecules/editor-category/EditorCategory.styled.ts
diff --git a/src/design-system/molecules/editor-category/EditorCategory.tsx b/packages/design-system/molecules/editor-category/EditorCategory.tsx
similarity index 86%
rename from src/design-system/molecules/editor-category/EditorCategory.tsx
rename to packages/design-system/molecules/editor-category/EditorCategory.tsx
index 06ac030..59ce4db 100644
--- a/src/design-system/molecules/editor-category/EditorCategory.tsx
+++ b/packages/design-system/molecules/editor-category/EditorCategory.tsx
@@ -1,14 +1,14 @@
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { HorizontalSwitch } from '@roleypoly/design-system/atoms/horizontal-switch';
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import { Text } from '@roleypoly/design-system/atoms/typography';
+import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
import * as React from 'react';
import { GoSearch } from 'react-icons/go';
-import { Category, CategoryType, Role as RoleType } from 'roleypoly/common/types';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
-import { HorizontalSwitch } from 'roleypoly/design-system/atoms/horizontal-switch';
-import { Popover } from 'roleypoly/design-system/atoms/popover';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { TextInput, TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
-import { Text } from 'roleypoly/design-system/atoms/typography';
-import { RoleSearch } from 'roleypoly/design-system/molecules/role-search';
+import { Category, CategoryType, Role as RoleType } from '../../../../src/common/types';
import { RoleContainer } from './EditorCategory.styled';
type Props = {
diff --git a/src/design-system/molecules/editor-category/index.ts b/packages/design-system/molecules/editor-category/index.ts
similarity index 100%
rename from src/design-system/molecules/editor-category/index.ts
rename to packages/design-system/molecules/editor-category/index.ts
diff --git a/src/design-system/molecules/error-banner/ErrorBanner.stories.tsx b/packages/design-system/molecules/error-banner/ErrorBanner.stories.tsx
similarity index 100%
rename from src/design-system/molecules/error-banner/ErrorBanner.stories.tsx
rename to packages/design-system/molecules/error-banner/ErrorBanner.stories.tsx
diff --git a/src/design-system/molecules/error-banner/ErrorBanner.styled.ts b/packages/design-system/molecules/error-banner/ErrorBanner.styled.ts
similarity index 75%
rename from src/design-system/molecules/error-banner/ErrorBanner.styled.ts
rename to packages/design-system/molecules/error-banner/ErrorBanner.styled.ts
index b697f5f..ec41058 100644
--- a/src/design-system/molecules/error-banner/ErrorBanner.styled.ts
+++ b/packages/design-system/molecules/error-banner/ErrorBanner.styled.ts
@@ -1,6 +1,6 @@
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { text300, text500, text700 } from 'roleypoly/design-system/atoms/typography';
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { text300, text500, text700 } from '@roleypoly/design-system/atoms/typography';
import styled, { css } from 'styled-components';
export const ErrorWrapper = styled.div`
diff --git a/src/design-system/molecules/error-banner/ErrorBanner.tsx b/packages/design-system/molecules/error-banner/ErrorBanner.tsx
similarity index 100%
rename from src/design-system/molecules/error-banner/ErrorBanner.tsx
rename to packages/design-system/molecules/error-banner/ErrorBanner.tsx
diff --git a/src/design-system/molecules/error-banner/index.ts b/packages/design-system/molecules/error-banner/index.ts
similarity index 100%
rename from src/design-system/molecules/error-banner/index.ts
rename to packages/design-system/molecules/error-banner/index.ts
diff --git a/src/design-system/molecules/footer/Flags.tsx b/packages/design-system/molecules/footer/Flags.tsx
similarity index 100%
rename from src/design-system/molecules/footer/Flags.tsx
rename to packages/design-system/molecules/footer/Flags.tsx
diff --git a/src/design-system/molecules/footer/Footer.stories.tsx b/packages/design-system/molecules/footer/Footer.stories.tsx
similarity index 100%
rename from src/design-system/molecules/footer/Footer.stories.tsx
rename to packages/design-system/molecules/footer/Footer.stories.tsx
diff --git a/src/design-system/molecules/footer/Footer.styled.ts b/packages/design-system/molecules/footer/Footer.styled.ts
similarity index 81%
rename from src/design-system/molecules/footer/Footer.styled.ts
rename to packages/design-system/molecules/footer/Footer.styled.ts
index 5703e4a..7a9cef0 100644
--- a/src/design-system/molecules/footer/Footer.styled.ts
+++ b/packages/design-system/molecules/footer/Footer.styled.ts
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const FooterWrapper = styled.div`
diff --git a/src/design-system/molecules/footer/Footer.tsx b/packages/design-system/molecules/footer/Footer.tsx
similarity index 92%
rename from src/design-system/molecules/footer/Footer.tsx
rename to packages/design-system/molecules/footer/Footer.tsx
index 4b33e53..eaf82e2 100644
--- a/src/design-system/molecules/footer/Footer.tsx
+++ b/packages/design-system/molecules/footer/Footer.tsx
@@ -1,6 +1,6 @@
+import { AmbientLarge } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import { FaHeart } from 'react-icons/fa';
-import { AmbientLarge } from 'roleypoly/design-system/atoms/typography';
import { Flags } from './Flags';
import { FooterWrapper, HoverColor } from './Footer.styled';
diff --git a/src/design-system/molecules/footer/index.ts b/packages/design-system/molecules/footer/index.ts
similarity index 100%
rename from src/design-system/molecules/footer/index.ts
rename to packages/design-system/molecules/footer/index.ts
diff --git a/src/design-system/molecules/guild-nav/GuildNav.stories.tsx b/packages/design-system/molecules/guild-nav/GuildNav.stories.tsx
similarity index 72%
rename from src/design-system/molecules/guild-nav/GuildNav.stories.tsx
rename to packages/design-system/molecules/guild-nav/GuildNav.stories.tsx
index 6b794ea..03a1748 100644
--- a/src/design-system/molecules/guild-nav/GuildNav.stories.tsx
+++ b/packages/design-system/molecules/guild-nav/GuildNav.stories.tsx
@@ -1,6 +1,6 @@
+import { PopoverBase } from '@roleypoly/design-system/atoms/popover/Popover.styled';
import * as React from 'react';
-import { mastheadSlugs } from 'roleypoly/common/types/storyData';
-import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
+import { mastheadSlugs } from '../../fixtures/storyData';
import { GuildNav } from './GuildNav';
export default {
diff --git a/src/design-system/molecules/guild-nav/GuildNav.styled.ts b/packages/design-system/molecules/guild-nav/GuildNav.styled.ts
similarity index 76%
rename from src/design-system/molecules/guild-nav/GuildNav.styled.ts
rename to packages/design-system/molecules/guild-nav/GuildNav.styled.ts
index a8de1f8..3a39576 100644
--- a/src/design-system/molecules/guild-nav/GuildNav.styled.ts
+++ b/packages/design-system/molecules/guild-nav/GuildNav.styled.ts
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const GuildNavItem = styled.a`
diff --git a/src/design-system/molecules/guild-nav/GuildNav.tsx b/packages/design-system/molecules/guild-nav/GuildNav.tsx
similarity index 70%
rename from src/design-system/molecules/guild-nav/GuildNav.tsx
rename to packages/design-system/molecules/guild-nav/GuildNav.tsx
index d085a39..7d62b94 100644
--- a/src/design-system/molecules/guild-nav/GuildNav.tsx
+++ b/packages/design-system/molecules/guild-nav/GuildNav.tsx
@@ -1,11 +1,10 @@
-import Link from 'next/link';
+import { NavSlug } from '@roleypoly/design-system/molecules/nav-slug';
import * as React from 'react';
import Scrollbars from 'react-custom-scrollbars';
import { GoStar, GoZap } from 'react-icons/go';
import ReactTooltip from 'react-tooltip';
-import { GuildSlug, UserGuildPermissions } from 'roleypoly/common/types';
-import { sortBy } from 'roleypoly/common/utils/sortBy';
-import { NavSlug } from 'roleypoly/design-system/molecules/nav-slug';
+import { GuildSlug, UserGuildPermissions } from '../../../../src/common/types';
+import { sortBy } from '../../../../src/common/utils/sortBy';
import { GuildNavItem } from './GuildNav.styled';
type Props = {
@@ -39,12 +38,10 @@ export const GuildNav = (props: Props) => (
{sortBy(props.guilds, 'name', (a: string, b: string) =>
a.toLowerCase() > b.toLowerCase() ? 1 : -1
).map((guild) => (
-
-
-
-
-
-
+
+
+
+
))}
diff --git a/src/design-system/molecules/guild-nav/index.ts b/packages/design-system/molecules/guild-nav/index.ts
similarity index 100%
rename from src/design-system/molecules/guild-nav/index.ts
rename to packages/design-system/molecules/guild-nav/index.ts
diff --git a/src/design-system/molecules/help-page-base/BUILD.bazel b/packages/design-system/molecules/help-page-base/BUILD.bazel
similarity index 100%
rename from src/design-system/molecules/help-page-base/BUILD.bazel
rename to packages/design-system/molecules/help-page-base/BUILD.bazel
diff --git a/src/design-system/molecules/help-page-base/HelpPageBase.stories.tsx b/packages/design-system/molecules/help-page-base/HelpPageBase.stories.tsx
similarity index 100%
rename from src/design-system/molecules/help-page-base/HelpPageBase.stories.tsx
rename to packages/design-system/molecules/help-page-base/HelpPageBase.stories.tsx
diff --git a/src/design-system/molecules/help-page-base/HelpPageBase.tsx b/packages/design-system/molecules/help-page-base/HelpPageBase.tsx
similarity index 87%
rename from src/design-system/molecules/help-page-base/HelpPageBase.tsx
rename to packages/design-system/molecules/help-page-base/HelpPageBase.tsx
index 6e71227..d0de4c5 100644
--- a/src/design-system/molecules/help-page-base/HelpPageBase.tsx
+++ b/packages/design-system/molecules/help-page-base/HelpPageBase.tsx
@@ -1,5 +1,5 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
export type HelpPageProps = {
diff --git a/src/design-system/molecules/help-page-base/index.ts b/packages/design-system/molecules/help-page-base/index.ts
similarity index 100%
rename from src/design-system/molecules/help-page-base/index.ts
rename to packages/design-system/molecules/help-page-base/index.ts
diff --git a/src/design-system/molecules/help-page-base/storyDecorator.tsx b/packages/design-system/molecules/help-page-base/storyDecorator.tsx
similarity index 72%
rename from src/design-system/molecules/help-page-base/storyDecorator.tsx
rename to packages/design-system/molecules/help-page-base/storyDecorator.tsx
index a6c9426..9be79c8 100644
--- a/src/design-system/molecules/help-page-base/storyDecorator.tsx
+++ b/packages/design-system/molecules/help-page-base/storyDecorator.tsx
@@ -1,5 +1,5 @@
+import { Content } from '@roleypoly/design-system/organisms/app-shell/AppShell.styled';
import * as React from 'react';
-import { Content } from 'roleypoly/design-system/organisms/app-shell/AppShell.styled';
import { HelpPageBase } from './HelpPageBase';
export const HelpStoryWrapper = (storyFn: any): React.ReactNode => (
diff --git a/src/design-system/molecules/nav-slug/NavSlug.stories.tsx b/packages/design-system/molecules/nav-slug/NavSlug.stories.tsx
similarity index 81%
rename from src/design-system/molecules/nav-slug/NavSlug.stories.tsx
rename to packages/design-system/molecules/nav-slug/NavSlug.stories.tsx
index bfd1f34..95ef929 100644
--- a/src/design-system/molecules/nav-slug/NavSlug.stories.tsx
+++ b/packages/design-system/molecules/nav-slug/NavSlug.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { guild } from 'roleypoly/common/types/storyData';
+import { guild } from '../../fixtures/storyData';
import { NavSlug } from './NavSlug';
export default {
diff --git a/src/design-system/molecules/nav-slug/NavSlug.styled.ts b/packages/design-system/molecules/nav-slug/NavSlug.styled.ts
similarity index 100%
rename from src/design-system/molecules/nav-slug/NavSlug.styled.ts
rename to packages/design-system/molecules/nav-slug/NavSlug.styled.ts
diff --git a/src/design-system/molecules/nav-slug/NavSlug.tsx b/packages/design-system/molecules/nav-slug/NavSlug.tsx
similarity index 85%
rename from src/design-system/molecules/nav-slug/NavSlug.tsx
rename to packages/design-system/molecules/nav-slug/NavSlug.tsx
index 95f2b41..b3aea87 100644
--- a/src/design-system/molecules/nav-slug/NavSlug.tsx
+++ b/packages/design-system/molecules/nav-slug/NavSlug.tsx
@@ -1,7 +1,7 @@
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
import * as React from 'react';
import { GoOrganization } from 'react-icons/go';
-import { GuildSlug } from 'roleypoly/common/types';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
+import { GuildSlug } from '../../../../src/common/types';
import { SlugContainer, SlugName } from './NavSlug.styled';
type Props = {
diff --git a/src/design-system/molecules/nav-slug/index.ts b/packages/design-system/molecules/nav-slug/index.ts
similarity index 100%
rename from src/design-system/molecules/nav-slug/index.ts
rename to packages/design-system/molecules/nav-slug/index.ts
diff --git a/src/design-system/molecules/picker-category/PickerCategory.stories.tsx b/packages/design-system/molecules/picker-category/PickerCategory.stories.tsx
similarity index 87%
rename from src/design-system/molecules/picker-category/PickerCategory.stories.tsx
rename to packages/design-system/molecules/picker-category/PickerCategory.stories.tsx
index 2514778..43766dd 100644
--- a/src/design-system/molecules/picker-category/PickerCategory.stories.tsx
+++ b/packages/design-system/molecules/picker-category/PickerCategory.stories.tsx
@@ -1,9 +1,5 @@
import * as React from 'react';
-import {
- mockCategory,
- roleCategory,
- roleWikiData,
-} from 'roleypoly/common/types/storyData';
+import { mockCategory, roleCategory, roleWikiData } from '../../fixtures/storyData';
import { PickerCategory } from './PickerCategory';
export default {
diff --git a/src/design-system/molecules/picker-category/PickerCategory.styled.tsx b/packages/design-system/molecules/picker-category/PickerCategory.styled.tsx
similarity index 100%
rename from src/design-system/molecules/picker-category/PickerCategory.styled.tsx
rename to packages/design-system/molecules/picker-category/PickerCategory.styled.tsx
diff --git a/src/design-system/molecules/picker-category/PickerCategory.tsx b/packages/design-system/molecules/picker-category/PickerCategory.tsx
similarity index 87%
rename from src/design-system/molecules/picker-category/PickerCategory.tsx
rename to packages/design-system/molecules/picker-category/PickerCategory.tsx
index 07c4b1a..9d2e7b6 100644
--- a/src/design-system/molecules/picker-category/PickerCategory.tsx
+++ b/packages/design-system/molecules/picker-category/PickerCategory.tsx
@@ -1,14 +1,14 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { AmbientLarge, LargeText } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import ReactTooltip from 'react-tooltip';
+import styled from 'styled-components';
import {
Category as RPCCategory,
Role as RPCRole,
RoleSafety,
-} from 'roleypoly/common/types';
-import { sortBy } from 'roleypoly/common/utils/sortBy';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { AmbientLarge, LargeText } from 'roleypoly/design-system/atoms/typography';
-import styled from 'styled-components';
+} from '../../../../src/common/types';
+import { sortBy } from '../../../../src/common/utils/sortBy';
import { Head, HeadSub, HeadTitle } from './PickerCategory.styled';
export type CategoryProps = {
diff --git a/src/design-system/molecules/picker-category/index.ts b/packages/design-system/molecules/picker-category/index.ts
similarity index 100%
rename from src/design-system/molecules/picker-category/index.ts
rename to packages/design-system/molecules/picker-category/index.ts
diff --git a/src/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx b/packages/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx
similarity index 82%
rename from src/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx
rename to packages/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx
index 668b7e7..9ac97f7 100644
--- a/src/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx
+++ b/packages/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { mastheadSlugs } from 'roleypoly/common/types/storyData';
+import { mastheadSlugs } from '../../fixtures/storyData';
import { PreauthGreeting } from './PreauthGreeting';
export default {
diff --git a/src/design-system/molecules/preauth-greeting/PreauthGreeting.tsx b/packages/design-system/molecules/preauth-greeting/PreauthGreeting.tsx
similarity index 76%
rename from src/design-system/molecules/preauth-greeting/PreauthGreeting.tsx
rename to packages/design-system/molecules/preauth-greeting/PreauthGreeting.tsx
index 687f19d..7a5c83d 100644
--- a/src/design-system/molecules/preauth-greeting/PreauthGreeting.tsx
+++ b/packages/design-system/molecules/preauth-greeting/PreauthGreeting.tsx
@@ -1,9 +1,9 @@
+import { Avatar, utils as avatarUtils } from '@roleypoly/design-system/atoms/avatar';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { AccentTitle } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
-import { GuildSlug } from 'roleypoly/common/types';
-import { Avatar, utils as avatarUtils } from 'roleypoly/design-system/atoms/avatar';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { AccentTitle } from 'roleypoly/design-system/atoms/typography';
import styled from 'styled-components';
+import { GuildSlug } from '../../../../src/common/types';
type GreetingProps = {
guildSlug: GuildSlug;
diff --git a/src/design-system/molecules/preauth-greeting/index.ts b/packages/design-system/molecules/preauth-greeting/index.ts
similarity index 100%
rename from src/design-system/molecules/preauth-greeting/index.ts
rename to packages/design-system/molecules/preauth-greeting/index.ts
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx b/packages/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
similarity index 90%
rename from src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
rename to packages/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
index 74437e3..3a2c27e 100644
--- a/src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
+++ b/packages/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
import { shallow } from 'enzyme';
import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
import { ResetSubmit } from './ResetSubmit';
const onReset = jest.fn();
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.stories.tsx b/packages/design-system/molecules/reset-submit/ResetSubmit.stories.tsx
similarity index 100%
rename from src/design-system/molecules/reset-submit/ResetSubmit.stories.tsx
rename to packages/design-system/molecules/reset-submit/ResetSubmit.stories.tsx
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.styled.ts b/packages/design-system/molecules/reset-submit/ResetSubmit.styled.ts
similarity index 78%
rename from src/design-system/molecules/reset-submit/ResetSubmit.styled.ts
rename to packages/design-system/molecules/reset-submit/ResetSubmit.styled.ts
index b21f6e8..fb626ce 100644
--- a/src/design-system/molecules/reset-submit/ResetSubmit.styled.ts
+++ b/packages/design-system/molecules/reset-submit/ResetSubmit.styled.ts
@@ -1,4 +1,4 @@
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
import styled from 'styled-components';
export const Buttons = styled.div`
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.tsx b/packages/design-system/molecules/reset-submit/ResetSubmit.tsx
similarity index 84%
rename from src/design-system/molecules/reset-submit/ResetSubmit.tsx
rename to packages/design-system/molecules/reset-submit/ResetSubmit.tsx
index 4fc8f6a..0fe35b3 100644
--- a/src/design-system/molecules/reset-submit/ResetSubmit.tsx
+++ b/packages/design-system/molecules/reset-submit/ResetSubmit.tsx
@@ -1,7 +1,7 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
import * as React from 'react';
import { MdRestore } from 'react-icons/md';
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
-import { Button } from 'roleypoly/design-system/atoms/button';
import styled from 'styled-components';
type Props = {
diff --git a/src/design-system/molecules/reset-submit/index.ts b/packages/design-system/molecules/reset-submit/index.ts
similarity index 100%
rename from src/design-system/molecules/reset-submit/index.ts
rename to packages/design-system/molecules/reset-submit/index.ts
diff --git a/src/design-system/molecules/role-search/RoleSearch.stories.tsx b/packages/design-system/molecules/role-search/RoleSearch.stories.tsx
similarity index 81%
rename from src/design-system/molecules/role-search/RoleSearch.stories.tsx
rename to packages/design-system/molecules/role-search/RoleSearch.stories.tsx
index 89b3ada..39d30d7 100644
--- a/src/design-system/molecules/role-search/RoleSearch.stories.tsx
+++ b/packages/design-system/molecules/role-search/RoleSearch.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { roleCategory } from 'roleypoly/common/types/storyData';
+import { roleCategory } from '../../fixtures/storyData';
import { RoleSearch } from './RoleSearch';
export default {
diff --git a/src/design-system/molecules/role-search/RoleSearch.tsx b/packages/design-system/molecules/role-search/RoleSearch.tsx
similarity index 85%
rename from src/design-system/molecules/role-search/RoleSearch.tsx
rename to packages/design-system/molecules/role-search/RoleSearch.tsx
index 30c7bcc..3c3792f 100644
--- a/src/design-system/molecules/role-search/RoleSearch.tsx
+++ b/packages/design-system/molecules/role-search/RoleSearch.tsx
@@ -1,11 +1,11 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
import Fuse from 'fuse.js';
import * as React from 'react';
import { GoSearch } from 'react-icons/go';
-import { Role as RoleType } from 'roleypoly/common/types';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
import styled from 'styled-components';
+import { Role as RoleType } from '../../../../src/common/types';
type Props = {
roles: RoleType[];
diff --git a/src/design-system/molecules/role-search/index.ts b/packages/design-system/molecules/role-search/index.ts
similarity index 100%
rename from src/design-system/molecules/role-search/index.ts
rename to packages/design-system/molecules/role-search/index.ts
diff --git a/src/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx b/packages/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
similarity index 82%
rename from src/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
rename to packages/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
index b67e35d..1ef9c86 100644
--- a/src/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
+++ b/packages/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
@@ -1,4 +1,4 @@
-import { roleypolyGuild } from 'roleypoly/common/types/storyData';
+import { roleypolyGuild } from '../../fixtures/storyData';
import { ServerListingCard } from './ServerListingCard';
export default {
diff --git a/src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts b/packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
similarity index 86%
rename from src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
rename to packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
index 8b7a994..4d76752 100644
--- a/src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
+++ b/packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
@@ -1,7 +1,7 @@
-import { onSmallScreen, onTablet } from 'roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
-import { text200, text500 } from 'roleypoly/design-system/atoms/typography';
+import { onSmallScreen, onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { text200, text500 } from '@roleypoly/design-system/atoms/typography';
import styled, { css } from 'styled-components';
export const CardLine = styled.div<{ left?: boolean }>`
diff --git a/src/design-system/molecules/server-listing-card/ServerListingCard.tsx b/packages/design-system/molecules/server-listing-card/ServerListingCard.tsx
similarity index 88%
rename from src/design-system/molecules/server-listing-card/ServerListingCard.tsx
rename to packages/design-system/molecules/server-listing-card/ServerListingCard.tsx
index 22b7bec..66619f5 100644
--- a/src/design-system/molecules/server-listing-card/ServerListingCard.tsx
+++ b/packages/design-system/molecules/server-listing-card/ServerListingCard.tsx
@@ -1,8 +1,8 @@
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
+import { Collapse } from '@roleypoly/design-system/atoms/collapse';
import * as React from 'react';
import { GoPerson, GoStar, GoZap } from 'react-icons/go';
-import { GuildSlug, UserGuildPermissions } from 'roleypoly/common/types';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
-import { Collapse } from 'roleypoly/design-system/atoms/collapse';
+import { GuildSlug, UserGuildPermissions } from '../../../../src/common/types';
import {
CardBase,
CardLine,
diff --git a/src/design-system/molecules/server-listing-card/index.ts b/packages/design-system/molecules/server-listing-card/index.ts
similarity index 100%
rename from src/design-system/molecules/server-listing-card/index.ts
rename to packages/design-system/molecules/server-listing-card/index.ts
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx b/packages/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
similarity index 90%
rename from src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
rename to packages/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
index 757cc9f..9b88e05 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
+++ b/packages/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
@@ -2,7 +2,7 @@ jest.unmock('./ServerMasthead');
import { shallow } from 'enzyme';
import * as React from 'react';
-import { mastheadSlugs } from 'roleypoly/common/types/storyData';
+import { mastheadSlugs } from '../../fixtures/storyData';
import { ServerMasthead } from './ServerMasthead';
import { Editable } from './ServerMasthead.styled';
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx b/packages/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
similarity index 86%
rename from src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
rename to packages/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
index 0b0d409..251c28f 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
+++ b/packages/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { guild } from 'roleypoly/common/types/storyData';
+import { guild } from '../../fixtures/storyData';
import { ServerMasthead } from './ServerMasthead';
export default {
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.styled.ts b/packages/design-system/molecules/server-masthead/ServerMasthead.styled.ts
similarity index 84%
rename from src/design-system/molecules/server-masthead/ServerMasthead.styled.ts
rename to packages/design-system/molecules/server-masthead/ServerMasthead.styled.ts
index 107d931..db04146 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.styled.ts
+++ b/packages/design-system/molecules/server-masthead/ServerMasthead.styled.ts
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const Wrapper = styled.div`
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.tsx b/packages/design-system/molecules/server-masthead/ServerMasthead.tsx
similarity index 75%
rename from src/design-system/molecules/server-masthead/ServerMasthead.tsx
rename to packages/design-system/molecules/server-masthead/ServerMasthead.tsx
index bed98af..7a82267 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.tsx
+++ b/packages/design-system/molecules/server-masthead/ServerMasthead.tsx
@@ -1,9 +1,8 @@
-import Link from 'next/link';
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
+import { AccentTitle, AmbientLarge } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import { GoPencil } from 'react-icons/go';
-import { GuildSlug } from 'roleypoly/common/types';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
-import { AccentTitle, AmbientLarge } from 'roleypoly/design-system/atoms/typography';
+import { GuildSlug } from '../../../../src/common/types';
import { Editable, Icon, Name, Wrapper } from './ServerMasthead.styled';
export type ServerMastheadProps = {
@@ -26,12 +25,12 @@ export const ServerMasthead = (props: ServerMastheadProps) => {
{props.guild.name}
{props.editable && (
-
+
Edit Server
-
+
)}
diff --git a/src/design-system/molecules/server-masthead/index.ts b/packages/design-system/molecules/server-masthead/index.ts
similarity index 100%
rename from src/design-system/molecules/server-masthead/index.ts
rename to packages/design-system/molecules/server-masthead/index.ts
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx b/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
similarity index 74%
rename from src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
rename to packages/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
index fdafb00..973c986 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
+++ b/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
@@ -1,6 +1,6 @@
+import { Hero } from '@roleypoly/design-system/atoms/hero';
import * as React from 'react';
-import { user } from 'roleypoly/common/types/storyData';
-import { Hero } from 'roleypoly/design-system/atoms/hero';
+import { user } from '../../fixtures/storyData';
import { UserAvatarGroup } from './UserAvatarGroup';
export default {
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts b/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
similarity index 80%
rename from src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
rename to packages/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
index df35271..3ed5614 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
+++ b/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
@@ -1,5 +1,5 @@
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
import styled, { css } from 'styled-components';
export const Collapse = styled.div<{ preventCollapse: boolean }>`
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx b/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
similarity index 85%
rename from src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
rename to packages/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
index 7640749..825e355 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
+++ b/packages/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
@@ -1,6 +1,6 @@
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
import * as React from 'react';
-import { DiscordUser } from 'roleypoly/common/types';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
+import { DiscordUser } from '../../../../src/common/types';
import { Collapse, Discriminator, Group, GroupText } from './UserAvatarGroup.styled';
type Props = {
diff --git a/src/design-system/molecules/user-avatar-group/index.ts b/packages/design-system/molecules/user-avatar-group/index.ts
similarity index 100%
rename from src/design-system/molecules/user-avatar-group/index.ts
rename to packages/design-system/molecules/user-avatar-group/index.ts
diff --git a/src/design-system/molecules/user-popover/UserPopover.stories.tsx b/packages/design-system/molecules/user-popover/UserPopover.stories.tsx
similarity index 71%
rename from src/design-system/molecules/user-popover/UserPopover.stories.tsx
rename to packages/design-system/molecules/user-popover/UserPopover.stories.tsx
index 6d3aa69..a8eb7a5 100644
--- a/src/design-system/molecules/user-popover/UserPopover.stories.tsx
+++ b/packages/design-system/molecules/user-popover/UserPopover.stories.tsx
@@ -1,6 +1,6 @@
+import { PopoverBase } from '@roleypoly/design-system/atoms/popover/Popover.styled';
import * as React from 'react';
-import { user } from 'roleypoly/common/types/storyData';
-import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
+import { user } from '../../fixtures/storyData';
import { UserPopover as UserPopoverComponent } from './UserPopover';
export default {
diff --git a/src/design-system/molecules/user-popover/UserPopover.styled.ts b/packages/design-system/molecules/user-popover/UserPopover.styled.ts
similarity index 82%
rename from src/design-system/molecules/user-popover/UserPopover.styled.ts
rename to packages/design-system/molecules/user-popover/UserPopover.styled.ts
index d8fc05b..ede63ff 100644
--- a/src/design-system/molecules/user-popover/UserPopover.styled.ts
+++ b/packages/design-system/molecules/user-popover/UserPopover.styled.ts
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const Base = styled.div`
diff --git a/src/design-system/molecules/user-popover/UserPopover.tsx b/packages/design-system/molecules/user-popover/UserPopover.tsx
similarity index 62%
rename from src/design-system/molecules/user-popover/UserPopover.tsx
rename to packages/design-system/molecules/user-popover/UserPopover.tsx
index c747535..703ec15 100644
--- a/src/design-system/molecules/user-popover/UserPopover.tsx
+++ b/packages/design-system/molecules/user-popover/UserPopover.tsx
@@ -1,9 +1,8 @@
-import Link from 'next/link';
+import { CompletelyStylelessLink } from '@roleypoly/design-system/atoms/typography';
+import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
import * as React from 'react';
import { GoGear, GoSignOut } from 'react-icons/go';
-import { DiscordUser } from 'roleypoly/common/types';
-import { CompletelyStylelessLink } from 'roleypoly/design-system/atoms/typography';
-import { UserAvatarGroup } from 'roleypoly/design-system/molecules/user-avatar-group';
+import { DiscordUser } from '../../../../src/common/types';
import { Base, NavAction } from './UserPopover.styled';
type UserPopoverProps = {
@@ -14,18 +13,18 @@ export const UserPopover = (props: UserPopoverProps) => (
-
+
Settings
-
+
-
+
Log Out
-
+
);
diff --git a/src/design-system/molecules/user-popover/index.ts b/packages/design-system/molecules/user-popover/index.ts
similarity index 100%
rename from src/design-system/molecules/user-popover/index.ts
rename to packages/design-system/molecules/user-popover/index.ts
diff --git a/src/design-system/organisms/app-shell/AppShell.stories.tsx b/packages/design-system/organisms/app-shell/AppShell.stories.tsx
similarity index 84%
rename from src/design-system/organisms/app-shell/AppShell.stories.tsx
rename to packages/design-system/organisms/app-shell/AppShell.stories.tsx
index d87d51d..4b3fca6 100644
--- a/src/design-system/organisms/app-shell/AppShell.stories.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { mastheadSlugs, user } from 'roleypoly/common/types/storyData';
+import { mastheadSlugs, user } from '../../fixtures/storyData';
import { AppShell } from './AppShell';
export default {
diff --git a/src/design-system/organisms/app-shell/AppShell.styled.tsx b/packages/design-system/organisms/app-shell/AppShell.styled.tsx
similarity index 81%
rename from src/design-system/organisms/app-shell/AppShell.styled.tsx
rename to packages/design-system/organisms/app-shell/AppShell.styled.tsx
index aa0e814..0ad40d9 100644
--- a/src/design-system/organisms/app-shell/AppShell.styled.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.styled.tsx
@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
import styled, { createGlobalStyle } from 'styled-components';
export const Content = styled.div<{ small?: boolean }>`
diff --git a/src/design-system/organisms/app-shell/AppShell.tsx b/packages/design-system/organisms/app-shell/AppShell.tsx
similarity index 79%
rename from src/design-system/organisms/app-shell/AppShell.tsx
rename to packages/design-system/organisms/app-shell/AppShell.tsx
index 8c4eea8..b72b7ff 100644
--- a/src/design-system/organisms/app-shell/AppShell.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.tsx
@@ -1,9 +1,9 @@
+import { GlobalStyleColors } from '@roleypoly/design-system/atoms/colors';
+import { Footer } from '@roleypoly/design-system/molecules/footer';
+import * as Masthead from '@roleypoly/design-system/organisms/masthead';
import * as React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
-import { DiscordUser, GuildSlug } from 'roleypoly/common/types';
-import { GlobalStyleColors } from 'roleypoly/design-system/atoms/colors';
-import { Footer } from 'roleypoly/design-system/molecules/footer';
-import * as Masthead from 'roleypoly/design-system/organisms/masthead';
+import { DiscordUser, GuildSlug } from '../../../../src/common/types';
import { Content, GlobalStyles } from './AppShell.styled';
export type AppShellProps = {
diff --git a/src/design-system/organisms/app-shell/index.ts b/packages/design-system/organisms/app-shell/index.ts
similarity index 100%
rename from src/design-system/organisms/app-shell/index.ts
rename to packages/design-system/organisms/app-shell/index.ts
diff --git a/src/design-system/organisms/editor/EditorShell.stories.tsx b/packages/design-system/organisms/editor/EditorShell.stories.tsx
similarity index 79%
rename from src/design-system/organisms/editor/EditorShell.stories.tsx
rename to packages/design-system/organisms/editor/EditorShell.stories.tsx
index 7496717..8e3bda5 100644
--- a/src/design-system/organisms/editor/EditorShell.stories.tsx
+++ b/packages/design-system/organisms/editor/EditorShell.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { guildEnum } from 'roleypoly/common/types/storyData';
+import { guildEnum } from '../../fixtures/storyData';
import { EditorShell } from './EditorShell';
export default {
diff --git a/src/design-system/organisms/editor/EditorShell.styled.ts b/packages/design-system/organisms/editor/EditorShell.styled.ts
similarity index 72%
rename from src/design-system/organisms/editor/EditorShell.styled.ts
rename to packages/design-system/organisms/editor/EditorShell.styled.ts
index cb3cbe8..0493a14 100644
--- a/src/design-system/organisms/editor/EditorShell.styled.ts
+++ b/packages/design-system/organisms/editor/EditorShell.styled.ts
@@ -1,4 +1,4 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
export const CategoryContainer = styled.div`
diff --git a/src/design-system/organisms/editor/EditorShell.tsx b/packages/design-system/organisms/editor/EditorShell.tsx
similarity index 86%
rename from src/design-system/organisms/editor/EditorShell.tsx
rename to packages/design-system/organisms/editor/EditorShell.tsx
index e527b6a..7ff97a0 100644
--- a/src/design-system/organisms/editor/EditorShell.tsx
+++ b/packages/design-system/organisms/editor/EditorShell.tsx
@@ -1,6 +1,6 @@
+import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
import * as React from 'react';
-import { PresentableGuild } from 'roleypoly/common/types';
-import { Tab, TabView } from 'roleypoly/design-system/atoms/tab-view';
+import { PresentableGuild } from '../../../../src/common/types';
import { EditorCategory } from '../../molecules/editor-category';
import { CategoryContainer } from './EditorShell.styled';
diff --git a/src/design-system/organisms/editor/index.ts b/packages/design-system/organisms/editor/index.ts
similarity index 100%
rename from src/design-system/organisms/editor/index.ts
rename to packages/design-system/organisms/editor/index.ts
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx b/packages/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx
similarity index 100%
rename from src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx
rename to packages/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts b/packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
similarity index 88%
rename from src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
rename to packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
index 2ee13bb..a2c3c9e 100644
--- a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
+++ b/packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
@@ -1,6 +1,6 @@
-import { Role } from 'roleypoly/common/types';
-import { numberToChroma, palette } from 'roleypoly/design-system/atoms/colors';
+import { numberToChroma, palette } from '@roleypoly/design-system/atoms/colors';
import styled, { css } from 'styled-components';
+import { Role } from '../../../../src/common/types';
export const DiscordBase = styled.div`
background-color: ${palette.discord100};
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx b/packages/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
similarity index 85%
rename from src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
rename to packages/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
index 81c2307..28dd882 100644
--- a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
+++ b/packages/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
@@ -1,11 +1,11 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { HalfsiesContainer, HalfsiesItem } from '@roleypoly/design-system/atoms/halfsies';
+import { SparkleOverlay } from '@roleypoly/design-system/atoms/sparkle';
import chroma from 'chroma-js';
import * as React from 'react';
import { FaCheck, FaTimes } from 'react-icons/fa';
-import { Role } from 'roleypoly/common/types';
-import { demoData } from 'roleypoly/common/types/demoData';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
-import { SparkleOverlay } from 'roleypoly/design-system/atoms/sparkle';
+import { Role } from '../../../../src/common/types';
+import { demoData } from '../../../../src/common/types/demoData';
import { DiscordBase, DiscordRole } from './WhyNoRoles.styled';
const adminRoles: Role[] = [
diff --git a/src/design-system/organisms/help-why-no-roles/index.ts b/packages/design-system/organisms/help-why-no-roles/index.ts
similarity index 100%
rename from src/design-system/organisms/help-why-no-roles/index.ts
rename to packages/design-system/organisms/help-why-no-roles/index.ts
diff --git a/src/design-system/organisms/landing/Landing.stories.tsx b/packages/design-system/organisms/landing/Landing.stories.tsx
similarity index 100%
rename from src/design-system/organisms/landing/Landing.stories.tsx
rename to packages/design-system/organisms/landing/Landing.stories.tsx
diff --git a/src/design-system/organisms/landing/Landing.styled.ts b/packages/design-system/organisms/landing/Landing.styled.ts
similarity index 80%
rename from src/design-system/organisms/landing/Landing.styled.ts
rename to packages/design-system/organisms/landing/Landing.styled.ts
index eb72c48..f80cc45 100644
--- a/src/design-system/organisms/landing/Landing.styled.ts
+++ b/packages/design-system/organisms/landing/Landing.styled.ts
@@ -1,5 +1,5 @@
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
-import { text400 } from 'roleypoly/design-system/atoms/typography';
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { text400 } from '@roleypoly/design-system/atoms/typography';
import styled, { css } from 'styled-components';
export const HeroText = styled.div`
diff --git a/src/design-system/organisms/landing/Landing.tsx b/packages/design-system/organisms/landing/Landing.tsx
similarity index 71%
rename from src/design-system/organisms/landing/Landing.tsx
rename to packages/design-system/organisms/landing/Landing.tsx
index 87b4409..46e79e7 100644
--- a/src/design-system/organisms/landing/Landing.tsx
+++ b/packages/design-system/organisms/landing/Landing.tsx
@@ -1,10 +1,10 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { HalfsiesContainer, HalfsiesItem } from '@roleypoly/design-system/atoms/halfsies';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { LargeText, LargeTitle } from '@roleypoly/design-system/atoms/typography';
+import { DemoDiscord } from '@roleypoly/design-system/molecules/demo-discord';
+import { DemoPicker } from '@roleypoly/design-system/molecules/demo-picker';
import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { LargeText, LargeTitle } from 'roleypoly/design-system/atoms/typography';
-import { DemoDiscord } from 'roleypoly/design-system/molecules/demo-discord';
-import { DemoPicker } from 'roleypoly/design-system/molecules/demo-picker';
import { DemoAlignment, DemoSubtitle, HeroCentering, HeroText } from './Landing.styled';
export const Landing = () => (
diff --git a/src/design-system/organisms/landing/index.ts b/packages/design-system/organisms/landing/index.ts
similarity index 100%
rename from src/design-system/organisms/landing/index.ts
rename to packages/design-system/organisms/landing/index.ts
diff --git a/src/design-system/organisms/masthead/Authed.tsx b/packages/design-system/organisms/masthead/Authed.tsx
similarity index 80%
rename from src/design-system/organisms/masthead/Authed.tsx
rename to packages/design-system/organisms/masthead/Authed.tsx
index 5d5e34a..8f486d2 100644
--- a/src/design-system/organisms/masthead/Authed.tsx
+++ b/packages/design-system/organisms/masthead/Authed.tsx
@@ -1,13 +1,12 @@
-import Link from 'next/link';
+import { DynamicLogomark } from '@roleypoly/design-system/atoms/branding';
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { GuildNav } from '@roleypoly/design-system/molecules/guild-nav';
+import { NavSlug } from '@roleypoly/design-system/molecules/nav-slug';
+import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
+import { UserPopover } from '@roleypoly/design-system/molecules/user-popover';
import * as React from 'react';
import { GoOrganization } from 'react-icons/go';
-import { DiscordUser, GuildSlug } from 'roleypoly/common/types';
-import { DynamicLogomark } from 'roleypoly/design-system/atoms/branding';
-import { Popover } from 'roleypoly/design-system/atoms/popover';
-import { GuildNav } from 'roleypoly/design-system/molecules/guild-nav';
-import { NavSlug } from 'roleypoly/design-system/molecules/nav-slug';
-import { UserAvatarGroup } from 'roleypoly/design-system/molecules/user-avatar-group';
-import { UserPopover } from 'roleypoly/design-system/molecules/user-popover';
+import { DiscordUser, GuildSlug } from '../../../../src/common/types';
import {
GuildPopoverHead,
InteractionBase,
@@ -33,11 +32,9 @@ export const Authed = (props: Props) => {
-
-
-
-
-
+
+
+
{
if (!props.disableGuildPicker) {
diff --git a/packages/design-system/organisms/masthead/Guest.tsx b/packages/design-system/organisms/masthead/Guest.tsx
new file mode 100644
index 0000000..b475fdc
--- /dev/null
+++ b/packages/design-system/organisms/masthead/Guest.tsx
@@ -0,0 +1,34 @@
+import { DynamicLogotype } from '@roleypoly/design-system/atoms/branding';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import * as React from 'react';
+import { FaSignInAlt } from 'react-icons/fa';
+import {
+ MastheadA,
+ MastheadAlignment,
+ MastheadBase,
+ MastheadLeft,
+ MastheadRight,
+} from './Masthead.styled';
+
+export const Guest = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/src/design-system/organisms/masthead/Masthead.stories.tsx b/packages/design-system/organisms/masthead/Masthead.stories.tsx
similarity index 83%
rename from src/design-system/organisms/masthead/Masthead.stories.tsx
rename to packages/design-system/organisms/masthead/Masthead.stories.tsx
index bba1b9b..60f5468 100644
--- a/src/design-system/organisms/masthead/Masthead.stories.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { guild, mastheadSlugs, user } from 'roleypoly/common/types/storyData';
+import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
import { Authed } from './Authed';
import { Guest } from './Guest';
diff --git a/src/design-system/organisms/masthead/Masthead.styled.tsx b/packages/design-system/organisms/masthead/Masthead.styled.tsx
similarity index 89%
rename from src/design-system/organisms/masthead/Masthead.styled.tsx
rename to packages/design-system/organisms/masthead/Masthead.styled.tsx
index a466d96..67ed556 100644
--- a/src/design-system/organisms/masthead/Masthead.styled.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.styled.tsx
@@ -1,6 +1,6 @@
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
export const MastheadBase = styled.div`
diff --git a/src/design-system/organisms/masthead/index.ts b/packages/design-system/organisms/masthead/index.ts
similarity index 100%
rename from src/design-system/organisms/masthead/index.ts
rename to packages/design-system/organisms/masthead/index.ts
diff --git a/src/design-system/organisms/preauth/Preauth.stories.tsx b/packages/design-system/organisms/preauth/Preauth.stories.tsx
similarity index 92%
rename from src/design-system/organisms/preauth/Preauth.stories.tsx
rename to packages/design-system/organisms/preauth/Preauth.stories.tsx
index f2dbadc..9b50bb7 100644
--- a/src/design-system/organisms/preauth/Preauth.stories.tsx
+++ b/packages/design-system/organisms/preauth/Preauth.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { guild } from 'roleypoly/common/types/storyData';
import styled from 'styled-components';
+import { guild } from '../../fixtures/storyData';
import { Preauth } from './Preauth';
export default {
diff --git a/src/design-system/organisms/preauth/Preauth.tsx b/packages/design-system/organisms/preauth/Preauth.tsx
similarity index 78%
rename from src/design-system/organisms/preauth/Preauth.tsx
rename to packages/design-system/organisms/preauth/Preauth.tsx
index cf412e7..6e2130a 100644
--- a/src/design-system/organisms/preauth/Preauth.tsx
+++ b/packages/design-system/organisms/preauth/Preauth.tsx
@@ -1,10 +1,9 @@
-import Link from 'next/link';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { PreauthGreeting } from '@roleypoly/design-system/molecules/preauth-greeting';
import * as React from 'react';
import { FaDiscord } from 'react-icons/fa';
-import { GuildSlug } from 'roleypoly/common/types';
-import { Button } from 'roleypoly/design-system/atoms/button';
-import { PreauthGreeting } from 'roleypoly/design-system/molecules/preauth-greeting';
import styled from 'styled-components';
+import { GuildSlug } from '../../../../src/common/types';
export type PreauthProps = {
guildSlug?: GuildSlug;
@@ -33,7 +32,7 @@ export const Preauth = (props: PreauthProps) => {
{props.guildSlug && }
-
+
-
+
);
diff --git a/src/design-system/organisms/preauth/index.ts b/packages/design-system/organisms/preauth/index.ts
similarity index 100%
rename from src/design-system/organisms/preauth/index.ts
rename to packages/design-system/organisms/preauth/index.ts
diff --git a/src/design-system/organisms/role-picker/RolePicker.spec.tsx b/packages/design-system/organisms/role-picker/RolePicker.spec.tsx
similarity index 68%
rename from src/design-system/organisms/role-picker/RolePicker.spec.tsx
rename to packages/design-system/organisms/role-picker/RolePicker.spec.tsx
index d09c907..bcf6bc7 100644
--- a/src/design-system/organisms/role-picker/RolePicker.spec.tsx
+++ b/packages/design-system/organisms/role-picker/RolePicker.spec.tsx
@@ -1,8 +1,11 @@
-jest.unmock('roleypoly/design-system/atoms/role')
- .unmock('roleypoly/design-system/atoms/button')
- .unmock('roleypoly/design-system/molecules/picker-category')
- .unmock('roleypoly/design-system/organisms/role-picker');
+jest.unmock('@roleypoly/design-system/atoms/role')
+ .unmock('@roleypoly/design-system/atoms/button')
+ .unmock('@roleypoly/design-system/molecules/picker-category')
+ .unmock('@roleypoly/design-system/organisms/role-picker');
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
+import { ResetSubmit } from '@roleypoly/design-system/molecules/reset-submit';
import { shallow } from 'enzyme';
import * as React from 'react';
import {
@@ -12,10 +15,7 @@ import {
mockCategorySingle,
roleCategory,
roleCategory2,
-} from 'roleypoly/common/types/storyData';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { PickerCategory } from 'roleypoly/design-system/molecules/picker-category';
-import { ResetSubmit } from 'roleypoly/design-system/molecules/reset-submit';
+} from '../../fixtures/storyData';
import { RolePicker, RolePickerProps } from './RolePicker';
it('unselects the rest of a category in single mode', () => {
diff --git a/src/design-system/organisms/role-picker/RolePicker.stories.tsx b/packages/design-system/organisms/role-picker/RolePicker.stories.tsx
similarity index 96%
rename from src/design-system/organisms/role-picker/RolePicker.stories.tsx
rename to packages/design-system/organisms/role-picker/RolePicker.stories.tsx
index bf95622..e34367a 100644
--- a/src/design-system/organisms/role-picker/RolePicker.stories.tsx
+++ b/packages/design-system/organisms/role-picker/RolePicker.stories.tsx
@@ -5,7 +5,7 @@ import {
member,
roleCategory,
roleCategory2,
-} from 'roleypoly/common/types/storyData';
+} from '../../fixtures/storyData';
import { RolePicker, RolePickerProps } from './RolePicker';
const props: Partial = {
diff --git a/src/design-system/organisms/role-picker/RolePicker.styled.tsx b/packages/design-system/organisms/role-picker/RolePicker.styled.tsx
similarity index 90%
rename from src/design-system/organisms/role-picker/RolePicker.styled.tsx
rename to packages/design-system/organisms/role-picker/RolePicker.styled.tsx
index b4dfc7f..ec40c58 100644
--- a/src/design-system/organisms/role-picker/RolePicker.styled.tsx
+++ b/packages/design-system/organisms/role-picker/RolePicker.styled.tsx
@@ -1,4 +1,4 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
export const Container = styled.div``;
diff --git a/src/design-system/organisms/role-picker/RolePicker.tsx b/packages/design-system/organisms/role-picker/RolePicker.tsx
similarity index 84%
rename from src/design-system/organisms/role-picker/RolePicker.tsx
rename to packages/design-system/organisms/role-picker/RolePicker.tsx
index 5461317..3654c06 100644
--- a/src/design-system/organisms/role-picker/RolePicker.tsx
+++ b/packages/design-system/organisms/role-picker/RolePicker.tsx
@@ -1,5 +1,10 @@
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { Link } from '@roleypoly/design-system/atoms/typography';
+import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
+import { ResetSubmit } from '@roleypoly/design-system/molecules/reset-submit';
+import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
import { isEqual, xor } from 'lodash';
-import NextLink from 'next/link';
import * as React from 'react';
import { GoInfo } from 'react-icons/go';
import {
@@ -9,15 +14,9 @@ import {
GuildSlug,
Member,
Role,
-} from 'roleypoly/common/types';
-import { ReactifyNewlines } from 'roleypoly/common/utils/ReactifyNewlines';
-import { sortBy } from 'roleypoly/common/utils/sortBy';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { Link } from 'roleypoly/design-system/atoms/typography';
-import { PickerCategory } from 'roleypoly/design-system/molecules/picker-category';
-import { ResetSubmit } from 'roleypoly/design-system/molecules/reset-submit';
-import { ServerMasthead } from 'roleypoly/design-system/molecules/server-masthead';
+} from '../../../../src/common/types';
+import { ReactifyNewlines } from '../../../../src/common/utils/ReactifyNewlines';
+import { sortBy } from '../../../../src/common/utils/sortBy';
import {
CategoryContainer,
Container,
@@ -139,13 +138,9 @@ export const RolePicker = (props: RolePickerProps) => {
{props.editable && (
<>
{' '}
-
+
Add some roles!
-
+
>
)}
diff --git a/src/design-system/organisms/role-picker/index.ts b/packages/design-system/organisms/role-picker/index.ts
similarity index 100%
rename from src/design-system/organisms/role-picker/index.ts
rename to packages/design-system/organisms/role-picker/index.ts
diff --git a/src/design-system/organisms/server-setup/ServerSetup.stories.tsx b/packages/design-system/organisms/server-setup/ServerSetup.stories.tsx
similarity index 81%
rename from src/design-system/organisms/server-setup/ServerSetup.stories.tsx
rename to packages/design-system/organisms/server-setup/ServerSetup.stories.tsx
index 0d61e98..ed4b477 100644
--- a/src/design-system/organisms/server-setup/ServerSetup.stories.tsx
+++ b/packages/design-system/organisms/server-setup/ServerSetup.stories.tsx
@@ -1,5 +1,5 @@
-import { UserGuildPermissions } from 'roleypoly/common/types';
-import { mastheadSlugs } from 'roleypoly/common/types/storyData';
+import { UserGuildPermissions } from '../../../../src/common/types';
+import { mastheadSlugs } from '../../fixtures/storyData';
import { ServerSetup } from './ServerSetup';
export default {
diff --git a/src/design-system/organisms/server-setup/ServerSetup.styled.ts b/packages/design-system/organisms/server-setup/ServerSetup.styled.ts
similarity index 100%
rename from src/design-system/organisms/server-setup/ServerSetup.styled.ts
rename to packages/design-system/organisms/server-setup/ServerSetup.styled.ts
diff --git a/src/design-system/organisms/server-setup/ServerSetup.tsx b/packages/design-system/organisms/server-setup/ServerSetup.tsx
similarity index 69%
rename from src/design-system/organisms/server-setup/ServerSetup.tsx
rename to packages/design-system/organisms/server-setup/ServerSetup.tsx
index 7aba5c4..28b4943 100644
--- a/src/design-system/organisms/server-setup/ServerSetup.tsx
+++ b/packages/design-system/organisms/server-setup/ServerSetup.tsx
@@ -1,15 +1,13 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { DotOverlay } from '@roleypoly/design-system/atoms/dot-overlay';
+import { Hero } from '@roleypoly/design-system/atoms/hero';
+import { AccentTitle, SmallTitle } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import { FaDiscord } from 'react-icons/fa';
import { GoArrowLeft } from 'react-icons/go';
-import { GuildSlug, UserGuildPermissions } from 'roleypoly/common/types';
-import { evaluatePermission } from 'roleypoly/common/utils/hasPermission';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
-import { Button } from 'roleypoly/design-system/atoms/button';
-import { DotOverlay } from 'roleypoly/design-system/atoms/dot-overlay';
-import { Hero } from 'roleypoly/design-system/atoms/hero';
-import { AccentTitle, SmallTitle } from 'roleypoly/design-system/atoms/typography';
+import { GuildSlug, UserGuildPermissions } from '../../../../src/common/types';
+import { evaluatePermission } from '../../../../src/common/utils/hasPermission';
import { FlexLine, FlexWrap } from './ServerSetup.styled';
export type ServerSetupProps = {
@@ -65,13 +63,11 @@ const adminMessage = (id: string) => (
>
@@ -86,20 +82,17 @@ const managerMessage = (id: string) => (
>
);
const userMessage = (name: string) => {
- const router = useRouter();
return (
<>
@@ -110,7 +103,7 @@ const userMessage = (name: string) => {