chore: restructure project into yarn workspaces, remove next

packages/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { HelpStoryWrapper } from '../../molecules/help-page-base/storyDecorator';
+import { WhyNoRoles } from './WhyNoRoles';
+
+export default {
+    title: 'Organisms/Help Pages',
+    decorators: [HelpStoryWrapper],
+};
+
+export const WhyNoRoles_ = () => <WhyNoRoles />;

packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts

@@ -0,0 +1,39 @@
+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};
+    border: solid 1px rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+    padding: 10px;
+    user-select: none;
+    width: 250px;
+`;
+
+const hover = (roleColor: string) => css`
+    color: #efefef;
+    background-color: ${roleColor};
+    cursor: pointer;
+`;
+
+export const DiscordRole = styled.div<{
+    discordRole: Role;
+    isRoleypoly: boolean;
+}>`
+    /* stylelint-disable function-name-case, function-whitespace-after */
+
+    /* Disabled due to postcss bug parsing the below functions as CSS and not a JS interpolation */
+
+    padding: 6px 10px;
+    color: ${(props) => numberToChroma(props.discordRole.color).css()};
+    border-radius: 3px;
+
+    :hover {
+        ${(props) => hover(numberToChroma(props.discordRole.color).alpha(0.5).css())}
+    }
+
+    ${(props) =>
+        props.isRoleypoly &&
+        hover(numberToChroma(props.discordRole.color).alpha(0.5).css())}
+`;

packages/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx

@@ -0,0 +1,83 @@
+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 '../../../../src/common/types';
+import { demoData } from '../../../../src/common/types/demoData';
+import { DiscordBase, DiscordRole } from './WhyNoRoles.styled';
+
+const adminRoles: Role[] = [
+    {
+        id: 'roley2',
+        name: 'Admin',
+        permissions: '0',
+        color: chroma('hotpink').num(),
+        position: -1,
+        managed: true,
+        safety: 0,
+    },
+    {
+        id: 'roley3',
+        name: 'Moderator',
+        permissions: '0',
+        color: chroma('lime').num(),
+        position: -1,
+        managed: true,
+        safety: 0,
+    },
+];
+
+const roleypolyRole: Role = {
+    id: 'roley',
+    name: 'Roleypoly',
+    permissions: '0',
+    color: chroma(palette.taupe500).num(),
+    position: -1,
+    managed: true,
+    safety: 0,
+};
+
+const goodRoles = [...adminRoles, roleypolyRole, ...demoData];
+
+const badRoles = [...adminRoles, ...demoData, roleypolyRole];
+
+const MaybeWithOverlay = (props: { children: React.ReactNode; withOverlay: boolean }) => {
+    if (props.withOverlay) {
+        return (
+            <SparkleOverlay size={-5} repeatCount={10}>
+                {props.children}
+            </SparkleOverlay>
+        );
+    } else {
+        return <>{props.children}</>;
+    }
+};
+
+const Example = (props: { roles: Role[]; isGood: boolean }) => (
+    <div>
+        <DiscordBase>
+            {props.roles.map((r) => (
+                <MaybeWithOverlay withOverlay={props.isGood && r.name === 'Roleypoly'}>
+                    <DiscordRole discordRole={r} isRoleypoly={r.name === 'Roleypoly'}>
+                        {r.name}
+                    </DiscordRole>
+                </MaybeWithOverlay>
+            ))}
+        </DiscordBase>
+    </div>
+);
+
+export const WhyNoRoles = () => (
+    <HalfsiesContainer>
+        <HalfsiesItem>
+            <FaCheck /> Good
+            <Example isGood roles={goodRoles} />
+        </HalfsiesItem>
+        <HalfsiesItem>
+            <FaTimes /> Baddd
+            <Example isGood={false} roles={badRoles} />
+        </HalfsiesItem>
+    </HalfsiesContainer>
+);

packages/design-system/organisms/help-why-no-roles/index.ts

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