diff --git a/hack/fixtures/BUILD.bazel b/hack/fixtures/BUILD.bazel deleted file mode 100644 index e512301..0000000 --- a/hack/fixtures/BUILD.bazel +++ /dev/null @@ -1,12 +0,0 @@ -load("//:hack/react.bzl", "react_library") - -package(default_visibility = ["//visibility:public"]) - -react_library( - name = "fixtures", - deps = [ - "//src/rpc/discord", - "//src/rpc/platform", - "//src/rpc/shared", - ], -) diff --git a/hack/fixtures/storyData.ts b/hack/fixtures/storyData.ts deleted file mode 100644 index 0a029f1..0000000 --- a/hack/fixtures/storyData.ts +++ /dev/null @@ -1,237 +0,0 @@ -import { Member } from 'roleypoly/src/rpc/discord'; -import { Category, GuildData, GuildEnumeration } from 'roleypoly/src/rpc/platform'; -import { - DiscordUser, - Guild, - GuildRoles, - Role, - RoleypolyUser, -} from 'roleypoly/src/rpc/shared'; - -export const roleCategory: Role.AsObject[] = [ - { - id: 'aaa', - permissions: 0, - name: 'She/Her', - color: 0xffc0cb, - position: 1, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'bbb', - permissions: 0, - name: 'He/Him', - color: 0xc0ebff, - position: 2, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'ccc', - permissions: 0, - name: 'They/Them', - color: 0xc0ffd5, - position: 3, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'ddd', - permissions: 0, - name: 'Reee', - color: 0xff0000, - position: 4, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'eee', - permissions: 0, - name: 'black but actually bravely default', - color: 0x000000, - position: 5, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'fff', - permissions: 0, - name: 'b̻͌̆̽ͣ̃ͭ̊l͚̥͙̔ͨ̊aͥć͕k͎̟͍͕ͥ̋ͯ̓̈̉̋i͛̄̔͂̚̚҉̳͈͔̖̼̮ṣ̤̗̝͊̌͆h͈̭̰͔̥̯ͅ', - color: 0x1, - position: 6, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'unsafe1', - permissions: 0, - name: 'too high', - color: 0xff0088, - position: 7, - managed: false, - safety: Role.RoleSafety.HIGHERTHANBOT, - }, - { - id: 'unsafe2', - permissions: 0x00000008 | 0x10000000, - name: 'too strong', - color: 0x00ff88, - position: 8, - managed: false, - safety: Role.RoleSafety.DANGEROUSPERMISSIONS, - }, -]; - -export const mockCategory: Category.AsObject = { - id: 'aaa', - name: 'Mock', - rolesList: roleCategory.map((x) => x.id), - hidden: false, - type: Category.CategoryType.MULTI, - position: 0, -}; - -export const roleCategory2: Role.AsObject[] = [ - { - id: 'ddd2', - permissions: 0, - name: 'red', - color: 0xff0000, - position: 9, - managed: false, - safety: Role.RoleSafety.SAFE, - }, - { - id: 'eee2', - permissions: 0, - name: 'green', - color: 0x00ff00, - position: 10, - managed: false, - safety: Role.RoleSafety.SAFE, - }, -]; - -export const mockCategorySingle: Category.AsObject = { - id: 'bbb', - name: 'Mock Single 岡野', - rolesList: roleCategory2.map((x) => x.id), - hidden: false, - type: Category.CategoryType.SINGLE, - position: 0, -}; - -export const guildRoles: GuildRoles.AsObject = { - id: 'aaa', - rolesList: [...roleCategory, ...roleCategory2], -}; - -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.AsObject = { - name: 'emoji megaporium', - id: 'aaa', - icon: - 'https://cdn.discordapp.com/icons/421896162539470888/3372fd895ed913b55616c5e49cd50e60.png?size=256', - ownerid: 'bbb', - membercount: 23453, - splash: '', -}; - -export const guildMap: { [x: string]: Guild.AsObject } = { - 'emoji megaporium': guild, - Roleypoly: { - name: 'Roleypoly', - id: 'aaa', - icon: - 'https://cdn.discordapp.com/icons/203493697696956418/ff08d36f5aee1ff48f8377b65d031ab0.png?size=256', - ownerid: 'bbb', - membercount: 23453, - splash: '', - }, - 'chamber of secrets': { - name: 'chamber of secrets', - id: 'aaa', - icon: '', - ownerid: 'bbb', - membercount: 23453, - splash: '', - }, - Eclipse: { - name: 'Eclipse', - id: 'aaa', - icon: - 'https://cdn.discordapp.com/icons/408821059161423873/49dfdd8b2456e2977e80a8b577b19c0d.png?size=256', - ownerid: 'bbb', - membercount: 23453, - splash: '', - }, -}; - -export const guildData: GuildData.AsObject = { - id: 'aaa', - message: 'henlo worl!!', - categoriesList: [mockCategory, mockCategorySingle], - entitlementsList: [], -}; - -export const user: DiscordUser.AsObject = { - id: '123', - username: 'okano cat', - discriminator: '3266', - avatar: - 'https://cdn.discordapp.com/avatars/62601275618889728/b1292bb974557337702cb941fc038085.png', - bot: false, -}; - -export const member: Member.AsObject = { - guildid: 'aaa', - rolesList: ['aaa', 'eee', 'unsafe2', 'ddd2'], - nick: 'okano cat', - user: user, -}; - -export const rpUser: RoleypolyUser.AsObject = { - discorduser: user, -}; - -export const guildEnum: GuildEnumeration.AsObject = { - guildsList: [ - { - id: 'aaa', - guild: guildMap['emoji megaporium'], - member, - data: guildData, - roles: guildRoles, - }, - { - id: 'bbb', - guild: guildMap['Roleypoly'], - member: { - ...member, - rolesList: ['unsafe2'], - }, - data: guildData, - roles: guildRoles, - }, - { - id: 'ccc', - guild: guildMap['chamber of secrets'], - member, - data: guildData, - roles: guildRoles, - }, - { - id: 'ddd', - guild: guildMap['Eclipse'], - member, - data: guildData, - roles: guildRoles, - }, - ], -}; diff --git a/hack/utils.bzl b/hack/utils.bzl index fe91aea..7406b3a 100644 --- a/hack/utils.bzl +++ b/hack/utils.bzl @@ -14,7 +14,7 @@ def render_deps(deps = []): "@npm//@improbable-eng/grpc-web", ]) has_added_grpc_deps = True - elif dep.startswith("//"): + elif dep.startswith("//") or dep.startswith("@npm//"): output_deps.append(dep) else: output_deps.append("@npm//" + dep) diff --git a/package.json b/package.json index 657ebbe..2ffa56a 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react": "16.13.1", "react-dom": "16.13.1", "react-icons": "^3.11.0", + "react-tooltip": "^4.2.10", "styled-components": "^5.2.0" }, "devDependencies": { diff --git a/src/design-system/atoms/tab-view/BUILD.bazel b/src/design-system/atoms/tab-view/BUILD.bazel index 401854a..f4977ef 100644 --- a/src/design-system/atoms/tab-view/BUILD.bazel +++ b/src/design-system/atoms/tab-view/BUILD.bazel @@ -1,4 +1,5 @@ load("//:hack/react.bzl", "react_library") +load("//:hack/jest.bzl", "jest_test") package(default_visibility = ["//visibility:public"]) @@ -14,3 +15,7 @@ react_library( "@types/styled-components", ], ) + +jest_test( + src = ":tab-view", +) diff --git a/src/design-system/atoms/typist/BUILD.bazel b/src/design-system/atoms/typist/BUILD.bazel index 9ca7765..2680a6b 100644 --- a/src/design-system/atoms/typist/BUILD.bazel +++ b/src/design-system/atoms/typist/BUILD.bazel @@ -4,7 +4,7 @@ load("//:hack/jest.bzl", "jest_test") package(default_visibility = ["//visibility:public"]) react_library( - name = "timings", + name = "typist", deps = [ "react", "@types/react", @@ -12,5 +12,5 @@ react_library( ) jest_test( - src = ":timings", + src = ":typist", ) diff --git a/src/design-system/molecules/demo-discord/BUILD.bazel b/src/design-system/molecules/demo-discord/BUILD.bazel new file mode 100644 index 0000000..7f9a69d --- /dev/null +++ b/src/design-system/molecules/demo-discord/BUILD.bazel @@ -0,0 +1,16 @@ +load("//:hack/react.bzl", "react_library") + +package(default_visibility = ["//visibility:public"]) + +react_library( + name = "demo-discord", + deps = [ + "react", + "styled-components", + "//src/design-system/atoms/colors", + "//src/design-system/atoms/typist", + "//src/design-system/shared-types", + "@types/react", + "@types/styled-components", + ], +) diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.stories.tsx b/src/design-system/molecules/demo-discord/DemoDiscord.stories.tsx new file mode 100644 index 0000000..593c352 --- /dev/null +++ b/src/design-system/molecules/demo-discord/DemoDiscord.stories.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { DemoDiscord } from './DemoDiscord'; + +export default { + title: 'Molecules/Role Demos', +}; + +export const Discord = () => ; diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.story.tsx b/src/design-system/molecules/demo-discord/DemoDiscord.story.tsx deleted file mode 100644 index 601267d..0000000 --- a/src/design-system/molecules/demo-discord/DemoDiscord.story.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { moleculeStories } from 'molecules/molecules.story'; -import * as React from 'react'; -import { DemoDiscord } from './DemoDiscord'; - -const story = moleculeStories('Landing Demos', module); - -story.add('Discord', () => ); diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts b/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts index b0c2c72..fb1e068 100644 --- a/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts +++ b/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts @@ -1,5 +1,6 @@ import styled, { keyframes } from 'styled-components'; -import { palette } from 'atoms/colors'; +import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports +import { palette } from 'roleypoly/src/design-system/atoms/colors'; export const Base = styled.div` background-color: ${palette.discord100}; diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.tsx b/src/design-system/molecules/demo-discord/DemoDiscord.tsx index 5b207c3..c3b7139 100644 --- a/src/design-system/molecules/demo-discord/DemoDiscord.tsx +++ b/src/design-system/molecules/demo-discord/DemoDiscord.tsx @@ -8,8 +8,8 @@ import { Line, InputTextAlignment, } from './DemoDiscord.styled'; -import { demoData } from 'hack/fixtures/demoData'; -import { Typist } from 'atoms/typist'; +import { demoData } from 'roleypoly/src/design-system/shared-types/demoData'; +import { Typist } from 'roleypoly/src/design-system/atoms/typist'; export const DemoDiscord = () => { const time = new Date(); diff --git a/src/design-system/molecules/demo-picker/BUILD.bazel b/src/design-system/molecules/demo-picker/BUILD.bazel new file mode 100644 index 0000000..4f825fb --- /dev/null +++ b/src/design-system/molecules/demo-picker/BUILD.bazel @@ -0,0 +1,15 @@ +load("//:hack/react.bzl", "react_library") + +package(default_visibility = ["//visibility:public"]) + +react_library( + name = "demo-picker", + deps = [ + "react", + "styled-components", + "//src/design-system/atoms/role", + "//src/design-system/shared-types", + "@types/react", + "@types/styled-components", + ], +) diff --git a/src/design-system/molecules/demo-picker/DemoPicker.stories.tsx b/src/design-system/molecules/demo-picker/DemoPicker.stories.tsx new file mode 100644 index 0000000..9d1260f --- /dev/null +++ b/src/design-system/molecules/demo-picker/DemoPicker.stories.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { DemoPicker } from './DemoPicker'; + +export default { + title: 'Molecules/Role Demos', +}; + +export const Picker = () => ; diff --git a/src/design-system/molecules/demo-picker/DemoPicker.story.tsx b/src/design-system/molecules/demo-picker/DemoPicker.story.tsx deleted file mode 100644 index 6411423..0000000 --- a/src/design-system/molecules/demo-picker/DemoPicker.story.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import { moleculeStories } from 'molecules/molecules.story'; -import { DemoPicker } from './DemoPicker'; - -const story = moleculeStories('Landing Demos', module); - -story.add('Picker', () => ); diff --git a/src/design-system/molecules/demo-picker/DemoPicker.tsx b/src/design-system/molecules/demo-picker/DemoPicker.tsx index 5137e86..a4b502a 100644 --- a/src/design-system/molecules/demo-picker/DemoPicker.tsx +++ b/src/design-system/molecules/demo-picker/DemoPicker.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { Role } from 'atoms/role'; -import { Role as RPCRole } from '@roleypoly/rpc/shared'; +import { Role } from 'roleypoly/src/design-system/atoms/role'; +import { Role as RPCRole } from 'roleypoly/src/design-system/shared-types'; import styled from 'styled-components'; -import { demoData } from 'hack/fixtures/demoData'; +import { demoData } from 'roleypoly/src/design-system/shared-types/demoData'; const Container = styled.div` display: flex; @@ -21,7 +21,7 @@ const RoleWrap = styled.div` export const DemoPicker = () => { const [selectedStates, setSelectedStates] = React.useState< { - [key in RPCRole.AsObject['id']]: boolean; + [key in RPCRole['id']]: boolean; } >(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {})); diff --git a/src/design-system/molecules/footer/BUILD.bazel b/src/design-system/molecules/footer/BUILD.bazel new file mode 100644 index 0000000..fc0a77a --- /dev/null +++ b/src/design-system/molecules/footer/BUILD.bazel @@ -0,0 +1,17 @@ +load("//:hack/react.bzl", "react_library") + +package(default_visibility = ["//visibility:public"]) + +react_library( + name = "footer", + deps = [ + "react", + "react-icons", + "styled-components", + "//src/design-system/atoms/colors", + "//src/design-system/atoms/timings", + "//src/design-system/atoms/typography", + "@types/react", + "@types/styled-components", + ], +) diff --git a/src/design-system/molecules/footer/Footer.stories.tsx b/src/design-system/molecules/footer/Footer.stories.tsx new file mode 100644 index 0000000..a7904bb --- /dev/null +++ b/src/design-system/molecules/footer/Footer.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import { Footer as FooterComponent } from './Footer'; + +export default { + title: 'Molecules', + component: FooterComponent, +}; + +export const Footer = (args) => ; diff --git a/src/design-system/molecules/footer/Footer.story.tsx b/src/design-system/molecules/footer/Footer.story.tsx deleted file mode 100644 index 20c6f0d..0000000 --- a/src/design-system/molecules/footer/Footer.story.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import { moleculeStories } from 'molecules/molecules.story'; -import { Footer } from './Footer'; - -const story = moleculeStories('Footer', module); - -story.add('Basic', () =>