@rookies-team/design v0.25.4
Rookies Design System
Usage
install @rookies-team/design
package
yarn add @rookies-team/design
import component from @rookies-team/design
package
import '@rookies-team/design/style.css';
import { Button } from '@rookies-team/design';
export default function App() {
return <Button>Button</Button>;
}
Development
yarn dev
This runs a local web server with the built code.yarn build
This builds the code indist
.
Open http://localhost:6006
in your browser to see the Storybook.
Open Framer, create a code file and paste the following:
import { Text } from 'http://127.0.0.1:8000/components/Text/Text.framer.js';
export default Text as React.ComponentType;
Code Conventions
Avoid using export default
in every component file
// as-is
export default function Button() {
return <button>Button</button>;
}
// to-be
export function Button() {
return <button>Button</button>;
}
Avoid using React.FC
type
// as-is
export const Button: React.FC = () => {
return <button>Button</button>;
};
// to-be
export function Button() {
return <button>Button</button>;
}
Avoid using React.
prefix
// as-is
export function Button() {
const [count, setCount] = React.useState(0);
}
// to-be
export function Button() {
const [count, setCount] = useState(0);
}
you must create Component.framer.ts
file for every component file. This file will be used to define property controls for the component in Framer.
- we recommend to use
applyFramerProperties
function incommon/framer
folder. This function checks type more strictly thanaddPropertyControls
function.
import { ControlType } from "framer"
import { applyFramerProperties } from '../../common/framer'
import { themeProperty } from '../../common/property'
import { Button } from "./Button"
applyFramerProperties(Button, {
title: {
title: "Title",
type: ControlType.String,
defaultValue: "Title",
},
...
})
Please write comment for every prop in every component file.
type Props = {
/**
* 테마
*/
theme: Theme;
/**
* 타이틀
*/
title: string;
...
}
Please write name and @author
in every component function.
/**
* Button
*
* @author Rookies
*/
export function Button() {
return <button>Button</button>;
}
Generating template
You can use yarn template
command to easily generate component template files(index.ts
, Component.stories.ts
, Component.framer.tsx
, Component.tsx
) at once.
If you run yarn template
command, a prompt asking "What is your component name?" will be printed. Give your component name, and template files will be generated.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago