Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Mock Browser#168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
You-J wants to merge22 commits intostaging
base:staging
Choose a base branch
Loading
from@ui/mock-browser
Draft
Show file tree
Hide file tree
Changes from13 commits
Commits
Show all changes
22 commits
Select commitHold shift + click to select a range
7b4d1c8
setup structure
You-JOct 9, 2021
6cc4ca3
update readme
You-JOct 9, 2021
f40aa14
set storybook for component
You-JOct 9, 2021
0868ced
update directory names
softmarshmallowOct 9, 2021
c1fbac2
add global show / hide navigation animation by preview scroll
softmarshmallowOct 9, 2021
9cb8135
adjust animation
softmarshmallowOct 9, 2021
4f58c4b
stash add component using storybook
You-JOct 9, 2021
baf7622
add scroll anim trigger to code area & add 2line tab under root nav app
softmarshmallowOct 9, 2021
6b7058a
shadow on only code preview screen
softmarshmallowOct 9, 2021
50b30e5
Merge pull request #167 from gridaco/app-navigation
softmarshmallowOct 9, 2021
97c8c33
update root scripts
softmarshmallowOct 9, 2021
38a1d4c
fix storybook issue
You-JOct 9, 2021
9575cd1
fix storybook emotion version issue
You-JOct 9, 2021
4ad55b6
add storybook root
You-JOct 9, 2021
66f7cdb
add refresh btn
You-JOct 9, 2021
9d94a2f
rename
You-JOct 9, 2021
48f42c1
add component index
You-JOct 9, 2021
4cf0316
add address bar
You-JOct 9, 2021
1e970d9
stash add browser bar
You-JOct 9, 2021
2f809f8
Merge branch '@ui/mock-browser' of https://github.com/gridaco/assista…
You-JOct 9, 2021
cc394da
stash add attr in browser-bar
You-JOct 10, 2021
bcef2a9
fix unconfirmed design invisible
You-JOct 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions.storybook/main.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,43 @@
// https://stackoverflow.com/a/65970945/12377179

constpath=require("path");
constfs=require("fs");

functiongetPackageDir(filepath){
letcurrDir=path.dirname(require.resolve(filepath));
while(true){
if(fs.existsSync(path.join(currDir,"package.json"))){
returncurrDir;
}
const{ dir, root}=path.parse(currDir);
if(dir===root){
thrownewError(
`Could not find package.json in the parent directories starting from${filepath}.`
);
}
currDir=dir;
}
}

module.exports={
stories:[
"../app/lib/components/**/*.stories.mdx",
"../app/lib/components/**/*.stories.@(js|jsx|ts|tsx)",
"**/*.stories.mdx",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

You can't do this.

pacakages/submoule-package/**/*.stories.mdx from another repository will also be included. we don't want this

"**/*.stories.@(js|jsx|ts|tsx)",
],
addons:["@storybook/addon-links","@storybook/addon-essentials"],

webpackFinal:async(config)=>({
...config,
resolve:{
...config.resolve,
alias:{
...config.resolve.alias,
"@emotion/core":getPackageDir("@emotion/react"),
"@emotion/styled":getPackageDir("@emotion/styled"),
"emotion-theming":getPackageDir("@emotion/react"),
},
},
}),
};
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletionspackages/ui-mock-browser/.storybook/main.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
// https://stackoverflow.com/a/65970945/12377179

const path = require("path");
const fs = require("fs");

function getPackageDir(filepath) {
let currDir = path.dirname(require.resolve(filepath));
while (true) {
if (fs.existsSync(path.join(currDir, "package.json"))) {
return currDir;
}
const { dir, root } = path.parse(currDir);
if (dir === root) {
throw new Error(
`Could not find package.json in the parent directories starting from ${filepath}.`
);
}
currDir = dir;
}
}

module.exports = {
stories: [
"../components/**/*.stories.mdx",
"../components/**/*.stories.@(js|jsx|ts|tsx)",
"../**/*.stories.mdx",
"../**/*.stories.@(js|jsx|ts|tsx)",
],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],

webpackFinal: async (config) => ({
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
"@emotion/core": getPackageDir("@emotion/react"),
"@emotion/styled": getPackageDir("@emotion/styled"),
"emotion-theming": getPackageDir("@emotion/react"),
},
},
}),
};
10 changes: 10 additions & 0 deletionspackages/ui-mock-browser/.storybook/preview.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
3 changes: 3 additions & 0 deletionspackages/ui-mock-browser/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
# `@ui/mock-browser`

![](./.design/design-example.png)
16 changes: 16 additions & 0 deletionspackages/ui-mock-browser/browser-bar/browser-bar.stories.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { BrowserBar } from "../browser-bar";

<Meta title="browser-bar" />

# Preview

<Preview>
<Story name="based">
<div style={{ height: "50px", width: "100vw" }}>
<BrowserBar />
</div>
</Story>
</Preview>

# Props
111 changes: 111 additions & 0 deletionspackages/ui-mock-browser/browser-bar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { AddressBar, BrowserNavigationBfButtonGroup } from "../components";

interface BrowserBarProps {
history?: any;
}

// FIXME: handling xl xs size default xl
export function BrowserBar() {
return (
<Wrapper>
<BrowserNavigationBfButtonGroupWrap>
<BrowserNavigationBfButtonGroup
forwardEnable={true}
backEnable={true}
handleClick={(isBack) => {
console.log(isBack);
}}
/>
</BrowserNavigationBfButtonGroupWrap>
<AddressBarWrap>
<AddressBar
address="loading..."
icon={
<img
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/76df/255d/0979e7ab815d6ca528f8d9dcd1781acf"
alt="icon"
/>
}
onRefreshClick={() => console.log("click refresh")}
/>
</AddressBarWrap>
<Trailing>
<IconsMdiIosShare
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/da99/bb53/d07b48d9862132562382bf46a02ca50a"
alt="image of IconsMdiIosShare"
></IconsMdiIosShare>
<IconsMdiAdd
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/e318/b488/9d87f48c0287cd06fb9565de35a44892"
alt="image of IconsMdiAdd"
></IconsMdiAdd>
</Trailing>
</Wrapper>
);
}

const Wrapper = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 351px;
min-height: 100vh;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 12px 16px;
`;

const BrowserNavigationBfButtonGroupWrap = styled.div`
display: flex;
justify-content: flex-start;
align-items: start;
flex: none;
gap: 0;
box-sizing: border-box;
`;

const AddressBarWrap = styled.div`
min-width: min-content;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 24px;
background-color: rgba(216, 215, 216, 1);
border-radius: 6px;
position: relative;
`;

const Trailing = styled.div`
width: 52px;
height: 20px;
position: relative;
`;

const IconsMdiIosShare = styled.img`
object-fit: cover;
position: absolute;
left: 0px;
top: 0px;
right: 32px;
bottom: 0px;
`;

const IconsMdiAdd = styled.img`
object-fit: cover;
position: absolute;
left: 32px;
top: 0px;
right: 0px;
bottom: 0px;
`;

const Wrap = styled.div`
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 12px 16px;
`;
16 changes: 16 additions & 0 deletionspackages/ui-mock-browser/components/address-bar.stories.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { AddressBar } from "./address-bar";

<Meta title="component/address-bar" />

# Preview

<Preview>
<Story name="based">
<div style={{ height: "30px" }}>
<AddressBar />
</div>
</Story>
</Preview>

# Props
70 changes: 70 additions & 0 deletionspackages/ui-mock-browser/components/address-bar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
import React, { ReactNode } from "react";
import styled from "@emotion/styled";
import { RefreshButton } from "./refresh-button";
import { MoreHoriz } from "./more-horiz";

interface AddressBarProps {
address: string;
icon?: ReactNode;
onRefreshClick: () => void;
}

export function AddressBar(props: AddressBarProps) {
return (
<Wrapper>
<Frame168>
<RefreshButton onClick={props.onRefreshClick} />
<MoreHoriz />
</Frame168>
<Frame167>
{props.icon}
<Address>{props.address}</Address>
</Frame167>
</Wrapper>
);
}

const Wrapper = styled.div`
height: 100%;
width: 100%;
background-color: rgba(216, 215, 216, 1);
border-radius: 6px;
position: relative;
`;

const Frame168 = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
gap: 7px;
position: absolute;
top: calc(50% - 8px);
right: 10px;
`;

const Frame167 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: start;
gap: 6px;
box-sizing: border-box;
position: absolute;
left: calc(50% - 36px);
top: calc(50% - 7px);
`;

const BrowserTabsIndicationPlaceholder = styled.img`
object-fit: cover;
`;

const Address = styled.span`
color: rgba(0, 0, 0, 1);
text-overflow: ellipsis;
font-size: 12px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
line-height: 100%;
text-align: center;
`;
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import {
BrowserNavigationBfButton,
BrowserNavigationBfButtonGroup,
} from "./browser-navigation-bf-button-group";

<Meta title="component/browser-navigation-bf-button-group" />

# Preview

<Preview>
<Story name="forward">
<BrowserNavigationBfButton
hasHistory={true}
onClick={(isBack) => {
console.log(isBack);
}}
/>
</Story>
<Story name="back">
<BrowserNavigationBfButton
isBack={true}
hasHistory={true}
onClick={(isBack) => {
console.log(isBack);
}}
/>
</Story>
<Story name="no history">
<BrowserNavigationBfButton
isBack={false}
hasHistory={false}
onClick={(isBack) => {
console.log(isBack);
}}
/>
<BrowserNavigationBfButton
isBack={true}
hasHistory={false}
onClick={(isBack) => {
console.log(isBack);
}}
/>
</Story>
<Story name="group">
<BrowserNavigationBfButtonGroup
forwardEnable={true}
backEnable={true}
handleClick={(isBack) => {
console.log(isBack);
}}
/>
</Story>
</Preview>

# Props
Loading
[8]ページ先頭
©2009-2025 Movatter.jp